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

added flora website

Browse source
This commit is contained in:
JSriwongsa 2023-05-22 11:29:23 -05:00
parent 9848b9e887
commit 4e8d40809c
2 changed files with 940 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

355
ecommerce/flora_website/index.html Normal file
View file

@ -0,0 +1,355 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flora-Flower For You</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="images/title.png">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="nav container">
<a href="index.html" class="logo">
<img src="images/logo1.png" alt="" class="logo-img">
</a>
<div class="search-box">
<input type="search" name="" id="search-input" placeholder="Search">
<i class='bx bx-search'></i>
</div>
<div class="navbar">
<a href="" class="nav-link nav-active">
<i class='bx bxs-home'></i>
<span class="nav-link-title">HOME</span>
</a>
<a href="" class="nav-link">
<i class='bx bx-basket'></i>
<span class="nav-link-title">Shop</span>
</a>
<a href="" class="nav-link">
<i class='bx bx-book-bookmark' ></i>
<span class="nav-link-title">Blog</span>
</a>
<a href="" class="nav-link">
<i class='bx bxs-florist'></i>
<span class="nav-link-title">About Us</span>
</a>
<a href="" class="nav-link">
<i class='bx bx-phone-call'></i>
<span class="nav-link-title">Contact</span>
</a>
</div>
</div>
</header>
<section class="home">
<div class="home-text">
<h1>Find your favorite bouquet</h1>
<p>Make a bouquet and get a gift.<br> Delivery in Chicago, the suburbs, and nationwide!</p>
<a href="#" class="home-btn">Make a bouquet</a>
</div>
</section>
<section class="promotion">
<div class="promotion-img">
<img src="images/ba1.JPG">
</div>
<div class="promotion-img">
<img src="images/ba2.JPG">
</div>
<div class="promotion-img">
<img src="images/ba3.JPG">
</div>
</section>
<section class="popular-flower">
<div class="popular-text">
<h2>Our Most Popular Flowers</h2>
</div>
<div class="new-content">
<!--flower1-->
<div class="row">
<img src="images/f1_.jpg">
<h4>Red Roses</h4>
<h5>$2.08 per stem</h5>
<div class="top">
<p><i class='bx bxs-hot' ></i>hot</p>
</div>
<div class="flower-btn">
<br><a href="#">Add to cart</a>
</div>
</div>
<!--flower2-->
<div class="row">
<img src="images/f2.jpg">
<h4>White Calla Lilies</h4>
<h5>$5.27 per stem</h5>
<div class="top">
<p><i class='bx bxs-hot' ></i>hot</p>
</div>
<div class="flower-btn">
<br><a href="#">Add to cart</a>
</div>
</div>
<!--flower3-->
<div class="row">
<img src="images/f3.jpg">
<h4>Pink Tulips</h4>
<h5>$1.20 per stem</h5>
<div class="top">
<p><i class='bx bxs-hot' ></i>hot</p>
</div>
<div class="flower-btn">
<br><a href="#">Add to cart</a>
</div>
</div>
<!--flower4-->
<div class="row">
<img src="images/f4.jpg">
<h4>Phalaenopsis White Orchids</h4>
<h5>$39.49 per stem</h5>
<div class="top">
<p><i class='bx bxs-hot' ></i>hot</p>
</div>
<div class="flower-btn">
<br><a href="#">Add to cart</a>
</div>
</div>
<!--flower5-->
<div class="row">
<img src="images/f5.jpg">
<h4>Lavender Flowers</h4>
<h5>$2.45 per stem</h5>
<div class="top">
<p>hot</p>
</div>
<div class="flower-btn">
<br><a href="#">Add to cart</a>
</div>
</div>
<!--flower6-->
<div class="row">
<img src="images/f6.jpg">
<h4>Pink Daisies</h4>
<h5>$3.25 per stem</h5>
<div class="top">
<p>hot</p>
</div>
<div class="flower-btn">
<br><a href="#">Add to cart</a>
</div>
</div>
<!--flower7-->
<div class="row">
<img src="images/f7.jpg">
<h4>Orange Baby's breath</h4>
<h5>$1.50 per stem</h5>
<div class="top">
<p>hot</p>
</div>
<div class="flower-btn">
<br><a href="#">Add to cart</a>
</div>
</div>
<!--flower8-->
<div class="row">
<img src="images/f8.jpg">
<h4>Blue Hydrangeas</h4>
<h5>$3.75 per stem</h5>
<div class="top">
<p>hot</p>
</div>
<div class="flower-btn">
<br><a href="#">Add to cart</a>
</div>
</div>
</div>
</section>
<section class="promotion">
<div class="promotion-img">
<img src="images/ba4.JPG">
</div>
<div class="promotion-img">
<img src="images/ba5.JPG">
</div>
</section>
<section class="popular-flower">
<div class="popular-text">
<h2>Trending Bouquets</h2>
</div>
<div class="new-content">
<!--flower1-->
<div class="row">
<img src="images/t1.jpg">
<h4>Fall Bouquet</h4>
<h5>$55.99</h5>
<div class="top">
<p><i class='bx bxs-hot' ></i>hot</p>
</div>
<div class="flower-btn">
<br><a href="#">Add to cart</a>
</div>
</div>
<!--flower2-->
<div class="row">
<img src="images/t2.jpg">
<h4>Sunflowers Bouquet</h4>
<h5>$30.99</h5>
<div class="top">
<p><i class='bx bxs-hot' ></i>hot</p>
</div>
<div class="flower-btn">
<br><a href="#">Add to cart</a>
</div>
</div>
<!--flower3-->
<div class="row">
<img src="images/t3.jpg">
<h4>White Peony Bouquet</h4>
<h5>$25.99</h5>
<div class="top">
<p><i class='bx bxs-hot' ></i>hot</p>
</div>
<div class="flower-btn">
<br><a href="#">Add to cart</a>
</div>
</div>
<!--flower4-->
<div class="row">
<img src="images/t4.jpg">
<h4>Bridal Bouquets</h4>
<h5>$69.49 per stem</h5>
<div class="top">
<p><i class='bx bxs-hot' ></i>hot</p>
</div>
<div class="flower-btn">
<br><a href="#">Add to cart</a>
</div>
</div>
</div>
</section>
<section class="review" id="review">
<h1 class="heading">Customer Reviews</h1>
<div class="box-container">
<div class="box">
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
</div>
<p>Wonderful experience! <br>The flowers are beautiful and lasted.</p>
<div class="user">
<img src="images/u1.jpg">
<div class="user-info">
<h3>Taylor Swift</h3>
<span>Singer/ Producer/ Director</span>
</div>
</div>
<i class='bx bxs-quote-right' ></i>
</div>
<div class="box">
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
</div>
<p>The best flower delivery service.</p>
<div class="user">
<img src="images/u2.jpg">
<div class="user-info">
<h3>Selena Gomez</h3>
<span>Singer/ Actress/ Producer</span>
</div>
</div>
<i class='bx bxs-quote-right' ></i>
</div>
<div class="box">
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
</div>
<p>The flowers are drop dead <br>gorgeous every time. </p>
<div class="user">
<img src="images/u3.jpg">
<div class="user-info">
<h3>Rihanna</h3>
<span>Singer/ Businesswoman</span>
</div>
</div>
<i class='bx bxs-quote-right' ></i>
</div>
</div>
</section>
<section class="contact">
<div class="contact-box">
<h4>Get to Know Us</h4>
<li><a href="#">Careers</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Advertising</a></li>
</div>
<div class="contact-box">
<h4>Shop</h4>
<li><a href="#">Graduation</a></li>
<li><a href="#">Prom</a></li>
<li><a href="#">Memorial Day</a></li>
<li><a href="#">Anniversary</a></li>
<li><a href="#">Birthday</a></li>
</div>
<div class="contact-box">
<h4>Quick Links</h4>
<li><a href="#">Our Location</a></li>
<li><a href="#">Order Tracking</a></li>
<li><a href="#">Delivery service</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">FAQs</a></li>
</div>
<div class="contact-box">
<h4>Let Us Help You</h4>
<li><a href="#">Your Order</a></li>
<li><a href="#">Shipping Policies</a></li>
<li><a href="#">Use Our Coupon</a></li>
<li><a href="#">Cancel Your Order</a></li>
<li><a href="#">Help</a></li>
</div>
<div class="contact-box">
<h4>Social Media</h4>
<h5>Follow Us On</h5>
<div class="social">
<a href="#"><i class='bx bxl-instagram'></i></a>
<a href="#"><i class='bx bxl-facebook-square'></i></a>
<a href="#"><i class='bx bxl-twitter'></i></a>
</div>
</div>
</section>
<a href="#" class="scroll-top"><i class='bx bxs-chevrons-up'></i></a>
<div class="end-text">
<p>&#169; Flora All Rights Reserved </p>
</div>
<script src="main.js"></script>
</body>
</html>

