-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
250 lines (201 loc) · 6.41 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
<!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" />
<!-- font family from google -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Montserrat"
/>
<!-- icon family from google -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
/>
<title>bluemercury</title>
<link rel="stylesheet" href="./styles/navbar.css" />
<link rel="stylesheet" href="styles/index.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="./styles/footer.css">
<link rel="icon" type="image/x-icon" href="./components/images/fevicon.png">
</head>
<body>
<!-- navbar here -->
<div id="navbar"></div>
<!-- sliding text here -->
<div id="slide_text"></div>
<!-- slide show of products -->
<div id="slide_link">
<div id="slide_line_text"></div>
</div>
<div id="slide_product1">
<h2 class="h2" id="new_arrivalsh2">NEW ARRIVALS</h2>
<!-- sliding products -->
<div id="slide_p1"></div>
</div>
<div class="Container">
<h1>New Brand: Zitsticka</h1>
<p>
Offering a full suite of acne products that can treat and prevent all
kinds of breakouts, while protecting and nourishing your skin.
</p>
<div id="box">
<div>
<img
src="https://cdn.shopify.com/s/files/1/0283/0185/2747/files/zitsticka_coop_800x.progressive.jpg?v=1660762100"
alt=""
/>
</div>
<div>
<div>
<img
src="https://cdn.shopify.com/s/files/1/0283/0185/2747/products/global_images-9353371000188-1_235x235_crop_center.jpg?v=1660147859"
alt=""
/>
<h2>ZITSTICKA</h2>
<p>SILKSHAKE™ Probiotic-Rich Body Wash</p>
<p>$25</p>
<p>⭐⭐⭐⭐⭐⭐⭐</p>
</div>
<div>
<img
src="https://cdn.shopify.com/s/files/1/0283/0185/2747/products/global_images-9353371000003-1_235x235_crop_center.jpg?v=1660147838"
alt=""
/>
<h2>ZITSTICKA</h2>
<p>KILLA™ Kit Deep Zit Microdart Patch</p>
<p>$29</p>
<p>⭐⭐⭐⭐⭐⭐⭐</p>
</div>
<div>
<img
src="https://cdn.shopify.com/s/files/1/0283/0185/2747/products/global_images-9353371000096-1_235x235_crop_center.jpg?v=1660147826"
alt=""
/>
<h2>ZITSTICKA</h2>
<p>$16</p>
<p>⭐⭐⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
</div>
<!-- second sliding part -->
<div id="slide_product2">
<h2 class="h2">BEST SELLERS</h2>
<!-- sliding products -->
<div id="slide_p2"></div>
</div>
<!-- time line page -->
<div id="time_line1">
<div id="time_line1_box">
<div>
<img
src="https://cdn.shopify.com/s/files/1/0283/0185/2747/files/good_for_you_beauty_1_1000x.jpg?v=1660766101"
alt=""
/>
</div>
<div>
<h2>Take Care</h2>
<p>
Shop new and bestselling products from our Conscious Beauty
collection!
</p>
<a href="https://bluemercury.com/collections/conscious-beauty"
>SHOP NOW</a
>
</div>
</div>
</div>
<!-- third slideing part -->
<div id="slide_product3">
<h2 class="h2">DEWY, GLOWY MAKEUP</h2>
<!-- sliding products -->
<div id="slide_p3"></div>
</div>
<!-- time line 2 -->
<div id="time_line2">
<div id="time_line2_box">
<div>
<img
src="https://cdn.shopify.com/s/files/1/0283/0185/2747/files/elta_md_coop_1000x.jpg?v=1660762322"
alt=""
/>
</div>
<div>
<h3>EltaMD</h3>
<h2>UV Clear Broad-Spectrum SPF 46</h2>
<p>
Oil-free EltaMD UV Clear helps calm and protect sensitive skin types
prone to discoloration and breakouts associated to acne and rosacea.
</p>
<a
href=""
>SHOP NOW</a
>
</div>
</div>
</div>
<!-- buttom part here -->
<div id="buttom">
<div>
<img
src="https://cdn.shopify.com/s/files/1/0283/0185/2747/files/samples-content_block_705x705.jpg?v=1604551537"
alt=""
/>
<span><p>Free Gifts With Purchase</p></span>
<p>
Stock up on all your favorite brands, then try something new on us
</p>
<a href="#">BROWSER NOW</a>
</div>
<div>
<img
src="https://cdn.shopify.com/s/files/1/0283/0185/2747/files/consultation_promo_nav_1_705x705.jpg?v=1657733426"
alt=""
/>
<span><p>Complimentary In-Store Consultations!</p></span>
<p>
Our Beauty Experts can show you quick makeup application tricks and
how to revamp your skincare regimen.
</p>
<a href="#">LERN MORE</a>
</div>
<div>
<img
src="https://cdn.shopify.com/s/files/1/0283/0185/2747/files/spa_menu_photo_705x705.jpg?v=1628018315"
alt=""
/>
<span><p>Bluemercury Spa</p></span>
<p>
Our luxurious spa services are customizable to your individual needs
</p>
<a href="">BROWSER THE MENU</a>
</div>
</div>
<div id="footer">
</div>
</script>
</body>
</html>
<script type="module">
import { navbar } from "./components/modules/navbar.js";
// console.log(navbar());
document.getElementById("navbar").innerHTML = await navbar();
document.getElementById("locator").addEventListener("click",function(){
window.location.href="new_arrivel.html"
})
</script>
<script type="module">
import { footer } from "./components/modules/footer.js";
// console.log(navbar());
document.getElementById("footer").innerHTML = await footer();
</script>
<script src="scripts/index.js"></script>
<script src="scripts/permission.js"></script>
<script src="scripts/New_arrivel.js"></script>
<!-- slick slider -->