Embedded Files
Esqueleto html responsivo
Esqueleto html responsivo
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="pt-BR">
<html lang="pt-BR">
<head>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descrição do seu site">
<meta name="description" content="Descrição do seu site">
<meta name="keywords" content="palavras, chave, separadas, por, vírgula">
<meta name="keywords" content="palavras, chave, separadas, por, vírgula">
<meta name="author" content="Seu Nome">
<meta name="author" content="Seu Nome">
<title>Título do Documento</title>
<title>Título do Documento</title>
<link rel="stylesheet" href="styles.css"> <!-- Link para o CSS externo -->
<link rel="stylesheet" href="styles.css"> <!-- Link para o CSS externo -->
<style>
<style>
/* Estilos básicos para responsividade */
/* Estilos básicos para responsividade */
body {
body {
font-family: Arial, sans-serif;
font-family: Arial, sans-serif;
margin: 0;
margin: 0;
padding: 0;
padding: 0;
}
}
header, footer {
header, footer {
background-color: #f8f9fa;
background-color: #f8f9fa;
padding: 10px;
padding: 10px;
text-align: center;
text-align: center;
}
}
main {
main {
padding: 20px;
padding: 20px;
}
}
@media (max-width: 600px) {
@media (max-width: 600px) {
main {
main {
padding: 10px;
padding: 10px;
}
}
}
}
</style>
</style>
</head>
</head>
<body>
<body>
<header>
<header>
<h1>Bem-vindo ao Meu Site</h1>
<h1>Bem-vindo ao Meu Site</h1>
</header>
</header>
<main>
<main>
<section>
<section>
<h2>Seção 1</h2>
<h2>Seção 1</h2>
<p>Este é um parágrafo de exemplo.</p>
<p>Este é um parágrafo de exemplo.</p>
</section>
</section>
<section>
<section>
<h2>Seção 2</h2>
<h2>Seção 2</h2>
<p>Outro parágrafo de exemplo.</p>
<p>Outro parágrafo de exemplo.</p>
</section>
</section>
<article>
<article>
<h2>Artigo</h2>
<h2>Artigo</h2>
<p>Conteúdo do artigo.</p>
<p>Conteúdo do artigo.</p>
</article>
</article>
<aside>
<aside>
<h2>Informações Adicionais</h2>
<h2>Informações Adicionais</h2>
<p>Conteúdo adicional ou links.</p>
<p>Conteúdo adicional ou links.</p>
</aside>
</aside>
<figure>
<figure>
<img src="imagem.jpg" alt="Descrição da imagem">
<img src="imagem.jpg" alt="Descrição da imagem">
<figcaption>Legenda da imagem.</figcaption>
<figcaption>Legenda da imagem.</figcaption>
</figure>
</figure>
<form action="#" method="post">
<form action="#" method="post">
<label for="nome">Nome:</label>
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required>
<input type="text" id="nome" name="nome" required>
<input type="submit" value="Enviar">
<input type="submit" value="Enviar">
</form>
</form>
</main>
</main>
<footer>
<footer>
<p>© 2023 Seu Nome. Todos os direitos reservados.</p>
<p>© 2023 Seu Nome. Todos os direitos reservados.</p>
</footer>
</footer>
</body>
</body>
</html>
</html>
Page updated
Google Sites
Report abuse