make header closer to mockup

This commit is contained in:
Aadil Ayub 2022-01-06 14:10:05 +05:00
parent 2a814a3154
commit 439a98bbea
2 changed files with 14 additions and 4 deletions

View File

@ -38,7 +38,7 @@
</nav> </nav>
<div> <div>
<div class="search"> <div class="search">
<img src="{{ .Site.Params.baseURL }}/img/search.svg" alt=""> <img src="{{ .Site.Params.baseURL }}/img/search.svg" alt="search">
<input type="search" name="" id=""> <input type="search" name="" id="">
</div> </div>
<a href="#" id="login">login</a> <a href="#" id="login">login</a>

View File

@ -137,22 +137,32 @@ a {
#top-menu { #top-menu {
padding: 1rem; padding: 1rem;
display: flex; display: grid;
grid-template-columns: 400px 1fr auto;
align-items: flex-start; align-items: flex-start;
justify-content: space-between;
} }
.home-link { text-decoration: none; } .home-link { text-decoration: none; }
.logo { .logo {
width: 200px; width: 300px;
margin-top: 2rem; margin-top: 2rem;
} }
#top-menu ul {
margin-left: 3rem;
}
#top-menu a { #top-menu a {
text-decoration: none; text-decoration: none;
color: #333; color: #333;
padding: 5px; padding: 5px;
margin: 0 2rem;
}
#top-menu #login {
font-weight: bold;
} }
#top-menu div { #top-menu div {