Réalisations HTML / CSS
Introduction
J’ai toujours trouvé l’HTML et le CSS amusants à manipuler, car ils ne demandent pas beaucoup d’efforts à apprendre et à maîtriser.
En tout cas, ces compétences en HTML et CSS me servent tous les jours sur WordPress et sont indispensables. Tant mieux, car j’ai pu allier l’utile à l’agréable.
1. site internet statique pour "La maison du chocolat"
Résultat
Index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La maison du chocolat</title>
<link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body>
<header>
<h1>La Maison du <span>Chocolat.</span></h1>
<nav>
<a href="">ACCUEIL</a>
<a href="">LA CHOCOLATERIE</a>
<a href="">RECETTE</a>
<a href="">ACTUS</a>
<a href="">CONTACT</a>
</nav>
</header>
<section id="banniere">
<h2 class="h2blanc">NOUVELLE SAISON <br> <b>NOUVEAUX CHOCOLAT</b> </h2>
<br>
<a href="#" class="bouton">Par ici</a>
</section>
<section id="qualite">
<article>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/steps-icon-1.jpg" alt="">
<h2>qualité</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim accusantium, vitae nesciunt est eum atque
iure provident fuga porro similique.</p>
</article>
<article>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/steps-icon-2.jpg" alt="">
<h2>ecologie</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim accusantium, vitae nesciunt est eum atque
iure provident fuga porro similique.</p>
</article>
<article>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/steps-icon-3.png" alt="">
<h2>equitable</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim accusantium, vitae nesciunt est eum atque
iure provident fuga porro similique.</p>
</article>
</section>
<section id="info">
<article class="club">
<div class="clubactu">
<h2>LE CLUB</h2>
<hr>
<p>Inscrivez-vous dès maintenant et profitez de nos offres spéciales!</p>
<a href="#" class="bouton">Plus d'infos</a>
</div>
</article>
<article class="actu">
<div class="clubactu">
<h2>NOS ACTUS</h2>
<hr>
<p>Inscrivez-vous <br> dès maintenant et profitez de nos offres spéciales!</p>
<a href="#" class="bouton">Plus d'infos</a>
</div>
</article>
</section>
<section id="contact">
<h2>CONTACTEZ-NOUS</h2>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim accusantium, vitae nesciunt est eum atque iure
provident fuga porro similique.</p>
<form action="">
<div class="form">
<label for="nom"> Nom : </label>
<input type="text" placeholder="Votre nom" name="nom">
</div>
<div class="formulaire">
<label for="email"> Email : </label>
<input type="email" placeholder="Votre email" name="email">
</div>
<div><input type="submit" value="OK" ></div>
</form>
</section>
<footer>
<h2 id="maisonchoco">La Maison du <span>Chocolat.</span></h2>
<p>Copyright © Tous droits réservés.</p>
</footer> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://nicolasloyer.fr/wp-content/litespeed/js/53a603d0d2486f05ec07379a877c0edc.js?ver=2ec1b"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>
Style.css
/* generale */
*{
margin: 0;
padding: 0;
}
body{
font-family: Arial, Helvetica, sans-serif;
color: #444545;
}
/* Header */
header{
display: flex;
justify-content: space-evenly;
height: 50px;
line-height: 50px;
}
h1{
font-size: 30px;
font-family: 'Crete Round', serif;
}
span{
color: #e83b89;
}
nav a{
text-decoration: none;
margin-left: 10px;
color: #444545;
}
#banniere{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
background-image: url("images/main.jpg");
background-size: cover;
height: 697px;
}
.h2blanc{
margin-bottom: 30px;
color: white;
font-size: 70px;
}
.bouton
{
color: white;
background-color: #e83b89;
display: inline-block;
line-height: 50px;
text-align: center;
font-size: 20px;
text-decoration: none;
width: 150px;
height: 50px;
border-radius: 5px;
}
/* Qualité */
#qualite,p{
margin: 50px;
display: flex;
text-align: center;
}
img{
margin: 50px;
}
/* info */
#info{
background-color: #EFEFEF ;
display: flex;
justify-content: center;
padding: 100px 0;
}
.club{
background-image: url("images/article-image-1.jpg");
background-repeat: no-repeat;
width: 500px;
height: 270px;
}
.actu{
background-image: url("images/article-image-2.jpg");
background-repeat: no-repeat;
width: 500px;
height: 270px;
}
.clubactu{
background-color: rgba(255, 255, 255, 0.9);
width: 200px;
height: 100%;
font-size: 15px;
}
#info a{
height: 30px;
text-align: center;
line-height: 30px;
margin-left: 25px;
}
#info h2{
text-align: center;
padding-top: 20px;
}
hr{
width: 100px;
margin: 20px auto;
}
#info p{
margin: 20px;
}
/* contact */
#contact h2{
text-align: center;
margin-top: 20px;
}
#contact hr{
width: 300px;
background-color: aqua;
}
form{
text-align: center;
}
input[type=text],input[type=email],input[type=submit]{
font-size: 20px;
border-radius: 3px;
}
input[type=submit]{
color: white;
background-color: #e83b89;
line-height: 30px;
text-align: center;
font-size: 20px;
width: 70px;
height: 30px;
border-radius: 5px;
border: none;
}
/* Footer */
footer{
background-color:#444545;
height: 200px;
margin-top: 50px;
padding: 50px;
color: white;
display: flex;
justify-content:center;
align-items: center;
flex-direction: column;
}
#maisonchoco{
color: white;
font-size: 30px;
font-family: 'Crete Round', serif;
}
@media screen and (max-width:600px) {
header {
display: flex;
flex-direction: column;
height: 100px;
line-height: 50px;
text-align: center;
}
.h2blanc {
margin-bottom: 30px;
color: white;
font-size: 40px;
}
#qualite, p {
margin: 50px;
display: flex;
flex-direction: column;
text-align: center;
}
#info {
background-color: #EFEFEF;
display: flex;
padding: 100px 0;
flex-direction: column;
align-items: center;
}
.club {
background-image: url("images/article-image-1.jpg");
background-repeat: no-repeat;
width: 500px;
height: 270px;
margin: 10px;
border-radius: 5px;
}
.actu {
background-image: url("images/article-image-2.jpg");
background-repeat: no-repeat;
width: 500px;
height: 270px;
margin: 20px;
border-radius: 5px;
}
form{
display: flex;
flex-direction: column;
}
form div{
margin: 10px;
}
}
2. site internet statique pour une agence de voyage
Résultat
Index.html
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" href="styles.css" rel="preload">
<link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" href="CreteRound-Regular.ttf" rel="preload">
<title>Travel Agency</title>
</head>
<body>
<header>
<div class="wrapper">
<h1> Travel Agency<span class="orange">.</span></h1>
<nav>
<ul>
<li> <a href="#main-image">Accueil</a></li>
<li> <a href="#steps">Destinations</a></li>
<li> <a href="#possibilities">Circuits</a></li>
<li> <a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section id="main-image">
<div class="wrapper">
<h2>Organiser votre<br><strong>voyage sur mesure</strong></h2>
<a href="#" class="button-1">Par ici</a>
</div>
</section>
<section id="steps">
<div class="wrapper">
<ul>
<li id="step-1">
<h4>Planifier</h4>
<p>Confiez-nous vos rêves blablabla</p>
</li>
<li id="step-2">
<h4>Organiser</h4>
<p>Beneficiez de l'expertise blablabla</p>
</li>
<li id="step-3">
<h4>Voyager</h4>
<p>Nous nous chargerons d'assurer blablabla</p>
</li>
<div class="clear"></div>
</ul>
</div>
</section>
<section id="possibilities">
<div class="wrapper">
<article style="background-image: url(images/article-image-1.jpg)">
<div class="overlay">
<h4>Partez en famille</h4>
<p>
<small>Offrez le meilleur a ceux que vous aimez et partagez des moments fabuleux</small>
</p>
<a href="#" class="button-2">Plus d'infos</a>
</div>
</article>
<article style="background-image: url(images/article-image-2.jpg)">
<div class="overlay">
<h4>Envie de s'evader</h4>
<p>
<small>Parfois un peu d'evasion c'est bien!</small>
</p>
<a href="#" class="button-2">Plus d'infos</a>
</div>
</article>
</div>
</section>
<section id="contact">
<div class="wrapper">
<h3>Contactez-nous</h3>
<p>Chez Travel agency nous savons que voyager est.... blablablablablablabla</p>
<form>
<label for="name">Nom</label>
<input type="text" id="name" placeholder="Votre nom">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Votre email">
<input type="submit" value="OK" class="button-3">
</form>
</div>
</section>
<footer>
<h1>Travel Agency<span class="orange">.</span></h1>
<div class="copyright">Copyright @ 2016. Tout droits reservés.</div>
</footer> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-optimized="1" type="litespeed/javascript" data-src="https://nicolasloyer.fr/wp-content/litespeed/js/53a603d0d2486f05ec07379a877c0edc.js?ver=2ec1b"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>
Style.css
/* GENERAL */
* /* tout les elements */
{
margin: 0;
padding: 0;
}
body
{
font-family: arial, sans-serif;
font-size: 15px;
}
h1, h2, h3, h4
{
color: #444;
}
{
font-family: 'create round', serif;
font-size: 45px;
}
h2
{
font-size: 55px;
}
h3
{
font-size: 30px;
}
h4
{
font-size: 24px;
}
p
{
line-height: 20px;
color: #777;
}
ul
{
list-style: none; /* Enleve les puces */
}
a
{
text-decoration: none;
color: #444;
}
.wrapper
{
width: 940px;
margin: 0 auto; /* auto pour centrer */
padding: 0 10px;
}
.orange
{
color: #ff7a00;
}
.clear
{
clear: both;
}
small
{
font-size: 13px;
font-style: italic;
}
/* HEADER */
header
{
height: 120px;
}
header h1
{
float: left;
margin-top: 32px;
}
header nav
{
float: right;
margin-top: 50px;
}
header nav ul li /* Uniquement le li qui est dans ul, dans nav et dans header*/
{
float: left;
display: inline-block;
}
header nav ul li a
{
text-transform: uppercase;
font-weight: bold;
margin-right: 20px;
}
/* MAIN IMAGE */
#main-image
{
height: 580px;
background: url(Images/main.jpg) center;
}
#main-image h2
{
font-weight: normal; /* enleve le gras */
text-transform: uppercase; /* Mettre le texte en majuscule */
text-align: center; /* centre le texte */
padding: 150px 0 40px 0;
}
.button-1
{
display: block;
width: 120px;
height: 50px;
background: #ff7a00;
color: #fff;
font-size: 20px;
margin: 0 auto;
line-height: 50px;
text-align: center;
border-radius: 3px; /* arrondir les bords du cadre */
}
.button-1:hover /* Couleur survol lien */
{
background: #02d8dd;
}
/* STEPS */
#steps ul
{
margin: 80px;
}
#steps ul li
{
width: 250px;
float: left; /* Textes les un a coté des autres */
padding-top: 140px;
text-align: center;
margin-right: 10px;
}
#steps h4
{
text-transform: uppercase;
margin-bottom: 20px;
}
#steps p
{
margin-bottom: 20px;
}
#step-1
{
background: url(Images/steps-icon-1.png) no-repeat top center;
}
#step-2
{
background: url(Images/steps-icon-2.png) no-repeat top center;
}
#step-3
{
background: url(Images/steps-icon-3.png) no-repeat top center;
}
/* Possibilities */
#possibilities
{
background-color: #efefef;
padding: 60px 0;
}
#possibilities article
{
width: 460px;
height: 270px;
float: left;
border-radius: 10px; /* Arrondir les bords */
}
#possibilities article:first-child /* prendre le 1er article */
{
margin-right: 20px;
}
.overlay
{
background: rgba(255,255,255, 0.95); /* 0.95 transparence */
height: 100%;
width: 190px;
padding: 20px;
border-radius: 10px 0 0 10px; /* Arrondir les bords */
text-align: center;
box-sizing: border-box; /* "la hauteur du overlay inclue le padding" */
}
article h4
{
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
text-transform: uppercase;
margin-bottom: 20px;
text-align: center;
}
#possibilities p
{
text-align: center;
margin-bottom: 20px;
}
.button-2
{
color: #fff;
background-color: #ff7a00;
padding: 6px 20px;
border-radius: 3px;
}
.button-2:hover /* Quand on passe la souris dessus */
{
color: #fff;
background-color: #02b8bd;
padding: 6px 20px;
border-radius: 3px;
}
/* CONTACT */
#contact
{
padding: 60px 0;
text-align: center;
}
#contact h3
{
width: 400px;
text-transform: uppercase;
margin: 0 auto 20px auto;
margin-bottom: 20px;
border-bottom: 1px solid #02b8dd;
padding-bottom: 20px ;
}
form
{
margin: 60px 0 20px 0;
}
label
{
font-weight: bold;
font-size: 20px;,
margin-right: 10px;
color: #777;
}
input[type="text"] /* change les attribus (les type...) ici "text" dans input */
{
padding: 10px;
font-size: 20px;
margin-right: 20px;
border: 2px solid #ddd;
border-radius: 3px; /* Arrondi */
}
.button-3
{
color: #fff;
font-size: 20px;
font-weight: bold;
padding: 11px;
background-color: #02b8dd;
border-style: none;
border-radius: 3px;
}
.button-3:hover
{
color: #fff;
background-color: #444;
}
/* FOOTER */
footer
{
height: 260px;
background-color: #444;
}
footer h1
{
color: #fff;
text-align: center;
padding-top: 80px;
}
.copyright
{
text-align: center;
font-weight: bold;
padding-top: 30px;
color: #777;
}
3. site internet statique pour une deuxième agence de voyage
Résultat
Index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zanzibar</title>
<link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" href="style.css" rel="preload" type="text/css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body>
<header>
<h1>Zanzibar</h1>
<nav>
<a href="">Qui sommes-nous</a>
<a href="">Notre île</a>
<a href="">Photos</a>
<a href="">Témoignages</a>
<a href="">Nos séjours</a>
<a href="">Contact</a>
</nav>
</header>
<section id="imgbanniere">
<h2 id="h2blanc"><b>ZANZIBAR</b> <br>
<p>UN ART DE VIVRE</p>
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a class="bouton">Notre île</a>
<a class="bouton">Contactez-nous</a>
</section>
<section>
<center>
<h2>QUI SOMMES-NOUS</h2>
<hr>
</center>
<div id="listesinge">
<div><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/tea.png" /></div>
<ul>
<li>
<div><i class="far fa-check-circle"></i></div>
<div>
<h2>
RELIGIONS ET CROYANCES
</h2> <br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores necessitatibus
aspernatur
atque fugit architecto eius blanditiis facere ut excepturi suscipit voluptates nesciunt
minus
distinctio, repudiandae veritatis quibusdam recusandae sint provident.</p>
</div>
</li>
<li>
<div><i class="far fa-check-circle"></i></div>
<div>
<h2>MUSIQUE</h2> <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta cupiditate
magni recusandae aliquid odio libero obcaecati veniam, unde officia maiores error reprehenderit
dolores fugiat saepe inventore commodi nihil? Dolores, praesentium.
</div>
</li>
<li>
<div><i class="far fa-laugh"></i></div>
<div>
<h2>MYTHE LITTéRAIRE</h2> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia accusamus numquam neque
magni,
optio excepturi saepe tenetur quisquam eum aliquam vitae ducimus eos quidem nostrum maiores
eveniet aspernatur est cumque!</p>
</div>
</li>
</ul>
</div>
</section>
<section id="notreile">
<center>
<BR></BR>
<h2>NOTRE ÎLE</h2>
<hr>
</center>
<div class="parent">
<div class="contenu1 contenu">
<div class="contenu1-image"></div>
<h2>STONE TOWN</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur quae consectetur vero, eaque vitae
maxime ratione eum. Architecto aut eveniet veritatis optio eligendi asperiores accusamus nisi
expedita harum atque. Consectetur. </p>
</div>
<div class="contenu2 contenu">
<div class="contenu2-image">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="prison-island.png" alt="Prison">
</div>
<h2>PRISON ISLAND</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur quae consectetur vero, eaque vitae
maxime ratione eum. Architecto aut eveniet veritatis optio eligendi asperiores accusamus nisi
expedita harum atque. Consectetur. </p>
</div>
<div class="contenu3 contenu">
<div class="contenu3-image"></div>
<h2>PARC JOZANI</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur quae consectetur vero, eaque vitae
maxime ratione eum. Architecto aut eveniet veritatis optio eligendi asperiores accusamus nisi
expedita harum atque. Consectetur. </p>
</div>
</section>
<center>
<h2>GALERIE PHOTO</h2>
<hr>
</center>
<section>
<div id="femmeplage">
<div id="femmezanzibar">
<p>LES FEMMES DE ZANZIBAR</p>
</div>
<div id="plagezanzibar">
<P>LA PLAGE DE ZANZIBAR</P>
</div>
</div>
</section>
<section>
<div id="epicepeche">
<div id="epiceszanzibar">
<p>LES EPICES DE ZANZIBAR</p>
</div>
<div id="pecheur">
<p>VILLAGE DE PECHEUR A ZANZIBAR</p>
</div>
<div id="safari">
<p>SAFARI BLUE</p>
</div>
</div>
</section>
<section>
<div>
<div id="ilontadoreimg1">
<center>
<h2>ILS ONT ADORE</h2>
<hr>
</center>
</div>
<div id="ilontadorecom">
<div id="emilie">
<blockquote>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ut obcaecati vel eveniet,
earum
adipisci cupiditate quae officia possimus unde explicabo consequuntur eius corrupti sapiente
commodi
natus dolore. Sed, saepe! </p>
</blockquote>
<div class="avatar"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="/clients/emilie.jpg" alt="">
<h4>Emilie</h4>
</div>
</div>
<div id="jean-claude">
<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ut obcaecati vel
eveniet, earum
adipisci cupiditate quae officia possimus unde explicabo consequuntur eius corrupti sapiente
commodi
natus dolore. Sed, saepe!</blockquote>
<div class="avatar"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="/clients/blaise.jpg" alt="">
<h4>Jean-claude</h4>
</div>
</div>
<div id="caroline">
<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ut obcaecati vel
eveniet, earum
adipisci cupiditate quae officia possimus unde explicabo consequuntur eius corrupti sapiente
commodi
natus dolore. Sed, saepe!</blockquote>
<div class="avatar"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="/clients/julia.jpg" alt="">
<h4>Caroline</h4>
</div>
</div>
</div>
</div>
</section>
<center>
<h2>NOS SEJOURS</h2>
<hr>
</center>
<section id="nossejours">
<div id="idylle">
<b>IDYLLE A ZANZIBAR</b>
<p>10 JOURS | 7 NUITS</p>
<h4>a partir de 2350€</h4>
<hr>
<p> <i class="far fa-check-circle"></i> Farniente sur les plages de Zanzibar </p>
<p><i class="far fa-check-circle"></i>Farniente sur les plages de Zanzibar</p>
<p><i class="far fa-check-circle"></i>Hébergement dans un hotel de luxe</p>
<p><i class="far fa-check-circle"></i>Une atmosphère dans le plus pur style zanzibari au coeur des jardins
</p>
<p><i class="far fa-check-circle"></i>De petites attentions tout au long de votre séjour</p>
</div>
<div id="tanzanie">
<b>TANZANIE A L'INFINI</b>
<p>13 JOURS | 10 NUITS</p>
<h4>a partir de 3440€</h4>
<hr>
<p> <i class="far fa-check-circle"></i>Le spectacle magnifique de la migration dans le Serengeti</p>
<p><i class="far fa-check-circle"></i>L'impressionnant cratère du Ngorongoro</p>
<p><i class="far fa-check-circle"></i>Les plages de Zanzibar</p>
<p><i class="far fa-check-circle"></i>La vieille ville de store town et des ruelles aux milles couleurs</p>
</div>
<div id="boutanzanie">
<b>AU BOUT DE LA TANZANIE</b>
<p>12 JOURS | 9 NUITS</p>
<h4>a partir de 3600€</h4>
<hr>
<p> <i class="far fa-check-circle"></i>La découverte de tous les principaux parcs du pays</p>
<p><i class="far fa-check-circle"></i>L'impressionnant cratère du Ngorongoro</p>
<p><i class="far fa-check-circle"></i>Les plages de Zanzibar</p>
<p><i class="far fa-check-circle"></i>Le spectacle magnifique de la migration dans le serengeti</p>
</div>
</section>
<section id="contacteznous">
<div>
<center>
<h2>CONTACTEZ-NOUS</h2>
<hr>
</center>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam officia inventore maxime! Labore
deserunt doloribus quae recusandae. Voluptatum, aut ab.</p>
<span id="contacts">
<p><i class="fas fa-phone"></i>+255 777 360 982</p>
<p><i class="fas fa-map-marker-alt"></i>Office du Tourisme</p>
</span>
<form action="">
<label for="">nom:</label>
<input type="text">
<label for="">Email:</label>
<input type="email" placeholder="Ajouter votre email">
<br>
<br>
<label for="">Votre Message:</label>
<br>
<textarea name="" id="" cols="50" rows="5"></textarea>
<br>
<input type="submit">
</form>
</div>
<div>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.7403941628454!2d2.347690115768849!3d48.863160608324726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66f92058eeef9%3A0x5878bb5909fbccd7!2sTrantranzai%20ch%C3%A2telet!5e0!3m2!1sfr!2sfr!4v1652861415409!5m2!1sfr!2sfr"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</section>
<footer>
<p>© site Zanzibar exercice arinfo - 2019 </p>
</footer>
<script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-optimized="1" type="litespeed/javascript" data-src="https://nicolasloyer.fr/wp-content/litespeed/js/53a603d0d2486f05ec07379a877c0edc.js?ver=2ec1b"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>
Style.css
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Lato', sans-serif;
}
blockquote p::before {
content: '\201C';
font-size: 800%;
}
blockquote p::after {
content: '\201D';
}
/* header */
h1 {
color: white;
font-size: 20px;
font-family: Warnes;
}
header {
display: flex;
justify-content: space-evenly;
background-color: black;
height: 40px;
line-height: 40px;
}
nav a {
color: white;
text-decoration: none;
font-size: 12px;
margin-left: 20px;
}
/* banniere */
#imgbanniere {
background-image: url(img/zanzibar.jpg);
background-size: cover;
height: 600px;
display: flex;
justify-content: flex-start;
padding-top: 250px;
padding-left: 150px;
color: white;
}
#h2blanc {
color: white;
font-size: 50px;
text-align: left;
}
.bouton {
color: white;
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
border-radius: 8px;
text-align: center;
font-size: 20px;
border: white solid 2px;
}
.bouton:hover {
background-color: white;
color: aqua;
display: block;
width: 200px;
height: 50px;
line-height: 50px;
border-radius: 8px;
text-align: center;
font-size: 20px;
}
/* fin banniere */
hr {
margin-bottom: 50px;
width: 100px;
color: aqua;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
#listesinge {
display: flex;
justify-content: space-evenly;
color: gray;
}
#listesinge img {
object-fit: cover;
}
#listesinge ul {
margin: 80px;
width: 400px;
}
#listesinge li {
list-style: none;
display: flex;
}
center h2 {
padding: 50px;
font-size: 25px;
font-weight: 500;
}
/* notre ile début */
div.contenu {
background-color: white;
width: 400px;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px;
border-radius: 5px;
}
h2 {
text-align: center;
}
.contenu1-image {
background-image: url("stone-town.png");
background-position: center;
background-size: cover;
/* respecte les dimensions */
width: 100%;
height: 200px;
}
.contenu2-image img {
width: 100%;
height: 200px;
object-fit: cover;
/* respecte les dimenions */
}
.parent {
display: flex;
justify-content: space-around;
}
#notreile {
display: flex;
background-color: #0CE0F5;
}
/* notre ile fin */
/* galerie photo début */
#femmeplage{
display: flex;
justify-content: center;
}
#femmezanzibar {
background-image: url(galerie/femmes-zanzibar.jpg);
width: 400px;
height: 200px;
background-position: center;
background-size: cover;
margin: 10px;
border-radius: 5px;
}
#femmezanzibar p{
color: white;
}
#plagezanzibar{
background-image: url(galerie/plage-zanzibar.jpg);
width: 800px;
height: 200px;
background-position: center;
background-size: cover;
margin: 10px;
border-radius: 5px;
}
#plagezanzibar p{
color: white;
}
#epicepeche{
display: flex;
justify-content: center;
}
#epiceszanzibar{
background-image: url(galerie/epices-zanzibar.jpg);
width: 600px;
height: 200px;
background-position: center;
background-size: cover;
margin: 10px;
border-radius: 5px;
}
#epiceszanzibar p{
color: white;
}
#pecheur{
background-image: url(galerie/village-pecheur-zanzibar.jpg);
width: 200px;
height: 200px;
background-position: center;
background-size: cover;
margin: 10px;
border-radius: 5px;
}
#pecheur p{
color: white;
}
#safari{
background-image: url(galerie/safari-blue.jpg);
width: 380px;
height: 200px;
background-position: center;
background-size: cover;
margin: 10px;
border-radius: 5px;
}
#safari p{
color: white;
}
/* galerie photo fin */
/* il nous ont adoré début */
#ilontadorecom{
display: flex;
justify-content: space-around;
}
.avatar{
display: flex;
line-height: 50px;
}
.avatar img{
border-radius: 50%;
width: 50px;
height: 50px;
}
#ilontadoreimg1{
background-image: url(/galerie/plage-zanzibar.jpg);
background-position: center;
background-size: cover;
height: 300px;
color: white;
}
#ilontadore{
display: flex;
justify-content: space-around;
}
/* il nous ont adoré fin */
/* nos séjours début */
#nossejours{
display: flex;
}
#idylle{
width: 300px;
height: 300px;
border-radius: 5px;
border-color: grey;
border: 5px;
margin: 50px;
}
#tanzanie{
width: 300px;
height: 300px;
border-radius: 5px;
border-color: grey;
border: 5px;
margin: 50px;
}
#boutanzanie{
width: 300px;
height: 300px;
border-radius: 5px;
border-color: grey;
border: 5px;
margin: 50px;
}
/* nos séjours fin */
#contacteznous{
display: flex;
justify-content: space-around;
}
#contacteznous p{
font-size: 12px;
}
#contacteznous div{
margin: 40px;
}
#contacts{
display: flex;
justify-content: space-around;
}
footer{
color: white;
text-align: center;
font-size: 15px;
background-color: black;
height: 150px;
padding: 30px;
}
Nicolas LOYER – 2025
