<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Estruturando</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<div class="header-section">
<h1>Estruturando, minha primeira página Web.</h1>
</div>
</header>
<main>
<h1>Bem vindo a minha primeira página Web.</h1>
<div class="content-section">
<p>Este é um exemplo de texto onde a palavra é <strong>ENFATIZADA</strong> com negrito</p>
<p>Neste outro exemplo, uma palavra é <em> DESTACADA </em> em ÍTALICO para ênfase</p>
<p>Para mais exemplos visite: <a href="https://www.alura.com.br" target="_blank">
Alura</a></p>
</div>
<div class="image-section">
<img src="img.jpg" alt="Hello Word">
<img src="img1.jpg" alt="Codar e Café!">
</div>
<div class="Hobbies-section">
<h2><strong>Meus Hobbies</strong></h2>
<ul>
<li>Escrever historias</li>
<li>Ler sem um bom romance</li>
<li>Esportes</li>
<li>Cozinhar algo diferente</li>
</ul>
</div>
<div class="tasks-section">
<h2>Minhas Lista de Tarefas</h2>
<ol>
<li>Rotinas do Trabalho</li>
<li>Estudar Programação</li>
<li>Treino</li>
<li>Ler um Livro</li>
</ol>
</div>
</main>
<footer></footer>
</body>
</html>
body {
font-family: 'Times New Roman', Times, serif;
line-height: normal;
background-color: aqua;
color: red;
margin: 0; /* Remova a margem padrão do body */
padding: 0; /* Remova o padding padrão do body */
}
header {
background-color: #333; /* Cor de fundo escura para o cabeçalho */
color: white; /* Cor do texto branca */
text-align: center; /* Centraliza o texto */
padding: 20px 0; /* Adiciona preenchimento vertical */
}
.header-section h1 {
font-size: 2em; /* Tamanho da fonte maior para o título */
}
main {
padding: 20px; /* Adiciona preenchimento ao conteúdo principal */
}
.content-section {
margin-bottom: 20px; /* Adiciona espaço abaixo da seção de conteúdo */
}
.image-section {
text-align: center; /* Centraliza as imagens */
}
.image-section img {
margin: 10px; /* Adiciona espaço ao redor das imagens */
max-width: 100%; /* Garante que as imagens não ultrapassem a largura do contêiner */
height: auto; /* Mantém a proporção da imagem */
}
a {
color: brown;
text-decoration: none;
}
.Hobbies-section ul,
.tasks-section ol {
list-style-position: inside; /* Garante que os marcadores da lista fiquem dentro do contêiner */
