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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <body>
    <div id="home" class="page-wrapper">
        <div id="header-background"></div>
        <div class="header-wrapper">
            <header id="header" class="flex-mod">
                <div id="header-logo" class="flex-mod">
                    <a href="#home"><img src="https://lh3.googleusercontent.com/rdoKoMPvSuqu4rnaY1_UN7hrCQXjjk3sD15YRQJZoocxGNNdKmHnULv-JHi8z79gIxHF5tu1r65ytXwEfAOGHEZ0xcq3yBJ7wsy-vUcf701m8uTv2pqD_ibfp8UEeLrJ_yRBE_N_GQ=w2400?source=screenshot.guru" alt="logo" id="header-img"></a>
                    <h1><a href="#home">Focal Audio</a></h1>
                </div>
                <nav id="nav-bar">
                        <input type="checkbox" id="drop-down" tabindex="1" aria-label="Menu">
                        <label id="nav-label" for="drop-down"><i class="fas fa-bars"></i></label>
                    <ul id="nav-list-mobile" class="grid">
                        <li><a class="nav-link" href="#features">Features</a></li>
                        <li><a class="nav-link" href="#pricing">Pricing</a></li>
                        <li><a class="nav-link" href="#hero-cta">Discount</a></li>
                    </ul> 
                    <!-- last list is #features. Change to features -->
                    <div class="column-mod">
                        <ul class="nav-list-big flex-col-mod">
                            <li><a class="nav-link" href="#features">Features</a></li>
                            <li><a class="nav-link" href="#pricing">Pricing</a></li>
                            <li><a class="nav-link" href="#hero-cta">Discount</a></li>
                        </ul>
                    </div>
                </nav>
            </header>
        </div>
        <main>
            <section id="features">
                <div id="features-text">
                    <h2>Formula Focus</h2>
                    <ul id="features-list">
                        <li><i class="fas fa-battery-full"></i></li>
                        <li><i class="fas fa-truck"></i></li>
                        <li><i class="fas fa-fire"></i></li>
                        <li>Quality</li>
                        <li>Next day delivery</li>
                        <li>High quality materials</li>
                    </ul>
                    <p>The new set of headphones from Focal Audio</p>
                    <p>We test all of our equipment in rigorous conditions with expert advice from audio experts from around the world. Our legacy is quality and we always over deliver. Our Formula Focus headset has made huge technological strides. Here are 5 highlights</p>
                    <ul>
                        <li>Supreme comfort for longer lasting listening. Our Ear pads have special air pockets that make the listener almost forget that they're wearing headphones.</li>
                        <li>The frequency spectrums are completely neutral for the most true and raw listening experience. You can however apply frequency color via our state of the art app</li>
                        <li>Powerful noise cancelling technology that can be turned on or off at the switch of a button.</li>
                        <li>Hand picked materials, specially chosen for strength and light weight qualities. Our materials our sourced responsibly</li>
                        <li>We build products to last a lifetime. We are so confident in our product that we offer a 25 year guarantee</li>
                    </ul>
                <p>People might give you strange looks in the street though.</p>
                </div>
                <div class="video-container">
                    <iframe title="Title of Video" src="https://www.youtube.com/embed/tXo52-_Zv04?rel=0&amp;controls=1&amp;showinfo=0" frameborder="0" id="video"></iframe>
                </div>
                </section>
            <section id="background">
                <div class="alert-container">
                    <div id="animation" class="alert">
                        <h2>Discounts available for a limited time only</h2>
                        <p>At Focal audio we pride ourselves on our attention to detail and the ability to offer our customers great value for money.</p>
                        <p>For a limited time only we will be offering a whopping discount of 20%! All you need to do is sign up for our newsletter.</p>
                        <p>Do you want to sign up?</p>
                        <p><a id="yes-please" href="#hero-cta">Yes, I need an audio treat</a></p>
                        <p><a id="no-thanks" href="#features">Hmm, maybe, but I'd like to know more...</a></p>
                    </div>
                </div>
            </section>

            <div id="alert-cta-break"></div>
            <section id="hero-cta" class="cta-wrapper">
                <h2 id="cta-pitch" class="cta-text cta-wrapper">Using state of the art technology to produce the most sonically rich experience for a life time</h2>
                <form action="https://www.freecodecamp.com/email-submit" id="form" class="cta-wrapper">
                    <fieldset>
                        <legend>Email</legend>
                        <p class="cta-text cta-wrapper">Sign up <strong>NOW</strong> for a 20% discount on the upcoming release. Just enter your email address below!</p>
                        <input name="email"
                               type="email"
                               inputmode="email"
                               id="email"
                               class="cta-wrapper"
                               placeholder="Enter your email address"
                               required>
                        <input type="submit"
                               class="cta-wrapper"
                               id="submit">
                    </fieldset>
                </form>
            </section>
            <div id="cta-features-break"></div>
            
            <section id="pricing">
                <div id="pricing-div">
                    <div id="pricing-header">
                        <h2>Pricing</h2>
                        <p>not including 20% discount</p>
                        <p>Remember to sign up for your 10% discount, we just need your email address!</p>
                    </div>
                    <div>
                        <h3>Product 1</h3>
                        <p>Cost: £449</p>
                        <p>Description: Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos nam animi eius, optio nemo repellat cum velit possimus! Modi doloribus eaque quaerat. Vel molestiae consectetur ab ducimus alias quis quibusdam ratione repellendus atque dolorem earum nostrum eligendi mollitia eos a sed voluptates velit perspiciatis ipsum itaque, tenetur amet laborum. Et!</p>
                    </div>
                    <div>
                        <h3>Product 2</h3>
                        <p>Cost: £549</p>
                        <p>Description: Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos nam animi eius, optio nemo repellat cum velit possimus! Modi doloribus eaque quaerat. Vel molestiae consectetur ab ducimus alias quis quibusdam ratione repellendus atque dolorem earum nostrum eligendi mollitia eos a sed voluptates velit perspiciatis ipsum itaque, tenetur amet laborum. Et!</p>
                    </div>
                    <div>
                        <h3>Product 3</h3>
                        <p>Cost: £649</p>
                        <p>Description: Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos nam animi eius, optio nemo repellat cum velit possimus! Modi doloribus eaque quaerat. Vel molestiae consectetur ab ducimus alias quis quibusdam ratione repellendus atque dolorem earum nostrum eligendi mollitia eos a sed voluptates velit perspiciatis ipsum itaque, tenetur amet laborum. Et!</p>
                    </div>
                </div>
            </section>

        </main>
        <footer>
            <p>Address - 42 Meaning of Life Manor, Still Dreaming Boulevard, NE30 4AB</p>
            <p>Copyright L. Codemeister Web Design</p>
        </footer>
    </div>
    <script src="app.js"></script>
