-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
202 lines (202 loc) · 8.11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shampoo E-commerce Store</title>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="/assets/shield.png" type="image/x-icon">
</head>
<body>
<header>
<h1>ARSEY SHAMPOO</h1>
<nav id="navigation" class="nav">
<ul>
<li><a href="#hero">Home</a></li>
<li><a href="#collection">Collections</a></li>
<li><a href="#product-features">Product Features</a></li>
<li><a href="#customer-testimonials">Testimonials</a></li>
<li><a href="#faqs">FAQs</a></li>
<li><a href="#shipping">Shipping</a></li>
<li><a href="#payment-checkouts">Payment</a></li>
<li><a href="#contact-us">Contact Us</a></li>
<li><a href="#cart"><img src="assets/cart.png" alt="Cart" class="cart-icon"></a></li>
</ul>
</nav>
<button class="nav-toggle">Menu</button>
</header>
<section id="hero">
<h2>Welcome to Our Premier Shampoo Store</h2>
<p>Discover the ultimate experience with our premium shampoo collection, carefully crafted to nourish and revitalize your locks.</p>
<div class="buttons">
<a href="#" class="shop-btn">Shop Now</a>
<a href="#" class="learn-more-btn">Learn More</a>
</div>
</section>
<section id="collection">
<h2>Our Shampoo Collection</h2>
<div class="column-container">
<div class="col-card">
<h3>Volumizing Shampoo</h3>
<p>Infused with natural botanicals, our volumizing shampoo adds bounce and body to fine, limp hair.</p>
</div>
<div class="col-card">
<h3>Moisturizing Shampoo</h3>
<p>Deeply hydrating formula restores softness and shine to dry, damaged hair.</p>
</div>
<div class="col-card">
<h3>Color-Protecting Shampoo</h3>
<p>Preserves vibrant color and prevents fading for beautifully radiant locks.</p>
</div>
</div>
</section>
<section id="product-features">
<div class="product-features-ctn">
<div class="image-holder">
<img src="assets/glycerin.png" alt="Glycerin">
</div>
<div class="list">
<h3>Product Features and Benefits</h3>
<div class="custom-list">
<div class="numbers">1</div>
<div class="list-item">
<h4>Sulfate-Free</h4>
<p>Gentle formula that won't strip natural oils or cause dryness.</p>
</div>
</div>
<div class="custom-list">
<div class="numbers">2</div>
<div class="list-item">
<h4>Cruelty-Free</h4>
<p>Our products are never tested on animals, ensuring an ethical and eco-friendly approach.</p>
</div>
</div>
<div class="custom-list">
<div class="numbers">3</div>
<div class="list-item">
<h4>Paraben-Free</h4>
<p>Formulated without harsh chemicals, providing a healthier hair and scalp experience.</p>
</div>
</div>
<div class="custom-list">
<div class="numbers">4</div>
<div class="list-item">
<h4>Vegan</h4>
<p>Plant-based ingredients nourish and revitalize hair without any animal-derived components.</p>
</div>
</div>
</div>
</div>
</section>
<section id="customer-testimonials">
<h3>Customer Testimonials</h3>
<div class="two-col-grid-ctn">
<div class="grid-box">
<p>"My hair never felt so healthy!"</p>
<strong>-Sarah, San Francisco</strong>
</div>
<div class="grid-box">
<p>"This shampoo is a game-changer!"</p>
<strong>-Michael, New York</strong>
</div>
<div class="grid-box">
<p>"I love the natural, clean ingredients."</p>
<strong>-Emily, Seattle</strong>
</div>
<div class="grid-box">
<p>"My color-treated hair looks vibrant for weeks."</p>
<strong>-Tina, Chicago</strong>
</div>
</div>
</section>
<section id="faqs">
<div class="grid-ctn">
<div class="faq-list">
<h3>Frequently Asked Questions</h3>
<ul>
<li>How often should I use the shampoo?</li>
<li>Is this shampoo safe for color-treated hair?</li>
<li>Do you offer travel size options?</li>
</ul>
</div>
<div class="image-holder">
<img src="assets/shampooblue.png" alt="Blue Shampoo">
</div>
</div>
</section>
<section id="shipping">
<h3>Shipping and Returns</h3>
<div class="flex-container">
<div class="flex-card">
<h2>1</h2>
<h2>Fast Delivery</h2>
<p>We offer free, expedited shipping on all orders within the contiguous US.</p>
</div>
<div class="flex-card">
<h2>2</h2>
<h2>Easy Returns</h2>
<p>If you're not 100% satisfied, you can return your purchase within 30 days for a full refund.</p>
</div>
<div class="flex-card">
<h2>3</h2>
<h2>Secure Packaging</h2>
<p>Your shampoo will arrive in robust, leak-proof packaging to ensure safe transit.</p>
</div>
</div>
</section>
<section id="payment-checkouts">
<h3>Secure Checkout Process</h3>
<div class="card-container">
<div class="card">
<img src="assets/lock.png" alt="Padlock">
<h3>Encrypted Payments</h3>
<p>Your financial information is protected with industry-leading encryption.</p>
</div>
<div class="card">
<img src="assets/shield.png" alt="Shield">
<h3>Trusted Security</h3>
<p>We use advanced fraud prevention measures to ensure a safe shopping experience.</p>
</div>
<div class="card">
<img src="assets/credit-card.png" alt="Credit Card">
<h3>Multiple Payment Options</h3>
<p>Choose from a variety of payment methods, including credit card, PayPal, and more.</p>
</div>
<div class="card">
<img src="assets/truck.png" alt="Truck">
<h3>Reliable Delivery</h3>
<p>We partner with reputable carriers to ensure prompt and reliable shipping.</p>
</div>
</div>
</section>
<section id="contact-us">
<h3>Contact Us</h3>
<table>
<thead>
<tr>
<th>Reach out to us via</th>
</tr>
</thead>
<tbody>
<tr>
<td>Email:</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Phone:</td>
<td>+256707522509</td>
</tr>
<tr>
<td>Address:</td>
<td>123 Main Street, Kampala, Uganda 256</td>
</tr>
</tbody>
</table>
<p>Our knowledgeable customer service team is here to assist you with any questions or concerns. Don't hesitate to reach out!</p>
</section>
<footer>
<p>© All rights reserved ® by ISBN 2024</p>
</footer>
<script src="script.js"></script>
</body>
</html>