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

initial commit

Browse source
This commit is contained in:
JSriwongsa 2023-06-24 20:10:13 -05:00
parent afb1ca97dc
commit 7bdfa2f96f
4 changed files with 927 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

337
ecommerce/furniture_website/index.html Normal file
View file

@ -0,0 +1,337 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Furniture</title>
<link rel="shortcut icon" href="images/logo.png">
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.core.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.theme.css">
</head>
<body>
<header id="header" class="header">
<div class="top-nav">
<div class="container display-flex">
<p><i class='bx bxs-truck' ></i> &nbsp Get $59 free delivery on all oders over $159! See details</p>
</div>
</div>
<div class="navigation">
<div class="nav-container container display-flex">
<a href="" class="logo">
I<span>KEY</span>
</a>
<ul class="nav-list display-flex">
<li class="nav-item"><a href="/" class="nav-link">Home</a></li>
<li class="nav-item"><a href="/product.html" class="nav-link">Products</a></li>
<li class="nav-item"><a href="#room" class="nav-link">Rooms</a></li>
<li class="nav-item"><a href="#ideas" class="nav-link">Ideas</a></li>
<li class="nav-item"><a href="#deals" class="nav-link">Deals</a></li>
<li class="icons display-flex">
<div class="icon" id="search-box">
<input type="search" id="search-input" placeholder="What are you looking for?">
<i class='bx bx-search' ></i>
</div>
<a href="login.html" class="icon"><i class='bx bxs-user'></i></a>
<div class="icon"><i class='bx bx-heart' ></i></div>
<a href="cart.html" class="icon"><i class='bx bx-cart' ></i></a>
</li>
</ul>
<div class="icons display-flex">
<div class="icon" id="search-box">
<input type="search" id="search-input" placeholder="What are you looking for?">
<i class='bx bx-search' ></i>
</div>
<a href="login.html" class="icon"><i class='bx bxs-user'></i></a>
<div class="icon"><i class='bx bx-heart' ></i></div>
<a href="cart.html" class="icon"><i class='bx bx-cart' ></i></a>
</div>
<div class="nav-bar">
<i class="bx bx-menu"></i>
</div>
</div>
</div>
<div class="footer">
<div class="glide" id="glide_">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="center">
<div class="footer-left">
<span>New Fall Collection 2023</span>
<h1>Comfort and coziness with Bee's armchair</h1>
<p>A colorfully contemporary home workspace</p>
<a href="" class="footer-btn">Shop now</a>
</div>
<div class="footer-right">
<img src="images/collection-1.png" class="img-1">
</div>
</div>
</li>
<li class="glide__slide">
<div class="center">
<div class="footer-left">
<span>Ideas & Inspiration</span>
<h1>20% off select Hexagon Bookcase</h1>
<p>Spend less to organize and showcase your books!</p>
<a href="" class="footer-btn">Shop now</a>
</div>
<div class="footer-right">
<img src="images/collection-2.png" class="img-2">
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
<section class="section-category" id="section-category">
<div class="category-center">
<div class="category-box">
<div class="category-img">
<img src="images/category-1.jpg">
</div>
<div class="category-content">
<h3>Deal of the week: Living room accessories</h3>
<p>Don't miss this deal of the week offer on DIVA sofa. Regular price, $529.99. Sale price, $399.99!!</p>
<a href="" class="post-btn"><i class='bx bx-right-arrow-alt'></i></a>
</div>
</div>
<div class="category-box">
<div class="category-img">
<img src="images/category-2.jpg">
</div>
<div class="category-content">
<h3>Deal of the week: Furniture</h3>
<p>Hurry,one week only offer on the Raccoon bar stool. Sale price, $89.99. </p>
<a href="" class="post-btn"><i class='bx bx-right-arrow-alt'></i></a>
</div>
</div>
<div class="category-box">
<div class="category-img">
<img src="images/category-3.jpg">
</div>
<div class="category-content">
<h3>New lower prices</h3>
<p>Shop our low prices from office essentials to storage.</p>
<a href="" class="post-btn"><i class='bx bx-right-arrow-alt'></i></a>
</div>
</div>
</div>
</section>
<section class="section banner">
<div class="banner-content">
<h1>Midsummer low prices</h1>
<p>Shop online now and select from more than 9,999 convenient pickup locations!</p>
</div>
</section>
<section class="section-category-2" id="section-category-2">
<div class="category-center-2">
<div class="category-box-2">
<div class="category-img-2">
<img src="images/category2-1.jpg">
</div>
<div class="category-content-2">
<h3>Delivery now starts at $59 from $79</h3>
<p>Choose an arrival date range and have your purchases conveniently delivered to your front door for $59.</p>
<a href="" class="post-btn-2"><i class='bx bx-right-arrow-alt'></i></a>
</div>
</div>
<div class="category-box-2">
<div class="category-img-2">
<img src="images/category2-2.jpg">
</div>
<div class="category-content-2">
<h3>New living room styles</h3>
<p>By producing in high volumes with smarter designs, we can continue to offer affordable products for you.</p>
<a href="" class="post-btn-2"><i class='bx bx-right-arrow-alt'></i></a>
</div>
</div>
<div class="category-box-2">
<div class="category-img-2">
<img src="images/category2-3.jpg">
</div>
<div class="category-content-2">
<h3>Spend more-Save more</h3>
<p>If you are ready for a deal, this section is for you!</p>
<a href="" class="post-btn-2"><i class='bx bx-right-arrow-alt'></i></a>
</div>
</div>
</div>
</section>
<section class="new-topic-summer">
<div class="new-topic-text">
<h1>Best. Summer. Styles. Ever.</h1>
<p>Everything good, everything magical, happens during summer! Make the most of your outside-time this summer, and shop our products at IKEY.</p>
</div>
</section>
<section class="new-topic container" id="new-topic">
<img src="images/summer.jpg" alt="" class="new-img">
<div class="new-text">
<a href="" class="click-btn">
<i class='bx bxs-circle'></i>
</a>
</div>
<div class="new-text-2">
<a href="" class="click-btn">
<i class='bx bxs-circle'></i>
</a>
</div>
<div class="new-text-3">
<a href="" class="click-btn">
<i class='bx bxs-circle'></i>
</a>
</div>
</section>
<section class="section new-arrival">
<div class="new-arrival-title">
<h1>New Arrivals</h1>
<p>All the latest picked from our store</p>
</div>
<div class="product-center">
<div class="product-item">
<div class="overlay">
<a href="product-details.html" class="product-show">
<img src="images/furniture/new-1.png" alt="">
</a>
</div>
<div class="product-info">
<span>Sofas</span>
<a href="product-details.html"></a>
</div>
</div>
<div class="product-item">
<div class="overlay">
<a href="product-details.html" class="product-show">
<img src="images/furniture/new-2.png" alt="">
</a>
</div>
<div class="product-info">
<span>Beds & Mattresses</span>
<a href="product-details.html"></a>
</div>
</div>
<div class="product-item">
<div class="overlay">
<a href="product-details.html" class="product-show">
<img src="images/furniture/new-3.png" alt="">
</a>
</div>
<div class="product-info">
<span>Bookcases</span>
<a href="product-details.html"></a>
</div>
</div>
<div class="product-item">
<div class="overlay">
<a href="product-details.html" class="product-show">
<img src="images/furniture/new-4.png" alt="">
</a>
</div>
<div class="product-info">
<span>TV & Media Furniture</span>
<a href="product-details.html"></a>
</div>
</div>
<div class="product-item">
<div class="overlay">
<a href="product-details.html" class="product-show">
<img src="images/furniture/new-5.png" alt="">
</a>
</div>
<div class="product-info">
<span>Dressers & Wardrobes</span>
<a href="product-details.html"></a>
</div>
</div>
<div class="product-item">
<div class="overlay">
<a href="product-details.html" class="product-show">
<img src="images/furniture/new-6.png" alt="">
</a>
</div>
<div class="product-info">
<span>Tables & Desks</span>
<a href="product-details.html"></a>
</div>
</div>
<div class="product-item">
<div class="overlay">
<a href="product-details.html" class="product-show">
<img src="images/furniture/new-7.png" alt="">
</a>
</div>
<div class="product-info">
<span>Cookware</span>
<a href="product-details.html"></a>
</div>
</div>
<div class="product-item">
<div class="overlay">
<a href="product-details.html" class="product-show">
<img src="images/furniture/new-8.png" alt="">
</a>
</div>
<div class="product-info">
<span>Children & Nursery</span>
<a href="product-details.html"></a>
</div>
</div>
<div class="product-item">
<div class="overlay">
<a href="product-details.html" class="product-show">
<img src="images/furniture/new-9.png" alt="">
</a>
</div>
<div class="product-info">
<span>Home Decor</span>
<a href="product-details.html"></a>
</div>
</div>
<div class="product-item">
<div class="overlay">
<a href="product-details.html" class="product-show">
<img src="images/furniture/new-10.png" alt="">
</a>
</div>
<div class="product-info">
<span>Special offers</span>
<a href="product-details.html"></a>
</div>
</div>
</div>
</section>
<section class="section banner-2">
<div class="banner-conten-2">
<h1>Services to help you shop</h1>
<p>IKEY offers a wide range of useful services to help you purchase, transport and assemble your products.</p>
<a href="" class="banner-2-btn">View all services</a>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/glide.js"></script>
<script src="swiper.js"></script>
<script src="main.js"></script>
</body>
</html>

