17 html (Python) - myCompiler

Fork
html



<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sabores do Nordeste</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <header>
        <h1>Sabores do Nordeste</h1>
        <p>Comida regional com sabor e tradição.</p>

        <nav>
            <a href="#cardapio">Cardápio</a>
            <a href="#sobre">Sobre nós</a>
            <a href="https://[Log in to view URL]" target="_blank">Instagram</a>
        </nav>
    </header>

    <main>

        <section id="sobre">
            <h2>Sobre o restaurante</h2>
            <p>
                O Sabores do Nordeste oferece pratos tradicionais da culinária
                nordestina, preparados com ingredientes regionais.
            </p>
        </section>

        <section id="cardapio">
            <h2>Nosso Cardápio</h2>

            <h3>Pratos principais</h3>

            <ul class="precos">
                <li value="1">Baião de dois — R$ 25,00</li>
                <li value="2">Carne de sol com macaxeira — R$ 35,00</li>
                <li value="3">Escondidinho de carne de sol — R$ 30,00</li>
                <li value="4">Galinha à cabidela — R$ 28,00</li>
            </ul>

            <h3>Bebidas</h3>

            <ul class="bebidas">
                <li value="1">Suco de acerola — R$ 8,00</li>
                <li value="2">Suco de cajá — R$ 8,00</li>
                <li value="3">Água de coco — R$ 7,00</li>
            </ul>

            <h3>Faça seu pedido</h3>

            <form>
                <label for="nome">Nome:</label>
                <input type="text" id="nome" name="nome">

                <label for="telefone">Telefone:</label>
                <input type="tel" id="telefone" name="telefone">

                <button type="submit" value="enviar">Enviar pedido</button>
            </form>

        </section>

    </main>

    <footer>
        <p>&copy; 2026 Sabores do Nordeste</p>
    </footer>

</body>
</html>









css





/* Estilo geral */
body {
    font-family: Arial, sans-serif;
    background-color: #fff8e7;
    color: #4a2c16;
    margin: 0;
}

/* Links internos */
a[href^="#"] {
    color: #8b4513;
    text-decoration: none;
    font-weight: bold;
    margin: 10px;
}

/* Links externos */
a[href^="http"] {
    color: white;
    background-color: #c0392b;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
}

/* Efeito ao passar o mouse nos links */
a:hover {
    opacity: 0.8;
}

/* Cabeçalho */
header {
    background-color: #d35400;
    color: white;
    text-align: center;
    padding: 30px;
}

nav {
    margin-top: 20px;
}

/* Títulos */
h2 {
    color: #d35400;
    border-bottom: 2px solid #e67e22;
    padding-bottom: 5px;
}

h3 {
    color: #8b4513;
}

/* Lista de pratos */
ul[class="precos"] {
    list-style-type: none;
    padding: 0;
}

ul[class="precos"] li {
    background-color: #fff;
    border-left: 5px solid #e67e22;
    padding: 12px;
    margin: 8px 0;
    border-radius: 5px;
}

/* Diferencia os itens da lista pelo atributo value */
li[value="1"] {
    font-weight: bold;
}

li[value="2"] {
    color: #a04000;
}

li[value="3"] {
    background-color: #fff3cd;
}

li[value="4"] {
    font-style: italic;
}

/* Lista de bebidas */
ul[class="bebidas"] {
    list-style-type: square;
    background-color: #fce4ec;
    padding: 20px 40px;
    border-radius: 10px;
}

/* Campos do formulário usando o atributo type */
input[type="text"],
input[type="tel"] {
    display: block;
    width: 250px;
    padding: 8px;
    margin: 8px 0 15px;
    border: 2px solid #e67e22;
    border-radius: 5px;
}

/* Botão usando o atributo type */
button[type="submit"] {
    background-color: #27ae60;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #219150;
}

/* Rodapé */
footer {
    text-align: center;
    background-color: #4a2c16;
    color: white;
    padding: 15px;
    margin-top: 30px;
}
Fork
Embed on website
