Pular para o conteúdo principal

Tutorial: Como Criar uma Landing Page de Natal Responsiva

Autor:
Landing Page de Natal


Neste tutorial, vamos criar uma Landing Page de Natal com contagem regressiva para o Natal, design responsivo e efeitos interativos. O projeto utiliza HTML, CSS e JavaScript, ideal para iniciantes ou programadores que desejam praticar habilidades de front-end.

Veja a Landing Page de Natal em funcionamento neste link. Landing Page de Natal.

Veja o vídeo no YouTube:

🚀 Passo a Passo

1. Estruturando o Projeto

Crie a estrutura de pastas e arquivos do projeto:

landing-page-natal/  
├── index.html        # Arquivo HTML principal  
├── style.css         # Estilos personalizados  
├── script.js         # Lógica interativa  
├── assets/           # Pasta para imagens e ícones  
│   ├── img/          # Imagens como favicon, sinos e estrelas

Adicione as imagens necessárias na pasta assets/img . Por exemplo:

  • favicon.png
  • santa3.png (imagem do Papai Noel)
  • bell.png (sino de notificação)
  • star.png (estrela decorativa)

2. Criando o HTML

No arquivo index.html, crie a estrutura principal da página:

  • Um header com um menu interativo.
  • Uma seção principal com a contagem regressiva para o Natal.

Aqui está o código completo do HTML:




<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.6.0/remixicon.css">
    <link rel="stylesheet" href="style.css">
    <title>Landing Page de Natal</title>
</head>
<body>
    <header class="header" id="header">
        <nav class="nav container">
            <a href="#" class="nav__logo">
                <span>Feliz</span>
                <span>Natal</span>
            </a>

            <div class="nav__menu" id="nav-menu">
                <ul class="nav__list">
                    <li class="list__item">
                        <a href="#" class="nav__link active-link">
                            Inicio
                        </a>
                    </li>

                    <li class="list__item">
                        <a href="#" class="nav__link">
                            Presentes
                        </a>
                    </li>

                    <li class="list__item">
                        <a href="#" class="nav__link">
                            Contato
                        </a>
                    </li>
                </ul>

                <div class="nav__buttons">
                    <div class="nav__notification">
                        <img src="assets/img/bell.png" alt="image" class="nav__bell">
                        <div class="nav__circle">2</div>
                    </div>

                    <a href="#" class="button button__dark">Compre um Presente</a>
                </div>

                <div class="nav__close" id="nav-close">
                    <i class="ri-close-line"></i>
                </div>
            </div>

         
            <div class="nav__toggle" id="nav-toggle">
                <i class="ri-apps-2-line"></i>
            </div>
        </nav>
    </header>
    <main class="main">
        <section class="home">
            <div class="home__container container">
                <img src="assets/img/santa3.png" alt="image" class="home__img">

                <div class="home__data">
                    <div>
                        <h1 class="home__title" id="title-data">
                            Faltam
                            <div class="home__number" id="number-data">13</div>
                            <div class="home__text" id="text-data">Dias</div>
                            para o Natal
                        </h1>

                        <h1 class="home__title" id="msg-christmas"></h1>
                    </div>

                    <p class="home__description">
                        Compartilhe o espírito natalino e da felicidade
                        com os melhores presentes.
                    </p>

                    <a href="#" class="button">Presentei seus amados</a>
                </div>

                <img src="assets/img/bell.png" alt="image" class="home__bell">
                <img src="assets/img/star.png" alt="image" class="home__star">

                <div class="home__blob"></div>
            </div>
        </section>
    </main>
    <script src="https://app.embed.im/snow.js" defer></script>
    <script src="script.js"></script>
</body>
</html>

3. Adicionando o CSS

No arquivo style.css, adicione estilos para:

  • Layout responsivo.
  • Efeitos decorativos como gradientes, estrelas e sinos.
  • Animações suaves para o menu e botões.

O código completo está disponível no snippet a seguir:




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

