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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <header id="header">
  <div class="container">
                <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/bakery-logo.jpg" id="header-img" alt="bakery-logo.jpg" height=100px>
                <nav id="nav-bar">
                    <ul>
                        <li><a href="#home" class="nav-link">Home</a></li>
                        <li><a href="#bakery" class="nav-link">Bakery</a></li>
                        <li><a href="#sandwiches" class="nav-link">sandwiches</a></li>
                        <li><a href="#about" class="nav-link">About</a></li>
                    </ul>  
                <nav>
            </div>
        </header>

        <div id="home">

            <h1>Scornovacca's Bakery</h1>

            <p>Family owned and operated local Italian bakery in the heart of South Des Moines. Homemade Italian Breads, Love drops, Pasta Sauce, Wanda’s and more! We also have an assortment of Iowa Products randing from jams, honey, bbq sauce, soups, etc. Come check out our location on SW 9th street!</p>

            <br>

            <p style="text-align: center;">Mon-Tue: Closed</p>
            <p style="text-align: center;">Sun: 8am-2pm</p>
            <p style="text-align: center;">Wed-Sat: 8am-4pm</p>
            <br>
            <p style="text-align: center;"><a href="https://www.toasttab.com/scornovaccas-bakery-2920-sw-9th-st/v3/?mode=fulfillment" target="_blank">Order Now!</a></p>

            <div id="home-images">
                <img class="home-img hide-img" src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/outside.jpg" alt="outside.jpg">
                <img class="home-img center-img" src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/shelf.jpg" alt="shelf.jpg">
                <img class="home-img hide-img" src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/peppermint-drops.jpg" alt="peppermint-drops.jpg">
            </div>

           <iframe id="map" src="https://www.google.com/maps/embed?origin=mfe&pb=!1m3!2m1!1s41.55869958021052,-93.62587420961721!6i15"></iframe>
        
         
        </div>

        <div id="bakery">

            <h2>Bakery</h2>

            <h3>Fresh Daily! Homemade Italian Breads</h3>

            <div class="menu-container">
                <div class="menu-item">
                    <h4>Crispy Bread<h4>
                    <p class="price">$3.50<p>
                    <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/crispy-bread.jpg" alt="crispy-bread.jpg">
                </div>
                <div class="menu-item">
                    <h4>Italian Bread<h4>
                    <p class="price">$3.50<p>
                        <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/italian-bread.jpg" alt="italian-bread.jpg">
                </div>
                <div class="menu-item">
                    <h4>Baked Mushroom Bread<h4>
                    <p class="price">Half $6 Full $10<p>
                    <p class="description">Diagonally sliced homemade Italian loaf stuffed with mushrooms, Swiss cheese and topped with a blend of our special seasonings.</p>
                </div>
                <div class="menu-item">
                    <h4>Pepperoni Bread<h4>
                    <p class="price">$5<p>
                    <p class="description">Diagonally sliced homemade Italian loaf stuffed with mushrooms, Swiss cheese and topped with a blend of our special seasonings.</p>
                </div>
            </div>

            <h3>Saturdays (9AM to 1PM)</h3>

            <div class="menu-container">
                <div class="menu-item">
                    <h4>Veggie slice of Breakfast Pizza<h4>
                    <p class="price">$3<p>
                    <p class="description">Scrambled eggs, roasted sweet peppers, onions, green peppers, and cheese blend</p>
                </div>
                <div class="menu-item">
                    <h4>Sausage slice of Breakfast Pizza<h4>
                    <p class="price">$3<p>
                    <p class="description">Scrambled eggs, homemade Italian sausage and cheese blend</p>
                    <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/pizza.jpg" alt="pizza.jpg">
                </div>
                <div class="menu-item">
                    <h4>Bacon slice of Breakfast Pizza<h4>
                    <p class="price">$3<p>
                    <p class="description">Scrambled eggs, bacon and cheese blend</p>
                </div>
            </div>

            <h3>Saturday and Sunday (9AM to 1PM)</h3>

            <div class="menu-container">
                <div class="menu-item">
                    <h4>Lisa's Italian Breakfast Burrito<h4>
                    <p class="price">$8<p>
                    <p class="description">Scrambled eggs, sauteed onions, cheese blend and variety of diced Italian meats including our famous homemade Italian meatballs.</p>
                    <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/breakfast-burrito.png" alt="breakfast-burrito.png">
                </div>
            </div>

            <h3>Scorno's Bakery Originals</h3>

            <div class="menu-container">
                <div class="menu-item">
                    <h4>Wanda's<h4>
                    <p class="price">$8<p>
                    <p class="description">Traditional light Italian pasty topped with our famous almond frosting!</p>
                </div>
                <div class="menu-item">
                    <h4>Love Drop Almond<h4>
                    <p class="price">$5<p>
                    <p class="description">Traditional sweet tender cookie topped with our famous almond frosting</p>
                    <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/almond-drops.jpg" alt="almond-drops.jpg">
                </div>
                <div class="menu-item">
                    <h4>Love Drop Lemon<h4>
                    <p class="price">$5<p>
                    <p class="description">Traditional sweet tender cookie topped with our famous lemon frosting</p>
                    <br>
                    <p class="description" style="font-style: normal;">* Ask about our special love drops flavors of the week</p>
                    <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/lemon-drops.jpg" alt="lemon-drops.jpg">
                </div>
                <div class="menu-item">
                    <h4>Cannoli<h4>
                    <p class="price">2 for $5<p>
                    <p class="description">Traditional cannoli shell with sweet creamy ricotta filling and topped with chocolate chips</p>
                    <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/canolli.jpg" alt="canolli.jpg">
                </div>
                <div class="menu-item">
                    <h4>Sugar Cookie<h4>
                    <p class="price">$1.75<p>
                    <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/sugar-cookie.jpg" alt="sugar-cookie.jpg">
                </div>
                <div class="menu-item">
                    <h4>Lemon Poppy Seed Square<h4>
                    <p class="price">$1.50<p>
                </div>
                <div class="menu-item">
                    <h4>Chocolate Biscotti<h4>
                    <p class="price">$5<p>
                    <p class="description">Twice baked sliced Italian biscuit (cookie)</p>
                </div>
                <div class="menu-item">
                    <h4>Vanilla Biscotti<h4>
                    <p class="price">$5<p>
                    <p class="description">Twice baked sliced Italian biscuit (cookie)</p>
                    <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/vanilla-biscotti.jpg" alt="vanilla-biscotti.jpg">
                </div>
            </div>
        </div>

        <div id="sandwiches">
            <h2>Sandwiches</h2>

            <h3>Breakfast Sandwiches (Served from 8AM to 11AM Daily)</h3>

            <div class="menu-container">
                <div class="menu-item">
                    <h4>Capicola Breakfast Sandwich<h4>
                    <p class="price">$6<p>
                    <p class="description">Capicola (Italian Ham), Seasoned Egg, Mozzarella and Cheddar Cheese Blend served ona Brioche Bun with our homemade spread.</p>
                    <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/ham-egg-sandwhich.jpg" alt="ham-egg-sandwhich.jpg">
                </div>
                <div class="menu-item">
                    <h4>Bacon Breakfast Sandwhich<h4>
                    <p class="price">$6<p>
                    <p class="description">Bacon (Hickory Smoked), Seasoned Egg, Mozzarella and Cheddar Cheese Blend served ona Brioche Bun with our homemade spread.</p>
                    <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/bacon-egg-sandwhich.jpg" alt="bacon-egg-sandwhich.jpg">
                </div>
                <div class="menu-item">
                    <h4>Egg Breakfast Sandwhich<h4>
                    <p class="price">$6<p>
                    <p class="description">Seasoned Egg, Italian Seasoning, Mozzarella and Cheddar Cheese Blend on a Brioche Bun with our homemade spread.</p>
                    <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/egg-sandwhich.jpg" alt="egg-sandwhich.jpg">
                </div>
            </div>

            <h3>Lunch Sandwiches (Served daily starting at 11AM)</h3>

            <div class="menu-container">
                <div class="menu-item">
                    <h4>Thatsatalian<h4>
                    <p class="price">$8<p>
                    <p class="description">Capicola, Italian Roast Beef, Pepperoni, Mozzarella Cheese and Creamy Garlic Romano on a Hoagie. (Toasted)</p>
                    <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/thatsatalian.jpg" alt="thatsatalian.jpg">
                </div>
                <div class="menu-item">
                    <h4>Karnesarelli<h4>
                    <p class="price">$8<p>
                    <p class="description">Capicola, Pepper Jack Cheese, Pickles, Mustard and BBQ Sauce on Ciabatta. (Toasted)</p>
                    <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/karnes.jpg" alt="karnes.jpg">
                </div>
                <div class="menu-item">
                    <h4>The Bubs<h4>
                    <p class="price">$8<p>
                    <p class="description">Chicken Breast, Provalone, Bruscetta Oil, Basil Pesto and Tomato on Ciabatta. (Toasted)</p>
                    <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/bubs.jpg" alt="bubs.jpg">
                </div>
                <div class="menu-item">
                    <h4>The Amato<h4>
                    <p class="price">$8<p>
                    <p class="description">Italian Seasoned Turkey, Provolone Cheese, Mayo, Lettuce and Tomato on a Hoagie. (Toasted)</p>
                    <img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/items/amato.jpg" alt="amato.jpg">
                </div>
                <div class="menu-item">
                    <h4>Pasta Salad<h4>
                    <p class="price">$2<p>
                </div>
            </div>

            <p class="s-deal">* Any Lunch Sandwich, Pasta Salad and Choice of Drink for $11.99</p>
            
        </div>
        
        <div id="about">
            <h2>About</h2>


            <p>Scornovacca’s Ristorante’ of Des Moines, Iowa is a locally owned family restaurant chain. We have HOMEMADE Italian Sausage, Meatballs, Onion Rings and Cheese Sticks, Pizza Sauce, Spaghetti Sauce, Alfredo Sauce, Salad Dressings, etc. Sharing a taste of Italy since 1973.</p>

            <div class="video-container">

                <iframe id="video" src="https://www.youtube.com/embed/nKtlZ3EITvc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

            </div>

            <p style="text-align: center;">Want to be informed about our seasonal items and events? Join our mailing list by entering your email below!</p>

            <form id="form" action="https://www.freecodecamp.com/email-submit">
                <input type="email" name="email" id="email" class="single-line" placeholder="johndoe@example.com" required>
                <input id="submit" type="submit" value="Sign Up" class="btn" />
            </input>
            </form>

        </div>

        <div id="contact">
            <a href="https://scornos.com/" target="_blank"><img src="https://raw.githubusercontent.com/BetoBob/fcc-projects/main/responsive-web-design/product-landing-page/assets/scorno-brand.png" alt="scorno-brand.png"></a>
            <p><a href="https://www.facebook.com/scornosbakery/?ref=page_internal" target="_blank">Facebook</a> | <a href="https://www.toasttab.com/scornovaccas-bakery-2920-sw-9th-st/v3/?mode=fulfillment" target="_blank">Order</a> | (515) 244-5779</p>
        </div>

