-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
171 lines (160 loc) · 9.39 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>product landing page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header class="l-header" id="header">
<nav class="navbar">
<div class="left">
<h1>bo<lable style="color: red;">A</lable>t Earbuds</h1>
</div>
<div class="right">
<input type="checkbox" id="check">
<label for="check" class="checkBtn">
<i class="fa fa-bars"></i>
</label>
<ul class="list">
<li><a href="#home">Home</a></li>
<li><a href="#Product">Product</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</nav>
</header>
<main class="l-main">
<section class="home" id="home">
<div class="home__container bd-container bd-grid">
<div class="home__data">
<h1 class="home__title">bo<lable style="color: red;">A</lable>t Earbuds</h1>
<h2 class="home__subtitle"> Discover the true power of <br><lable style="color: red;">wireless audio</lable></h2>
<a href="#Product" class="button">View Product</a>
</div>
<div class="home__img-container">
<img src="./asstes/banner.webp" alt="image1" class="home__img" id="image1">
<img src="./asstes/banner2.webp" alt="image2" class="home__img2" id="image2">
</div>
</div>
</section>
<section class="banner" id="home">
<div class="banner__container bd-container bd-grid">
<div class="banner__video-container">
<video src="https://cdn.shopify.com/s/files/1/0057/8938/4802/files/quinn_Bejc8URjU1NSXdhabLCmD.mp4?v=6517359867084812371" loop></video>
</div>
<div class="banner__data">
<h2 class="banner__subtitle">Airdopes - The Top Rated Bluetooth Earbuds in the Market</h2>
</div>
</div>
</section>
<!--========== Product ==========-->
<section class="Product section bd-container" id="Product">
<span class="section-subtitle">Best Deals</span>
<div class="section-title">
<h2>Choose <lable style="color: red;">Your</lable> Style</h2>
</div>
<div class="Product__container bd-grid">
<div class="Product__content">
<img src="./asstes/style1.jpg" alt="" class="Product__img">
<h3 class="Product__name">boAt Airdopes 121v2</h3>
<span class="Product__detail">in-Ear True Wireless Earbuds with Upto 14 Hours Playback, 8MM Drivers, Battery Indicators, Lightweight Earbuds</span>
<span class="Product__preci">-58% ₹1,245</span>
<button class="button view-button" >View</button>
</div>
<div class="Product__content">
<img src="./asstes/style2.webp" alt="" class="Product__img">
<h3 class="Product__name">boAt Airdopes 131 </h3>
<span class="Product__detail">Wireless Earbuds with upto 60 Hours Playback, 13mm Drivers, IWP Technology, 650mAh Charging Case</span>
<span class="Product__preci">-76% ₹1,020</span>
<button class="button view-button" >View</button>
</div>
<div class="Product__content">
<img src="./asstes/style3.webp" alt="" class="Product__img">
<h3 class="Product__name">boAt Airdopes 383</h3>
<span class="Product__detail">Wireless Earbuds with 7mm Rhythmic Dynamic Drivers, Up to 20 hours Playback, 500mAh Charging Case</span>
<span class="Product__preci">-59% ₹1,445</span>
<button class="button view-button" >View</button>
</div>
<div class="Product__content">
<img src="./asstes/style4.webp" alt="" class="Product__img">
<h3 class="Product__name">boAt Airdopes 100</h3>
<span class="Product__detail">TWS Wireless Earbuds with 50 Hours Playback Time, Quad Microphone, IWP™ technology</span>
<span class="Product__preci">-58% ₹1,499</span>
<button class="button view-button" >View</button>
</div>
<div class="Product__content">
<img src="./asstes/style5.jpg" alt="" class="Product__img">
<h3 class="Product__name">boAt Immortal 121</h3>
<span class="Product__detail">TWS Wireless Gaming in Ear Earbuds with Beast Mode(40ms Low Latency), 40H Playtime, Blazing LEDs</span>
<span class="Product__preci">-57% ₹1,499</span>
<button class="button view-button" >View</button>
</div>
<div class="Product__content">
<img src="./asstes/style6.webp" alt="" class="Product__img">
<h3 class="Product__name">boAt Rockerz 205</h3>
<span class="Product__detail">Bluetooth Earphone with 10mm Drivers, Upto 30 Hour Playback, Lightweight Magnetic Earbuds</span>
<span class="Product__preci"> -66% ₹1,299.00</span>
<button class="button view-button" >View</button>
</div>
</div>
<div class="modal-container">
<div class="modal-content">
<span class="close-button">×</span>
<img src="" alt="" class="modal-img" height="auto" width="100px">
<h3 class="modal-name"></h3>
<span class="modal-detail"></span>
<span class="modal-price"></span>
</div>
</div>
<div class="overlay"></div>
</section>
<!--========== FOOTER ==========-->
<footer class="footer section bd-containers">
<div class="footer__container bd-grid">
<div class="footer__content">
<a href="#" class="footer__logo">bo<lable style="color: red;">A</lable>t Earbuds</a>
<span class="footer__description">Discover the true power of <br><lable style="color: red;">wireless audio</lable></span>
<div>
<a href="#" class="footer__social"><i class='bx bxl-facebook'></i></a>
<a href="#" class="footer__social"><i class='bx bxl-instagram'></i></a>
<a href="#" class="footer__social"><i class='bx bxl-twitter'></i></a>
</div>
</div>
<div class="footer__content">
<h3 class="footer__title">Product</h3>
<ul>
<li><a href="#" class="footer__link">boAt Airdopes 121v2</a></li>
<li><a href="#" class="footer__link">boAt Airdopes 131</a></li>
<li><a href="#" class="footer__link">boAt Immortal 121</a></li>
<li><a href="#" class="footer__link">boAt Rockerz 205</a></li>
</ul>
</div>
<div class="footer__content">
<h3 class="footer__title">Information</h3>
<ul>
<li><a href="#" class="footer__link">Event</a></li>
<li><a href="#" class="footer__link">Contact us</a></li>
<li><a href="#" class="footer__link">Privacy policy</a></li>
<li><a href="#" class="footer__link">Terms of services</a></li>
</ul>
</div>
<div class="footer__content">
<h3 class="footer__title">Help</h3>
<ul>
<li><a href="#" class="footer__link">Track Your Order</a></li>
<li><a href="#" class="footer__link">Bulk Orders</a></li>
<li><a href="#" class="footer__link">Why Buy Direct</a></li>
<li><a href="#" class="footer__link">FAQs</a></li>
</ul>
</div>
</div>
<p class="footer__copy">© 2023 boAt Earbuds. All right reserved</p>
</footer>
</main>
<script src="index.js"></script>
</body>
</html>