</body>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Della+Respira&family=Raleway:wght@400;600&display=swap');

/* Fonts

font-family: 'Oleo Script Swash Caps', cursive;
font-family: 'Della Respira', serif;
font-family: 'Raleway', sans-serif;

*/

/* Background image link of headphone set
https://images.unsplash.com/photo-1524678606370-a47ad25cb82a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1769&q=80
*/

/* Use link below for colours

https://images.unsplash.com/photo-1515133997814-e6460be24073?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1171&q=80

    Background 1 Off white - rgba(201,208,216,255)
    Background 2 blueish - rgba(192,163,195,255)
    Font color dark blue/grey rgba(11,42,72,255)
*/



:root {
    --color-off-white: rgba(201,208,216,255);
    --color-blue: rgba(192,163,195,255);
    --color-dark-blue: rgba(11,42,72,255);
    --shadow-standard: 0em 0em 0.5em -.1em black;
}

html {
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

body {
    margin: 0;
    font-size: 13px;
}

body::before {
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-image: linear-gradient(
        180deg,
        rgba(201, 208, 216, 0.90),
        rgba(11, 42, 72, 0.9)
    ),
    url(https://images.unsplash.com/photo-1524678606370-a47ad25cb82a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1769&q=80);
    background-size: cover;
    background-repeat: none;
    background-position: 50% 5em;
}

.page-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto
}

.header-wrapper {
    background: linear-gradient(120deg,#008080,#00FFFF);
    width: 100%;
}

#header {
    width: 100%;
    border: 2px solid black;
    background: linear-gradient(120deg,#008080,#00FFFF);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

#header-img {
    display: block;
    width: 100%;
    max-width: 120px;
    height: auto;
    margin: 0.5em auto 0 auto;
}

#header-logo h1 {
    font-size: 1.5em;
    font-family: 'Oleo Script Swash Caps', cursive;
    text-align: center;
    height: fit-content;
    margin: 0.5em 0 0.5em -1px;
    letter-spacing: 0.15em;
}

#header-logo a {
    color: black;
    cursor: pointer;
}

