HTML
CSS
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Estes links levam para arquivos que estão em sua máquina e, por isso, não estão acessíveis para ninguém além de você. A gente percebe isso pois o link começa com file:///C:/.
Tenta copiar o texto inteiro aqui pra que a gente possa ver!
HTML
<head>
<meta charset="UTF-8">
<title>BARBEARIA ALURA</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link href="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="caixa">
<h1><img src="logo.png"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="produto.html">Produtos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
<img class="sua-barbearia" src="sua-barbearia.jpg">
<main>
<section class=" principal">
<h2 class="titulo principal">Sobre a Barbearia Alura</h2>
<img class="utensilios" src="utensilios.jpg" alt="utensilios de um barbeiro.">
<p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba.Fundada em 2019, a Barbearia Alura já é destaque na csidade e conquista novos clientes a cada dia.</p>
<p id= "missão"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>
<p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda.O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
</section>
<section classe="mapa">
<h3 classe="titulo-principal"> Ficamos</h3>
<p> Ficamos localizado no centro da cidade </p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14694.901692548574!2d-46.5495342611286!3d-22.960337201992264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cec990350a530d%3A0x8835c4754d1ab8ce!2sCentro%2C%20Bragan%C3%A7a%20Paulista%20-%20SP!5e0!3m2!1spt-BR!2sbr!4v1632254984984!5m2!1spt-BR!2sbr" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</section>
<section classes="Benefiicos">
<h3 classe="titulo principal">
<p> Benefiicos </p>
<ul>
<li classe="itens">*Localização</li>
<li classe="itens">*Espaço diferenciados</li>
<li classe="itens">*Atendimento ao Cliente</li>
<li classe="itens">*Profissionais Qualificados</li>
</ul>
<img src="barbearia1.jpg" class="barbearia1">
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
<footer>
<img src="logo-branco.png">
<p class= "copyright"> © Copyright Barbearia Alura - 2022 </p>
</footer>
</main>
</body> CSS
body{ font-family: 'Montserrat Glúten', sans-serif; }
header { background: #BBBBBB; padding: 20px 0; }
.caixa { position: relative; width: 940px; margin: 0 auto;
}
nav { position: absolute; top: 110px; right: 0px; }
nav li { display: inline; margin: 0 0 0 15px;
}
nav a { text-transform: uppercase; color: #bbff00; font-weight: bold; font-size: 22px; text-decoration: none; }
nav a:hover { color: #bbff00; text-decoration: underline; }
.produtos { width: 940px margin: 0 auto; padding: 50px 0; }
.produtos li { display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border: 2px solid #000000; border-radius: 10px; }
.produtos li:hover { border-color: #bbff00; }
.produtos li:active { border-color: #bbff00; } .produtos li:hover h2 { font-size: 34px; }
.produtos h2 { font-size: 50px; font-weight: bold;
}
.produto-decsricao{ font-size: 18px; }
.produto-preco { font-size: 22px; font-weight: bold; margin-top: 10px ; }
footer { text-align: center; background: url("bg.jpg"); padding: 20px 0;
}
.copyright{ color: #FFFFFF; font-size: 90%; margin: 20px 0 18; }
main{ width: 940px; margin: 0 auto;
}
form { margin: 40px 0;
}
form label, form legend { display:block; font-size: 20px: margin: 0 0 10px;
}
.input-padrao { display:block; margin:0 0 20px; padding:10px 25px; width: 50%; }
.checkbox{ margin: 20px 0; }
.enviar { width:40%; padding: 15px 0; background: orange; color: white; font-weight: bolder; font-size: 18px; border: none; border-radius: 5px; transition: 1s all; cursor: pointer; }
.enviar: hover{ background: darkorange; transform: scale(1.2);
}
table { margin: 20px 0 40px; }
thead { background: #bbff00; color: white; font-weight: bold; }
td, th { border: 1px solid #000000; padding: 8px 15px; }
/css da pagina inicial/ .sua-barbearia { width: 100%; height: 500px;
}
.titulo.principal{ text-align: center; font-size: 2em; margin: 0 0 1em; clear: left; }
.principal p { margin: 0 0 1em;
}
.principal strong{ font-weight: bold;
}
.principal em { font-style: italic;
}
.utensilios{ width: 120px; float: left; margin:0 20px 20px 0;
} .barbearia1{ width: 60%; }
.mapa{ padding: 3em 0; }
.mapa p{ margin: 0 0 2em; text-align: center; }
.video { width: 560px; margin: 1em auto; }