Scribd
Carregar
89 visualizações3 páginas

Código em html e css externo

Enviado por

João Victor
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd
89 visualizações3 páginas

Código em html e css externo

Enviado por

João Victor
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 3

Instruções para criar uma página HTML

1. Acessar o site: https://codepen.io/pen


2. Copiar o código abaixo e colar na área de HTML do Codepen:
Estrutura do HTML (arquivo index.html):
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página com Figuras e Texto</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Bem-vindo à nossa página</h1>
</header>

<main>
<div class="figuras">
<div class="figura">
<img src="figura1.jpg" alt="Figura 1">
<p>Descrição da Figura 1</p>
</div>
<div class="figura">
<img src="figura2.jpg" alt="Figura 2">
<p>Descrição da Figura 2</p>
</div>
</div>
<div class="texto-quadrado">
<p>Este é um texto de exemplo.</p>
</div>
</main>
</body>
</html>

3. Copiar o código abaixo e colar na área de CSS do Codepen:


Estilos CSS (arquivo style.css):
/* Reset básico */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Estilos do corpo e do cabeçalho */


body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

header {
background-color: #4CAF50;
width: 100%;
padding: 40px;
text-align: center;
color: white;
}

/* Estilos das figuras */


.figuras {
display: flex;
gap: 20px;
margin: 20px 0;
}

.figura {
text-align: center;
}

.figura img {
width: 300px;
height: auto;
border: 2px solid #ddd;
border-radius: 8px;
padding: 5px;
}

/* Estilos do texto em quadrado */


.texto-quadrado {
border: 2px solid #4CAF50;
padding: 20px;
width: 80%;
max-width: 600px;
text-align: center;
margin-top: 20px;
border-radius: 8px;
background-color: #f9f9f9;
}

4. Alterar o texto do cabeçalho para: “Frutas que eu gosto”


5. Incluir um <h2> com o texto “Frutas cítricas”, abaixo de <h1>
6. Escolher figuras de duas frutas na internet:
 “Copiar o endereço da imagem” para a primeira figura e substituir o texto “ figura1.jpg” no
código HTML pelo link da imagem.
 Alterar o texto “Descrição da Figura 1” no código HTML pelo nome da primeira fruta.
 “Copiar o endereço da imagem” para a segunda figura e substituir o texto “ figura2.jpg” no
código HTML pelo link da imagem.
 Alterar o texto “Descrição da Figura 2” no código HTML pelo nome da segunda fruta.
7. Escrever um texto falando sobre as duas frutas em substituição ao texto “Este é um texto de
exemplo” no código HTML.
8. Incluir mais uma fruta após a segunda (copiar <div>), e proceder da mesma forma que o item 6
acima.
9. Alterar no arquivo CSS o tamanho em pixel de “max-width: 600px”, para que o texto no
quadrado fique da mesma largura das figuras.
<!-- Seção da pergunta com opções -->
<div class="pergunta">
<p>Você gosta de qual dessas frutas?</p>
<label>
<input type="radio" name="fruta" value="figura1"> Figura 1
</label>
<label>
<input type="radio" name="fruta" value="figura2"> Figura 2
</label>
</div>

.pergunta {
margin-top: 20px;
text-align: center;
font-size: 16px;
}

.pergunta label {
margin: 0 10px;
}

Você também pode gostar