/* flex-mod occurs two times in css here and in media queries, changing elements from column to row.*/

.flex-mod {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
}

/* column-mod occurs two times in css, here and in media queries, changing elements from off to on */

.column-mod {
    display: none;
}

.flex-col-mod {
    display: none;
}

#drop-down {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

#nav-bar {
    /* margin-right: 4em; */
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: auto;
    margin: 0 auto;
}

#nav-label {
    display: block;
    width: 3em;
    max-width: 150px;
    cursor: pointer;
    margin: 0 auto 0 auto;
    background: linear-gradient(120deg,#008080,#002255);
    border: 2px solid grey;
    border-radius: 20%;
    color: #FFF;
    transition: ease .5s;
    text-align: center;
    font-size: 2em;
}

#nav-label:hover {
    background: linear-gradient(120deg,#467ca7,#babfd2);
    transition: 0.5s;
}

#nav-list-mobile{
    position: absolute;
    background: linear-gradient(120deg,rgba(70, 124, 167),rgba(186, 191, 210));
    border: 2px solid blanchedalmond;
    border-radius: 3px;
    list-style: none;
    width: 100%;
    max-width: 150px;
    font-size: 1.2em;
    padding-left: 0;
    text-align: center;
}

#nav-list-mobile li {
    padding: .5em;
}

#nav-list-mobileli+li {
    margin-top: 0.6em;
}

#drop-down + #nav-label + #nav-list-mobile{
    display: none;
}

#drop-down:checked + #nav-label + #nav-list-mobile{
    display: block;
    margin-top: 3.5em;
}

#nav-list-big {
    display: none;
}


.alert-container {
    padding-top: 2em;
    display: flex;
    place-content: center center;
}

/* Centering the alert - As there was no fixed width, centering this turned out to be more challenging than expected. For two reasons. Height was defaulting to full, which meant content didn't center as expected.

The following code helped

    .parent {
    position: relative;

    .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: min-content!important;
    }
*/

#animation {    
    width: 70%;
    max-width: 600px;
    margin: 15em auto 0 auto;
    height: fit-content!important;
    padding: 2em;
}

.alert {
    text-align: center;
    background-color: var(--color-off-white);
    border: solid black 1px;
    box-shadow: 0em 0em 0.5em -.1em black;
}

/* Section CTA */

#hero-cta {
    margin-top: 0em;
    padding-top: 2em;
    margin-bottom: -12em;
    scroll-margin-top: 110px;
}

.cta-wrapper {
    width: 80%;
    max-width: 500px;
    margin: 0.4em auto;
}

.cta-text {
    text-align: center;
    border: #002255 solid 2px;
    background-color: var(--color-dark-blue);
    color: var(--color-off-white);
    box-shadow: 0em 0em 0.5em -.1em black;
    font-size: 1.1rem;
    padding: .5em;
}

#cta-pitch {
    line-height: 1.3em;
    font-size: 1.5rem;
}

#form {
    margin-top: 3em;
}

#form fieldset {
    font-weight: 800;   
    text-align: center;
}

#email {
    display: block;
    text-align: center;
    width: 70%;
    max-width: 500px;
    margin: 1em auto;
}

#submit {
    display: block;
    width: 30%;
    max-width: 200px;
    margin: 1em auto;
}

input::placeholder {
    text-align: center;
}

#cta-features-break {
    width: 100%;
    height: 10px;
    padding: 7em;
}

#features {
    width: 90%;
    max-width: 800px;
    margin: 18rem auto 0 auto;
    background-color: var(--color-off-white);
    border: solid black 1px;
    box-shadow: 0em 0em 0.5em -.1em black;
    scroll-margin-top: 17em;
}

