<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-COMMERCE</title>
<!--favicon-->
<link rel="shortcut icon" href="[Link]" type="image/x-svg+xml">
<!--google font link-->
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link rel="stylesheet"
href="[Link]
0&family=Roboto:wghtQ400;500;700&display=swap">
</head>
<body>
<!-- header -->
<header class="header active" data-="header">
<div class="container">
<div class="overlay active" data-overlay></div>
<a href="#" class="logo">
<img src="[Link]" style="width: 2px;height: 1px;" alt="E-
commerce logo" >
<!-- <img src="[Link]" alt="E-commerce logo"> -->
</a>
<button class="nav_open_btn" data-nav-open-btn aria-label="Open
Menu">
<ion-icon id="icon" name="menu-outline"></ion-icon>
</button>
<nav class="nav_bar active" data-nav-bar >
<button id="nav_button" class="nav_close_btn" data-nav-close-
btn aria-label="Close Menu">
<ion-icon class="id" name="close-outline"></ion-icon>
</button>
<a href="#" class="logo">
<img src="[Link]" style="width: 40px;height: 32px;"
alt="E-commerce logo" >
</a>
<ul class="nav_bar_list">
<li class="nav_bar_list">
<a href="#" class="nav_bar_link">Home</a>
</li>
<li class="nav_bar_list">
<a href="#" class="nav_bar_link">About</a>
</li>
<li class="nav_bar_list">
<a href="#" class="nav_bar_link">Products</a>
</li>
<li class="nav_bar_list">
<a href="#" class="nav_bar_link">Shop</a>
</li>
<li class="nav_bar_list">
<a href="#" class="nav_bar_link">Blog</a>
</li>
<li class="nav_bar_items">
<a href="#" class="nav_bar_link">Contact</a>
</li>
<ul class="nav_action_list">
<li>
<button class="nav_action_btn">
<ion-icon class="ionicon" name="search-outline"
aria-hidden="true"></ion-icon>
<span class="nav_action_text">Search</span>
</button>
</li>
<li>
<a href="#" class="nav_action_btn">
<ion-icon class="ionicon" name="person-outline"
aria-hidden="true"></ion-icon>
<span class="nav_action_text">Login /
Register</span>
</a>
</li>
<li>
<button class="nav_action_btn">
<ion-icon class="ionicon" name="heart-outline"
aria-hidden="true"></ion-icon>
<span class="nav_action_text">Wishlist</span>
<data value="5" class="nav_action_badge" aria-
hidden="true">5</data>
</button>
</li>
<li>
<button class="nav_action_btn">
<ion-icon class="ionicon" name="bag-outline" aria-
hidden="true"></ion-icon>
<data value="318.00"
class="nav_action_text">Basket: <strong>$318.00</strong></data>
<data value="4" class="nav_action_badge" aria-
hidden="true">4</data>
</button>
</li>
<li>
<button class="nav_action_btn">
<ion-icon class="ionicon" name="search-outline"
aria-hidden="true"></ion-icon>
<span class="nav_action_text">Search</span>
</button>
</li>
</ul>
</ul>
</nav>
</div>
</header>
<style>
:root{
/* colors */
--maximum-blue-green_10:hsla(185, 75%, 45%, 0.1);
--rich-black-fogra_29:hsla(217, 28%, 9%);
--gray-x-11-gray:hsla(0, 0%, 74%);
--oxford-blue_60:hsla(230, 41%, 14%, 0.6);
--bittersweet:hsl(5, 100%, 69%);
--smoky-black:rgb(7, 6, 1);
--gainsboro:hsl(0, 0%, 88%);
--black_90:hsla(0, 0%, 0%, 0.9);
--cultured:hsl(200, 12%, 95%);
--salmon:hsl(5, 100%, 73%);
--white:hsl(0, 0%, 100%);
--black:hsl(0, 0%,0%);
--onyx:hsl(0, 0%, 27%);
/* typography */
--ff-roboto: 'Roboto', sans-serif;
--ff-josefin-sans: 'Josefin Sans', sans-serif;
--fs-1: 3rem;
--fs-2: 2.6rem;
--fs-3: 2.2rem;
--fs-4: 2rem;
--fs-5: 1.8rem;
--fs-6: 1.6rem;
--fs-7: 1.4rem;
--fs-8: 1.2rem;
--fw-300: 300;
--fw-500: 500;
--fw-600: 600;
--fw-700: 700;
/* transition */
--transition-1: 0.25s ease;
--transition-2: 0.5s ease;
--cubic-out: cubic-bezier(0.51, 0.03, 0.64, 0.28);
--cubic-in: cubic-bezier(0.33, 0.85, 0.56, 1.02)
/* spacing */
--section-padding: 60px;
*,
*::before,
*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
a,
img,
span,
table,
tbody,
button,
ion-icon{
display: block;
}
button,
input{
font: inherit;
background: none;
border: none;
}
input{
width: 100%;
}
button{
cursor: pointer;
}
address{
font-style: normal;
line-height: 1.0;
}
html{
font-family: var(--ff-josefin-sans);
font-size: 10px;
scroll-behavior: smooth;
}
body{
background: var(--white);
font-size: 1.6rem;
padding-block-start: 90px;
height: 300vh;
}
::-webkit-scrollbar{
width: 10px;
}
::-webkit-scrollbar-track{
background: hsl(0, 0%, 95%);
}
::-webkit-scrollbar-thumb{
background: hsl(0, 0%, 80%);
}
::-webkit-scrollbar-thumb:hover{
background: hsl(0, 0%, 70%);
}
/* Reused style */
.container{
padding-inline: 15px;
}
/* header styling */
.overlay{
display: none;
}
.header{
background: var(--white);
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: var(--transition-1);
z-index: 4;
}
.header .active{
box-shadow: 0 4px 20px hsla(0, 0%, 0%, 0.1);
}
.header .container{
display: flex;
justify-content: space-between;
align-items: center;
padding-block: 20px;
}
.nav_open_btn{
font-size: 30px;
background: var(--bittersweet);
color: var(--white);
padding: 8px;
}
.nav_open_btn:is(:hover, :focus){
background: var(--salmon);
}
#icon{
--ionicon-stroke-width: 50px;
}
.nav_bar{
background: var(--white);
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: 270px;
height: 100%;
border-right: 3px solid var(--rich-black-fogra_29);
font-family: var(--ff-roboto);
overflow-y: auto;
overscroll-behavior: contain;
z-index: 2;
transition: 0.25s var(--cubic-out);
}
.nav_bar .active{
visibility: visible;
transform: translateX(280px);
transition: 0.5s var(--cubic-in);
}
.nav_close_btn{
color: var(--rich-black-fogra_29);
position: absolute;
top: 0;
right: 0;
padding: 13px;
font-size: 25px;
transition: var(--transition-1);
}
.icon{
--ionicon-stroke-width: 55px;
}
.nav_close_btn:is(:hover, :focus){
color: var(--bittersweet);
}
.nav_bar .logo{
background: var(--maximum-blue-green_10);
padding-block: 50px 40px;
}
/* .navbar .logo img{ */
/* margin-inline: auto; */
/* } */
.navbar_list,
.nav_action_list{
margin: 30px;
}
.navbar_list{
padding: 20px;
border-bottom: 1px solid var(--gainsboro);
}
#nav_bar_list{
display: none;
}
#nav_bar_list {
transition: all 0.3s ease-in-out;
transform: scale(1);
}
#nav_bar_list.show {
transform: scale(1);
}
/* img{
width: 100;
height: 50;
} */
.nav_bar_link{
color: var(--rich-black-fogra_29);
padding-block: 10px;
transition: var(--transition-1);
}
.nav_bar_link:is(:hover, :focus){
color: var(--bittersweet);
}
.nav_bar_list:not(:last-child){
border-bottom: 1px solid var(--gainsboro);
}
.nav_action_list > li:first-child{
display: none;
}
.nav_action_btn{
color: var(--rich-black-fogra_29);
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding-block: 10px;
transition: var(--transition-1);
}
.nav_action_btn:is(:hover, :focus){
color: var(--bittersweet);
}
.ion-icon{
font-size: 22px;
--ionicon-stroke-width: 25px;
}
.nav_action_text strong{
font-weight: initial;
color: var(--bittersweet);
}
.nav_action_badge{
margin-left: auto;
font-size: var(--fs-8);
background: var(--bittersweet);
color: var(--white);
width: 18px;
height: 18px;
display: grid;
place-items: center;
border-radius: 50%;
}
.overlay{
position: fixed;
inset: 0;
background: hsla(0, 0%, 0%, 0.6);
z-index: 1;
opacity: 0;
pointer-events: none;
transition: var(--transition-1);
}
.overlay .active{
opacity: 1;
pointer-events: all;
}
</style>
<!--ionicon link-->
<script type="module"
src="[Link]
<script nomodule
src="[Link]
<!---custom js link-->
<script src="[Link]" async></script>
</body>
</html>
