-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (142 loc) · 8.47 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
<!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">
<title>ProductLandingPage</title>
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header id="header">
<img src="https://i.postimg.cc/yxbgHC3K/logoNew.png" alt="Our Company Logo" id="header-img">
<nav id="nav-bar">
<ul id="nav-bar-links">
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#reviews">Reviews</a></li>
<li><a class="nav-link" href="#prices">Prices</a></li>
<li><a class="nav-link" href="#about-us">About us</a></li>
</ul>
</nav>
</header>
<main>
<article id="form-cont">
<h1 id="name-logo">r a n d o m</h1>
<h2><i>Pillows for Life</i></h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" name="email" id="email" placeholder="Enter your email address..." required>
<input id="submit" type="submit" value="GET STARTED" class="button-start">
</form>
</article>
<article id="features">
<section class="features-item">
<div class="icon">
<i class="fa-solid fa-feather-pointed"></i>
</div>
<div class="text">
<h2>Premium Materials</h2>
<p>Our pillows with a natural filling consist primarily of feathers, but they can also contain long materials, such as silk or wool. Pillows with natural filling are soft to the touch and easy to shape.</p>
</div>
</section>
<section class="features-item">
<div class="icon">
<i class="fa-solid fa-truck-fast"></i>
</div>
<div class="text">
<h2>Same Day Delivery</h2>
<p>We ensure that you get your pillow as soon as possible. As soon as we receive your order, we will send the selected pillow to your address within a few minutes. We also offer a free refund if you are not satisfied with our product.</p>
</div>
</section>
<section class="features-item">
<div class="icon">
<i class="fa-solid fa-dolly"></i>
</div>
<div class="text">
<h2>Free Shipping</h2>
<p>For the total value of ordered items more than 100 € we offer free delivery to your home address if you live in our country.</p>
</div>
</section>
</article>
<article id="reviews">
<div class="text-rev">
<h2>A Guide To Choosing Pillows</h2>
<p>The ideal pillow supports your neck in such a way that the neck vertebrae are in a natural position. Probably your current pillow doesn't give you that kind of support, even if you like it! Since bad habits are hard to get rid of, it is possible that you are used to sleeping with a high feather pillow, although this does not necessarily give the best support to your body. It can be difficult to get used to a certain type of pillow, so it may be a better solution to have two pillows, which you can alternate during the night. Watch the video below and find out which pillow is ideal for you...</p>
</div>
<div>
<iframe width="560" height="315" id="video" src="https://www.youtube.com/embed/Eu4x-_r7Lpg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</article>
<div id="prices">
<div class="text-pric">
<h2>We offer you</h2>
</div>
<article id="price-all-items">
<section class="price-items">
<h2>Feather pillow</h2>
<img class="img-price-items" src="https://media.kohlsimg.com/is/image/kohls/3920757?wid=600&hei=600&op_sharpen=1" alt="feather pillow">
<p>Dimensions: 600x400mm</p>
<h3 class="item-price">19.99€</h3>
<input id="submit" type="submit" value="Add to Cart" class="button-cart">
</section>
<section class="price-items">
<h2>Cotton Pillow</h2>
<img class="img-price-items" src="https://image.made-in-china.com/155f0j00wCulHDIRHrgO/Polyester-Fabric-Hollow-Fiber-Cotton-Pillow-Core-Can-Be-Washed.jpg" alt="organic cotton pillow">
<p>Dimensions: 500x500mm</p>
<h3 class="item-price">15.99€</h3>
<input id="submit" type="submit" value="Add to Cart" class="button-cart">
</section>
<section class="price-items">
<h2>Foam Pillow #1</h2>
<img class="img-price-items" src="https://res.cloudinary.com/companystore/image/upload/b_rgb:FFFFFF,c_pad,dpr_3.0,f_auto,h_400,q_auto,w_400/c_pad,h_400,w_400/v1/webimages/pp15_pillow_coolinggel_main?pgw=1" alt="memory foam pillow #1">
<p>Dimensions: 600x350mm</p>
<h3 class="item-price">49.99€</h3>
<input id="submit" type="submit" value="Add to Cart" class="button-cart">
</section>
<section class="price-items">
<h2>Foam Pillow #2</h2>
<img class="img-price-items" src="http://www.drspatelchiro.co.za/wp-content/uploads/2021/02/Contour-Memory-Foam-Pillow.jpg" alt="memory foam pillow #2">
<p>Dimensions: 500x250mm</p>
<h3 class="item-price">34.99€</h3>
<input id="submit" type="submit" value="Add to Cart" class="button-cart">
</section>
<section class="price-items">
<h2>Latex pillow</h2>
<img class="img-price-items" src="https://cdn11.bigcommerce.com/s-84qg5vpfl1/images/stencil/1280x1280/products/3032/4951/MD770W202_zoom__81743.1591246881.jpg?c=2" alt="latex pillow">
<p>Dimensions: 500x275mm</p>
<h3 class="item-price">79.99€</h3>
<input id="submit" type="submit" value="Add to Cart" class="button-cart">
</section>
<section class="price-items">
<h2>Syntetic pillow</h2>
<img class="img-price-items" src="https://5.imimg.com/data5/SELLER/Default/2020/10/AE/XI/ST/60110684/pillow-500x500.jpeg" alt="sintetic pillow">
<p>Dimensions: 600x375mm</p>
<h3 class="item-price">29.99€</h3>
<input id="submit" type="submit" value="Add to Cart" class="button-cart">
</section>
</article>
</div>
<article id="about-us">
<div class="text-rev">
<h2>About Us</h2>
<p><span class="random-text"><b>r a n d o m</b></span> is an international retail chain of pillows of various sizes and shapes that originated in Bosnia and Herzegovina. <br>
With more than 70 stores and webshops in 25 countries, working always has a good offer and competent service in choosing pillows to suit you, regardless of the method of purchase. <br>
The company operates as part of the <span class="random-text">Modern Interiors group</span>, with an annual turnover of one million euros.</p>
</div>
</article>
<footer id="footer">
<div id="footer-bar">
<ul id="footer-bar-links">
<li class="footer-link"><a href="#">Privacy</a></li>
<li class="footer-link"><a href="#">Terms</a></li>
<li class="footer-link"><a href="#">Contact us</a></li>
</ul>
</div>
<div>
<p class="copyright-text">Copyright 2022, <span class="random-text"><b>r a n d o m</b></span> - just for you!</p>
</div>
</footer>
</main>
<script src="https://kit.fontawesome.com/5ff68f4fdc.js" crossorigin="anonymous"></script>
</body>
</html>