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

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

References

animationDefinisce i parametri dell'animazione di un elemento o selettore
getDefinisce un metodo di invio di dati al server
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
<blockquote>Inserisce citazioni in un documento HTML
<br>Inserisce uno spazio vuoto tra due elementi HTML.

Users

Log in to search for users

Explore

Find inspiration

5/10/24 es. 5 - consonanti

Progetto personale

Scacchi scrausi

Fumetto PCTO [Toastmasters]

Il mio primo sito(2)

Piano Distruzione pianeta terra

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