Menu
Coddy logo textTech

Cores e Planos de Fundo

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 32 de 76.

challenge icon

Desafio

Fácil

Nesta tarefa, você personalizará as cores de fundo de diferentes seções do menu do café. Use sua criatividade para escolher cores que tornem o menu visualmente atraente!

Siga os passos abaixo:

  1. Aplique uma cor de fundo a toda a página (body). Escolha qualquer cor que combine com o tema de um café.
  2. Aplique uma cor de fundo e uma cor de texto ao rodapé (footer) que complementem o design geral da página.
  3. Sinta-se à vontade para alterar a cor de quaisquer outros elementos para aprimorar os estilos.

Experimente você mesmo

<html>
<head>
    <title>Café Menu</title>  
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Café Delight</h1>
        <p class="welcome">Welcome to our café! Enjoy a delicious meal.</p>
    </header>
    <div class="menu-category">
        <h2>Appetizers</h2>
        <ul>
            <li>
                <p class="dish-name">Bruschetta $5.99</p>
            </li>
            <li>
                <p class="dish-name">Garlic Bread $3.50</p>
            </li>
        </ul>
    </div>
    <div class="menu-category">
        <h2>Main Courses</h2>
        <ul>
            <li>
                <p class="dish-name">Spaghetti Carbonara $12.99</p>
            </li>
            <li>
                <p class="dish-name">Grilled Chicken Salad $9.99</p>
            </li>
        </ul>
    </div>
    <div class="menu-category">
        <h2>Desserts</h2>
        <ul>
            <li>
                <p class="dish-name">Chocolate Cake $4.99</p>
            </li>
            <li>
                <p class="dish-name">Cheesecake $5.49</p>
            </li>
        </ul>
    </div>
    <footer>
        <p>&copy; 2025 Café Delight - All rights reserved</p>
    </footer>
</body>
</html>

Todas as lições de Styling with CSS