-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (127 loc) · 4.33 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
<!DOCTYPE html>
<html>
<head>
<title>Product Landing Page</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="UTF-8"/>
</head>
<body>
<section class="section-1">
<!--Heading of the page starts here-->
<header id="header">
<div class="logo-tagline">
<img id="header-img" src="https://cdn.pixabay.com/photo/2012/04/13/17/39/knight-33015_960_720.png"/>
<h1>Classic Chess</h1>
</div>
</header>
<nav id="nav-bar">
<ul>
<li>
<a class="nav-link" href="#features">Features</a>
</li>
<li>
<a class="nav-link" href="#how-to-play-video">Product Video</a>
</li>
<li>
<a class="nav-link" href="#pricing">Pricing</a>
</li>
</ul>
</nav>
<div class="container"></div>
</section>
<div class="space"></div>
<!--Heading of the page end here-->
<section class="updates">
<h2>Get updates on latest products</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<fieldset>
<input name="email" id="email" type="email" placeholder="Enter your email address" required>
<input class="btn" id="submit" type="submit" value="Submit">
</fieldset>
</form>
<div class="container">
</section>
<section id="features">
<div class="grid">
<div class="icon">
<i class="fa fa-3x fa-fire">
</i>
</div>
<div class="description">
<h2>Premium Materials</h2>
<p>
Our chess board and pieces are made of high quality glass which will increase the longetivity of your purchase.
</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="description">
<h2>Fast Shipping</h2>
<p>We make sure you recieve your chess as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
</div>
<div class="description">
<h2>Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the board and pieces of the product.</p>
</div>
</div>
</section>
<section id="how-to-play-video">
<iframe id="video" src="https://www.youtube.com/embed/6Pqd7UFWr7M?autoplay=0&rel=0&controls=0&showinfo=0" title="Product unboxing" frameborder="0" allowfullscreen="0"></iframe>
</section>
<section id="pricing">
<div class="product" id="metal">
<div class="heading">Metal Chess</div>
<h3 class="pheading">300$</h3>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">Select</button>
</div>
<div class="product" id="glass">
<div class="heading">Glass Chess</div>
<h3 class="pheading">400$</h3>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">Select</button>
</div>
<div class="product" id="marble">
<div class="heading">Marble Chess</div>
<h3 class="pheading">500$</h3>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">Select</button>
</div>
</section>
<!--footer section starts here-->
<footer>
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Contact</li>
</ul>
<p>Copyright 2022, Classic Chess</p>
</footer>
</div>
</body>
</html>