:root {
    --header-height: 3.5rem;

    --first-color: hsl(0, 87%, 49%);
    --first-color-alt: hsl(0, 89%, 48%);
    --gradient-color: linear-gradient(180deg,
                  hsl(352, 86%, 28%),
                  hsl(358, 84%, 38%));
    --first-color-dark: hsl(356, 78%, 21%);
    --first-color-darker: hsl(353, 84%, 22%);
    --title-color: hsl(49, 96%, 91%);
    --text-color: hsl(99, 20%, 65%);

    --body-font: "Montserrat", sans-serif;
    --second-font: "Gwendolyn", cursive;
    --biggest-font-size: 2rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --normal-font-size: .938rem;
    --smaller-font-size: .75rem;

    --font-regular: 400;
    --font-bold: 700;

    --z-tooltip: 10;
    --z-fixed: 100;
}

@media screen and (min-width: 1150px) {
    :root {
        --biggest-font-size: 3rem;
        --h1-font-size: 2.25rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --smaller-font-size: .813rem;
    }
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}


body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background: var(--gradient-color) no-repeat;
    color: var(--text-color);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1120px;
    margin-inline: 1.5rem;
}


.main {
    overflow: hidden;
}

.header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    z-index: var(--z-fixed);
}

.nav,
.nav__logo,
.nav__list,
.nav__buttons {
    display: flex;
}

.nav {
    position: relative;
    height: var(--header-height);
    justify-content: space-between;
    align-items: center;
}

.nav__logo {
    color: var(--title-color);
    font-weight: var(--font-bold);
    flex-direction: column;
    align-items: center;
}

.nav__logo span:nth-child(1) {
    color: var(--first-color);
    font-size: var(--h1-font-size);
    font-family: var(--second-font);
    transform: translateY(4px);
}

.nav__logo span:nth-child(2) {
    transform: translateY(-4px);
}
.nav__toggle,
.nav__close {
    display: inline-flex;
    font-size: 1.25rem;
    color: var(--title-color);
    cursor: pointer;
}
@media screen and (max-width: 1150px) {
    .nav__menu {
        position: fixed;
        top: 0;
        right: -100%;
        background: var(--gradient-color);
        width: 80%;
        height: 100%;
        box-shadow: -2px 0 12px hsla(0, 0%, 0%, .2);
        padding: 6rem 2rem 0;
        display: flex;
        flex-direction: column;
        row-gap: 5rem;
        transition: right .4s;
    }
}
.nav__list {
    flex-direction: column;
    row-gap: 2rem;
}

.nav__link {
    color: var(--text-color);
    font-weight: var(--font-bold);
    display: inline-flex;
    flex-direction: column;
    transition: color .4s;
}

.nav__link span {
    font-size: var(--smaller-font-size);
}

.nav__link:hover {
    color: var(--title-color);
}

.nav__buttons {
    align-items: center;
    column-gap: 1rem;
}
.nav__notification {
    position: relative;
    background-color: var(--first-color);
    width: 50px;
    height: 50px;
    border-radius: .75rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color .4s;
}
.nav__bell {
    width: 32px;
}

.nav__notification:hover {
    background-color: var(--first-color-alt);
}