585
ecommerce/flora_website/style.css Normal file
View file

@ -0,0 +1,585 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Klee One', cursive;
list-style: none;
text-decoration: none;
scroll-behavior: smooth;
}
:root{
--bg-color:snow;
--main-color:lightcoral;
--minor-color:rgb(49, 48, 48);
--other-color:dimgray;
--text-color:black;
--head-font:5rem;
--h2-font:3rem;
--p-font:1.5rem;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
section{
padding: 3rem 0 2rem;
}
img{
width: 100%;
}
.bx{
cursor: pointer;
}
body{
background: var(--body-color);
color: var(--text-color);
}
.container{
max-width: 1060px;
margin: auto;
width: 100%;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: var(--bg-color);
box-shadow: 0 1px 6px 0 rgb(32 33 36 /10% );
display: flex;
padding: 4px 10%;
}
.logo-img{
width: 12rem;
}
.nav{
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
}
.logo{
font-size: 2rem;
color: var(--text-color);
font-weight: 600;
text-transform: uppercase;
margin: 0 auto 0 0;
}
.search-box{
max-width: 210px;
width: 100%;
display: flex;
align-items: center;
column-gap: 0.5rem;
padding: 6px 15px;
background: rgb(242, 213, 213) ;
border-radius: 4rem;
}
.search-box .bx:hover{
color: var(--main-color);
}
.search-box .bx{
font-size: 1rem;
}
#search-input{
width: 100%;
border: none;
outline: none;
color: var(--text-color);
background: transparent;
font-size: 1rem;
}
.navbar{
position: fixed;
top: 9%;
display: flex;
flex-direction: row;
gap: 3.2rem;
}
.nav-link{
display: flex;
flex-direction: column;
align-items: center;
color: var(--other-color);
}
.nav-link:hover, .nav-active{
color: var(--main-color);
transition: 0.2s all linear;
transform: scale(1.3);
}
.nav-link .bx{
font-size: 1.2rem;
}
.nav-link-title{
font-size: 0.8rem;
}
section{
padding: 50px 15% 70px;
}
/*-------*/
.home{
position: relative;
background: url(images/wall3.jpg);
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: flex-start;
}
.home-text h1{
font-family: 'Norican', cursive;
font-size: 4.2rem;
color: var(--minor-color);
margin-bottom: 20px;
margin-top: 200px;
line-height: 1;
}
.home-text p{
color:DimGray ;
font-size: var(--p-font);margin-bottom: 60px;
}
.home-btn{
padding: 15px 20px;
background: var(--main-color);
color: var(--bg-color);
font-size: 16px;
font-weight: 600;
border-radius: 4rem;
}
.home-btn:hover{
background: var(--other-color);
}
.promotion{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, auto));
gap: 1rem;
}
.promotion-img img{
width: 100%;
display: block;
cursor: pointer;
}
.promotion-img:hover img{
transform: scale(1.05);
}
/*----------*/
.popular-text h2{
text-align: center;
font-size: var(--h2-font);
font-weight: 500;
font-family: 'Norican', cursive;
}
.new-content{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, auto));
align-items: center;
gap: 3rem;
margin-top: 5%;
text-align: center;
}
.row{
position: relative;
cursor: pointer;
}
.row img{
width: 100%;
height: auto;
margin-bottom: 15px;
}
.row h4{
margin-bottom: 5px;
font-size: 1.1rem;
}
.row h4:hover{
color: var(--main-color);
cursor: pointer;
}
.row h5{
color: var(--other-color);
font-weight: 600;
}
.top{
position: absolute;
top: 20px;
left: 0;
height: 30px;
width: 60px;
color: var(--bg-color);
background: var(--main-color);
text-transform: uppercase;
}
.row .flower-btn a{
padding: 8px 10px;
background: rgb(242, 213, 213);
color: var(--minor-color);
font-size: 10px;
font-weight: 600;
border-radius: 4rem;
}
.row:hover .flower-btn a{
color: var(--main-color);
}
/*----------*/
.review h1{
text-align: center;
font-size: var(--h2-font);
font-weight: 500;
font-family: 'Norican', cursive;
margin-bottom: 3%;
}
.review .box-container{
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.review .box-container .box{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, auto));
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
padding: 2rem 4.2rem;
position: relative;
border: 0.1rem;
align-items: center;
}
.review .box-container .box .bxs-quote-right{
position: absolute;
bottom: 3rem;
right: 1rem;
font-size: 2.5rem;
color: var(--main-color);
}
.review .box-container .box .stars i{
color: var(--main-color);
font-size: 0.9rem;
}
.review .box-container .box p{
color: var(--minor-color);
font-size: 1rem;
padding-top: 1rem;
}
.review .box-container .box .user{
display: flex;
align-items: center;
padding-top: 2rem;
}
.review .box-container .box .user img{
height: 4rem;
width: 4rem;
border-radius: 50%;
object-fit: cover;
margin-right: 1rem;
}
.review .box-container .box .user h3{
font-size: 1.5rem;
color: var(--main-color);
}
.review .box-container .box .user span{
font-size: 1rem;
color: var(--minor-color);
}
/*-----------*/
.contact{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
gap: 2rem;
background: var(--bg-color);
}
.contact-box h4{
margin-bottom: 0.5rem;
font-size: 16px;
color: var(--main-color);
}
.contact-box li{
margin-bottom: 5px;
}
.contact-box a{
font-size: 14px;
color: var(--minor-color);
}
.contact-box h5{
color: var(--minor-color);
}
.contact-box i{
color: var(--main-color);
}
.end-text p{
text-align: center;
background: #272829;
color: var(--bg-color);
font-size: 15px;
letter-spacing: 1px;
}
.scroll-top{
position: fixed;
bottom: 2.3rem;
right: 2.3rem;
}
.scroll-top i{
background: var(--main-color);
color: var(--bg-color);
font-size: 22px;
padding: 12px;
border-radius: 30px;
}
/*----------*/
@media(max-width: 1200px){
header{
padding: 1px 2%;
}
section{
padding: 40px 3% 50px;
}
}
@media(max-width: 920px){
.logo-img{
width: 8rem;
}
.nav{
display: flex;
align-items: center;
justify-content: center;
padding: 10px 0;
}
.search-box{
max-width: 170px;
}
#search-input{
font-size: 0.8rem;
}
.navbar{
top: 5%;
gap: 2.5rem;
}
}
@media(max-width: 720px){
.search-box{
max-width: 150px;
}
#search-input{
font-size: 0.7rem;
}
.navbar{
top: 5%;
gap: 2rem;
}
.nav-link .bx{
font-size: 1rem;
}
.nav-link-title{
font-size: 0.7rem;
}
}
@media(max-width: 640px){
.home-text h1{
font-size: 2.8rem;
}
.home-text p{
font-size: 1.2rem;
margin-bottom: 40px;
}
.home-btn{
padding: 8px 13px;
font-size: 14px;
}
.popular-text h2{
font-size: 2rem;
}
.row img{
width: 50%;
height: auto;
margin-bottom: 15px;
}
.row h4{
margin-bottom: 2px;
}
.top{
left: 150px;
}
.review h1{
font-size: 2rem;
}
.review .box-container .box{
padding: 1.5rem 9.5rem;
}
.review .box-container .box .bxs-quote-right{
bottom: 2rem;
font-size: 1.5rem;
}
.review .box-container .box .stars i{
color: var(--main-color);
font-size: 0.8rem;
}
.review .box-container .box .user img{
height: 3rem;
width: 3rem;
}
.review .box-container .box .user h3{
font-size: 1rem;
color: var(--main-color);
}
.review .box-container .box .user span{
font-size: 0.8rem;
color: var(--minor-color);
}
.contact-box h4{
font-size: 14px;
}
.contact-box a{
font-size: 12px;
}
.end-text p{
font-size: 12px;
}
.scroll-top{
position: fixed;
bottom: 2rem;
right: 2rem;
}
.scroll-top i{
font-size: 18px;
padding: 10px;
}
}
@media(max-width: 550px){
.search-box{
max-width: 120px;
}
#search-input{
font-size: 0.6rem;
}
.navbar{
top: 5%;
gap: 1.5rem;
}
.nav-link .bx{
font-size: 0.8rem;
}
.nav-link-title{
font-size: 0.6rem;
}
.review .box-container .box{
padding: 1.5rem 6.8rem;
}
.review .box-container .box .bxs-quote-right{
font-size: 1.2rem;
}
.review .box-container .box .user h3{
font-size: 1rem;
color: var(--main-color);
}
.review .box-container .box .user span{
font-size: 0.7rem;
color: var(--minor-color);
}
.review .box-container .box p{
font-size: 0.8rem;
padding-top: 0.5rem;
}
.contact-box h4{
font-size: 12px;
}
.contact-box a{
font-size: 10px;
}
.end-text p{
font-size: 10px;
}
.scroll-top{
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
}
.contact{
gap: 0.8rem;
}
}
@media(max-width: 500px){
.search-box{
max-width: 100px;
}
#search-input{
font-size: 0.5rem;
}
.navbar{
gap: 1.3rem;
}
.review .box-container .box{
padding: 1.5rem 5.3rem;
}
}
@media(max-width: 450px){
.logo-img{
width: 5.5rem;
}
.search-box{
max-width: 92px;
}
.home-text p{
font-size: 1rem;
}
.review .box-container .box{
padding: 1.5rem 3.9rem;
}
.top{
left: 80px;
}
}
@media(max-width: 400px){
.logo-img{
width: 5rem;
}
.search-box{
max-width: 100px;
}
#search-input{
font-size: 0.5rem;
}
.navbar{
top: 6%;
gap: 0.9rem;
}
.nav-link .bx{
font-size: 0.8rem;
}
.nav-link-title{
font-size: 0.5rem;
}
.home-text p{
font-size: 1rem;
}
.review .box-container .box{
padding: 1.5rem 2.5rem;
}
.top{
left: 80px;
}
}
@media(max-width: 380px){
.home-text p{
font-size: 1rem;
}
.home-btn{
padding: 7px 10px;
font-size: 12px;
}
.review .box-container .box{
padding: 1.5rem 1.8rem;
}
}
@media(max-width: 360px){
.review .box-container .box{
padding: 1.5rem 1.2rem;
}
.search-box{
max-width: 90px;
}
}