Skip to content

Commit 9afeb58

Browse files
saloni-15saloni-15
authored
Create index.html
1 parent 6249606 commit 9afeb58

File tree

1 file changed

+135
-0
lines changed

1 file changed

+135
-0
lines changed

‎Product Landing Page/index.html

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="preconnect" href="https://fonts.gstatic.com" />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Red+Hat+Display&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Product Landing Page</title>
14+
</head>
15+
<body>
16+
<header id="header">
17+
<brand id="brand-name">
18+
<img
19+
src="https://img.icons8.com/ios/452/trumpet.png"
20+
alt=""
21+
id="header-img"
22+
/>
23+
<h1 id="header-text">Original Trombones</h1>
24+
</brand>
25+
<nav id="nav-bar">
26+
<ul>
27+
<li class="nav-link"><a href="#feature-box"> Features</a></li>
28+
<li class="nav-link"><a href="#video">How it Works</a></li>
29+
<li class="nav-link"><a href="#price-box">Pricing</a></li>
30+
</ul>
31+
</nav>
32+
</header>
33+
<div id="container">
34+
<h1 id="heading">Handcrafted, home-made masterpieces</h1>
35+
<form action="mailto: https://www.freecodecamp.com/email-submit">
36+
<input
37+
type="email"
38+
name=""
39+
id="email"
40+
placeholder="Enter email address"
41+
/>
42+
<button class="top-button" type="submit">Get Started</button>
43+
</form>
44+
<div id="feature-box">
45+
<div class="feature-item">
46+
<div class="item1">
47+
<img class="feature-img" src="./images/fire.png" alt="" />
48+
</div>
49+
<div class="item2"><h1 class="big-text">Premium Materials</h1></div>
50+
<div class="item3">
51+
<p class="small-text">
52+
Our trombones use the shiniest brass which is sourced locally.
53+
This will increase the longevity of your purchase.
54+
</p>
55+
</div>
56+
</div>
57+
<div class="feature-item">
58+
<div class="item1">
59+
<img class="feature-img" src="./images/truck.png" alt="" />
60+
</div>
61+
<div class="item2"><h1 class="big-text">Fast Shipping</h1></div>
62+
<div class="item3">
63+
<p class="small-text">
64+
We make sure you recieve your trombone as soon as we have finished
65+
making it. We also provide free returns if you are not satisfied.
66+
</p>
67+
</div>
68+
</div>
69+
<div class="feature-item">
70+
<div class="item1">
71+
<img class="feature-img" src="./images/quality.png" alt="" />
72+
</div>
73+
<div class="item2"><h1 class="big-text">Quality Assurance</h1></div>
74+
<div class="item3">
75+
<p class="small-text">
76+
For every purchase you make, we will ensure there are no damages
77+
or faults and we will check and test the pitch of your instrument.
78+
</p>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
<div class="video-box">
84+
<iframe
85+
id="video"
86+
height="315"
87+
src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"
88+
frameborder="0"
89+
allowfullscreen=""
90+
></iframe>
91+
<div id="price-box">
92+
<div class="price-1 price-box-style">
93+
<h1 class="price-heading">TENOR TROMBONE</h1>
94+
<h1 class="price">$600</h1>
95+
<p class="price-desc">
96+
Lorem ipsum <br />
97+
Lorem ipsum <br />
98+
Lorem ipsum <br />
99+
Lorem ipsum
100+
</p>
101+
<button type="submit" class="price-button">SELECT</button>
102+
</div>
103+
<div class="price-2 price-box-style">
104+
<h1 class="price-heading">BASE TROMBONE</h1>
105+
<h1 class="price">$900</h1>
106+
<p class="price-desc">
107+
Lorem ipsum <br />
108+
Lorem ipsum <br />
109+
Lorem ipsum <br />
110+
Lorem ipsum
111+
</p>
112+
<button type="submit" class="price-button">SELECT</button>
113+
</div>
114+
<div class="price-3 price-box-style">
115+
<h1 class="price-heading">VALVE TROMBONE</h1>
116+
<h1 class="price">$1200</h1>
117+
<p class="price-desc">
118+
Lorem ipsum <br />
119+
Lorem ipsum <br />
120+
Lorem ipsum <br />
121+
Lorem ipsum
122+
</p>
123+
<button type="submit" class="price-button">SELECT</button>
124+
</div>
125+
</div>
126+
<div class="footer">
127+
128+
<a href="#" class="footer-list">Privacy</a>
129+
<a href="#" class="footer-list">Terms</a>
130+
<a href="#" class="footer-list">Contact</a>
131+
132+
</div>
133+
</div>
134+
</body>
135+
</html>

0 commit comments

Comments
 (0)