1
resposta

[Projeto] Ajustando a altura da tela com CSS | Controlando o tamanho de elementos com Box Sizing

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RPG-DND</title>
    <link rel = "stylesheet" href="atividade.css">
</head>
<body class="ficha">
    <header></header>
    <main>
        <h1><span>Lenda de Ayra, a Bruxa das Sombras</span></h1>
        <p><span>Eldoria, Ayra, a jovem bruxa das sombras, vivia em uma torre na Floresta Sombria. Um dia, um grupo de aventureiros pediu sua ajuda para libertar um dragão que aterrorizava uma aldeia, acreditando que ele estava sob um feitiço maligno.</span></p>
        <img src="bruxa.jpg" alt="bruxa">
    </main>
</body>
</html>

CSS


body{
    background-color: burlywood;
    font-family: 'Times New Roman', Times, serif;
}
h1{
    border: 10px solid black;
    padding: 10px;
}
p{
    border: 10px solid black;
    padding: 10px;
}
.ficha{
    height: 100vh;
    box-sizing: border-box;
}
1 resposta

Olá, Ayra, como vai?

Ótimo trabalho com o seu projeto! Gostei de como você estruturou o HTML e aplicou os estilos no CSS. Continue explorando o CSS, pois ele oferece várias possibilidades para layouts responsivos.

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)