Focaccia es. by @giorgio-g97 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
formSpecifica a quale form appartiene un elemento.
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
<object>Incorpora risorse varie nella pagina web.
typeSpecifica la tipologia/funzione di un elemento.
<a>Inserisce link e collegamenti ipertestuali

Users

Log in to search for users

Explore

Find inspiration

semicerchio canvas

test js coinmarketcap

programma base Di lauro

animation background

prima volta css

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang=""en>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Simply Recipes</title>
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <header>
            <img id="logo" src="https://www.simplyrecipes.com/thmb/QvixEwCD02s_lnkgkVb6mHwKS7c=/1125x320/filters:no_upscale():max_bytes(150000):strip_icc()/SimplyRecipesLogoTransparent-07a297c54b2142ae9c079abb2f0fa639.png" alt="simply-logo"/>
            <nav><p>Part of <span >A SIMPLY FABULOUS THANKS GIVING</span></p></nav>
        </header>
    <main>
        <section id="main-section">
            <h1>Focaccia with Caramelized Onions, Cranberries, and Brie</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos fugiat sequi earum autem iusto, repellendus minus voluptatibus unde voluptates deleniti commodi voluptatem vitae tempora odit magnam reiciendis assumenda expedita odio!</p>
            <img src="https://www.simplyrecipes.com/thmb/WMeBVqa5v30ccWWcVgoO2mYsaAQ=/750x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/__opt__aboutcom__coeus__resources__content_migration__simply_recipes__uploads__2020__12__Cranberry-Brie-Onion-Focaccia-LEAD-3-de2a320146654a1e975487ca943bfaa3.jpg" alt="focaccia-limg"/>
            <p id="img-d">Image: Sally Vegas</p>
        </section>

        <section id="feat">
            <h3>FEATURED IN:</h3>
            <a href="https://www.simplyrecipes.com/cranberry-recipes-that-go-beyond-sauce-5206174" target="_blank"><p>Fresh Canberry Recipes That Go Beyond Sauce</p></a>
        </section>

        <section id="ing">
            <h2>Ingredients</h2>
            <hr>
            <h3>For the Focaccia:</h3>
            <ul>
                <li>Flours</li>
                <li>Yeast</li>
                <li>Salt</li>
            </ul>

            <h3>For the topping:</h3>
            <ul>
                <li>Onions</li>
                <li>Vinegar</li>
                <li>olive oil</li>
            </ul>
        </section>

        <section id="met">
            <h2>Method</h2>
            <hr>
            <h3>1. Make the focaccia dough</h3>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis ab deleniti blanditiis minima molestiae.</p>
        </section>
        <footer><p>Read more on  <a href="https://www.simplyrecipes.com/" target="_blank">Simply Recipes</a></p></footer>
        </main>
    </body>
</html>

* {
    box-sizing: border-box;
    margin: 0 0;
    padding: 0 0;
}

#logo {
    width: 20vw;
    display: block;
    margin: 15px auto;
}

nav {
    height: 50px;
    background-color: #f9f1db;
    border-top: 3px solid #ffec8e;
    text-align: center;
    padding: 15px 0;
    color: #177B7B;
}

span {
    font-weight: bolder;
}

main {
    padding: 0 200px;
}

#main-section {
    margin: 50px 0 20px 0;
    }

#main-section h1 {
    text-align: center;
    font-size: 2rem;
}

#main-section p {
    margin: 30px 0 20px 0;
}

#main-section img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 4px 6px 15px gray;
}

#img-d {
    text-align: center;
    color: rgb(154, 154, 154);
    font-weight: bold;;
}

#feat {
    margin-bottom: 50px;
    border-left: 3px solid rgb(255, 178, 34);
    padding: 0 10px;
    color:rgb(219, 143, 0)
}

a {
    color: #177B7B;
    font-weight: bold;
}

hr {
    margin: 10px 0 20px 0;
}

ul {
    margin: 15px 0;
    padding-left: 45px;
}

#met h3 {
    padding-left: 30px;
    margin-bottom: 10px;
}

#met p {
    padding: 0 50px;
}

footer {
    margin: 20px 0;
}