Landing Pages : Coming Soon

Pour annoncer l’ouverture d’un site web, ou bien une mise à jour majeure, ou bien encore un événement important, il est bien utile d’utiliser une page de type « Coming Soon ».

Le plus souvent, il est d’usage de mettre en place plusieurs éléments sur ce type de landing page : le logo de l’entreprise, des liens vers les réseaux sociaux, un compte à rebours menant à la date de l’ouverture. Plus rarement, on peut y trouver une vidéo en background, un formulaire d’inscription à la newsletter, ou un formulaire de contact.

Voyons ce que cela donne, dans le cas où on choisit d’y intégrer  : le logo, les liens vers les réseaux sociaux, le formulaire pour la newsletter, et le compte à rebours.

Côté HTML, tout d’abord :

On commence par un div pour le logo, qui sera situé sur la gauche :

<div class="left-logo">
                <div class="info-logo">
                  <a href="https://www.sebastienmerour.com/portfolio/">
                    <img src="../../images/coming-soon-logo.jpg" alt="">
                  </a>
                </div>
            </div>

Pour la partie de droite, on intègre également le logo, mais cette fois en petite taille. Et on y ajouter une liste de liens vers les réseaux sociaux du site :

<div class="form-row logo-social">
                            <div class="col-6">
                                <div class="right-logo">
                                    <a href="https://www.sebastienmerour.com/portfolio/">
                                        <div class="logo"><img src="../../images/sebastien-merour-logo-1.png"></div>
                                    </a>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="social no-bg-icon">
                                    <a href="#"><i class="fab fa-facebook-f"></i></a><a href="#"><i class="fab fa-twitter"></i></a><a href="#"><i class="fab fa-linkedin-in"></i></a>
                                </div>
                            </div>
                        </div>

Par la suite, on ajoute un formulaire qui aura pour vocation d’inviter les visiteurs à s’abonner à la newsletter :

<h3>Le site ouvrira très bientôt!</h3>
                        <p>Pour être prévenu dès qu'il sera ouvert, renseignez votre adresse e-mail :</p>
                        <form class="form-row">
                            <div class="col-md-8">
                                <input type="text" class="form-control" placeholder="Adresse E-Mail">
                            </div>
                            <div class="col-md-4">
                                <button type="submit" class="btn btn-primary">Prevenez-moi</button>
                            </div>
                        </form>

On termine la page HTML avec un div contenant le compte à rebours :

<div class="time-counter form-row">
                            <div class="days count col">
                                <div class="num">15</div>
                                <div class="label">Jours</div>
                            </div>
                            <div class="hours count col">
                                <div class="num">09</div>
                                <div class="label">Heures</div>
                            </div>
                            <div class="minutes count col">
                                <div class="num">53</div>
                                <div class="label">Min</div>
                            </div>
                            <div class="seconds count col">
                                <div class="num">39</div>
                                <div class="label">Sec</div>
                            </div>
                        </div>

Pour le CSS, on décide de créer un background sympa et très simple : l’objectif est de créer une ligne oblique qui va séparer le logo du site, de la section consacrée au formulaire et au compte à rebours. Pour cela, on utilise la fonction skewX() qui permet d’opérer une distorsion horizontale :

.form.custom-bg:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #432F75;
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    /* Pour mettre une ligne oblique entre les 2 couleurs de fond : */
    -webkit-transform: skewX(-15deg) scaleX(0.8);
    -moz-transform: skewX(-15deg) scaleX(0.8);
    -ms-transform: skewX(-15deg) scaleX(0.8);
    transform: skewX(-15deg) scaleX(0.8);
}

Enfin, on ajoute un fichier Javascript pour intégrer le compte à rebours en bas de page :

"use strict"
$(window).on("load", function() {
    function countDown(){
        var today = new Date();
        var eventDate = new Date("June 30,2020 00:00:00");
        var currentTime = today.getTime();
        var eventTime = eventDate.getTime();
        var remTime = eventTime - currentTime;

        var sec = Math.floor(remTime/1000);
        var min = Math.floor(sec/60);
        var hrs = Math.floor(min/60);
        var days = Math.floor(hrs/24);

        hrs %= 24;
        min %= 60;
        sec %= 60;

        days = (days<10) ? "0"+days : days;
        hrs = (hrs<10) ? "0"+hrs : hrs;
        min = (min<10) ? "0"+min : min;
        sec = (sec<10) ? "0"+sec : sec;

        var elTimeCounter = $('.time-counter');
        var elDays = $('.days', elTimeCounter);
        var elHours = $('.hours', elTimeCounter);
        var elMinutes = $('.minutes', elTimeCounter);
        var elSeconds = $('.seconds', elTimeCounter);

        $('.num', elDays).html(days);
        $('.num', elHours).html(hrs);
        $('.num', elMinutes).html(min);
        $('.num', elSeconds).html(sec);

        setTimeout(countDown, 1000);
    }
    countDown();
});

Voir le résultat final :
https://www.sebastienmerour.com/portfolio/landing-pages/coming-soon/