#features-text {
    text-align: center;
    width: 80%;
    max-width: 800px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
}


#features-text ul {
    list-style: none;
    padding: 1em;

}
#features-text li {
    margin-top: 1em;
}

#features-list {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    border: 3px solid black;
    place-content: center center;
}

/* https://faq.dailymotion.com/hc/en-us/articles/360022841393-How-to-preserve-the-player-aspect-ratio-on-a-responsive-page 

features is grandparent. with width 90% and max-width 800px along with margin 0 auto. Video container set to relative with padding bottom of 56.25%, video set to absolute with standard top, left, width and height.

*/

.video-container {
    position: relative;
    border: 3px solid black;
    padding-bottom: 56.25%;
    margin: 2em auto 5em auto;
    width: 100%;
}

#video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

iframe {
border: 0;
}

/* task to move the alert /#background closer to the feature sections */

#background {
    margin-top: -15em;
}

#pricing {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0em 0em 0.5em -.1em black;
    padding: .7em;
    background-color: var(--color-off-white);
    place-content: center center;
    scroll-margin-top: 280px;
}

#pricing-div {
    display: grid;
    grid-template-columns: 1fr;
}


#pricing-header {
    text-align: center;
}

footer {
    position: absolute;
    left: 0em;
    margin-top: 3em;
    margin-bottom: 3em;
    background-color: var(--color-off-white);
    width: 100%;
    text-align: center;
}

footer p {
    padding: .6em 0 .6em 0;
}

i {
    font-size: 2em;
}

/* Media Queries */

@media(min-width:400px) {

    body {
        font-size: 16px;
    }
    
    .alert-container{
        margin-bottom: 0;
    }

    #hero-cta {
        margin-top: 0;
        margin-bottom: -17em;
        padding-bottom: 5em;
    }

}

@media (min-width:730px) {    

    body {
        font-size: 16px;
    }

    #background {
        margin-top: -10em;
        margin-bottom: 3em;
    }

    #hero-cta {
        padding-top: 7em;
        margin-top: -6em;
        margin-bottom: -10em;
        scroll-margin-top: 4em; 
    }

    #features {
        margin-top: 10em;
        height: fit-content;
        scroll-margin-top: 10em;
    }
    #features-text {
        padding-top: 0;
    }

    .off_on {
        display: initial;
    }

    .flex-mod {
        flex-direction: row;
    }

    .column-mod {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4em;
        width: 80%;
        margin: 0 auto;
    }

    /* change all features items and descendents to features */

    .flex-col-mod{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-left: 0;
    }

    /* I want to divide the two ul lists with a class of .row-mod into two rows. The lists are stuck together on one line. I have tried using grid-auto-flow and also grid-template-rows at values 1fr 1fr.  */

    body::before {
        background-position: 50% 40%;
    }

    #header-img {
        padding-bottom: 0.8em;
    }

    #header-logo h1 {
        align-self: center;
    }

    #nav-label, #nav-list-mobile{
        display: none;
        visibility: hidden;
    }

    .nav-list-big {
        display: flex;
        list-style: none;
        font-size: 1.4em;
        align-items: center;
        margin: 0 auto;
        width: 90%;
    }
    #nav-list-big li {
        margin: 0 6vw 0 auto;
        height: fit-content;
    }

    /* #nav-list-big li+li {
        margin-left: 10vw;
    } */
    #header-img {
        margin: 1em auto 0 1em;
    }
    
    #header-logo h1 {
        margin: 1em auto 1em 1em;
    }

    #pricing {
        scroll-margin-top: 10em;
    }

}

@media (min-width:1000px) {
    .nav-list-big {
        font-size: 2em;
    }

    #features {
        margin-top: 13em;
    }
}
              
            
!

JS

              
                const lab = document.getElementById('nav-label');
const li = document.getElementById('nav-list-mobile');

li.addEventListener('click', e => {
    li.style.visibility = 'hidden';
})
lab.addEventListener('click', e => {
    li.style.visibility = 'visible';
})
              
            
!
999px

Console