Skip to content

Commit 0ced756

Browse files
NarendraKoya999NarendraKoya999
authored
Added HTML and CSS Files
Designed Product Landing Page using HTML and CSS with Included Responsive Web Design
1 parent aed9a2d commit 0ced756

2 files changed

Lines changed: 356 additions & 0 deletions

File tree

‎Build a Product Landing Page/index.html‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Product Landing Page</title>
8+
<link rel="stylesheet" href="styles.css">
9+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
10+
integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
11+
</head>
12+
13+
<body>
14+
15+
<header id="header">
16+
<div class="logo">
17+
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
18+
alt="logo">
19+
</div>
20+
21+
<div id="menu-icon"></div>
22+
23+
<nav id="nav-bar">
24+
<ul>
25+
<li><a class="nav-link" href="#features">Features</a></li>
26+
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
27+
<li><a class="nav-link" href="#pricing">Pricing</a></li>
28+
</ul>
29+
</nav>
30+
</header>
31+
32+
<section id="hero">
33+
<h2>Handcrafted, home-made masterpieces</h2>
34+
<form id="form" action="https://www.freecodecamp.com/email-submit">
35+
<input type="email" id="email" name="email" placeholder="Enter your email address">
36+
<input type="submit" id="submit" value="Get Started">
37+
</form>
38+
</section>
39+
40+
<section id="features">
41+
<div class="feature">
42+
<i class="fas fa-3x fa-fire"></i>
43+
<h3>Premium Materials</h3>
44+
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your
45+
purchase.</p>
46+
</div>
47+
48+
<div class="feature">
49+
<i class="fas fa-3x fa-truck"></i>
50+
<h3>Fast Shipping</h3>
51+
<p>We make sure you receive your trombone as soon as we have finished making it. We also provide free
52+
returns if you are not satisfied.</p>
53+
</div>
54+
55+
<div class="feature">
56+
<i class="fas fa-3x fa-battery-full"></i>
57+
<h3>Quality Assurance</h3>
58+
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the
59+
pitch of your instrument.</p>
60+
</div>
61+
</section>
62+
63+
<section id="how-it-works">
64+
<iframe id="video" height="315"
65+
src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0"
66+
allowfullscreen></iframe>
67+
</section>
68+
69+
<section id="pricing">
70+
<div class="product" id="tenor">
71+
<div class="level">Tenor Trombone</div>
72+
<h2>$600</h2>
73+
<ol>
74+
<li>Lorem ipsum.</li>
75+
<li>Lorem ipsum.</li>
76+
<li>Lorem ipsum dolor.</li>
77+
<li>Lorem ipsum.</li>
78+
</ol>
79+
<button class="btn">Select</button>
80+
</div>
81+
82+
<div class="product" id="bass">
83+
<div class="level">Bass Trombone</div>
84+
<h2>$900</h2>
85+
<ol>
86+
<li>Lorem ipsum.</li>
87+
<li>Lorem ipsum.</li>
88+
<li>Lorem ipsum dolor.</li>
89+
<li>Lorem ipsum.</li>
90+
</ol>
91+
92+
<button class="btn">Select</button>
93+
</div>
94+
95+
<div class="product" id="valve">
96+
<div class="level">Valve Trombone</div>
97+
<h2>$1200</h2>
98+
<ol>
99+
<li>Lorem ipsum.</li>
100+
<li>Lorem ipsum.</li>
101+
<li>Lorem ipsum dolor.</li>
102+
<li>Lorem ipsum.</li>
103+
</ol>
104+
105+
<button class="btn">Select</button>
106+
</div>
107+
</section>
108+
109+
<footer>
110+
<ul>
111+
<li><a href="#">Privacy</a></li>
112+
<li><a href="#">Terms</a></li>
113+
<li><a href="#">Contact</a></li>
114+
</ul>
115+
</footer>
116+
117+
<script>
118+
document.addEventListener('DOMContentLoaded', function () {
119+
var menuIcon = document.getElementById('menu-icon');
120+
var navBar = document.getElementById('nav-bar');
121+
122+
menuIcon.addEventListener('click', function () {
123+
navBar.classList.toggle('active');
124+
});
125+
});
126+
</script>
127+
128+
</body>
129+
130+
</html>

