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

added shop section

Browse source
This commit is contained in:
JSriwongsa 2023-05-24 12:24:08 -05:00
parent 54c80a09ee
commit 2abeb012db
2 changed files with 286 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

278
ecommerce/flora_website/shop.html Normal file
View file

@ -0,0 +1,278 @@
<!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="stylesheet" href="style_blog.css">
<link rel="stylesheet" href="style_shop.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="index.html" class="nav-link">
<i class='bx bxs-home'></i>
<span class="nav-link-title">HOME</span>
</a>
<a href="" class="nav-link nav-active">
<i class='bx bx-basket'></i>
<span class="nav-link-title">Shop</span>
</a>
<a href="blog.html" class="nav-link">
<i class='bx bx-book-bookmark' ></i>
<span class="nav-link-title">Blog</span>
</a>
<a href="about.html" class="nav-link">
<i class='bx bxs-florist'></i>
<span class="nav-link-title">About Us</span>
</a>
<a href="contact.html" class="nav-link">
<i class='bx bx-phone-call'></i>
<span class="nav-link-title">Contact</span>
</a>
</div>
</div>
</header>
<section id="shop">
<!--set1-->
<div class="blog-heading">
<h1>Graduation</h1>
</div>
<div class="new-content">
<!--flower1-->
<div class="row">
<img src="images/sg1.jpg">
<h4>###</h4>
<h5>$$$</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/sg2.jpg">
<h4>###</h4>
<h5>$$$</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/sg3.jpg">
<h4>###</h4>
<h5>$$$</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/sg4.jpg">
<h4>###</h4>
<h5>$$$</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>
<!--set2-->
<div class="blog-heading">
<h1>Wedding</h1>
</div>
<div class="new-content">
<!--flower1-->
<div class="row">
<img src="images/sw1.jpg">
<h4>###</h4>
<h5>$$$</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/sw2.jpg">
<h4>###</h4>
<h5>$$$</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/sw3.jpg">
<h4>###</h4>
<h5>$$$</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/sw4.jpg">
<h4>###</h4>
<h5>$$$</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>
<!--set3-->
<div class="blog-heading">
<h1>Memorial Day</h1>
</div>
<div class="new-content">
<!--flower1-->
<div class="row">
<img src="images/sm2.jpg">
<h4>###</h4>
<h5>$$$</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/sm3.jpg">
<h4>###</h4>
<h5>$$$</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/sm4.jpg">
<h4>###</h4>
<h5>$$$</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/sm1.jpg">
<h4>###</h4>
<h5>$$$</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>
<!--set4-->
<div class="blog-heading">
<h1>Birthday</h1>
</div>
<div class="new-content">
<!--flower1-->
<div class="row">
<img src="images/sb1.jpg">
<h4>###</h4>
<h5>$$$</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/sb2.jpg">
<h4>###</h4>
<h5>$$$</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/sb3.jpg">
<h4>###</h4>
<h5>$$$</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/sb4.jpg">
<h4>###</h4>
<h5>$35.49</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>
<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>
</body>
</html>

8
ecommerce/flora_website/style_shop.css Normal file
View file

@ -0,0 +1,8 @@
#shop{
margin-top: 5%;
text-align: center;
}
#shop .blog-heading h1{
margin-top: 8%;
}