Entrar Ainda não tem acesso?
2
respostas

Página-presente

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Aplicando variáveis CSS e atividade Para saber mais: dicas de projeto

por Guilherme de Freitas Santos
| 39.9k xp | 52 posts

Conteúdo HTML em index.html: 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página Presente</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
            <a class="cabecalho__menu__link" href="carta.html">Uma carta para você</a>
            <a class="cabecalho__menu__link" href="fotos.html">Nossas Fotos</a>
        </nav>
    </header>
    <main class="apresentação">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__mensagem">Essa página é um presente para você: Feliz Aniversário!</h1>
        </section>
            <div class="apresentacao__conteudo__mensagem__imagem">
                <img src="./assets/Birthday cake-pana.png" alt="Uma mulher apresentando um bolo de aniversário">
            </div>
    </main>
    <footer class="rodape">
        <p>Desenvolvido pelo estudante de HTML Guilherme</p>
    </footer>
</body>
</html>

Conteúdo HTML em carta.html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página presente</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
            <a class="cabecalho__menu__link" href="carta.html">Uma carta para você</a>
            <a class="cabecalho__menu__link" href="fotos.html">Nossas Fotos</a>
        </nav>
    </header>
    <main class="apresentação">
        <section class="apresentacao__conteudo__carta">
            <h1 class="apresentacao__conteudo__mensagem__titulo">Uma carta para você</h1>
            <p class="apresentacao__conteudo__mensagem__carta">Com todo o carinho que reside em meu coração, neste dia tão especial, envio-lhe meus mais sinceros votos de um feliz aniversário! Que a alegria te encontre em cada instante, que a saúde seja sua fiel companheira e que seus sonhos mais belos floresçam com a intensidade das cores de um jardim em plena primavera. Que este novo ciclo traga consigo inúmeras oportunidades de felicidade, aprendizado e realizações, e que a vida continue a te presentear com momentos inesquecíveis ao lado das pessoas que te amam. Parabéns e muitas felicidades!</p>
        </section>
    </main>
    <footer class="rodape">
        <p>Desenvolvido pelo estudante de HTML Guilherme</p>
    </footer>
</body>
</html>
2 respostas
por Guilherme de Freitas Santos
| 39.9k xp | 52 posts

Conteúdo HTML em fotos.html: 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página Presente</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
            <a class="cabecalho__menu__link" href="carta.html">Uma carta para você</a>
            <a class="cabecalho__menu__link" href="fotos.html">Nossas Fotos</a>
        </nav>
    </header>
    <main class="apresentação">
        <section class="apresentacao__conteudo__carta">
            <h1 class="apresentacao__conteudo__mensagem__titulo__fotos">Nossas fotos</h1>
        </section>
        <div class="galeria">
            <img src="./assets/Good team-pana.png" alt="Conjunto de pessoas trabalhando em equipe">
            <img src="./assets/High five-pana.png" alt="Duas pessoas realizando um high-five">
            <img src="./assets/Pharmacist-pana.png" alt="Foto de uma farmacêutica">
            <img src="./assets/Students-pana.png" alt="Conjunto de estudantes">
            <img src="./assets/Team spirit-pana.png" alt="Pessoas trabalhando em equipe">
            <img src="./assets/Welcome-pana.png" alt="Conjunto de pessoas celebrando a chegada de uma pessoa">
        </div>
    </main>
    <footer class="rodape">
        <p>Desenvolvido pelo estudante de HTML Guilherme</p>
    </footer>
<body>
    
</body>
</html>

Conteúdo CSS em styles.css: 

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

:root {
    --cor-de-fundo: #FFEDFA;
    --cor-das-bordas: #BE5985;
    --cor-dos-links: #9EC6F3;
    --cor-dos-textos: #EC7FA9;
    --cor-do-rodape: #FFF1D5;

    --fonte-primaria: "Krona One", sans-serif;
    --fonte-secundaria: "Montserrat", sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

body {
    box-sizing: border-box;
    background-color: var(--cor-de-fundo);
    color: var(--cor-dos-textos);
    text-align: center;
}

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

.cabecalho__menu {
    display: flex;
    justify-content: center;
    gap: 30px;
    background-color: var(--cor-do-rodape);
    color: var(--cor-dos-links);
    font-family: var(--fonte-primaria);
    font-weight: 200;
    padding: 20px;
}

.cabecalho__menu {
    display: flex;
    gap: 30px;
    font-size: 18px;
}

.cabecalho__menu__link {
    display: flex;
    gap: 30px;
    font-size: 18px;
    color: var(--cor-dos-links);
    font-family: var(--fonte-primaria);
    font-size: 12px;
    margin-left: 20px;
    text-decoration: none;
}

.apresentacao {
    padding: 4% 15%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.apresentacao__conteudo {
    width: 615px;
    display: flex;
    flex-direction: center;
    gap: 100px;
    margin-left: 100px;
    margin-top: 280px;
    align-items: center;
}

.apresentacao__conteudo__mensagem {
    font-size: 30px;
    font-family: var(--fonte-secundaria);
    margin-top: 5px;
    margin-bottom: 100px;
    text-align: center;
}

.apresentacao__conteudo__carta {
        width: 615px;
        display: flex;
        flex-direction: column; 
        align-items: center;
        margin-left: 300px;
}

.apresentacao__conteudo__mensagem__titulo {
    font-size: 30px;
    font-family: var(--fonte-secundaria);
    margin-top: 25px;
    text-align: center;
    margin-left: 300px;
}

.apresentacao__conteudo__mensagem__titulo__fotos {
    font-size: 30px;
    font-family: var(--fonte-secundaria);
    margin-top: 25px;
    text-align: center;
    margin-left: 300px;
}

.apresentacao__conteudo__mensagem__carta {
    font-size: 20px;
    font-family: var(--fonte-secundaria);
    margin-top: 20px; 
    text-align: justify;
    margin-left: 300px;
    margin-bottom: 50px;
}

.apresentacao__conteudo__mensagem__imagem {
    margin-left: 787px;
    margin-top: -519px;
}

.apresentacao__conteudo__mensagem__imagem img {
    width: 600px;
    height: auto;
}

.galeria {
    display: flex; 
    justify-content: space-around; 
    flex-wrap: wrap; 
}

.galeria img {
    width: 400px;
    height: auto;
    margin: 5px;
}

.rodape {
    gap: 30px;
    font-size: 18px;
    color: var(--cor-dos-links);
    background-color: var(--cor-do-rodape);
    font-family: var(--fonte-primaria);
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    padding: 2%;
}

Sinto muito, mas eu não consegui subir a imagem de meu projeto.

por Lorena Garcia
| 9643.7k xp | 14419 posts
Alura Scuba Team Suporte Educacional

Oii, Guilherme! Como vai?

Obrigada por compartilhar seu projeto com a comunidade Alura.

Gostei muito da proposta criativa da “Página Presente” e da forma como você organizou o conteúdo em diferentes páginas com navegação clara. A ideia de homenagear alguém com HTML e CSS mostra um ótimo uso prático e afetivo do que foi aprendido.

Você pode explorar também o uso de variáveis para tamanhos e espaçamentos. Isso facilita ajustes globais depois.Veja este exemplo:


:root {
  --espacamento-padrao: 20px;
}

.container {
  padding: var(--espacamento-padrao);
}

Esse código define um espaçamento padrão reutilizável com padding.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!