‎Build a Product Landing Page/styles.css‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
/* Reset some default styles */
2+
body,
3+
h1,
4+
h2,
5+
h3,
6+
p,
7+
ul,
8+
li {
9+
margin: 0;
10+
padding: 0;
11+
}
12+
13+
body {
14+
font-family: 'Arial', sans-serif;
15+
line-height: 1.6;
16+
}
17+
18+
/* Global Styles */
19+
body {
20+
background-color: #f4f4f4;
21+
color: #333;
22+
}
23+
24+
/* Header Styles */
25+
#header {
26+
background-color: #333;
27+
color: #fff;
28+
padding: 20px 0;
29+
display: flex;
30+
justify-content: space-around;
31+
align-items: center;
32+
}
33+
34+
.logo img {
35+
max-width: 100%;
36+
height: auto;
37+
}
38+
39+
#nav-bar ul {
40+
list-style: none;
41+
display: flex;
42+
flex-direction: column;
43+
align-items: center;
44+
gap: 15px;
45+
}
46+
47+
#nav-bar li {
48+
margin-right: 20px;
49+
}
50+
51+
#nav-bar a {
52+
text-decoration: none;
53+
color: #fff;
54+
font-weight: bold;
55+
font-size: 16px;
56+
transition: color 0.3s ease-in-out;
57+
}
58+
59+
#nav-bar a:hover {
60+
color: #ffd700; /* Change to your preferred hover color */
61+
}
62+
63+
/* Hero Section Styles */
64+
#hero {
65+
background-color: #333;
66+
text-align: center;
67+
color: #fff;
68+
padding: 80px 0;
69+
}
70+
71+
#form {
72+
margin-top: 20px;
73+
}
74+
75+
#email {
76+
padding: 10px;
77+
width: 70%;
78+
border: none;
79+
border-radius: 4px;
80+
margin-right: 10px;
81+
}
82+
83+
#submit {
84+
padding: 10px 20px;
85+
background-color: #ffd700; /* Change to your preferred button color */
86+
color: #333;
87+
border: none;
88+
border-radius: 4px;
89+
cursor: pointer;
90+
}
91+
92+
#submit:hover {
93+
background-color: #ffc107; /* Change to your preferred hover color */
94+
}
95+
96+
/* Features Section Styles */
97+
#features {
98+
background-color: #fff;
99+
padding: 80px 0;
100+
}
101+
102+
.feature {
103+
text-align: center;
104+
margin-bottom: 40px;
105+
}
106+
107+
.feature i {
108+
color: #ffd700; /* Change to your preferred icon color */
109+
font-size: 36px;
110+
margin-bottom: 20px;
111+
}
112+
113+
/* How It Works Section Styles */
114+
#how-it-works {
115+
text-align: center;
116+
padding: 80px 0;
117+
}
118+
119+
#video {
120+
width: 100%;
121+
}
122+
123+
/* Pricing Section Styles */
124+
#pricing {
125+
background-color: #333;
126+
color: #fff;
127+
padding: 80px 0;
128+
display: flex;
129+
justify-content: space-around;
130+
}
131+
132+
.product {
133+
text-align: center;
134+
padding: 40px;
135+
border: 2px solid #fff;
136+
border-radius: 8px;
137+
width: 30%;
138+
margin: 10px;
139+
}
140+
141+
.product h2 {
142+
color: #ffd700; /* Change to your preferred heading color */
143+
margin-top: 20px;
144+
}
145+
146+
.product ol {
147+
list-style: none;
148+
padding: 0;
149+
}
150+
151+
.product li {
152+
margin-bottom: 15px;
153+
}
154+
155+
.btn {
156+
padding: 10px 20px;
157+
background-color: #ffd700; /* Change to your preferred button color */
158+
color: #333;
159+
border: none;
160+
border-radius: 4px;
161+
cursor: pointer;
162+
}
163+
164+
.btn:hover {
165+
background-color: #ffc107; /* Change to your preferred hover color */
166+
}
167+
168+
/* Footer Styles */
169+
footer {
170+
background-color: #333;
171+
color: #fff;
172+
padding: 20px 0;
173+
text-align: center;
174+
}
175+
176+
footer ul {
177+
list-style: none;
178+
}
179+
180+
footer li {
181+
display: inline-block;
182+
margin-right: 20px;
183+
}
184+
185+
footer a {
186+
text-decoration: none;
187+
color: #fff;
188+
transition: color 0.3s ease-in-out;
189+
}
190+
191+
footer a:hover {
192+
color: #ffd700; /* Change to your preferred hover color */
193+
}
194+
195+
/* Add this style for the hamburger menu icon */
196+
#menu-icon {
197+
display: none;
198+
cursor: pointer;
199+
font-size: 24px;
200+
}
201+
202+
/* Media Queries for Responsive Design */
203+
@media only screen and (max-width: 768px) {
204+
/* Adjust styles for smaller screens */
205+
#nav-bar {
206+
flex-direction: column;
207+
align-items: center;
208+
display: none; /* Hide the navigation menu by default */
209+
}
210+
211+
#nav-bar.active {
212+
display: flex; /* Show the navigation menu when active class is added */
213+
}
214+
215+
#menu-icon {
216+
display: block; /* Show the hamburger menu icon */
217+
}
218+
219+
#menu-icon:hover {
220+
color: #ffd700; /* Change to your preferred hover color */
221+
}
222+
223+
#menu-icon:before {
224+
content: '\2630'; /* Unicode character for the hamburger icon */
225+
}
226+
}

0 commit comments

Comments
 (0)