-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
69 lines (69 loc) · 3.52 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Product Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="one">
<header id="header">
<img id="header-img" src="https://cdn-icons-png.flaticon.com/128/119/119949.png" alt="Towel logo" width="50">
<p class="unique"> Original Tabla </p>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#description">Features</a></li>
<li><a class="nav-link" href="#video">How Its Created</a></li>
<li><a class="nav-link" href="#buy">Pricing</a></li>
</ul>
</nav>
<header>
</div>
<div id="main-body">
<h1>Handcrafted, home-made masterpieces</h1>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder=" Enter your email"> <br> <br>
<input type="submit" id="submit" value="Get Started">
</form>
<div class="box" id="description">
<div class="box1">
<img src="https://cdn-icons.flaticon.com/png/128/3832/premium/3832697.png?token=exp=1635488198~hmac=6f3eb1d36680f882feddb1228a14940f" alt="premium" width="75px">
<h2>Premium Materials</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="box2">
<img src="https://cdn-icons.flaticon.com/png/128/3434/premium/3434121.png?token=exp=1635488056~hmac=8f69dfff44f91459105c06561c749226" alt="premium" width="75px">
<h2>Premium Materials</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="box3">
<img src="https://cdn-icons-png.flaticon.com/512/4825/4825276.png" alt="premium" width="75px">
<h2>Premium Materials</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<iframe width="800px" height="500px" src="https://www.youtube.com/embed/r31oe7Sm0vI" title="YouTube video player" id="video">
</iframe>
</div>
<div id="buy">
<div class="square1">
<img src="https://cdn-icons.flaticon.com/png/128/5393/premium/5393760.png?token=exp=1636213875~hmac=effdabcf72d6ae94db0f7090c553fe44" alt="silver" width="75px" id="silver"> <br> <br> <br> <br> <br>
<h1>Silver</h1>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<button class="button">Order Now</button>
</div>
<div class="square2">
<img src="https://cdn-icons.flaticon.com/png/128/3467/premium/3467453.png?token=exp=1636215120~hmac=f66c11317a28a6c49474d42a32e64ef8" alt="gold" width="75px" id="silver"> <br> <br> <br> <br> <br>
<h1>Gold</h1>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<button class="button">Order Now</button>
</div>
<div class="square3">
<img src="https://cdn-icons.flaticon.com/png/128/530/premium/530966.png?token=exp=1636215365~hmac=61b0102a15f2e4f910e662b43af10bdc" alt="diamond" width="75px" id="silver"> <br> <br> <br> <br> <br>
<h1>Diamond</h1>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
<button class="button">Order Now</button>
</div>
</div>
</body>
</html>