[Projeto] [Projeto] Mais uma etapa! | HTML e CSS: cabeçalho, footer e variáveis CSS

Bom dia, boa tarde, boa noite!! Mais uma etapa concluida, estou adorando esse curso!

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

<!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="css.css">
    <title>Portfólio</title>
</head>

<body>
    <header class="cabecalho">
        <nav class="menu">
            <a class="menu__link" href="index.html">Home</a>
            <a class="menu__link" href="sobre.html">Sobre mim</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao_conteudo">
            <i class="icon"></i>
            <h1>Eleve seu negócio digital a outro nível <strong class="destaque">com um Design de qualidade!</strong>
            </h1>
            <p>Olá! Sou Priscilla Dastre, desenvolvedora Front-end com especialidade em UI/UX, Figma, HTML e CSS. Ajudo
                pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <div class="link">
                <h2>Acesse minhas redes</h2>
                <div class=" botoes">
                    <a href="" class="botao">
                        <img src="html-logo-main/icones/logotipo-do-instagram.png">
                        Instagram</a>
                    <a href="" class="botao">
                        <img src="html-logo-main/icones/github.png">
                        Github</a>
                    <a href="" class="botao">
                        <img src="html-logo-main/icones/behance.png">
                        Behance</a>
                    <a href="" class="botao">
                        <img src="html-logo-main/icones/linkedin.png">
                        Linkedln</a>
                </div>
            </div>
        </section>
        <img src="html-logo-main/Imagem.png" class="imagem">

    </main>
</body>
<footer class="rodape">
    <p> Desenvolvido por Priscilla Dastre</p>
</footer>

</html>

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@100;600&display=swap');

* {
    margin: 0;
    padding: 0;
}

:root {
    --cor-back: #5B7A97;
    --cor-fonte: #F6F6F6;
    --cor-link: #FFC8DD;
    --cor-hover: #739abf;



}

body {
    text-align: justify;
    text-justify: inter-word;
    box-sizing: border-box;
    background-color: var(--cor-back);
    color: var(--cor-fonte);

}

.cabecalho {
    padding: 2% 0% 0% 10%;
}

.icon {
    background: url('html-logo-main/Design.png');
    /*  height: 16px;
    width: 16px;
    display: block; */
    /* Other styles here */
}

.menu {
    display: flex;
    gap: 80px;
}

.menu__link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: var(--cor-link);
    text-decoration: none;

}

.apresentacao {
    padding: 2% 8% 8% 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* .enfeite {
    height: 280px;
    width: 150px;
    align-self: flex-start;
    position: relative; */


.apresentacao_conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.destaque {
    color: var(--cor-link);
}

h1 {
    font-size: 36px;
    font-family: 'Krona One', sans-serif;

}

p {
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
}



.link {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 16px;

}

h2 {
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    font-size: 24px;
}

.botoes {
    column-count: 2;

}



.botao {
    width: 280px;
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 10px;
    /*  width: 50%; */
    text-align: center;
    border-radius: 8px;
    border: 2px solid var(--cor-link);
    font-size: 24px;
    padding: 21.5px 0;
    text-decoration: none;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;

}

.botao:hover {
    background-color: var(--cor-hover);
    border: none;
}


.imagem {
    margin: 0;
    padding: 0;
    /* width: 423.26px;
    height: 494.14px; */
    align-self: flex-start;
}

.rodape {
    color: wheat;
    padding: 24px;
    background-color: #739abf;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400;
}

Olá, Priscilla!

Parabéns por concluir mais uma etapa do curso! É ótimo ver o seu entusiasmo e progresso. Pelas imagens que compartilhou, o seu projeto está muito bonito, adorei a escolha das cores além dos efeitos de edição nas imagens, ficaram incríveis.

Continue se desafiando e explorando cada vez mais, tenho certeza de que você vai aprender muito mais com a continuação do curso e vai conseguir deixar o seu projeto responsivo e colocá-lo no ar para que todos tenham acesso ao seu projeto.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Mergulhe em programação