Scribd
Upload
9 views3 pages

Task 4

The document provides code for building a basic product landing page with HTML and CSS. The HTML includes sections for the header, features, video, pricing, and footer. The CSS styles these sections and elements, including styles for the navbar, sections, and form. It is designed to be responsive using media queries.

Uploaded by

Muhd Abdullahi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views3 pages

Task 4

The document provides code for building a basic product landing page with HTML and CSS. The HTML includes sections for the header, features, video, pricing, and footer. The CSS styles these sections and elements, including styles for the navbar, sections, and form. It is designed to be responsive using media queries.

Uploaded by

Muhd Abdullahi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

Build a Product Landing Page

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<img src="logo.png" alt="Company Logo" id="header-img">
<nav id="nav-bar">
<a href="#features" class="nav-link">Features</a>
<a href="#video" class="nav-link">Video</a>
<a href="#pricing" class="nav-link">Pricing</a>
</nav>
</header>

<section id="features">
<h2>Features</h2>
<!-- Add features content -->
</section>

<section>
<h2>Product Video</h2>

<div >
<iframe id="video" width="560" height="315"
src="https://www.pexels.com/video/test-tubes-filled-with-chemicals-8325891/
frameborder="0" allowfullscreen></iframe>
</div>

</section>

<section id="pricing">
<h2>Pricing</h2>
<!-- Add pricing information -->
</section>

<footer id="footer">
<form id="form" action="https://www.freecodecamp.com/email-submit"
method="post">
<input type="email" id="email" name="email" placeholder="Enter your email"
required>

<input type="submit" id="submit" value="Submit">


</form>
</footer>
</body>
</html>
CSS:

/* Global styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

/* Header styles */
#header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}

#nav-bar {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
color: white;
padding: 20px;
text-align: center;
z-index: 1000; /* Ensure it's above other content */
}

.nav-link {
color: white;
text-decoration: none;
margin: 0 20px;
}

/* Section styles */
section {
padding: 50px;
}

/* Form styles */
#form {
text-align: center;
margin-top: 50px;
}

#email {
padding: 10px;
width: 250px;
margin-right: 10px;
}

#submit {
padding: 10px 20px;
background-color: #333;
color: white;
border: none;
cursor: pointer;
}

#submit:hover {
background-color: #555;
}

/* Responsive styles */
@media (max-width: 768px) {
#nav-bar {
flex-direction: column;
}

.nav-link {
margin: 10px 0;
}
}

#nav-bar {
display: flex;
justify-content: space-around;
background-color: #333;
color: #fff;
padding: 10px 0;
width: 100%;
position: fixed;
top: 0;
z-index: 1000; /* Ensure the nav-bar is above other content */
}

You might also like