Skip to content

Commit

Permalink
search section added
Browse files Browse the repository at this point in the history
  • Loading branch information
@deshapriyakhatua
deshapriyakhatua committed Nov 26, 2023
1 parent 936fffc commit 1b01874
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 17 deletions.
106 changes: 96 additions & 10 deletions assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
/*========== width & height ==========*/
--main-navbar-width: 1120px;
}
@media screen and (min-width: 1024px) {
:root {
Expand Down Expand Up @@ -54,10 +56,7 @@ a {
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
max-width: 1120px;
margin-inline: 1.5rem;
}


/*=============== HEADER ===============*/
.header {
Expand All @@ -73,6 +72,8 @@ a {
/*=============== NAV ===============*/
.nav {
height: var(--header-height);
max-width: var(--main-navbar-width);
margin-inline: 1.5rem;
display: flex;
flex-direction: row;
justify-content: space-between;
Expand Down Expand Up @@ -220,7 +221,8 @@ a {
transform: rotate(180deg);
}

/* ========= navbar profile ========= */
/* ============ navbar profile =============*/

#navbar_profile{
height: 100%;
display: flex;
Expand All @@ -232,6 +234,10 @@ a {

#navbar_profile > .navbar_profile_child{
height: 100%;
}

#navbar_profile > .navbar_profile_child > .navbar_profile_child_title {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -240,16 +246,16 @@ a {
cursor: pointer;
}

#navbar_profile .navbar_profile_icons{
#navbar_profile > .navbar_profile_child > .navbar_profile_child_title > .navbar_profile_icons{
font-size: 24px;
}

#navbar_profile .navbar_profile_name{
#navbar_profile > .navbar_profile_child > .navbar_profile_child_title > .navbar_profile_name{
font-size: 12px;
font-weight: bold;
}

/* Account Dropdown Menu */
/* === Account Dropdown Menu === */

#navbar_profile_account{
position: relative;
Expand Down Expand Up @@ -296,6 +302,85 @@ a {
font-weight: bold;
}

/* === navbar search dropdown === */

#navbar_profile_search > #navbar_search_dropdown{
position: absolute;
width: var(--main-navbar-width);
width: 100%;
padding: 1rem;
top: 110%;
left: 50%;
transform: translate(-50%, 0);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 1rem;
color: #696e79;
box-shadow: 0 6px 8px hsla(220, 68%, 12%, 0.05);
background-color: white;
visibility: hidden;
opacity: 0;
transition: all .5s;
}

#navbar_profile_search:hover #navbar_search_dropdown{
visibility: visible;
opacity: 1;
top: 95%;
}
#search_bar_input_container {
width: 100%;
background-color: #f5f5f6;
position: relative;
}

#search_bar_input_container > #search_bar_input{
display: inline-block;
width: 100%;
height: 45px;
line-height: 24px;
padding: 1rem;
padding-right: 3rem;
border: none;
font-size: var(--normal-font-size);
color: var(--text-color);
background-color: inherit;
letter-spacing: 0.5px;
}

#search_bar_input_container > #search_bar_input:focus{
outline: 0;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
}

#navbar_search_dropdown_icon{
position: absolute;
font-size: 1.6rem;
color: #000;
right: .55rem;
top: .6rem;
cursor: pointer;
}

#search_suggetion {
padding-left: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: .2rem;
}

.nav_search_suggessions {
cursor: pointer;
}
.nav_search_suggessions:hover {
color: #000;
}

/*=============== responsive ===============*/

@media screen and (max-width: 375px) {
Expand All @@ -319,8 +404,6 @@ a {
/* Nav */
.nav {
height: calc(var(--header-height) + 2rem);
}
.container {
margin-inline: auto;
}
.nav__toggle {
Expand Down Expand Up @@ -417,6 +500,9 @@ a {
pointer-events: initial;
cursor: initial;
}
#navbar_profile_search > #navbar_search_dropdown {
width: var(--main-navbar-width);
}
#navbar_profile_account > #navbar_account_dropdown {
display: flex;
}
Expand Down
35 changes: 28 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,25 +248,46 @@
</div>

<section id="navbar_profile">
<div id="navbar_profile_search" class="navbar_profile_child">
<div class="navbar_profile_child_title">
<span class="material-symbols-rounded navbar_profile_icons"> search </span>
<span class="navbar_profile_name">Search</span>
</div>
<div id="navbar_search_dropdown">
<div id="search_bar_input_container">
<input type="text" id="search_bar_input" placeholder="Search for products, brands and more">
<span id="navbar_search_dropdown_icon" class="material-symbols-rounded "> search </span>
</div>
<div id="search_suggetion">
<span class="nav_search_suggessions">jeans</span>
<span class="nav_search_suggessions">suits</span>
</div>
</div>
</div>
<div id="navbar_profile_account" class="navbar_profile_child">
<div class="navbar_profile_child_title">
<span class="material-symbols-rounded navbar_profile_icons"> person </span>
<span class="navbar_profile_name">Profile</span>
</div>
<div id="navbar_account_dropdown">
<a href="/Profile/profile.html" id="navbar_account_dropdown_login" class="dropList">LOGIN/SIGNUP</a>
<a href="/Profile/signup.html" class="dropList">Gift Cards</a>
<a href="#" class="dropList">Coupons</a>
<a href="#" class="dropList">Saved Address</a>
<a href="#" class="dropList">Saved Cards</a>
</div>

<span class="material-symbols-rounded navbar_profile_icons"> person </span>
<span class="navbar_profile_name">Profile</span>
</div>
<div class="navbar_profile_child">
<span class="material-symbols-rounded navbar_profile_icons"> favorite </span>
<span class="navbar_profile_name">Wishlist</span>
<div class="navbar_profile_child_title">
<span class="material-symbols-rounded navbar_profile_icons"> favorite </span>
<span class="navbar_profile_name">Wishlist</span>
</div>
</div>
<div class="navbar_profile_child">
<span class="material-symbols-rounded navbar_profile_icons"> shopping_bag </span>
<span class="navbar_profile_name">Cart</span>
<div class="navbar_profile_child_title">
<span class="material-symbols-rounded navbar_profile_icons"> shopping_bag </span>
<span class="navbar_profile_name">Cart</span>
</div>
</div>
</section>
</nav>
Expand Down

0 comments on commit 1b01874

Please sign in to comment.