Instruções:
Nesta atividade, você aprenderá a criar uma página web simples sobre informações de um carro. O código será exibido passo a passo. Copiar o código está desabilitado, então você precisará digitar o código no Visual Studio Code.
Passo 1: Esqueleto HTML
Agora, abra o Visual Studio Code e digite o código abaixo no arquivo `index.html`. Quando terminar, passe para o próximo passo.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Informações sobre o Carro</title>
</head>
<body>
</body>
</html>
Passo 2: Estrutura do Carro
Digite a estrutura abaixo no Visual Studio Code(dentro do <body>). Ela vai definir a seção de informações sobre o carro e exibir a imagem. Você também precisa escolher uma outra imagem, salvá-la na mesma pasta do html, ou pode ser o link da nova imagem. Depois, passe para o próximo passo.
<div class="container">
<header class="header">
<h1>Informações sobre o Carro</h1>
<p>Data: 01/10/2025</p>
</header>
<section class="car-info">
<div class="car-description">
<h2>Sobre o Carro</h2>
<p>Descrição do carro...</p>
</div>
<div class="car-image">
<img src="https://via.placeholder.com/300x200?text=Carro">
</div>
</section>
</div>
Passo 3: Estilização CSS
Agora, adicione o CSS abaixo. Pode ser interno ou externo. Dentro da tag '<head>' você
precisa chamar o CSS de alguma forma.
Na dúvida, pesquise: "Como declarar o CSS interno?" ou, "Como chamar o CSS externo?
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.car-info {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.car-description {
width: 60%;
}
.car-image {
width: 35%;
}
.car-image img {
width: 100%;
height: auto;
border-radius: 8px;
}