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

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

References

<embed>Tag per l'incorporamento di contenuti multimediali
<abbr>Inserisce abbreviazioni e acronimi
<pre>Indica una parte di testo preformattato
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<h3>Titolo di intestazione di terzo livello
downloadConsente di scaricare file al click di collegamento ipertestuale.

Users

Log in to search for users

Explore

Find inspiration

primo esercizio 26 gennaio

Scheda Tecnica Google Pixel 8 Pro

cablepartdos-op1.html

Estrazione Casuale Studenti

Orario 5G A.S. 2024 - 2025

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