<!-- freecodecamp tester -->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
                  
              
            
!

CSS

              
                /* font imports */

/* Abel */
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');

/* Rock Salt */
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Abel', sans-serif;
}

html {
    scroll-behavior: smooth;
  scroll-padding-top: 10em;
}
  
/* header */

#header {
    background-color: white;
    display: block;
    position: fixed;
    top: 0em;
    width: 100%;
    height: 8em;
    border-bottom: 0.25em solid crimson;
}

.container {
    width: 85%;
    margin: 0 auto;
}

#header-img {
    float: left;
    margin-top: 0.75em;
}

nav {
    float: right;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-left: 2em;
    padding-top: 3.5em;
}

nav a {
    color: seagreen;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.25em;
}

nav a:hover {
    color: #000;
}

/* body */


body {
    background-color: aliceblue;
    margin-top: 8em;
}

h1 {
    text-align: center;
    font-family: 'Rock Salt', cursive;
    margin-top: 4.5em;
    margin-bottom: 1em;
}

h2 {
    text-align: center;
    font-family: 'Rock Salt', cursive;
    margin-top: 1.5em;
}

#home p {
    font-size: 1.25em;
    margin-left: 5%;
    margin-right: 5%;
}

.order-button {
    display: block;
    align-content: center;
    background-color: goldenrod;
    width: 6em
}

