3
respostas

[Projeto] Projeto concluído (aparentemente igual mas bem diferente)

Então, pra esse projeto, eu me desafiei a fazer a página antes de começar o curso, pra testar meus conhecimentos e ver se eu conseguia terminar por conta própria. Consegui fazer tudo que foi proposto, mas de um jeito diferente. Por exemplo, não usei grid (não estava tão familiarizado), listas, e também acabei q não reutilizei o código em algumas oportunidades. Mas enfim, gostei do resultado e estou feliz de ter conseguido fazer tudo sozinho, e vendo o curso aprendi muita coisa para melhorar ainda mais. Aqui está o resultado: https://aluraflix-henna-one.vercel.app/

Vou postar nas respostas o código q eu utilizei. Se tiverem algumas dicas de onde eu posso melhorar, ficarei grato de ouvir!

3 respostas

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="/styles/style.css">
    <title>EREN YEAGER</title>
</head>
<body>
    <header>

    </header>

    <main>
        <section class="primeira-parte"> 
            <div class="titulo-e-combo">
                <h2 class="primeira-parte__titulo">Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único</h2>
                <div class="primeira-parte__img_botoes">
                    <img class="primeira-parte__imagem" src="/assets/Combo.png" alt="Imagem do Combo+">
                    <button class="primeira-parte__botao1">Assine por 12x de R$120,00*</button>
                    <button class="primeira-parte__botao2">Assinar somente o Alura+</button>
                    <p class="primeira-parte__texto">*O preço pode variar caso a assinatura seja feita em outros planos</p>
                </div>
            </div>
        </section>

        <section class="segunda-parte">
            <img class="segunda-parte__imagem" src="/assets/Plataformas.png" alt="plataformas">
            <div class="segunda-parte__escritas">
                <h1 class="segunda-parte__titulo">Assista do seu jeito</h1>
                <p class="segunda-parte__texto">Aproveite a tela grande da TV ou assista no tablet, laptop, celular e outros aparelhos. Nossa seleção de cursos não para de crescer.</p>
            </div>
        </section>

        <section class="terceira-parte">
            <div class="terceira-parte__escritas">
                <p class="terceira-parte__texto">Só o Combo+ oferece Alura+ e Alura Língua juntos para você ter acesso a cursos de diversas áreas da tecnologia e aprender inglês ou espanhol, onde e como quiser.</p>
                <button class="terceira-parte__botao">Assine o Combo+</button>
            </div>
            <img class="terceira-parte__imagem"src="/assets/Telas.png" alt="Telas">
        </section>

        <section class="quarta-parte">
            <img src="/assets/Notebook.png" alt="Notebook">
            <div class="quarta-parte__escritas">
                <h1 class="quarta-parte__titulo">Baixe seus cursos</h1>
                <p class="quarta-parte__texto">Baixe e assista quando e onde quiser. Assim, seus favoritos estão sempre com você, até mesmo sem internet.</p>
            </div>
        </section>

        <section class="quinta-parte">
            <h1 class="quinta-parte__titulo">Disponível nos seus dispositivos favoritos</h1>
            <div class="quinta-parte__todasimgs-e-textos">
                <div class="quinta-parte__img-e-texto">
                    <img src="/assets/tv.png" alt="Televisão">
                    <h2 class="quinta-parte__textos">TV</h2>
                </div>
                <div class="quinta-parte__img-e-texto">
                    <img src="/assets/computador.png" alt="Computador">
                    <h2 class="quinta-parte__textos">Computadores</h2>
                </div>
                <div class="quinta-parte__img-e-texto">
                    <img src="/assets/celular.png" alt="Celular">
                    <h2 class="quinta-parte__textos">Celulares e tablets</h2>
                </div>
            </div>
        </section>
    </main>

    <footer class="rodape">
        <img src="/assets/Logo.png" alt="Logo alura+">
        <div class="rodape__combo-primeiros-textos">
            <a href="#" class="rodape__primeiros-textos">Idioma</a href="#">
            <a href="#" class="rodape__primeiros-textos">Dispositivos compatíveis</a href="#">
            <a href="#" class="rodape__primeiros-textos">Política de privacidade</a href="#">
            <a href="#" class="rodape__primeiros-textos">Proteção de dados no Brasil</a href="#">
            <a href="#" class="rodape__primeiros-textos">Anúncios personalizados</a href="#">
            <a href="#" class="rodape__primeiros-textos">Ajuda</a href="#">
        </div>
        <p class="rodape__ultimos-textos">® 2021 Alura, Alura+ e Alura Língua. Todos os direitos reservados. Serviço de assinatura paga. Conteúdo sujeito a disponibilidade.</p>
        <br>
        <p class="rodape__ultimos-textos">Alura+ é um serviço pago, baseado em assinatura e sujeito a termos e condições. O serviço Alura+ é comercializado por Aovs Sistemas de Informática S.A., Rua Vergueiro, 3185 - Liberdade, São Paulo - SP, 04101-300, Brasil e CNPJ 05.555.382/0001-33</p>
    </footer>
</body>
</html>

CSS:


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
    --cor-primaria: #00030C;
    --cor-secundaria: #FFFFFF;
    --cor-terciaria: #167BF7;
    --cor-quartenaria: #C0C0C0;
    --fonte: 'Inter', sans-serif;
}


* {
    margin: 0;
    padding: 0;    
}

body {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    font-family: var(--fonte);
}

.primeira-parte{ 
    background-image: url(/assets/Background.png);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 10% 55% 15% 10%;
}

.titulo-e-combo{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5% 0% 0% 0%;
}

.primeira-parte__img_botoes{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
    align-items: center;

}

.primeira-parte__imagem{
    padding: 10%;
}

.primeira-parte__titulo {
    font-weight: 700;
    font-size: 1.75rem;    
    padding: 0%;
    text-align: center;
}
.primeira-parte__botao1{
    font-size: 1rem;
    font-weight: 400;
    color: var(--cor-secundaria);
    background-color: var(--cor-terciaria);
    border-radius: 8px;
    padding: 3%;
    width: 150%;

}

.primeira-parte__botao2{
    font-size: 1rem;
    font-weight: 400;
    color: var(--cor-secundaria);
    background-color: transparent;
    border-radius: 8px;
    padding: 3%;
    width: 150%;
    border: 1px solid var(--cor-secundaria);
}

.primeira-parte__texto{
    font-size: 0.75rem;
    color: var(--cor-quartenaria);
}


.segunda-parte{
    display: flex;
    justify-content: center;
    padding: 10%;
}

.segunda-parte__escritas{
    display: flex;
    flex-direction: column;
    margin: 10%;
    gap: 8px;

}


.segunda-parte__titulo{

    font-size: 3rem;
    font-weight: 700;
}

.segunda-parte__texto{
    font-size: 1rem;
    font-weight: 400;
}

.terceira-parte {
    display: flex;
    gap: 70px;
    padding: 10%;

}

.terceira-parte__escritas{
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
}

.terceira-parte__texto{
    font-size: 1rem;
    font-weight: 400;
}

.terceira-parte__botao{
    color: var(--cor-secundaria);
    background-color: var(--cor-terciaria);
    padding: 16px;
    border-radius: 8px;
    width: 20%;
}

.quarta-parte{
    display: flex;
    gap: 70px;
    padding: 10%;
}
.quarta-parte__escritas{
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
}

.quarta-parte__titulo{
    font-size: 3rem;
}

.quarta-parte__texto{
    font-size: 1rem;
}

.quinta-parte{
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: center;
    align-items: center;
    padding: 5%;
}

.quinta-parte__todasimgs-e-textos{
    display: flex;
    gap: 69px;
}

.quinta-parte__titulo{
    font-size: 3rem;
    font-weight: 700;
}

.quinta-parte__img-e-texto{
    display: flex;
    flex-direction: column;
    align-items: center;

}

.quinta-parte__textos{
    font-size: 2rem;
    font-weight: 700;

}

.rodape{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7%;
}
.rodape__combo-primeiros-textos{
    display: flex;
    gap: 16px;
    padding: 4% 0% 2% 0%;
}

.rodape__primeiros-textos{
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    color: var(--cor-secundaria);
}

.rodape__ultimos-textos{
    font-size: 0.875rem;
    font-weight: 400;
    text-align: center;
    color: var(--cor-quartenaria);
}

Oi, Gabriel, tudo bem?

Parabéns pela sua dedicação durante o desenvolvimento do seu código. Se desafiar e colocar em prática os conhecimentos que temos sempre é muito importante para nossa aprendizagem. Mesmo que a escrita dos comandos tenha ficado diferente do que foi apresentado pela instrutora ao longo do curso, você conseguiu chegar no mesmo resultado, o que mostra que há diversas possibilidades para criar uma mesma página quando utilizamos as linguagens HTML e CSS.

Sempre podemos aprimorar nosso código e refatorá-lo para atender aos princípios de boas práticas na programação, bem como aos critérios de acessibilidade.

Continue se empenhando em seus estudos para desenvolver novas habilidades e conhecimentos e caso tenha dúvidas, estarei à disposição para te ajudar.

Abraços e bons estudos!