11
ecommerce/furniture_website/main.js Normal file
View file

@ -0,0 +1,11 @@
const navBar = document.querySelector('.nav-bar');
const navList = document.querySelector('.nav-list');
if(navBar){
navBar.addEventListener('click', () => {
navList.classList.toggle('open');
});
}

566
ecommerce/furniture_website/style.css Normal file
View file

@ -0,0 +1,566 @@
@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Permanent+Marker&family=Poppins:ital,wght@0,300;0,400;0,500;0,700;1,600&family=Vujahday+Script&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
:root{
--w:white;
--b:black;
--g:gray;
--lg:lightgray;
}
html{
font-size: 65%;
}
body{
font-size: 1.5rem;
background-color: var(--w);
color: var(--b);
font-style: normal;
font-weight: 500;
}
a{
text-decoration: none;
color: inherit;
}
li{
list-style-type: none;
}
.container{
max-width: 115rem;
margin: 0 auto;
padding: 0 3rem;
}
.display-flex{
display: flex;
align-items: center;
}
.header{
position: relative;
min-height: 100vh;
overflow-x: hidden;
}
.top-nav{
background-color: var(--b);
color: var(--w);
font-size: 1.2rem;
}
.top-nav .display-flex{
height: 4rem;
justify-content: center;
}
.top-nav a{
padding: 0 0.5rem;
}
.top-nav p{
cursor: pointer;
}
.navigation{
line-height: 6rem;
}
.nav-container .display-flex{
justify-content: space-between;
}
.logo{
font-size: 3rem;
color: gold;
font-weight: 600;
margin: 0 auto 0 0;
}
.logo span{
color: blue;
}
.nav-container .nav-item:not(:last-child){
margin-right: 0.5rem;
}
.nav-container .nav-link{
font-size: 1.5rem;
padding: 1rem;
}
.nav-container .nav-link:hover{
text-decoration: underline;
}
.icon{
font-size: 2rem;
cursor: pointer;
padding: 0 1rem;
position: relative;
}
.icon:not(:last-child){
margin-right: 0.5rem;
}
#search-box{
margin: 4rem;
max-width: 320px;
width: 100%;
display: flex;
align-items: center;
column-gap: 0.5rem;
padding: 8px 15px;
background:var(--lg);
border-radius: 4rem;
}
#search-box .bx{
font-size: 2rem;
}
#search-input{
width: 100%;
border: none;
outline: none;
background: transparent;
font-size: 1.2rem;
}
.nav-list .icons{
display: none;
}
.nav-container .nav-bar{
display: none;
font-size: 2rem;
cursor: pointer;
}
/*----- footer -----*/
.footer, .footer .glide__slides{
background-color: #e0e2e4;
position: relative;
height: calc(100vh - 6rem);
margin: 0 4rem;
overflow: hidden;
}
.footer .center{
display: flex;
height: 100%;
padding-top: 3rem;
align-items: center;
justify-content: center;
position: relative;
}
.footer .footer-left{
position: absolute;
top: 0;
left: 0;
transition: all 1s ease-in-out;
opacity: 0;
}
.footer .footer-left h1{
font-size: 3.5rem;
margin: 1rem 0;
}
.footer .footer-left p{
font-size: 1.5rem;
margin: 0 0 1rem;
}
.footer .footer-left .footer-btn{
display: inline-block;
padding: 1rem 3rem;
margin-top: 1rem;
background-color: #625750;
color: var(--w);
font-size: 1.5rem;
}
.footer .footer-right{
flex: 0 0 50%;
position: relative;
text-align: center;
height: 80%;
}
.footer .footer-right img{
position: absolute;
opacity: 0;
transition: all 1s ease-in-out;
}
.footer .footer-right img.img-1{
width: 75%;
right: -30%;
bottom: -50%;
}
.footer .footer-right img.img-2{
width: 80%;
right: -30%;
bottom: -50%;
}
.glide__slide--active .center .footer-right img{
bottom: -2%;
opacity: 1;
}
.glide__slide--active .footer-left{
opacity: 1;
top: 30%;
}
/*----- category -----*/
#section-category{
padding: 6rem 0;
margin: 5rem;
}
.category-center{
display: flex;
gap: 1.5rem;
}
.category-center .category-box{
width: 33%;
background: yellow;
text-align: center;
padding-bottom: 1%;
}
.category-center .category-box .category-img{
height: 60rem;
width: 100%;
overflow: hidden;
position: relative;
}
.category-center .category-box .category-img img{
height: 100%;
width: 100%;
object-fit: cover;
}
.category-center .category-box .category-img:hover img{
transform: scale(1.1);
}
.category-center .category-box .category-content{
padding: 2rem;
padding-top: 2rem;
}
.category-center .category-box .category-content h3{
font-size: 2rem;
}
.category-center .category-box .category-content p{
font-size: 1.5rem;
padding: 1rem 0;
line-height: 1.5;
}
.category-center .category-box .category-content .post-btn{
display: inline-block;
width: 50px;
height: 50px;
border: none;
padding: 1rem 0;
border-radius: 50%;
cursor: pointer;
background: var(--b);
color: var(--w);
transition: all 0.5s ease-in-out;
font-size: 2rem;
}
.category-center .category-box .category-content .post-btn:hover{
background-color: rgb(62, 62, 62);
}
/*----- Banner -----*/
.banner{
position: relative;
background-color: #e0e2e4 ;
padding: 6rem 3rem;
margin: 5rem;
overflow: hidden;
}
.banner .banner-content h1{
font-size: 2.5rem;
margin-bottom: 1.2rem;
}
.banner .banner-content p{
font-size: 1.5rem;
}
/*----- category2 -----*/
#section-category-2{
padding: 6rem 3rem;
margin: 5rem;
}
.category-center-2{
display: flex;
gap: 1.5rem;
}
.category-center-2 .category-box-2{
width: 33%;
background: rgb(42, 42, 171);
color: var(--w);
text-align: center;
padding-bottom: 1%;
}
.category-center-2 .category-box-2 .category-img-2{
height: 40rem;
width: 100%;
overflow: hidden;
position: relative;
}
.category-center-2 .category-box-2 .category-img-2 img{
height: 100%;
width: 100%;
object-fit: cover;
}
.category-center-2 .category-box-2 .category-content-2{
padding: 2rem;
padding-top: 2rem;
}
.category-center-2 .category-box-2 .category-content-2 h3{
font-size: 2rem;
}
.category-center-2 .category-box-2 .category-content-2 p{
font-size: 1.5rem;
padding: 1rem 0;
line-height: 1.5;
}
.category-center-2 .category-box-2 .category-content-2 .post-btn-2{
display: inline-block;
width: 50px;
height: 50px;
border: none;
padding: 1rem 0;
border-radius: 50%;
cursor: pointer;
background: var(--w);
color: var(--b);
transition: all 0.5s ease-in-out;
font-size: 2rem;
}
.category-center-2 .category-box-2 .category-content-2 .post-btn-2:hover{
background-color: rgb(62, 62, 62);
}
/*----------------*/
.new-topic-text{
padding: 6rem 3rem;
margin: 5rem;
}
.new-topic-text h1{
margin-bottom: 1.2rem;
font-size: 2.5rem;
}
.new-topic-text p{
font-size: 1.5rem;
color: #625750;
}
/*----------------*/
.new-topic{
position: relative;
min-height: 450px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 8rem;
}
.new-img{
position: absolute;
width: 100%;
height: 130%;
z-index: -1;
object-fit: cover;
margin-bottom: 5rem;
}
.new-text{
padding-right: 20px;
padding-top: 80px;
}
.new-text-2{
padding-left: 250px;
padding-bottom: 180px;
}
.new-text-3{
padding-left: 50px;
padding-bottom: 200px;
}
.click-btn{
display: flex;
align-items: center;
column-gap: 0.8rem;
color: white;
}
.click-btn .bx{
font-size: 16px;
background: rgba(121, 120, 120, 0.5);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.click-btn .bx:hover{
background: rgba(121, 120, 120, 0.8);
border: 1px solid white;
}
/*----- new arrival -----*/
.new-arrival-title{
padding: 6rem 3rem;
margin: 5rem;
}
.new-arrival-title h1{
font-size: 2.5rem;
margin-bottom: 1.2rem;
}
.new-arrival-title p{
font-size: 1.5rem;
color: #625750;
}
.product-center{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 150rem;
margin: 0 auto;
padding: 0 2rem;
}
.product-item{
position: relative;
width: 25rem;
margin: 0 auto;
margin-bottom: 3rem;
}
.product-show img{
width: 20rem;
height: 20rem;
object-fit: cover;
transition: all 0.5s linear;
}
.product-info{
padding: 1rem;
text-align: center;
}
.product-info span{
display: inline-block;
font-size: 1.2rem;
color: #625750;
margin-bottom: 1rem;
}
.product-info a{
display: block;
font-size: 1.5rem;
margin-bottom: 1rem;
transition: all 0.3s linear;
}
/*----- Banner2 -----*/
.banner-2{
position: relative;
background-color: #e0e2e4 ;
padding: 6rem 3rem;
margin: 5rem;
overflow: hidden;
}
.banner-2 .banner-content-2 h1{
font-size: 2.5rem;
margin-bottom: 1.2rem;
}
.banner-2 .banner-content-2 p{
font-size: 1.5rem;
}
.banner-2-btn{
display: inline-block;
padding: 1rem 2rem;
margin-top: 3rem;
background-color: #625750;
color: var(--w);
font-size: 1.5rem;
}
/*----- respo -----*/
@media(max-width: 1000px){
.glide__slide--active .footer-left{
top: 15%;
}
.footer .footer-right img.img-1{
width: 100%;
}
.footer .footer-right img.img-2{
width: 100%;
}
.section-category .category-center{
flex-wrap: wrap;
}
.section-category .category-center .category-box{
width: 100%;
}
.section-category-2 .category-center-2{
flex-wrap: wrap;
}
.section-category-2 .category-center-2 .category-box-2{
width: 100%;
}
}
@media(max-width: 765px){
.footer .footer-left h1{
font-size: 2.5rem;
}
.category-center-2 .category-box-2 .category-img-2{
height: 30rem;
width: 100%;
}
#back-btn, #next-btn{
display: none;
}
.gallery div img{
display: none;
}
}
@media(max-width: 760px){
.nav-list{
position: fixed;
top: 15%;
left: -100%;
flex-direction: column;
align-items: flex-start;
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
height: 80%;
width: 0;
max-width: 35rem;
z-index: 100;
transition: all 0.3s ease-in-out;
background-color: var(--w);
}
.nav-list.open{
left: 0;
width: 100%;
}
.nav-list .nav-item{
margin: 1rem 0 1rem 0;
width: 100%;
}
.nav-list .nav-link{
font-size: 2.3rem;
}
.nav-container .nav-bar{
display: block;
font-size: 3rem;
}
.icons{
display: none;
}
.nav-list .icons{
display: flex;
}
.top-nav .display-flex{
height: 3rem;
font-size: 1rem;
}
#search-box{
display: none;
}
}
@media(max-width: 590px){
.footer .footer-left p{
width: 80%;
}
.center .footer-right img.img-1{
width: 35rem;
}
.center .footer-right img.img-2{
width: 30rem;
}
.footer, .footer .glide__slides{
margin: 0;
padding: 0 3rem;
}
}
@media(max-width: 362px){
.top-nav .display-flex{
font-size: 0.8rem;
}
}

13
ecommerce/furniture_website/swiper.js Normal file
View file

@ -0,0 +1,13 @@
const slider1 = document.querySelector('#glide_')
if(slider1){
new Glide(slider1, {
type:'footer',
startAt: 0,
autoplay:3000,
gap:0,
hover:true,
perView:1,
animationDuration:800,
AnimationTimeframe: 'linear',
}).mount();
}