From 77e602c1f8d56ebaef1430b59bef6f8c0dd8eaa2 Mon Sep 17 00:00:00 2001 From: Manna Kong Date: Wed, 30 Jun 2021 19:23:18 -0500 Subject: [PATCH] styling of homepage --- public/stylesheets/index.css | 26 +++++++++++++++++++------- views/index.pug | 6 +++--- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/public/stylesheets/index.css b/public/stylesheets/index.css index 9ae79bc..f256613 100644 --- a/public/stylesheets/index.css +++ b/public/stylesheets/index.css @@ -1,9 +1,10 @@ h1 { - color: #555555; + color: #0f211a; text-align: center; padding: 20px; bottom: 5px; font-size: 50px; + font-family: ; } /* .header { @@ -32,24 +33,27 @@ h1 { border-radius: 6px; color: white; background-color: lightblue; - border: solid 1px transparent; + border: solid 1px lightblue; width: 100px; height: 30px; - font-size: 15px; + font-size: 18px; } .search-bar { border-radius: 30px; - width: 150px; + width: 300px; height: 30px; font-size: 15px; text-align: center; position: relative; top: 10px; + background-color: #eee; + border: solid 1px rgb(143, 143, 143); } header > div { background-color: rgb(187, 199, 187); + /* background-color: #4f7d58; */ } @@ -67,11 +71,12 @@ header > div { } .sidebar { - background-color: #6C547B; + /* background-color: #86788f; */ + background-color: #d6d8d9; border-radius: 3px; margin: 0 32px 32px 0; padding: 0 20px 32px 20px; - max-height: 130px; + height: 60%; max-width: 180px; width: 20%; flex-basis: 220px; @@ -83,7 +88,7 @@ header > div { border-radius: 3px; margin: 0 32px 32px 0; padding: 0 20px 32px 20px; - max-height: 130px; + max-height: 80%; max-width: 180px; width: 20%; flex-basis: 220px; @@ -137,3 +142,10 @@ img { margin: 2px; padding: 2px; } + +.mixtrail-logo { + width: 50px; + height: 50px; + border-radius: 25px; + padding: 10px; +} diff --git a/views/index.pug b/views/index.pug index 0b9cc6f..0e3d07e 100644 --- a/views/index.pug +++ b/views/index.pug @@ -8,8 +8,8 @@ block content header div nav(id="nav" class="nav-bar") - h1 - h1 + div + img(src="1889970.png" class="mixtrail-logo") div(class="nav-div") input(type="text" id="search-bar" class="search-bar" placeholder="Find your next trail!") form(action="/" method="post" id="demo" class="demo") @@ -21,7 +21,7 @@ block content div(class="sidebar") div(class="sidebar-content") p= Hello - a(href='/login') Login + a(href='/login') Trail List div(class="trail-container") each trail in trails div(class="trail-div")