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

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

References

<map>Inserisce immagini mappa cliccabili in un documento
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
heightDetermina l'altezza di un elemento HTML in pixel
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
langSpecifica la lingua del contenuto di un elemento

Users

Log in to search for users

Explore

Find inspiration

Gesù nostro signore(2)

Prima pagina web

Profilo Studente

Tabella esercizi

Geyser NEW 25 Litri

JS Oggetti ed eventi es2

Descr Breve UNIONWOOD 5mm

Esercitazione 1

Heads Or Tails Random Tally

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;
}