added page section
This commit is contained in:
parent
2cf85685bd
commit
c035304c72
3 changed files with 874 additions and 0 deletions
580
ecommerce/fashion_website/pages/page.css
Normal file
580
ecommerce/fashion_website/pages/page.css
Normal file
|
@ -0,0 +1,580 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600&family=Nunito:wght@200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,300;0,400;0,500;0,700;1,600&display=swap');
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
}
|
||||
*,::before,::after{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:root{
|
||||
--main-color:#b9936c;
|
||||
--based-color:#c4b7a6;
|
||||
--light-color:#bab7ac;
|
||||
--white-color:white;
|
||||
--dark-color:black;
|
||||
|
||||
--transition-color: color 0.3s;
|
||||
--transition-background: background-color 0.3s;
|
||||
--trabsition-border: border 0.3s;
|
||||
--trabsition-transform: transform 0.3s;
|
||||
|
||||
--shadow: 0px 10px 20px 0px rgb(0 0 0 /20%);
|
||||
--fade: fade-bottom 0.3s cubic-bezier(0.3, 0.5, 0.5, 1) both;
|
||||
}
|
||||
html{
|
||||
scroll-behavior: smooth;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
body{
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.8;
|
||||
color: var(--dark-color);
|
||||
background-color: var(--white-color);
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
img{
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
}
|
||||
p{
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
input, textarea, select{
|
||||
font: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
input[type=checkbox], input[type=radio]{
|
||||
width: auto;
|
||||
}
|
||||
input::placeholder, textarea::placeholder{
|
||||
color: inherit;
|
||||
}
|
||||
button{
|
||||
font: inherit;
|
||||
}
|
||||
strong{
|
||||
font-weight: 500;
|
||||
}
|
||||
h1, h2, h3, h4{
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
h1{
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
h2{
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
h3{
|
||||
font-size: 2rem;
|
||||
}
|
||||
h4{
|
||||
font-size: 1rem;
|
||||
}
|
||||
.container{
|
||||
max-width: var(--mx-width, 1200px);
|
||||
padding: 0 var(--gutter, 15px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
.item-floating{
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
top: -8px;
|
||||
right: 0;
|
||||
background-color: var(--based-color);
|
||||
color: var(--white-color);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.item-floating, .header-center .branding{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.list-block a{
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
color: var(--dark-color);
|
||||
padding: 5px 0;
|
||||
display: inline-block;
|
||||
transition: var(--transition-color);
|
||||
}
|
||||
.list-block a:hover{
|
||||
color: var(--based-color);
|
||||
}
|
||||
nav.menu .sub-menu li{
|
||||
padding: 5px 30px;
|
||||
}
|
||||
.inner-header{
|
||||
line-height: 90px;
|
||||
}
|
||||
.inner-header :where(.wrap, .menu > ul), .list-inline > ul{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header-left, .header-right{
|
||||
flex-grow: 1;
|
||||
}
|
||||
.header-center nav{
|
||||
display: none;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 180px;
|
||||
max-width: 720px;
|
||||
}
|
||||
.header-center .branding{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.header-center .branding a{
|
||||
font-size: 30px;
|
||||
line-height: inherit;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.header-center .menu > ul > li > a{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.header-right ul{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.list-inline a, .menu-trigger, .close-trigger{
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
padding: 0 10px;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
transition: var(--transition-color);
|
||||
}
|
||||
.list-inline a:hover{
|
||||
color: var(--based-color);
|
||||
}
|
||||
.header-left .list-inline{
|
||||
display: none;
|
||||
}
|
||||
:where(.header-left, .header-right) li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 90px;
|
||||
}
|
||||
@keyframes fade-bottom{
|
||||
0%{
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
100%{
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/*---------- header ----------*/
|
||||
.dotgrid .wrapper{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
.dotgrid .dot-image{
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dotgrid .dot-image > a, .dotgrid .thumbnail.hover, .dotgrid .actions, .dotgrid .dot-image .label{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.dotgrid .dot-image > a{
|
||||
z-index: 1;
|
||||
}
|
||||
.dotgrid .thumbnail.hover{
|
||||
opacity: 0;
|
||||
transition: opacity 0.7s ease, transform 1.1s cubic-bezier(0.15, 0.75, 0.5, 1) 0s;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.dotgrid .dot-image:hover .thumbnail.hover{
|
||||
opacity: 1;
|
||||
transform: scale3d(1.1, 1.1, 1.1) translateZ(0);
|
||||
}
|
||||
.dotgrid .actions{
|
||||
z-index: 2;
|
||||
top: auto;
|
||||
bottom: 20px;
|
||||
transform: translate3d(0, 0.1, 0);
|
||||
opacity: 0;
|
||||
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
.dot-image:hover .actions{
|
||||
opacity: 1;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.dotgrid .actions ul{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.dotgrid .actions ul li a{
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-color: var(--white-color);
|
||||
border-radius: 50%;
|
||||
transition: var(--transition-background), var(--transition-color);
|
||||
}
|
||||
.dotgrid .actions ul li a:hover{
|
||||
background-color: var(--main-color);
|
||||
color: var(--white-color);
|
||||
}
|
||||
.dotgrid .dot-image .label{
|
||||
top: auto;
|
||||
bottom: 20px;
|
||||
}
|
||||
.dotgrid .dot-image .label span{
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
background: var(--main-color);
|
||||
color: var(--white-color);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2px 5px;
|
||||
line-height: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.list-block ul li a{
|
||||
color: var(--main-color);
|
||||
}
|
||||
.list-block ul li a:hover{
|
||||
color: var(--dark-color);
|
||||
}
|
||||
.dot-title{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 30px;
|
||||
}
|
||||
.dot-title a{
|
||||
transition: var(--transition-color);
|
||||
}
|
||||
.dot-title a:hover{
|
||||
color: var(--based-color);
|
||||
}
|
||||
.dotgrid .product-price .before{
|
||||
color: var(--light-color);
|
||||
text-decoration: line-through;
|
||||
margin-right: 10px;
|
||||
}
|
||||
/*---------- search ----------*/
|
||||
.inner-header .search-float{
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
position: fixed;
|
||||
height: 80px;
|
||||
background-color: var(--white-color);
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
}
|
||||
form.search{
|
||||
position: relative;
|
||||
}
|
||||
form.search :where(i){
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
form.search .input{
|
||||
outline: 0;
|
||||
padding: 15px 50px;
|
||||
}
|
||||
form.search i{
|
||||
display: flex;
|
||||
font-size: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
form.search :where(i:last-child){
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.inner-header .search .input{
|
||||
display: flex;
|
||||
height: 80px;
|
||||
font-size: 16px;
|
||||
border: 0;
|
||||
}
|
||||
.search-float.active{
|
||||
display: block;
|
||||
}
|
||||
.overlay, .mobile-menu{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.overlay{
|
||||
background-color: var(--dark-color);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 999;
|
||||
transition: opacity 0.3s, visibility 0.3s;
|
||||
}
|
||||
.overlay.active{
|
||||
opacity: 0.5;
|
||||
visibility: visible;
|
||||
pointer-events: all;
|
||||
}
|
||||
/*---------- mobile navbar ----------*/
|
||||
.mobile-menu{
|
||||
pointer-events: none;
|
||||
z-index: 1001;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.mobile-menu.active{
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.mobile-menu .wrap{
|
||||
position: relative;
|
||||
max-width: calc(100% - 40px);
|
||||
width: 360px;
|
||||
height: 100%;
|
||||
background-color: var(--white-color);
|
||||
pointer-events: auto;
|
||||
transition: var(--trabsition-transform);
|
||||
}
|
||||
.mobile-menu.active .wrap{
|
||||
transform: translateX(0);
|
||||
}
|
||||
.mobile-menu .close-trigger, .mobile-menu .child-trigger{
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: var(--dark-color);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
.mobile-menu .main-menu{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
flex-direction: column;
|
||||
}
|
||||
.mobile-menu nav>ul{
|
||||
padding: 20px 0;
|
||||
}
|
||||
.mobile-menu nav>ul>li>a{
|
||||
position: relative;
|
||||
padding: 12px 0;
|
||||
font-weight: 600;
|
||||
transition: var(--transition-color);
|
||||
}
|
||||
.mobile-menu nav li :where(li, a){
|
||||
display: block;
|
||||
}
|
||||
.mobile-menu nav>ul>li>a:hover{
|
||||
color: var(--main-color);
|
||||
}
|
||||
.mobile-menu .child-trigger{
|
||||
color: var(--dark-color);
|
||||
font-size: 20px;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.mobile-menu .child-trigger:hover{
|
||||
color: var(--based-color);
|
||||
}
|
||||
.mobile-menu .close-trigger:hover{
|
||||
color: var(--main-color);
|
||||
}
|
||||
.mobile-menu nav .sub-menu{
|
||||
padding-left: 15px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
.mobile-menu nav li.active .sub-menu{
|
||||
max-height: 1000px;
|
||||
visibility: visible;
|
||||
}
|
||||
.mobile-menu .main-menu .sub-menu li a{
|
||||
color: var(--based-color);
|
||||
}
|
||||
.mobile-menu .main-menu .sub-menu li a:hover{
|
||||
color: var(--dark-color);
|
||||
}
|
||||
.button > [class*=-btn]{
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 0 32px;
|
||||
display: inline-block;
|
||||
line-height: 40px;
|
||||
border-width: 1px;
|
||||
border-radius: 50px;
|
||||
border-style: solid;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
.secondary-btn, .primary-btn{
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
.primary-btn:hover{
|
||||
background: var(--main-color);
|
||||
color: var(--white-color);
|
||||
}
|
||||
.secondary-btn{
|
||||
background: var(--main-color);
|
||||
color: var(--white-color);
|
||||
}
|
||||
.secondary-btn:hover{
|
||||
background: transparent;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
.mobile-menu .button{
|
||||
margin-top: auto;
|
||||
padding: 20px 0 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.mobile-menu .button a{
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
/*--------- product (page-single) ----------*/
|
||||
.breadcrumb{
|
||||
width: 100%;
|
||||
line-height: initial;
|
||||
padding: 30px 0 50px;
|
||||
}
|
||||
.breadcrumb ul{
|
||||
justify-content: center;
|
||||
}
|
||||
.breadcrumb ul li{
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.breadcrumb ul li:not(:first-child){
|
||||
padding-left: 25px;
|
||||
}
|
||||
.breadcrumb ul li:not(:first-child)::before{
|
||||
content: '>';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
.breadcrumb ul :where(li, li a){
|
||||
font-size: 15px;
|
||||
padding: 0;
|
||||
}
|
||||
.breadcrumb ul li:last-child{
|
||||
color: gray;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media(min-width: 992px){
|
||||
.menu-trigger{
|
||||
display: none;
|
||||
}
|
||||
.header-center nav{
|
||||
display: grid;
|
||||
}
|
||||
.header-left .list-inline{
|
||||
display: block;
|
||||
}
|
||||
.mega-content{
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 60px;
|
||||
}
|
||||
.mega-content .links{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
nav.menu .sub-mega{
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 50px 0;
|
||||
}
|
||||
nav.menu :where(.sub-menu, .sub-mega){
|
||||
position: absolute;
|
||||
top: auto;
|
||||
line-height: initial;
|
||||
background-color: var(--white-color);
|
||||
box-shadow: var(--shadow);
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
animation: var(--fade);
|
||||
}
|
||||
nav.menu li:hover :where(.sub-menu, .sub-mega){
|
||||
display: block;
|
||||
}
|
||||
nav.menu .sub-menu{
|
||||
padding: 10px 0;
|
||||
}
|
||||
nav.menu .sub-menu li{
|
||||
padding: 5px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1200px){
|
||||
.container.wide{
|
||||
--mx-width:1720px;
|
||||
--gutter: 40px
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px){
|
||||
.mega-content{
|
||||
grid-template-columns: 1fr 1fr ;
|
||||
}
|
||||
}
|
||||
|
264
ecommerce/fashion_website/pages/page.html
Normal file
264
ecommerce/fashion_website/pages/page.html
Normal file
|
@ -0,0 +1,264 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>A.Z Shop products</title>
|
||||
<link rel="stylesheet" href="page.css">
|
||||
<link rel="shortcut icon" href="images/icon.png">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page" class="page-single">
|
||||
<header>
|
||||
<div class="inner-header">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="header-left">
|
||||
<div class="menu-bar">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href=""><span class="item-floating">4</span><i class='bx bx-heart'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href=""><span>Home</span></a></li>
|
||||
<li><a href=""><span>Products</span><i class='bx bx-chevron-down'></i></a>
|
||||
<ul class="sub-mega">
|
||||
<li>
|
||||
<div class="container">
|
||||
<div class="wrapper">
|
||||
<div class="mega-content">
|
||||
<div class="dotgrid">
|
||||
<div class="wrapper">
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top1.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top1-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>20% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Castleton Green Halterneck Top</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$279.00</span>
|
||||
<span class="current">$223.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top3.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top3-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>25% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Scoop-neck T-shirt</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$99.00</span>
|
||||
<span class="current">$74.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top2.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top2-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>25% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Crayola Lemon Thong Bodysuit</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$125.00</span>
|
||||
<span class="current">$93.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links">
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">CLOTHING</h3>
|
||||
<ul>
|
||||
<li><a href="">Tops</a></li>
|
||||
<li><a href="">Bottoms</a></li>
|
||||
<li><a href="">Dresses</a></li>
|
||||
<li><a href="">Beachwear</a></li>
|
||||
<li><a href="">Sportswear</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">SHOES</h3>
|
||||
<ul>
|
||||
<li><a href="">Boots</a></li>
|
||||
<li><a href="">Flats</a></li>
|
||||
<li><a href="">Heigh Heels</a></li>
|
||||
<li><a href="">Flip Flops</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">ACCESSORIES</h3>
|
||||
<ul>
|
||||
<li><a href="">Bags</a></li>
|
||||
<li><a href="">Belts</a></li>
|
||||
<li><a href="">Sunglasses</a></li>
|
||||
<li><a href="">Jewelries</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href=""><span>Shop</span></a></li>
|
||||
<li><a href=""><span>Blog</span><i class='bx bx-chevron-down'></i></a>
|
||||
<ul class="sub-menu list-block">
|
||||
<li><a href="">Latest</a></li>
|
||||
<li><a href="">Jumper</a></li>
|
||||
<li><a href="">A Must Read</a></li>
|
||||
<li><a href="">Go Viral</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="branding"><a href="">A.Z Shop</a></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href="#0" trigger-button data-target="search-float"><i class='bx bx-search' ></i></a></li>
|
||||
<li><a href=""><span class="item-floating">0</span><i class='bx bx-shopping-bag' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="breadcrumb list-inline">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Products</a></li>
|
||||
<li><a href="">Tops</a></li>
|
||||
<li><span>Castleton Green Halterneck Top</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="search-float" class="search-float">
|
||||
<div class="container wide">
|
||||
<form action="" class="search">
|
||||
<i class='bx bx-search'></i>
|
||||
<input type="search" class="input" placeholder="Search products">
|
||||
<i class='bx bx-x' close-button></i>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
|
||||
</main>
|
||||
<footer></footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<div id="mobile-menu" class="mobile-menu">
|
||||
<div class="wrap">
|
||||
<a href="" class="close-trigger" close-button>
|
||||
<i class='bx bx-x-circle' ></i>
|
||||
</a>
|
||||
<div class="main-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href=""><span>Home</span></a></li>
|
||||
<li class="has-child"><a href=""><span>Clothing</span><span class="child-trigger"><i class='bx bx-chevron-down'></i></span></a>
|
||||
<ul class="sub-menu list-block">
|
||||
<li><a href="#">Tops</a></li>
|
||||
<li><a href="#">Bottoms</a></li>
|
||||
<li><a href="#">Dresses</a></li>
|
||||
<li><a href="#">Beachwear</a></li>
|
||||
<li><a href="#">Sportswear</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="has-child"><a href=""><span>Shoes</span><span class="child-trigger"><i class='bx bx-chevron-down'></i></span></a>
|
||||
<ul class="sub-menu list-block">
|
||||
<li><a href="#">Boots</a></li>
|
||||
<li><a href="#">Flats</a></li>
|
||||
<li><a href="#">High Heels</a></li>
|
||||
<li><a href="#">Flip Flops</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="has-child"><a href=""><span>Accessories</span><span class="child-trigger"><i class='bx bx-chevron-down'></i></span></a>
|
||||
<ul class="sub-menu list-block">
|
||||
<li><a href="#">Bags</a></li>
|
||||
<li><a href="#">Belts</a></li>
|
||||
<li><a href="#">Sunglasses</a></li>
|
||||
<li><a href="#">Jewelries</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href=""><span>Blog</span></a></li>
|
||||
<li><a href=""><span>Offers</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="button">
|
||||
<a href="" class="secondary-btn">Login</a>
|
||||
<a href="" class="primary-btn">Sign Up</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="page.js"></script>
|
||||
</body>
|
||||
</html>
|
30
ecommerce/fashion_website/pages/page.js
Normal file
30
ecommerce/fashion_website/pages/page.js
Normal file
|
@ -0,0 +1,30 @@
|
|||
const openBtn = document.querySelectorAll('[trigger-button]');
|
||||
const closeBtn = document.querySelectorAll('[close-button]');
|
||||
const overlay = document.querySelector('[data-overlay]');
|
||||
|
||||
for (let x = 0; x < openBtn.length; x++){
|
||||
let currentID = openBtn[x].dataset.target,
|
||||
targetEl =document.querySelector(`#${currentID}`)
|
||||
|
||||
const openData =function(){
|
||||
targetEl.classList.remove('active');
|
||||
overlay.classList.remove('active');
|
||||
};
|
||||
openBtn[x].addEventListener('click', function(){
|
||||
targetEl.classList.add('active');
|
||||
overlay.classList.add('active');
|
||||
});
|
||||
targetEl.querySelector('[close-button]').addEventListener('click',openData);
|
||||
overlay.addEventListener('click', openData);
|
||||
}
|
||||
|
||||
|
||||
const subMenu = document.querySelectorAll('.child-trigger');
|
||||
subMenu.forEach((menu) => menu.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
subMenu.forEach((item) => item != this ? item.closest('.has-child').classList.remove('active') : null);
|
||||
|
||||
if(this.closest('.has-child').classList != 'active'){
|
||||
this.closest('.has-child').classList.toggle('active');
|
||||
}
|
||||
}))
|
Loading…
Add table
Reference in a new issue