Pour annoncer l’ouverture d’un site web, ou bien une mise \u00e0 jour majeure, ou bien encore un \u00e9v\u00e9nement important, il est bien utile d’utiliser une page de type \u00ab\u00a0Coming Soon\u00a0\u00bb.<\/p>\n
Le plus souvent, il est d’usage de mettre en place plusieurs \u00e9l\u00e9ments sur ce type de landing page : le logo de l’entreprise, des liens vers les r\u00e9seaux sociaux, un compte \u00e0 rebours menant \u00e0 la date de l’ouverture. Plus rarement, on peut y trouver une vid\u00e9o en background, un formulaire d’inscription \u00e0 la newsletter, ou un formulaire de contact.<\/p>\n
Voyons ce que cela donne, dans le cas o\u00f9 on choisit d’y int\u00e9grer : le logo, les liens vers les r\u00e9seaux sociaux, le formulaire pour la newsletter, et le compte \u00e0 rebours.<\/p>\n
C\u00f4t\u00e9 HTML, tout d’abord :<\/p>\n
On commence par un div pour le logo, qui sera situ\u00e9 sur la gauche :<\/p>\n
\n<div class="left-logo">\n <div class="info-logo">\n <a href="https:\/\/www.sebastienmerour.com\/portfolio\/">\n <img src="..\/..\/images\/coming-soon-logo.jpg" alt="">\n <\/a>\n <\/div>\n <\/div>\n\n<\/pre>\n\n<\/pre>\n\n\nPour la partie de droite, on int\u00e8gre \u00e9galement le logo, mais cette fois en petite taille. Et on y ajouter une liste de liens vers les r\u00e9seaux sociaux du site : \n<\/p>\n
\n<div class="form-row logo-social">\n <div class="col-6">\n <div class="right-logo">\n <a href="https:\/\/www.sebastienmerour.com\/portfolio\/">\n <div class="logo"><img src="..\/..\/images\/sebastien-merour-logo-1.png"><\/div>\n <\/a>\n <\/div>\n <\/div>\n <div class="col-6">\n <div class="social no-bg-icon">\n <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>\n <\/div>\n <\/div>\n <\/div>\n\n\n\n<\/pre>\n\n\n<\/pre>\n\nPar la suite, on ajoute un formulaire qui aura pour vocation d’inviter les visiteurs \u00e0 s’abonner \u00e0 la newsletter :<\/p>\n
\n\n<h3>Le site ouvrira tr\u00e8s bient\u00f4t!<\/h3>\n <p>Pour \u00eatre pr\u00e9venu d\u00e8s qu'il sera ouvert, renseignez votre adresse e-mail :<\/p>\n <form class="form-row">\n <div class="col-md-8">\n <input type="text" class="form-control" placeholder="Adresse E-Mail">\n <\/div>\n <div class="col-md-4">\n <button type="submit" class="btn btn-primary">Prevenez-moi<\/button>\n <\/div>\n <\/form>\n\n<\/pre>\n<\/pre>\nOn termine la page HTML avec un div contenant le compte \u00e0 rebours : \n\n<div class="time-counter form-row">\n <div class="days count col">\n <div class="num">15<\/div>\n <div class="label">Jours<\/div>\n <\/div>\n <div class="hours count col">\n <div class="num">09<\/div>\n <div class="label">Heures<\/div>\n <\/div>\n <div class="minutes count col">\n <div class="num">53<\/div>\n <div class="label">Min<\/div>\n <\/div>\n <div class="seconds count col">\n <div class="num">39<\/div>\n <div class="label">Sec<\/div>\n <\/div>\n <\/div>\n<\/pre>\n\nPour le CSS, on d\u00e9cide de cr\u00e9er un background sympa et tr\u00e8s simple : l’objectif est de cr\u00e9er une ligne oblique qui va s\u00e9parer le logo du site, de la section consacr\u00e9e au formulaire et au compte \u00e0 rebours. Pour cela, on utilise la fonction skewX() qui permet d’op\u00e9rer une distorsion horizontale :\n\n.form.custom-bg:before {\n position: absolute;\n content: &amp;quot;&amp;quot;;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background-color: #432F75;\n -webkit-transform-origin: top center;\n -moz-transform-origin: top center;\n -ms-transform-origin: top center;\n transform-origin: top center;\n \/* Pour mettre une ligne oblique entre les 2 couleurs de fond : *\/\n -webkit-transform: skewX(-15deg) scaleX(0.8);\n -moz-transform: skewX(-15deg) scaleX(0.8);\n -ms-transform: skewX(-15deg) scaleX(0.8);\n transform: skewX(-15deg) scaleX(0.8);\n}\n<\/pre>\n<\/pre>\n\nEnfin, on ajoute un fichier Javascript pour int\u00e9grer le compte \u00e0 rebours en bas de page : <\/p>\n\n
\n&amp;quot;use strict&amp;quot;\n$(window).on(&amp;quot;load&amp;quot;, function() {\n function countDown(){\n var today = new Date();\n var eventDate = new Date(&amp;quot;June 30,2020 00:00:00&amp;quot;);\n var currentTime = today.getTime();\n var eventTime = eventDate.getTime();\n var remTime = eventTime - currentTime;\n\n var sec = Math.floor(remTime\/1000);\n var min = Math.floor(sec\/60);\n var hrs = Math.floor(min\/60);\n var days = Math.floor(hrs\/24);\n\n hrs %= 24;\n min %= 60;\n sec %= 60;\n\n days = (days&amp;amp;amp;lt;10) ? &amp;quot;0&amp;quot;+days : days;\n hrs = (hrs&amp;amp;amp;lt;10) ? &amp;quot;0&amp;quot;+hrs : hrs;\n min = (min&amp;amp;amp;lt;10) ? &amp;quot;0&amp;quot;+min : min;\n sec = (sec&amp;amp;amp;lt;10) ? &amp;quot;0&amp;quot;+sec : sec;\n\n var elTimeCounter = $('.time-counter');\n var elDays = $('.days', elTimeCounter);\n var elHours = $('.hours', elTimeCounter);\n var elMinutes = $('.minutes', elTimeCounter);\n var elSeconds = $('.seconds', elTimeCounter);\n\n $('.num', elDays).html(days);\n $('.num', elHours).html(hrs);\n $('.num', elMinutes).html(min);\n $('.num', elSeconds).html(sec);\n\n setTimeout(countDown, 1000);\n }\n countDown();\n});\n<\/pre>\n<\/pre>\n\nVoir le r\u00e9sultat final :
https:\/\/www.sebastienmerour.com\/portfolio\/landing-pages\/coming-soon\/<\/a><\/h3>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Pour annoncer l’ouverture d’un site web, ou bien une mise \u00e0 jour majeure, ou bien encore un \u00e9v\u00e9nement important, il est bien utile d’utiliser une page de type \u00ab\u00a0Coming Soon\u00a0\u00bb. Le plus souvent, il est d’usage de mettre en place plusieurs \u00e9l\u00e9ments sur ce type de landing page : le logo de l’entreprise, des liens […]<\/p>\n","protected":false},"author":1,"featured_media":153,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16,17],"tags":[20,19,21],"_links":{"self":[{"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/150"}],"collection":[{"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=150"}],"version-history":[{"count":44,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/150\/revisions"}],"predecessor-version":[{"id":207,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/150\/revisions\/207"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/media\/153"}],"wp:attachment":[{"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}