Skip to content

Commit a187004

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request Dezenix#318 from AmolShelke2/nike
Product Landing page added.
2 parents 1add5f8 + e9a8e36 commit a187004

File tree

4 files changed

+419
-0
lines changed

4 files changed

+419
-0
lines changed

‎Product_landing/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
## Tech Stacks Used
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/>
5+
6+
## Preview.
7+
8+
<img src="./productLanding.png">

‎Product_landing/index.html

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
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
8+
rel="stylesheet"
9+
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
10+
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
11+
crossorigin="anonymous"
12+
/>
13+
<link rel="stylesheet" href="style.css" />
14+
<title>Product Landing Page</title>
15+
</head>
16+
<body>
17+
<div class="container">
18+
<!-- header section starts -->
19+
20+
<header id="header">
21+
<!-- The logo of the page -->
22+
<div class="logo">
23+
<img
24+
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
25+
alt="Trombones Logo"
26+
id="header-img"
27+
/>
28+
</div>
29+
30+
<!-- nav section starts here -->
31+
<nav id="nav-bar">
32+
<ul>
33+
<li><a href="#features" class="nav-link">Features</a></li>
34+
<li><a href="#How-it-works" class="nav-link">work's</a></li>
35+
<li><a href="#pricing" class="nav-link">Pricing</a></li>
36+
</ul>
37+
</nav>
38+
</header>
39+
<!-- header and nav section ends -->
40+
41+
<!-- The form section starts -->
42+
<section id="form">
43+
<h2>Handcrafted, home-made masterpieces</h2>
44+
<form action="https://www.freecodecamp.com/email-submit" id="form">
45+
<input
46+
type="email"
47+
id="email"
48+
placeholder="Enter Your Email address"
49+
required
50+
/>
51+
<input type="submit" id="submit" value="Get started" class="btn" />
52+
</form>
53+
</section>
54+
55+
<!-- Feature section starts -->
56+
<section id="features">
57+
<div class="grid">
58+
<div class="icon"><i class="fa fa-3x fa-fire"></i></div>
59+
<div class="text">
60+
<h2 class="heading">Premium materials</h2>
61+
<p>
62+
Our trombones use the shiniest brass which is sourced <br />
63+
This will increase the longevity of your purchase.
64+
</p>
65+
</div>
66+
</div>
67+
68+
<div class="grid">
69+
<div class="icon"><i class="fa fa-3x fa-truck"></i></div>
70+
<div class="text">
71+
<h2 class="heading">Fast shipping</h2>
72+
<p>
73+
We make sure you recieve your trombone as soon as we have finished
74+
making <br />
75+
We also provide free returns if you are not satisfied.
76+
</p>
77+
</div>
78+
</div>
79+
80+
<div class="grid">
81+
<div class="icon"><i class="fa fa-3x fa-battery-full"></i></div>
82+
<div class="text">
83+
<h2 class="heading">Quality Assurance</h2>
84+
<p>
85+
For every purchase you make, we will ensure there are no damages
86+
<br />
87+
or faults and we will check and test the pitch of your instrument.
88+
</p>
89+
</div>
90+
</div>
91+
</section>
92+
<!-- Feature section ends -->
93+
94+
<!-- how it works section starts here -->
95+
<section id="How-it-works">
96+
<iframe
97+
src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"
98+
frameborder="0"
99+
allowfullscreen
100+
id="video"
101+
height="315"
102+
width="600"
103+
></iframe>
104+
</section>
105+
<!-- how it works section ends -->
106+
107+
<!-- Pricing section starts here -->
108+
<section id="pricing">
109+
<!-- Tenor Trumbone pricing -->
110+
<div class="product" id="tenor">
111+
<div class="level">Tenor Trambone</div>
112+
<h2>$600</h2>
113+
<ol>
114+
<li>Lorem, ipsum.</li>
115+
<li>Lorem, ipsum.</li>
116+
<li>Lorem, ipsum dolor.</li>
117+
<li>Lorem, ipsum.</li>
118+
</ol>
119+
<!-- Selcet button -->
120+
<button class="btn">Select</button>
121+
</div>
122+
123+
<!-- Valve tumbone pricing -->
124+
<div class="product" id="valve">
125+
<div class="level">Valve Trombone</div>
126+
<h2>$1200</h2>
127+
<ol>
128+
<li>Lorem, ipsum.</li>
129+
<li>Lorem, ipsum.</li>
130+
<li>Lorem, ipsum dolor.</li>
131+
<li>Lorem, ipsum.</li>
132+
</ol>
133+
<!-- Selcet button -->
134+
<button class="btn">Select</button>
135+
</div>
136+
137+
<div class="product" id="bass">
138+
<div class="level">Bass Trombone</div>
139+
<h2>$900</h2>
140+
<ol>
141+
<li>Lorem, ipsum.</li>
142+
<li>Lorem, ipsum.</li>
143+
<li>Lorem, ipsum dolor.</li>
144+
<li>Lorem, ipsum.</li>
145+
</ol>
146+
<!-- Selcet button -->
147+
<button class="btn">Select</button>
148+
</div>
149+
</section>
150+
<!-- Pricing Section ends here -->
151+
152+
<!-- Footer section starts here -->
153+
<footer>
154+
<ul>
155+
<li><a href="#">Privacy</a></li>
156+
<li><a href="#">Terms</a></li>
157+
<li><a href="#">Contact</a></li>
158+
</ul>
159+
<span>copyright 2021, Amol Shelke</span>
160+
</footer>
161+
<!-- footer section ends -->
162+
</div>
163+
</body>
164+
</html>

‎Product_landing/productLanding.png

309 KB
Loading

0 commit comments

Comments
 (0)