.nav__circle {
    width: 24px;
    height: 24px;
    background-color: hsl(0, 100%, 39%);
    color: var(--title-color);
    font-weight: var(--font-bold);
    font-size: var(--smaller-font-size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: absolute;
    top: -6px;
    right: -6px;
}

.nav__close {
    position: absolute;
    top: 1.15rem;
    right: 1.5rem;
}

.active-link {
    color: var(--title-color);
}

.active-link span {
    color: var(--first-color);
}

.show-menu {
    right: 0;
}

.button {
    display: inline-block;
    background-color: var(--first-color);
    color: #fff;
    font-weight: var(--font-bold);
    padding: 1.125rem 2rem;
    border-radius: .75rem;
    box-shadow: 0 4px 24px hsla(0, 0%, 0%, .2);
    transition: background-color .4s;
}
.button:hover {
    background-color: var(--first-color-alt);
}

.button__dark {
    background-color: var(--first-color-dark);
}

.button__dark:hover {
    background-color: var(--first-color-darker);
}
.home {
    height: 100vh;
    display: grid;
    align-items: center;
}

.home__container {
    position: relative;
    padding-block: 5.5rem 3rem;
    display: grid;
    row-gap: 4rem;
}

.home__img {
    width: 400px;
    transform: scale(1.5);
    transform-origin: top;
    justify-self: center;
}

.home__data {
    text-align: center;
}

.home__title {
    font-size: var(--biggest-font-size);
    font-weight: var(--font-bold);
    color: var(--title-color);
    margin-bottom: 1rem;
}

.home__number,
.home__text {
    display: inline-grid;
}
.home__number {
    position: relative;
    place-items: center;
    margin-left: .75rem;
    width: 44px;
    height: 44px;
    background-color: var(--first-color-darker);
    border-radius: 50%;
    font-size: var(--h2-font-size);
    transform: translateY(-4px);
}
.home__number::after {
    content: '';
    position: absolute;
    width: 44px;
    height: 44px;
    border: 10px solid var(--first-color);
    border-radius: 50%;
    border-right-color: transparent;
    border-top-color: transparent;
    transform: rotate(45deg);
}
.home__description {
    margin-bottom: 2rem;
    color: var(--title-color);
}

.home__star,
.home__bell {
    position: absolute;
}
.home__bell {
    width: 50px;
    top: 14rem;
    right: -1.25rem;
    transform: rotate(30deg);
}
.home__star {
    width: 60px;
    bottom: 17rem;
    left: -3rem;
    transform: rotate(30deg);
}
.home__blob {
    position: absolute;
    width: 600px;
    height: 600px;
    background-color: var(--first-color-dark);
    border-radius: 4rem;
    transform: rotate(45deg);
    left: -23rem;
    top: 6rem;
    z-index: -1;
}

@media screen and (max-width: 360px) {
    .container {
        margin-inline: 1rem;
    }

    .nav__buttons {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 1rem;
    }
}

@media screen and (min-width: 400px) {
    .home__container {
        grid-template-columns: 360px;
        justify-content: center;
        row-gap: 3rem;
    }

    .home__img {
        transform: scale(1.1);
    }
}

@media screen and (max-width: 968px) and (max-width: 720px) {
    .home {
        height: initial;
    }
}

@media screen and (min-width: 968px) {
    .nav__menu {
        width: 50%;
    }

    .home__container {
        grid-template-columns: repeat(2, 400px);
        align-items: center;
    }

    .home__data {
        text-align: initial;
    }

    .home__number {
        background-color: var(--first-color-dark);
    }

    .home__blob {
        width: 800px;
        height: 800px;
        left: -28rem;
    }
}

@media screen and (min-width: 1150px) {
    .container {
        margin-inline: auto;
    }

    .nav {
        height: calc(var(--header-height) + 2rem);
    }

    .nav__toggle,
    .nav__close {
        display: none;
    }

    .nav__menu {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .nav__list {
        margin-inline: auto;
        flex-direction: row;
        column-gap: 4.5rem;
    }

    .home__container {
        grid-template-columns: 650px 485px;
        padding-block: 6rem 0;
    }

    .home__img {
        width: 650px;
        transform: translateX(2rem) scale(1);
    }

    .home__data {
        transform: translateX(-2rem);
    }

    .home__number,
    .home__number::after {
        width: 52px;
        height: 52px;
    }

    .home__description {
        margin-bottom: 3rem;
    }

    .home__bell {
        width: 60px;
        top: initial;
        left: 2rem;
        bottom: 0;
    }

    .home__star {
        width: 70px;
        left: initial;
        right: 3rem;
        bottom: 10rem;
    }

    .home__blob {
        width: 1200px;
        height: 1200px;
        left: -48rem;
    }
}

@media screen and (min-width: 1600px) {
    .home__blob {
        left: -100%;
        top: 0;
    }
}

4. Programando o JavaScript

Implemente a contagem regressiva para o Natal e a interatividade do menu no arquivo script.js:



const navMenu = document.getElementById('nav-menu'),
      navToggle = document.getElementById('nav-toggle'),
      navClose = document.getElementById('nav-close');

if(navToggle) {
    navToggle.addEventListener('click', () => {
        navMenu.classList.add('show-menu');
    })
}

if(navClose) {
    navClose.addEventListener('click', () => {
        navMenu.classList.remove('show-menu');
    })
}

const navLink = document.querySelectorAll('.nav__link');

const linkAction = () =>{
    const navMenu = document.getElementById('nav-menu');
    navMenu.classList.remove('show-menu');
}
navLink.forEach(n => n.addEventListener('click', linkAction));

const titleData = document.getElementById('title-data'),
      numberData = document.getElementById('number-data'),
      textData = document.getElementById('text-data'),
      msgChristmas = document.getElementById('msg-christmas');

const christmasCountdown = () => {
    let now = new Date(), // data atual
        currentMonth = now.getMonth() + 1, // mês atual
        currentDay = now.getDate(); // dia do mês

    // Calcule o ano em que será o próximo Natal
    let nextChristmasYear = now.getFullYear()
    if(currentMonth == 12 && currentDay > 25) {
        nextChristmasYear += 1;
    }

    let nextChristmasDate = `Dec 25, ${nextChristmasYear} 00:00:00`,
        christmasDay = new Date(nextChristmasDate),
        timeLeft = christmasDay - now;

    let days = 0,
        hours = 0,
        minutes = 0,
        seconds = 0;

    // Não calcule o tempo restante se for dia de Natal
    if(currentMonth != 12 || (currentMonth == 12 && currentDay != 25)) {
        days = Math.floor(timeLeft / 1000 / 60 / 60 / 24);
        hours = Math.floor(timeLeft / 1000 / 60 / 60) % 24;
        minutes = Math.floor(timeLeft / 1000 / 60) % 60;
        seconds = Math.floor(timeLeft / 1000) % 60;
    }

    // mostrat quantos dias faltam
    numberData.innerHTML = days < 10 ? `0${days}` : days;
    textData.innerHTML = 'Dias';

    if(currentMonth == 12 && currentDay == 25) {
        titleData.style.display = 'none';
        msgChristmas.style.display = 'block';
        msgChristmas.innerHTML = 'Today is Dec 25, Merry Christmas'
    }

    // Mostrar dias restantes e remover mensagem de Natal
    if(currentMonth == 12 && currentDay == 26) {
        titleData.style.display = 'block';
        msgChristmas.style.display = 'none';
    }
}

setInterval(christmasCountdown, 1000);

✨ Resultado Final

Seu projeto estará pronto! Teste abrindo o arquivo index.html no navegador. Você verá a contagem regressiva, o menu interativo e os efeitos visuais.

Se preferir os códigos estão no meu Repositório no GitHub.

Aproveite e compartilhe o espírito natalino!

Boas festas e bons códigos! 🎅🎄

Marcador

Comentários

Postar um comentário

Obrigado pelo seu feedback!

Mais vistas

Autocode - Significado e Funcionalidade

Autor:
O Que é Autocode? O Autocode foi uma das primeiras linguagens de programação de computador, desenvolvida em 1952 por Alick Glennie para o computador Mark 1 na Universidade
Postar um comentário
Continue Lendo...

Semáforo - HTML, CSS e JavaScript - Tutorial

Autor:
Semáforo Funcional: Aprenda a criar um semáforo funcional com este tutorial detalhado. Descubra como implementar a lógica de controle de um semáforo usando HTML, CSS e JavaScript.
Postar um comentário
Continue Lendo...

Animação Roleta de Prêmios - HTML, CSS e JavaScript - Tutorial

Autor:
Animação Roleta de Prêmios: Descubra como criar uma animada roleta de prêmios com este tutorial detalhado. Este projeto consiste em uma Animação,  uma roleta
Postar um comentário
Continue Lendo...