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

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

Referenze

<em>Formatta il testo in corsivo/italico enfatizzato
formSpecifica a quale form appartiene un elemento.
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
application-x-www-form-urlencodedCodifica dei caratteri di un form

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

congettura collatz

Nuovo sito travel

HTML con classi

Le Meraviglie d\\\\\\\\

3 LS 29-01 TABELLA(2)

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

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