-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
278 lines (260 loc) · 13.3 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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!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" />
<!-- Web-Page Title -->
<title>Toufiq's 2nd Assignment</title>
<!-- Importing Favicon Icon -->
<link rel="icon" type="image/png" href="resources/icons/favicon.png" />
<!-- Connecting stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header Section starts-->
<header class="top-head">
<div class="top-heading">
<h2>Influencer products</h2>
</div>
<!-- nav section starts -->
<nav class="nav-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
<li>
<a href="#"><i class="fas fa-search"></i></a>
</li>
<li>
<a href="#"><i class="fas fa-shopping-cart"></i></a>
</li>
</ul>
</nav>
<!-- nav section ends -->
</header>
<!-- header section ends -->
<main>
<!-- main body item starts -->
<section class="top-banner">
<!-- Top Banner starts -->
<div class="top-banner-text">
<h1>
Start your Journey as <br />
Influencer
</h1>
<p>
No matter what scenario you belong to, know that you have already taken your first step in the
journey to becoming an influencer. Now, here's how you are going to continue and soar higher.
</p>
<a target="blank" href="#" class="button">Order Now <i class="fas fa-mouse"></i>
</a>
</div>
<div class="top-image dslr-pic">
<img src="resources/images/main-camera.png" alt="Main Camera" />
</div>
</section>
<!-- Top Banner Ends -->
<!-- Website icon link Area starts -->
<section class="website-logo">
<img class="svg-logos" src="resources/logos/Alibaba.svg" alt="Alibaba" />
<img class="svg-logos" src="resources/logos/Amazon.svg" alt="Amazon" />
<img class="svg-logos" src="resources/logos/Daraz.pk Logo.svg" alt="Daraz" />
<img class="svg-logos" src="resources/logos/Ebay.svg" alt="Ebay" />
<img class="svg-logos" src="resources/logos/Rakuten.svg" alt="Rakuten" />
<img class="svg-logos" src="resources/logos/Target.svg" alt="Target" />
<img class="svg-logos" src="resources/logos/Walmart.svg" alt="Walmart" />
</section>
<!-- Website icon link Area Ends -->
<!-- Product Cards Area Starts-->
<section class="collection-section">
<h1>Popular Collection</h1>
<div class="grid-cards">
<!-- Product Cards 1-->
<div class="collection-cards">
<img src="resources/images/tripod.png" alt="An image of a tripod" />
<h2>Flex Tripod</h2>
<h3>$50.48</h3>
<div class="stars-ratings">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span> 4.8</span>
</div>
<p> By a standard adaptor screw thread, it is compatible with digital cameras.</p>
</div>
<!-- Product Cards 2-->
<div class="collection-cards">
<img src="resources/images/mic.png" alt="An image of a Microphone" />
<h2>Microphone</h2>
<h3>$120.25</h3>
<div class="stars-ratings">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span> 4.8</span>
</div>
<p>Music is defined by its artists, and artists are defined by their voices.</p>
</div>
<!-- Product Cards 3-->
<div class="collection-cards">
<img src="resources/images/airpod.png" alt="An image of Apple Headphones" />
<h2>Airbuds</h2>
<h3>$100.00</h3>
<div class="stars-ratings">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span> 4.8</span>
</div>
<p>AirPods (3rd generation) and AirPods Pro are sweat and water resistant for non-water sports
and exercise.</p>
</div>
<!-- Product Cards 4-->
<div class="collection-cards">
<img src="resources/images/drone.png" alt="An image of Drone Camera" />
<h2>Drone</h2>
<h3>$980.25</h3>
<div class="stars-ratings">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<span> 5.0</span>
</div>
<p>Powerful all-in-one camera drone designed for creators on the move.</p>
</div>
<!-- Product Cards 5-->
<div class="collection-cards">
<img src="resources/images/lights.png" alt="An image of tripod Lights" />
<h2>Light Setup</h2>
<h3>$1200.00</h3>
<div class="stars-ratings">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span> 4.5</span>
</div>
<p>360° Full Color will be make your photography more colorful.</p>
</div>
<!-- Product Cards 6-->
<div class="collection-cards">
<img src="resources/images/setup.png" alt="An image of Photo-shoot-Setup" />
<h2>Photoshoot set</h2>
<h3>$820.40</h3>
<div class="ratins">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span> 4.8</span>
</div>
<p>Soften light, provides excellent lighting effects and reduce the shadows for the best
results.</p>
</div>
<!-- Product Cards 7-->
<div class="collection-cards">
<img src="resources/images/camera.png" alt="An image of Vlogging Camera" />
<h2>Vlogging Camera</h2>
<h3>$1800.80</h3>
<div class="ratins">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span> 4.8</span>
</div>
<p>Arguably the best all-round mirrorless camera at this price point, the Fujifilm X-S10 is
adept at lots of different types of shooting including vlogging.</p>
</div>
<!-- Product Cards 8-->
<div class="collection-cards">
<img src="resources/images/single-light.png" alt="An image of Green Screen Sheet" />
<h2>Green Screen</h2>
<h3>$25.48</h3>
<div class="ratins">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span> 4.8</span>
</div>
<p>Green screen backdrop is made of high density and opaque polyester fabric, this kind of cloth
is less wrinkle than cotton material and easier to restore.</p>
</div>
<!-- Product Cards 9-->
<div class="collection-cards">
<img src="resources/images/action.png" alt="An image of Action Camera" />
<h2>Action Camera</h2>
<h3>$380.00</h3>
<div class="ratins">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span> 4.8</span>
</div>
<p>Shoot stunning video with up to 5K resolution, perfect for maintaining serious detail even
when zooming in. Packing a new 23.6MP sensor that's an absolute powerhouse.</p>
</div>
</div>
<a class="see-more-button button" href="https://www.amazon.com/">See More <i
class="fas fa-mouse"></i></a>
</section>
<!-- Product Cards Area Ends-->
<!-- Bottom Iframe Starts-->
<section class="bottom-part">
<div class="bottom-iframe">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/9eqf-GXRgSc"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div class="bottom-text">
<h1>
Story time:<br>
How I Became an Influencer
</h1>
<p>
I wanted to tell the story in it's entirety. So here it is, grab a cup of tea and listen to me
ramble about how the last 6 years of my life have lead me to exactly where I am right now.
</p>
<a href="https://www.youtube.com/" class="bottom-button">Watch more <i class="fas fa-mouse"></i>
</a>
</div>
</section>
<!-- Bottom Iframe Ends-->
</main>
<!-- main body item Ends -->
<!-- Footer Starts-->
<footer>
<div class="footer-area">
<h3>Influencer products</h3>
<h6 id="copyright-text">© 2022 Bangladesh, Toufiq Alahi - All Rights Reserved.</h6>
<div>
<a target="blank" href="https://www.youtube.com/"><i class="fab fa-youtube"></i></a>
<a target="blank" href="https://twitter.com/"><i class="fab fa-twitter"></i></a>
<a target="blank" href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a>
<a target="blank" href="https://www.linkedin.com/"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</footer>
<!-- Footer Starts-->
</body>
<!-- Font Awesome Icon -->
<script src="https://kit.fontawesome.com/babf5b1265.js" crossorigin="anonymous"></script>
</html>