diff --git a/assets/img/inset-icon.svg b/assets/img/inset-icon.svg new file mode 100644 index 00000000..097aabf0 --- /dev/null +++ b/assets/img/inset-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/style.css b/css/style.css index e69de29b..c5c7c49a 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,91 @@ +body { + margin: 0; + font-family: Roboto; + color: white; +} +.container { + display: grid; + grid-template-rows: 9fr 1fr; + height: 100vh; +} +.main-div { + display: grid; + grid-template-columns: 1fr 6fr; +} +.side-bar { + display: grid; + grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr 7fr 1fr; + background: rgb(17, 17, 17); + padding: 10px; +} +.aside-bar { + padding-top: 5px; +} +.aside-bar img { + padding-right: 5px; +} +a { + text-decoration: none; + color: rgb(114, 108, 108); + font-size: 12px; +} +span { + font-size: 14px; + font-weight: 100; +} +.side-down { + border-bottom: 1px solid rgb(114, 108, 108); +} +.profile-icon img { + padding-top: 10px; + padding-right: 5px; +} +.side-icon { + width: 60px; +} +.center-area { + display: grid; + grid-template-rows: 1fr 1fr 8fr; + background: rgb(30, 27, 41); + border: 1px solid green; +} +header { + display: grid; + grid-column: 1/2; + background: rgb(22, 20, 34); + grid-template-columns: 6fr 1fr; + justify-content: center; + align-content: center; + padding: 10px; +} +.header-btn { + grid-column: 2/3; + width: 180px; +} +.btn { + border-radius: 15px; + border: 1px solid gray; + padding: 5px 10px; + background-color: rgb(22, 20, 34); + color: white; +} +nav { + display: grid; + grid-template-columns: 1fr 4fr 1fr; +} +.nav-bar { + display: grid; + grid-column: 2/3; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; + align-items: center; + justify-items: center; +} +li { + list-style: none; +} +article { + background: rgb(30, 27, 41); +} +footer { + background: rgb(53, 52, 52); +} \ No newline at end of file diff --git a/index.html b/index.html index 56efbdba..6c09fe09 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,79 @@ +
-