-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
180 lines (173 loc) · 8.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flower Shop</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<!-- Navigation Bar -->
<nav class="navbar">
<div class="navbar-logo">
<img src="asset/logo.png" alt="">
<h1>Flower Shop</h1>
</div>
<div class="navbar-menu">
<ul>
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">Products</a></li>
<li class="nav-item"><a href="#">Offers</a></li>
<li class="nav-item"><a href="#">Big Sale</a></li>
<li class="nav-lastitem"><a href="#"><i class="fa-solid fa-bag-shopping fa-fade"></i> Cart</a></li>
</ul>
</div>
</nav>
<!-- Banner Section -->
<section class="banner-section">
<div class="banner-container">
<div class="banner-content">
<h1 class="banner-title">Let's make <br> beautiful flowers a <br> part of your life.</h1>
<p class="banner-description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
<button class="btn"><i class="fa-solid fa-cart-shopping fa-bounce"></i> Shop Now</button>
</div>
<div class="banner-img">
<img src="asset/pngwing 10.png" alt="cover-img">
</div>
</div>
</section>
</header>
<main>
<!-- Feature Section -->
<section class="feature-section margin">
<h2 class="section-title">Our Featured Flowers</h2>
<p class="section-description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<div class="feature-content">
<div class="feature-box">
<div class="feature-img feature-1">
<img src="asset/pngwing 6.png" alt="Products">
</div>
<h3 class="feature-title">Pink Flower Tree</h3>
</div>
<div class="feature-box">
<div class="feature-img feature-2">
<img src="asset/pngwing 5.png" alt="Products">
</div>
<h3 class="feature-title">Pink Flower Tree</h3>
</div>
<div class="feature-box">
<div class="feature-img feature-3">
<img src="asset/pngwing 7.png" alt="Products">
</div>
<h3 class="feature-title">Pink Flower Tree</h3>
</div>
</div>
</section>
<!-- Service Section -->
<section class="service-section margin">
<div class="service-box">
<img src="asset/Group 57.png" alt="service">
<h4 class="service-title">Same Day Delivery. Click & Collect.</h4>
</div>
<div class="service-box">
<img src="asset/Group 58.png" alt="service">
<h4 class="service-title">Fresh Flowers. Local Growers.</h4>
</div>
<div class="service-box">
<img src="asset/Group 59.png" alt="service">
<h4 class="service-title">24/7 Free Support.</h4>
</div>
</section>
<!-- Offer Section -->
<section class="offer-section">
<div class="offer-container">
<div class="offer-content">
<h2 class="offer-title section-title">Hot Deal ! Sale Up To 25% <span class="primary">Off</span></h2>
<p class="offer-description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<button class="btn offer-btn"><i class="fa-solid fa-right-to-bracket fa-beat"></i> Sign Up</button>
</div>
<div class="offer-image">
<img src="asset/pngwing 8.png" alt="offer">
</div>
</div>
</section>
<!-- Instagram Section -->
<section class="instagram-section margin">
<h2 class="section-title">Instagram</h2>
<p class="section-description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<div class="insta-gallery">
<div class="gallery-item">
<img src="asset/Flower 01.png" alt="flower">
</div>
<div class="gallery-item">
<img src="asset/Rectangle 4.png" alt="flower">
</div>
<div class="gallery-item">
<img src="asset/Rectangle 5.png" alt="flower">
</div>
<div class="gallery-item">
<img src="asset/Rectangle 6.png" alt="flower">
</div>
</div>
</section>
<!-- Newsletter Section -->
<section class="newsletter margin">
<h2 class="section-title">Get The Latest Deals</h2>
<p class="section-description">$30 coupon for first shopping</p>
<div class="submit-form">
<input type="email" name="" id="" placeholder="Enter your email here....">
<button type="submit" class="btn"><i class="fa-regular fa-paper-plane fa-beat"></i> Submit</button>
</div>
</section>
</main>
<!-- Footer Section -->
<footer>
<div class="footer-container">
<div class="footer-box box-1">
<div class="footer-logo">
<img src="asset/logo.png" alt="">
<h2 class="footer-title"><span class="primary">Flower</span>Shop</h2>
</div>
<p class="footer-description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<div class="social-link">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-youtube"></i>
</div>
</div>
<div class="footer-box">
<h3>Useful Links</h3>
<ul>
<li><a href="#">Popular Products</a></li>
<li><a href="#">Big Sale</a></li>
<li><a href="#">News and Article</a></li>
<li><a href="#">Legal Notice</a></li>
</ul>
</div>
<div class="footer-box">
<h3>Supports</h3>
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
<div class="footer-box">
<h3>Contact Information</h3>
<ul>
<li>Feel free to contact & reach us !!</li>
<li><i class="fa-solid fa-location-dot"></i> 3557 Derek Drive, Orlando, Florida</li>
<li><i class="fa-solid fa-phone"></i> +1(456)657-887</li>
<li><a href="#"><i class="fa-solid fa-envelope"></i> sales@flowershop.com</a></li>
</ul>
</div>
</div>
<small class="copyright">@2020-2023, FlowerShop.com | All rights reserved. </small>
</footer>
<!-- Font-awesome Kit -->
<script src="https://kit.fontawesome.com/9c87656713.js" crossorigin="anonymous"></script>
</body>
</html>