Scribd Logo
Upload

Welcome to Scribd!

  • Task 4

    Uploaded by

    Muhd Abdullahi
    3 views3 pages
    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.

    Original Description:

    Guide 4

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    3 views3 pages

    Task 4

    Uploaded by

    Muhd Abdullahi
    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.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 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