Landing Pages : Coming Soon

Publié le 30 décembre 2018 dans Featured, Landing Pages par Sébastien Merour

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/

Lire la suite

Landing Pages : Parallax

Publié le 1 octobre 2018 dans Featured, Landing Pages par Sébastien Merour

Les Parallax sont un bon moyen pour réaliser une landing page sympa, avec de grandes photos en background.

En CSS, j’ajoute 2 types de Jumbotron : 1 pour les différentes sections, et 1 autre pour la dernière section en bas de page. Mais j’aurais pu faire autant de Jumbotrons que nécessaires. Ces Jumbotrons sont censés contenir du texte, des boutons…

/* Jumbotron */
.jumbotron {
	padding: 100px 0px;
	margin-bottom: 0;
	text-align: center;
}
.jumbotron2 {
  background-color: #CCCCCC;
  padding: 2rem;
	text-align: left;
}

Ensuite, je définis en CSS les différentes caractéristiques des Parallax. Les Parallax contiennent les différentes photos qui sont en arrière-plan.
On met un z-index à -1 pour qu’ils soient bien en arrière-plan, et on leur donne une position fixed :

/* Parallax */
.parallax-content{
	position: relative;
	overflow: hidden;
	height: 80vh;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
}
.parallax {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.parallax:before {
	content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: -1;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 120% auto;
}

Ensuite, il faut définir des images différentes selon la taille du viewport. Pour les mobiles, on choisira plutôt des photos en format Portrait, et pour les écrans larges, des photos en format Landscape :

/*xs to lg*/
@media(min-width: 769px){
	.parallax-content{
		background-image: url("../../images/parallax-1.jpg");
	}
	.parallax-content-2{
		background-image: url("../../images/parallax-2.jpg");
	}
}

/*xs to 0*/
@media(max-width: 768px){
	.parallax-content {
		background-image: url("../../images/parallax-1-m.jpg");
	}
	.parallax-content-2 {
		background-image: url("../../images/parallax-2-m.jpg");
	}

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

Lire la suite