<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Minhas Receitas</title>
<style>
/* Página */
body {
font-family: Arial;
background-color: #f5f5f5;
margin: 0;
}
/* Cabeçalho */
header {
background-color: #d35400;
color: white;
text-align: center;
padding: 20px;
}
/* Menu */
nav {
background-color: #333;
text-align: center;
padding: 15px;
}
nav a {
color: white;
text-decoration: none;
margin: 15px;
/* DISPLAY */
display: inline-block;
}
nav a:hover {
color: orange;
}
/* Área das receitas */
.receitas {
max-width: 1000px;
margin: auto;
padding: 20px;
}
/* Receita */
.receita {
background-color: white;
margin-bottom: 30px;
padding: 20px;
border-radius: 10px;
}
/* Imagem */
.receita img {
/* DISPLAY */
display: block;
/* MAX-WIDTH */
max-width: 100%;
margin: auto;
}
h2 {
color: #d35400;
}
.ingredientes {
background-color: #fff2cc;
padding: 15px;
max-width: 600px;
}
.preparo {
background-color: #e8f5e9;
padding: 15px;
max-width: 600px;
}
</style>
</head>
<body>
<!-- CABEÇALHO -->
<header>
<h1>🍴 Minhas Receitas</h1>
<p>
Receitas fáceis para preparar em casa
</p>
</header>
<!-- MENU -->
<nav>
<a href="#bolo">Bolo</a>
<a href="#pizza">Pizza</a>
<a href="#lasanha">Lasanha</a>
<a href="#salada">Salada</a>
<a href="#brigadeiro">Brigadeiro</a>
</nav>
<main class="receitas">
<!-- RECEITA 1 -->
<section class="receita" id="bolo">
<h2>🍰 Bolo de Chocolate</h2>
<img
src="https://[Log in to view URL]"
alt="Bolo de chocolate"
width="500"
>
<h3>Ingredientes</h3>
<div class="ingredientes">
<p>
2 ovos<br>
1 xícara de açúcar<br>
1 xícara de farinha de trigo<br>
1 xícara de chocolate em pó<br>
1 colher de fermento
</p>
</div>
<h3>Modo de preparo</h3>
<div class="preparo">
<p>
Misture os ingredientes em uma tigela.
Coloque a massa em uma forma e leve
ao forno por aproximadamente 40 minutos.
</p>
</div>
</section>
<!-- RECEITA 2 -->
<section class="receita" id="pizza">
<h2>🍕 Pizza Caseira</h2>
<img
src="https://[Log in to view URL]"
alt="Pizza"
width="500"
>
<h3>Ingredientes</h3>
<div class="ingredientes">
<p>
2 xícaras de farinha de trigo<br>
1 colher de fermento<br>
1 xícara de água<br>
Molho de tomate<br>
Queijo
</p>
</div>
<h3>Modo de preparo</h3>
<div class="preparo">
<p>
Prepare a massa misturando a farinha,
o fermento e a água. Abra a massa,
coloque o molho e o queijo e leve ao forno.
</p>
</div>
</section>
<!-- RECEITA 3 -->
<section class="receita" id="lasanha">
<h2>🍝 Lasanha</h2>
<img
src="https://[Log in to view URL]"
alt="Lasanha"
width="500"
>
<h3>Ingredientes</h3>
<div class="ingredientes">
<p>
Massa de lasanha<br>
Molho de tomate<br>
Carne moída<br>
Queijo<br>
Presunto
</p>
</div>
<h3>Modo de preparo</h3>
<div class="preparo">
<p>
Prepare a carne com o molho.
Monte camadas de massa, carne,
queijo e presunto. Leve ao forno.
</p>
</div>
</section>
<!-- RECEITA 4 -->
<section class="receita" id="salada">
<h2>🥗 Salada de Frutas</h2>
<img
src="https://[Log in to view URL]"
alt="Salada de frutas"
width="500"
>
<h3>Ingredientes</h3>
<div class="ingredientes">
<p>
Banana<br>
Maçã<br>
Morango<br>
Laranja<br>
Mamão
</p>
</div>
<h3>Modo de preparo</h3>
<div class="preparo">
<p>
Corte as frutas em pedaços pequenos.
Coloque tudo em uma tigela e misture.
</p>
</div>
</section>
<!-- RECEITA 5 -->
<section class="receita" id="brigadeiro">
<h2>🍫 Brigadeiro</h2>
<img
src="https://[Log in to view URL]"
alt="Brigadeiro"
width="500"
>
<h3>Ingredientes</h3>
<div class="ingredientes">
<p>
1 lata de leite condensado<br>
2 colheres de chocolate em pó<br>
1 colher de manteiga<br>
Chocolate granulado
</p>
</div>
<h3>Modo de preparo</h3>
<div class="preparo">
<p>
Coloque o leite condensado, o chocolate
e a manteiga em uma panela.
Mexa até engrossar. Depois faça pequenas
bolas e passe no chocolate granulado.
</p>
</div>
</section>
</main>
</body>
</html>
To embed this project on your website, copy the following code and paste it into your website's HTML: