<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Barbearia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css ">
<link rel="preconnect" href="https://fonts.googleapis.com">
</head>
<body>
<header>
<div class="caixa">
<h1><img class="img" src="teen Logotipo.png"></h1>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="produto.html">Produtos</a></li>
<li><a href="contato.html">Fale conosco</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section>
<hi><strong>Conheça nosso trabalho!</strong></hi>
</section>
<section class="maps">
<h2>Nossa loja</h2>
<p>Nossa loja se localiza na ilha do governador</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d919.5961938538192!2d-43.17719086951332!3d-22.78820217316873!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1spt-BR!2sbr!4v1629897521864!5m2!1spt-BR!2sbr" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</section>
</main>
<footer> <!--Rodapé-->
<img src="teen Logotipo (1).png" alt="TS Logo 2" style="width: 15%;">
</footer>
</body>
</html>
body{
font-family: 'Montserrat', sans-serif;
}
header {
background: rgb(166, 166, 166); /*Serve para o fundo*/
padding: 19px 0; /* serve para espaçamento interno */
}
.caixa {
width: 940px; /* Largura */
position: relative; /* define posição (relative exibe uma posição mas o elemento não se desloca) (https://developer.mozilla.org/en-US/docs/Web/CSS/position) */
margin: 0 auto; /* espaçamento externo */
}
nav {
position: absolute;
top: 127px; /* desloca o elemento de cima para baixo */
right: 0;
}
nav li {
display: inline;
margin: 0 0 0 15px;
}
nav a {
text-transform: uppercase;
color: #000000;
font-weight: bold; /* peso da fonte (bold negrito) */
font-size: 22px; /* tamanho da fonte */
text-decoration: none; /* decoração */
}
nav a:hover { /* hover=mouse quando o mouse estiver por cima do nav a (link de navegação) faça "algo" */
color: #7748c4;
text-decoration: underline;
} /* aqui diz quado o mouse estiver em cima do link de navegação deixe sublinhado e mude a cor para #7748c4 (roxo) */
.img {
height: 255px; /* altura */
}
form {
margin: 40px 0
}
form label, form legend {
display: block;
font-size: 20px;
margin: 0 0 10px;
margin-left: 50px; /* espaçamento externo para equerda */
}
.input-padrao {
display: block;
margin: 0 0 20px;
margin-left: 50px;
padding: 10px 20px;
width: 50%;
}
footer {
text-align: center; /* alinhar texto */
background-color: rgb(94, 94, 94); /* cor de fundo */
padding: 30px;
margin-top: 40px;
margin-bottom: 0%;
}
.checkbox {
margin: 20px 0;
}
.enviar {
width: 40%;
padding: 15px;
margin-left: 50px;
background: rgb(255, 139, 44);
border: none;
border-radius: 5px; /* raio da borda */
font-size: 18px;
font-weight: bold;
color: white;
transition: 1s background; /* trasição */
cursor: pointer;
}
.enviar:hover {
background: rgb(214, 104, 0);
}
table {
margin: 20px 0 40px;
}
thead {
background: #555555;
color: white;
font-weight: bold;
}
td, th {
border: 1px solid #000000;
padding: 8px 15px;
}
.sobre-nois {
text-align: center;
font-size: 30px;
font-weight: bold;
}
.maps {
padding: 3em 0;
}
.maps h2 {
text-align: center;
font-size: 40px;
margin: 0 0 10px;
}
.maps p {
margin: 0 0 2em;
text-align: center;
}
