muayjtp/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added page section

Browse source
This commit is contained in:
JSriwongsa 2023-06-30 18:48:28 -05:00
parent 2cf85685bd
commit c035304c72
3 changed files with 874 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

580
ecommerce/fashion_website/pages/page.css Normal file
View 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
View 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
View 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');
}
}))