Scribd
Upload
903 views4 pages

Build A Product Landing Page

The document outlines a product landing page with sections for features, a product demo video, and a contact form. It includes HTML structure for the page and CSS styles for layout and design, emphasizing responsiveness and user interaction. Key features highlighted include high quality, ease of use, and 24/7 customer support.

Uploaded by

mayank.bt17
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
903 views4 pages

Build A Product Landing Page

The document outlines a product landing page with sections for features, a product demo video, and a contact form. It includes HTML structure for the page and CSS styles for layout and design, emphasizing responsiveness and user interaction. Key features highlighted include high quality, ease of use, and 24/7 customer support.

Uploaded by

mayank.bt17
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/ 4

** start of undefined **

<!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 id="header-img" src="https://via.placeholder.com/150" alt="Product
Logo">
<nav id="nav-bar">
<a class="nav-link" href="#features">Features</a>
<a class="nav-link" href="#video-section">Video</a>
<a class="nav-link" href="#contact">Contact</a>
</nav>
</header>

<main>
<!-- Features Section -->
<section id="features">
<h2>Our Features</h2>
<p>Discover the amazing features of our product that makes it stand
out.</p>
<ul>
<li>✔️ High Quality and Affordable</li>
<li>✔️ Easy to Use and Durable</li>
<li>✔️ 24/7 Customer Support</li>
</ul>
</section>

<!-- Video Section -->


<section id="video-section">
<h2>Product Demo</h2>
<iframe id="video" width="560" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0"
allowfullscreen></iframe>
</section>

<!-- Contact Section -->


<section id="contact">
<h2>Contact Us</h2>
<p>Have questions? Get in touch with us!</p>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" type="email" name="email" placeholder="Enter your
email" required>
<input id="submit" type="submit" value="Subscribe">
</form>
</section>
</main>

</body>
</html>
** end of undefined **

** start of undefined **

/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
color: #333;
}

/* Header */
header {
display: flex;
justify-content: space-between;
align-items: center;
background: #0073e6;
padding: 20px;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
}

#header-img {
width: 80px;
height: auto;
}

#nav-bar {
display: flex;
gap: 20px;
}

.nav-link {
color: white;
text-decoration: none;
font-weight: bold;
padding: 10px;
transition: color 0.3s;
}

.nav-link:hover {
color: #ffcc00;
}

/* Main Content */
main {
padding-top: 80px;
text-align: center;
}

section {
padding: 50px 20px;
max-width: 800px;
margin: 0 auto;
background: white;
margin-top: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* Video Section */
#video {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
}

/* Contact Form */
#contact form {
display: flex;
flex-direction: column;
align-items: center;
}

#email {
padding: 10px;
width: 80%;
max-width: 400px;
border: 2px solid #0073e6;
border-radius: 5px;
margin-bottom: 10px;
}

#submit {
background: #0073e6;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
transition: background 0.3s;
}

#submit:hover {
background: #005bb5;
}

/* Responsive Design */
@media (max-width: 768px) {
header {
flex-direction: column;
text-align: center;
}

#nav-bar {
flex-direction: column;
gap: 10px;
}

section {
padding: 30px;
}
}

** end of undefined **

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy