Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Product Landing Page - Freecode Camp Project 2</title>
    <!-- INCLUDE CSS FILES -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/mediaqueries.css">
    <!-- INCLUDE GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Heebo:100|Open+Sans+Condensed:300" rel="stylesheet">
    <!-- Freecode Camp project test script -->
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</head>

<body class="body-container">
    <!-- break down the mockup into 'containers,' use DIVs to differentiate between inner containers -->

    <header id="header">
        <!-- header includes logo, nav element with 3 clickable items -->
        
        <div class="header-logo">
            <!-- ADD THE LOGO HERE -->
            <img id="header-img" src="https://i.ibb.co/5xzxHVm/fcc-lp-logos.png" alt="high school logo">
        </div>

        <section class="top-nav">
            <nav id="nav-bar">
                <!-- ADD NAV LINKS HERE -- 3 of them -->
                <!-- Nav 1, Nav 2, Nav 3 // do they get their own DIVs?-->
                <div class="nav-item">
                    <a class="nav-link" href="#school-service">School Info</a><!--hyperlink to icons--> | <a class="nav-link" href="#about-video">Video</a> <!--hyperlink to embedded video--> | <a class="nav-link" href="#subscribe">Subscribe</a> <!--hyperlink to form-->
                </div>
            </nav>
        </section>

    </header>

    <main class="content">
        <!-- the main content with video, icons, etc. -->

        <div class="hero">
            <!-- ADD HERO IMAGE HERE -->
            <img id="hero-img" src="https://i.ibb.co/2ZDvQLD/hero-upchs.jpg" alt="students smiling">
        </div>
        
        <!-- under the hero, add a section for the 3 icons and video -->
        <a id="school-service"></a>
        <section class="school-info">
            <div class="service-icons">
                <!-- add 3 icons here -->
                <div class="icons">
                    <!--ICON 1 image -->
                    <img class="icon" src="https://i.ibb.co/564hz0N/1.png" alt="graduation cap">
                    <p class="icon-text">Student Life</p>
                </div>
                <div class="icons">
                    <!--ICON 2 image -->
                    <img class="icon" src="https://i.ibb.co/wWP0z3T/2.png" alt="light bulb">
                    <p class="icon-text">Info for Families</p>
                </div>
                <div class="icons">
                    <!-- ICON 3 image -->
                    <img class="icon" src="https://i.ibb.co/z6JSBY7/3.png" alt="apple">
                    <p class="icon-text">Our People</p>
                </div>
            </div>

            <a id="about-video"></a>
            <div class="product-video">
                <!-- EMBED VIDEO  width="640" height="360" -->
                <iframe id="video" src="https://player.vimeo.com/video/224509065" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                <p class="video-text">Source: Uncommon Schools</p>
            </div>
        </section>

        <a id="subscribe"></a>
        <section class="interest-form">
            <!-- ADD FORM HERE -->
            <div class="email-form">
                <form id="form" method="POST" action="https://www.freecodecamp.com/email-submit" target="_blank">
                    <div class="form-text">Sign up to receive email updates about our school.</div>
                    <div class="form-fill">
                        <label for="email">Email</label>
                        <input id="email" name="email" type="email" required placeholder="abc@123.com" >
                    </div>
        
                    <div class="form-button">
                        <input id="submit" name="submit" type="submit">
                        <button>Sign Up</button>
                    </div>
                </form>
            </div>
        </section>
    </main>

    <footer class="footer-container">
        <!-- ADD FOOTER WITH ANNOTATION & SOCIAL ICONS -->
        <div class="footer-box">
            <p class="footer-text">This page is a project for Freecode Camp's Responsive Web Design curriculum, and is not reflective of or endorsed by any known entity.</p>
        </div>

        <div class="footer-social">
            <!-- add social icons here; make background color dark - icons are white -->
            <img class="social-icon" src="https://i.ibb.co/M7vgxGh/icons8-facebook-f-filled-100.png" alt="facebook">
            <img class="social-icon" src="https://i.ibb.co/fN2mhgy/icons8-instagram-filled-100.png" alt="instagram">
            <img class="social-icon" src="https://i.ibb.co/wJg2M2B/icons8-vimeo-filled-100.png" alt="vimeo">
        </div>
    </footer>
    


</body>
</html>
              
            
!

CSS

              
                /* GENERAL STYLING */
/* for Media Queries, see css/mediaqueries.css */

*,
*:before,
*:after {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;

}


.body-container {
    text-align: center;
}




/* keeping top nav in view all times */
#header {
    display: flex;
    width: 100%;
    position: fixed;
    background-color: #fff;
    transition: top 0.3s;
    top: 0;
    /* padding-left: 80px; */
}

/* adding padding to nav menu to keep in view */
.nav-item {
    padding-top: 70px;
    padding-left: 30px;
    padding-bottom: 5px;
    text-align: right;
}

.nav-link:hover {
    color: #008e97;
    font-weight: bold;
}

.nav-link {
    font-size: 12px;
}

/* LOGO SIZE */
#header-img {
    width: 100px;
}

/* ICON SIZE */
.icon {
    width: 150px;
}

/* flex box for icons */
.service-icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icons {
    padding: 30px;
}

/* FOOTER */
.footer-container {
    background: #222;
}

.footer-text {
    color: white;
    padding: 8px 8px 0 8px;
    font-size: 12px;
    font-style: italic;
    font-family: Helvetica, sans-serif;
    text-align: left;
}

.footer-social {
    display: flex;
    align-items: left;
    justify-content: left;
    
}

.social-icon {
    width: 20px;
    padding: 0 0 10px 10px;
    
}

/* EMAIL BLOCK */

.interest-form {
    background-color: #008e97;
}

.form-button:hover{
    background-color: yellow;
}

/* media queries */

@media screen and (max-width:320px) {

    #header-img {
        width: 50px;
    }

    .nav-item {
        padding-top: 20px;
    }

    .nav-link {
        font-size: 10px;
    }

    #hero-img {
        width: 300px;
    }

    .service-icons {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .icon {
        width: 25px;
    }

    .icons {
        padding: 5px;
    }

    .icon-text {
        font-size: 10px;
    }

   .video-text {
       font-size: 10px;
       font-style: italic;
   }

   /* email form */
   .form-text {
    padding: 8px 5px;
   }

   .form-button {
       padding: 8px;
   }

   #submit:hover {
       font-weight: bold;
   }
}

@media screen and (min-width:321px) {

    #header-img {
        width: 100px;
    }

    .nav-item {
        padding-top: 70px;
    }

    .nav-link {
        font-size: 14px;
    }

    #hero-img {
        width: 100%
    }

    .service-icons {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .icon {
        width: 50px;
    }

    .icons {
        padding: 10px;
    }

    .icon-text {
        font-size: 14px;
    }

   .video-text {
       font-size: 14px;
       font-style: italic;
   }

    /* email form */
   .form-text {
    padding: 8px 5px;
   }

   .form-button {
       padding: 8px;
   }

   #submit:hover {
       font-weight: bold;
   }
}

@media screen and (min-width:620px) {

    #header-img {
        width: 120px;
    }

    .nav-item {
        padding-top: 90px;
    }

    .nav-text {
        font-size: 14px;
    }

    #hero-img {
        width: 100%
    }

    .service-icons {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .icon {
        width: 120px;
    }

    .icons {
        padding: 30px;
    }

    .video-text {
       font-size: 14px;
       font-style: italic;
   }

   /* email form */
   .form-text {
    padding: 8px 5px;
   }

   .form-button {
       padding: 8px;
   }

   #submit:hover {
       font-weight: bold;
   }
}
              
            
!

JS

              
                /** fcc_responsive_productlp

# Product Landing Page - freeCode Camp | Responsive Web Design Project #3

The objective of this project was to build a product landing page similar in functionality [to the FCC example](https://codepen.io/freeCodeCamp/pen/eGeoxL). Emphasis of this project was to test HTML and CSS skills as covered in the curriculum.

## TOC
-[How to Use](#how-to-use)
-[Resources](#resources)
-[Dependencies](#dependencies)
-[Project Requirements](#project-requirements)

## How to Use
You can [visit my CodePen app here](https://codepen.io/ginamc/pen/bZKwMK) and play with the landing page. The to navigation is linked to 3 anchors on the page, and the email submission form will take you to a pre-made Freecode Camp page that acts as an indicator that your submission was successful.

## Resources
- [Uncommon Schools video](https://vimeo.com/224509065)
- [Project spec](https://codepen.io/freeCodeCamp/pen/eGeoxL) to create similarly functioning app
- [w3schools](https://www.w3schools.com/), [MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms)

## Dependencies
- Google fonts

## Project Requirements

_From Freecode Camp_
- User Story #1: My product landing page should have a header element with a corresponding id="header".
- User Story #2: I can see an image within the header element with a corresponding id="header-img". A company logo would make a good image here.
- User Story #3: Within the #header element I can see a nav element with a corresponding id="nav-bar".
- User Story #4: I can see at least three clickable elements inside the nav element, each with the class nav-link.
- User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.
- User Story #6: I can watch an embedded product video with id="video".
- User Story #7: My landing page has a form element with a corresponding id="form".
- User Story #8: Within the form, there is an input field with id="email" where I can enter an email address.
- User Story #9: The #email input field should have placeholder te-t to let the - user know what the field is for.
- User Story #10: The #email input field uses HTML5 validation to confirm that the entered te-t is an email address.
- User Story #11: Within the form, there is a submit input with a corresponding id="submit".
- User Story #12: When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit) that confirms the email address was entered and that it posted successfully.
- User Story #13: The navbar should always be at the top of the viewport.
- User Story #14: My product landing page should have at least one media query.
- User Story #15: My product landing page should utilize CSS flexbox at least once. **/
              
            
!
999px

Console