Conteúdo
Como Criar uma Página Web Usando Apenas HTML e CSS
Este Post tem como objetivo trazer o conteúdo criado em uma série de vídeos no canal do Relaxa.
Na Playlist, aprendemos a criar uma página Web estática, usando apenas HTML e CSS. Fazendo todo o passo a passo do zero.
O projeto se trata de uma página única, com informações e a agenda de shows de uma banda fictícia.
Com um total de cinco vídeos em formato de tutorial, aprenderemos a trabalhar com o DevTools do Google Chrome, manipular e estruturar elementos com HTML5 e estilizá-los usando o CSS.
A Playlist
Para ter acesso a esse conteúdo na íntegra, basta clicar nos vídeos logo abaixo:
Os Materiais
Segue os arquivos trabalhados no decorrer das videoaulas.
Index.html
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nossa Banda</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div class="logo">
<img src="/images/logo_band.png" alt="Logo da Banda">
</div>
<h1 class="titulo">Nossa Banda</h1>
<h2 class="lema">A melhor banda do Planeta</h2>
<p class="texto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.</p>
<hr>
<div class="shows">
<h2>Shows</h2>
<table>
<thead>
<tr>
<th>Cidades</th>
<th>Datas</th>
</tr>
</thead>
<tbody>
<tr>
<td>São Paulo - SP</td>
<td>02/01/2021</td>
</tr>
<tr>
<td>Natal - RN</td>
<td>04/01/2021</td>
</tr>
<tr>
<td>Paraíba</td>
<td>05/01/2021</td>
</tr>
</tbody>
</table>
</div>
</main>
</body>
</html>
Style.css
body {
width: 95%;
max-width: 800px;
margin: auto;
background: url(images/background.jpeg) center;
color: #fff;
font-family: "Roboto", sans-serif;
line-height: 1.5;
}
img {
height: 110px;
width: 110px;
margin-top: 20px;
}
main {
background: #00000069;
padding: 5px 40px;
margin-top: 20px;
border-radius: 20px;
}
.logo,
.titulo,
.lema,
.texto {
text-align: center;
margin: 0;
}
.shows {
text-align: center;
margin: 30px 0;
width: 100%;
}
.shows table {
background: #ff00007a;
padding: 10px;
border-radius: 10px;
margin: 0 auto;
}
0 Comentários