-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (132 loc) · 3.63 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Landing Page</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
</head>
<body>
<header id="header">
<nav id="nav-bar">
<img src="img/logo.png" alt="trombone-logo" id="header-img"/>
<ul>
<a href="#features" class="nav-link">
<li>Features</li>
</a>
<a href="#howItWorks" class="nav-link">
<li>How It Works</li>
</a>
<a href="#price" class="nav-link">
<li>Pricing</li>
</a>
</ul>
</nav>
</header>
<div class="header">
<h1>Handcrafted, home-made masterpieces</h1>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" placeholder="Enter your email address" id="email" name="email"/>
<input id="submit" type="submit">Get Started</input>
</form>
</div>
<main id="features">
<div class="feature">
<div class="logo">
<i class="fa-solid fa-fire-flame-curved"></i>
</div>
<div class="text hello">
<h3>Premium Materials</h3>
<p>
Our trombones use the shiniest brass which is sourced locally. This
will increase the longevity of your purchase.
</p>
</div>
</div>
<div class="feature">
<div class="logo">
<i class="fa-solid fa-truck"></i>
</div>
<div class="text">
<h3>Fast Shipping</h3>
<p>
We make sure you receive your trombone as soon as we have finished
making it. We also provide free returns if you are not satisfied.
</p>
</div>
</div>
<div class="feature">
<div class="logo">
<i class="fa-solid fa-battery-full"></i>
</div>
<div class="text">
<h3>Quality Assurance</h3>
<p>
For every purchase you make, we will ensure there are no damages or
faults and we will check and test the pitch of your instrument.
</p>
</div>
</div>
</main>
<div class="video" id="howItWorks">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/m6HgVhRCX04?si=3dAZZCEg5BQ7GjF1&controls=0" id="video"></iframe>
</div>
<div class="products" id="price">
<div class="product">
<h4>Tenor trombone</h4>
<h5>$600</h5>
<div class="prod_details">
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
</div>
<div class="center">
<button>Select</button>
</div>
</div>
<div class="product">
<h4>Bass trombone</h4>
<h5>$900</h5>
<div class="prod_details">
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
</div>
<div class="center">
<button>Select</button>
</div>
</div>
<div class="product">
<h4>Valve trombone</h4>
<h5>$1200</h5>
<div class="prod_details">
<p>Plays similar to a Trumpet</p>
<p>Great for Jazz Bands</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
</div>
<div class="center">
<button>Select</button>
</div>
</div>
</div>
<footer>
<ul>
<a href="#">
<li>Privacy</li>
</a>
<a href="#">
<li>Terms</li>
</a>
<a href="#">
<li>Contact</li>
</a>
</ul>
<h6>Copyrights 2016, Original Trombones</h6>
</footer>
</body>
</html>