index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Desafios 01, 02, 03, 04 e 06</title>
</head>
<body>
<header>
</header>
<main>
<section class="container">
<h1>Desafios 01, 02, 03, 04 e 06</h1>
<a href="https://www.w3schools.com/html/default.asp">
<img class="logo" src="img/html5-logo.png" alt="Logo do HTML5">
</a>
<p>Desafios 01, 02, 03, 04 e 06</p>
<button>Desafios 01, 02, 03, 04 e 06</button>
</section>
</main>
<footer>
<section class="links-rodape">
<a class="itens-rodape" href="https://www.w3schools.com/html/default.asp" alt="Link do W3Schools">W3Schools</a>
<a class="itens-rodape" href="https://developer.mozilla.org/pt-BR/docs/Web/HTML"alt="Link a Mozilla">Mozilla</a>
</section>
</footer>
</body>
</html>
style.css
body
{
background-color: black;
color: white;
}
header{
background-color: black;
color: white;
}
button
{
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
padding: 1.1rem ;
border-radius: 1rem;
background-color: #22D4FD;
}
a
{
color: limegreen;
margin: auto;
}
img.logo
{
max-width: 100%;
max-height: 100%;
}
h1
{
font-size: 32px;
margin: auto;
}
p
{
font-size: 18px;
margin: auto;
}
.container
{
display: grid;
float: none;
grid-template-columns: 512px;
grid-template-rows: 64px;
float: none;
align-items: center;
justify-content: center;
margin: 175px auto;
}
.links-rodape
{
display: grid;
grid-template-columns: repeat(2, 2fr);
gap: 3rem;
width: 13rem;
font-size: 24px;
font-weight: 700;
border: none;
margin: auto;
margin-top: -0.5rem;
}
.itens-rodape
{
display: inline-flex;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
}
