Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Minha versão do exercício proposto

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Conteúdo externo e atividade Consolidando o seu conhecimento

por Régis André Nascimento Coelho
| 33.5k xp | 45 posts

Decidi inserir os itens de fontes externas em uma nova página, chamada 'Sobre nós'.

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Barbearia Alura. Resultado final do Curso HTML5 e CSS3, partes 1 a 3.">

    <title>Barbearia Alura</title>
    <link rel="stylesheet" href="../assets/css/reset.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="../assets/css/about.css">
    <link rel="stylesheet" href="../assets/css/style.css">
</head>

<body>
    <header class="header">
        <h1 class="logo">
            <picture>
                <source type="image/webp" srcset="../assets/images/logo-branco.webp">
                <source type="image/jpeg" srcset="../assets/images/logo-branco.png">
                <img src="../assets/images/logo-branco.png"
                    alt="Imagem monocromática branca contendo a silhueta de uma cabeça, onde somente o cabelo, barba e óculos quadrados estão visíveis. Ao meio da figura, abaixo dos óculos, lê-se 'Alura - Established 2019' ">
            </picture>

        </h1>
        <nav class="navigation">
            <ul>
                <li><a href="../index.html" class="nav-links">Home</a></li>
                <li><a href="about.html" class="nav-links">Sobre nós</a></li>
                <li><a href="products.html" class="nav-links">Serviços</a></li>
                <li><a href="contact.html" class="nav-links">Contato</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2 class="title2">Sobre a Barbearia Alura</h2>
        <section class="map">
            <h3 class="title3">Localização</h3>
            <div>
                <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.
                </p>
                <p>Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos
                    clientes a cada dia.
                </p>
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d16391.038793282292!2d-73.97379424319827!3d40.67751169760271!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbb0c25c2a8842a7e!2sLiv&#39;s%20Barbershop!5e0!3m2!1spt-BR!2sbr!4v1630980779912!5m2!1spt-BR!2sbr"
                    width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
            </div>
        </section>
        <section class="mission">
            <div>
                <h3 class="title3">Missão</h3>
                <p><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.</p>
                <p>O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
            </div>

            <div class="video"><iframe src="https://player.vimeo.com/video/37805473?h=86b2b5e56b&color=ffffff&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

        </section>
    </main>
    <footer class="footer">
        <img src="../assets/images/logo-branco.png" alt="">
        <p class="copyright">&copy; Copyright Barbearia Alura - 2021</p>
    </footer>
</body>

</html>

Dá pra ver o site todo neste link: https://regisncoelho.github.io/alura-barbershop/

2 respostas
solução!
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team

Olá Régis, tudo bem?

Abri a página do site e vi que ficou excelente! Parabéns pelo empenho e dedicação, ficaram realmente incríveis suas personalizações.

Ficou com alguma dúvida ou dificuldade na hora da contrução? Fique a vontade para contar para nós como foi esse processo, tenho certeza que ajudará outros alunos também.

Tenho apenas uma sugestãos a fazer! Tente modificar o link da home que direciona para a página de contatos, de uma forma que deixe mais explícito visualmente que de fato é um link, alterar o hover é um bom caminho! Assim irá proporcionar uma melhoria na usabilidade.

Abraços e bons estudos!

por Régis André Nascimento Coelho
| 33.5k xp | 45 posts

Valeu pela dica, Beatriz! Fiz uma pequena alteração no link pra que mude de tamanho e ganhe um sublinhado quando o ponteiro passar por ele.

Tenho certeza que tem muitas coisas que poderiam ser melhoradas tanto no código html quanto no css, mas aos poucos eu chego lá.

Obrigado pela atenção.

.banner {
    width: 100%;
}
.about {
    background-color: white;
    padding: 30px;
}

.div-wrapper {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.div-wrapper div {
    width: 35%;
    text-align: justify;
}

.map {
    margin: 20px auto 20px;
    display: block;
    filter: grayscale(75%);
    max-width: 70%;
}
.lists {
    display: flex;
    flex-direction: column;
    font-size: inherit;
    margin: 0.5em auto;
    width: fit-content;
}

em strong {
    font-weight: bold;
}

.open-hours {
    background: #bbb;
    padding: 30px;
}

.grayscale {
    filter: grayscale(100%);
}

.open-hours table {
    font-size: inherit;
    width: 28%;
    margin: 1em;
}

.open-hours th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: center;
    background: #ccc;
}

.open-hours th, .open-hours td {
    border: 1px solid #000;
    padding: 8px 30px;
    vertical-align: middle;
}

.contact {
    padding: 30px;
}

.contact p {
    display: inline-block;
    margin: 0.5em;
    text-align: left;
    width: 350px;
}

#contact-link {
    margin-top: 3em;
    width: auto;
    transition: 0.3s;
}

#contact-link:hover {
    text-decoration: underline;
    transform: scale(1.03);
}