#home-images {
    display: flex;
    justify-content: center;
    margin-top: 3em;
    margin-bottom: 3em;
}

.home-img {
    width: 30%;
    max-width: 600px;
    margin-left: 1%;
    margin-right: 1%;
}

#map {
    border-left: 0em solid;
    border-right: 0em solid;
    border-top: 0.25em solid crimson;
    border-bottom: 0.25em solid crimson;
    width: 100%;
    height: 30em;
}

/* menu and about */

h3 {
    padding-left: 1em;
    font-size: 1.5em;
}

/* menu */

.menu-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.menu-item {
    width: 20em;
    border: 0.2em double seagreen;
    background-color: white;
    border-radius: 5%;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
    margin-right: 1em;
    padding: 1em 1em 1em 1em;
}

.menu-item img {
    max-width: 15em;
    border-radius: 100%;
    margin-top: 1em;
}

.menu-item h4 {
    text-align: center;
}

.description {
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 100;
    font-style: italic;
    font-size: 1em;
    margin-top: 1em;
}

.price {
    text-align: center;
    font-size: 1em;
}

.s-deal {
    text-align: center;
    font-size: 1.25em;
    margin-left: 2.5%;
    margin-right: 2.5%;
}

/* about */

#about p {
    font-size: 1.25em;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 1em;
    margin-bottom: 1em;
}

.video-container {
    display: block;
    text-align: center;
}

#video {
    width: 60%;
    height: 25em;
    max-width: 45em;
}

/* form */

#form {
    display: block;
    text-align: center;
    font-size: 1.25em;
}

#form input {
    font-size: 1em;
}

#email {
    width: 20em;
    margin-right: 1em;
}

#submit {
    width: 5em;
    background-color: seagreen;
    color: white;
    border-radius: 5em;
}

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

/* contact */

#contact {
    display: block;
    text-align: center;
    margin-top: 2em;
    margin-bottom: 2em;
}

#contact p {
    margin-top: 1em;
}

/* media queries */

/* hides header at certain width */
@media only screen and (max-width: 650px) {
    #header {
      all: revert;
      display: none;
      visibility: hidden;
    }
    body {
      margin-top: 0em;
    }
    h1 {
        margin-top: 1.5em;
    }

    #video {
        height: 15em;
    }

    /* hide side image at top when screen small enough */
    .hide-img {
        display: none;
    }
    .center-img {
        width: 85%;
    }

}

              
            
!

JS

              
                
              
            
!
999px

Console