COPIER LE CODE DANS HEAD DE LA PAGE :

<style> * {box-sizing: border-box} /* Set height of body and the document to 100% */ body, html { height: 100%; margin: 0; font-family: Arial; } /* Style tab links */ .tablink { background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; width: 25%; } .tablink:hover { background-color: #777; } /* Style the tab content (and add height:100% for full page content) */ .tabcontent { color: white; display: none; padding: 100px 20px; height: 100%; } #Home {background-color: red;} #News {background-color: green;} #Contact {background-color: blue;} #About {background-color: orange;} </style>

COPIER LE CODE DANS BODY DE LA PAGE :

<script> function openPage(pageName,elmnt,color) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; } document.getElementById(pageName).style.display = "block"; elmnt.style.backgroundColor = color; } document.getElementById("defaultOpen").click(); </script>

COPIER LE CODE DANS ELEMENT HTML

<button class="tablink" onclick="openPage('Home', this, '#003143')">Home</button> <button class="tablink" onclick="openPage('News', this, '#3b81db')" id="defaultOpen">News</button> <button class="tablink" onclick="openPage('Contact', this, '#a13bdb')">Contact</button> <button class="tablink" onclick="openPage('About', this, '#db3bc3')">Infos</button> <div id="Home" class="tabcontent"> <img src=wa_res/icons/coding.png?t=340f1795_c005_4030_b4af_c477c124a526> <h3>CODES CSS</h3> <p>Pour vos Menus</p> </div> <div id="News" class="tabcontent"> <img src=wa_res/icons/newspaper.png?t=340f1795_c005_4030_b4af_c477c124a526> <h3>News</h3> <p> Quelques nouvelles!</p> </div> <div id="Contact" class="tabcontent"> <img src=wa_res/icons/EUtu.png?t=340f1795_c005_4030_b4af_c477c124a526> <h3>Contact</h3> <p>Remplissez le formulaire pour être contacté</p> </div> <div id="About" class="tabcontent"> <img src=wa_res/icons/FALAR.png?t=340f1795_c005_4030_b4af_c477c124a526> <h3>À propos de nous</h3> <p>Qui sommes nous et ce que nous faisons..</p> </div>

COPIER LE CODE DANS ELEMENT HTML:

<!-- FIRST TAB --> <div class="tab"> <input id="tab-1" type="checkbox"> <label for="tab-1">BIENVENUE</label> <div class="content"><p>Message d'accueil conçu pour présenter une personne à un nouveau lieu ou une nouvelle situation et pour la mettre à l'aise.</p><img src=wa_res/icons/coding.png?t=340f1795_c005_4030_b4af_c477c124a526></div> </div> <!-- SECOND TAB --> <div class="tab"> <input id="tab-2" type="checkbox"> <label for="tab-2">INFORMATIONS</label> <div class="content"><p>Le World Wide Web, la Toile mondiale ou la Toile, est un système hypertexte public fonctionnant sur Internet. Le Web permet de consulter, avec un navigateur, des pages accessibles sur des sites.</p></div> </div> <!-- THIRD TAB --> <div class="tab"> <input id="tab-3" type="checkbox"> <label for="tab-3">CONTACT</label> <div class="content"><p>Découvrez tous les moyens de nous contacter · Plus d'informations · Questions & réponses .</p></div> </div>

COPIER LE CODE CSS LIÉ A L'ELEMENT HTML:

//* (A) TABS CONTAINER */ .tab, .tab * { font-family: Ropa Sans; box-sizing: border-box; } .tab { max-width:1800px; } /* (B) HIDE CHECKBOX */ .tab input { display: none; } /* (C) TAB LABEL */ .tab label { /* (C1) DIMENSIONS */ position: relative; /* required for (f2) position:absolute */ display: block; width: 100%; margin-top: 10px; padding: 10px; /* (C2) COSMETICS */ font-weight: 700; color: #fff; background: #6102a1; cursor: pointer; } /* (D) TAB CONTENT - HIDDEN BY DEFAULT */ /* css animation will not work with auto height */ /* this is why we use max-height instead */ .tab .content { background: #f3e0ff; overflow: hidden; transition: max-height 0.3s; max-height: 0; } .tab .content p { padding: 10px; } /* (E) OPEN TAB ON CHECKED */ .tab input:checked ~ .content { max-height: 100vh; } /* (F) EXTRA - ADD ARROW INDICATOR */ .tab label::after { /* (F1) RIGHT ARROW */ display: block; content: "\25b6"; /* (F2) PLACE AT RIGHT SIDE */ position: absolute; right: 10px; top: 10px; /* (F3) ANIMATED ARROW */ transition: all 0.3s; } /* (F4) ROTATE ARROW ON CHECKED */ .tab input:checked ~ label::after { transform: rotate(90deg); }

COPIER LE CODE DANS ELEMENT HTML:

<!-- FIRST TAB --> <div class="tab"> <input id="tab-1r" type="radio" name="tabr"> <label for="tab-1r">BIENVENUE</label> <div class="content"><p>Le World Wide Web, la Toile mondiale ou la Toile, est un système hypertexte public fonctionnant sur Internet.</p></div> </div> <!-- SECOND TAB --> <div class="tab"> <input id="tab-2r" type="radio" name="tabr"> <label for="tab-2r">INFORMATIONS</label> <div class="content"><p>Message d'accueil conçu pour présenter une personne à un nouveau lieu ou une nouvelle situation et pour la mettre à l'aise.</p></div> </div> <!-- THIRD TAB --> <div class="tab"> <input id="tab-3r" type="radio" name="tabr"> <label for="tab-3r">CONTACT</label> <div class="content"><p>Découvrez tous les moyens de nous contacter · Plus d'informations · Questions & réponses .</p></div> </div>

COPIER LE CODE CSS LIÉ A L'ELEMENT HTML:

/* (A) TABS CONTAINER */ .tab, .tab * { font-family: arial, sans-serif; box-sizing: border-box; } .tab { max-width:1800px; } /* (B) HIDE CHECKBOX */ .tab input { display: none; } /* (C) TAB LABEL */ .tab label { /* (C1) DIMENSIONS */ position: relative; /* required for (f2) position:absolute */ display: block; width: 100%; margin-top: 10px; padding: 10px; /* (C2) COSMETICS */ font-weight: 700; color: #fff; background: #6102a1; cursor: pointer; } /* (D) TAB CONTENT - HIDDEN BY DEFAULT */ /* css animation will not work with auto height */ /* this is why we use max-height instead */ .tab .content { background: #f3e0ff; overflow: hidden; transition: max-height 0.3s; max-height: 0; } .tab .content p { padding: 10px; } /* (E) OPEN TAB ON CHECKED */ .tab input:checked ~ .content { max-height: 100vh; } /* (F) EXTRA - ADD ARROW INDICATOR */ .tab label::after { /* (F1) RIGHT ARROW */ display: block; content: "\25b6"; /* (F2) PLACE AT RIGHT SIDE */ position: absolute; right: 10px; top: 10px; /* (F3) ANIMATED ARROW */ transition: all 0.3s; } /* (F4) ROTATE ARROW ON CHECKED */ .tab input:checked ~ label::after { transform: rotate(90deg); }

COPIER LE CODE DANS ELEMENT HTML:

<figure class="snip1256"> <img src="wa_res/icons/business-g7a94522c6_640.jpg?t=340f1795_c005_4030_b4af_c477c124a526" alt="sample20"/> <figcaption> <h3>MACAO VOTRE TITRE</h3> <p>Macao est une région autonome de la côte sud de la Chine continentale, dans le delta de la rivière des Perles, en face de Hong Kong. Territoire portugais jusqu'en 1999, elle mêle différentes influences culturelles.</p><a href="https://wa-fusion.fr/" class="read-more">Informations</a> </figcaption> </figure>

COPIER LE CODE CSS LIÉ A L'ELEMENT HTML:

figure.snip1256 { font-family: 'Ropa Sans'; color: #fff; position: relative; overflow: hidden; margin: 10px; min-width: 220px; max-width: 999px; max-height: 350px; width: 100%; color: #ffffff; text-align: left; background-color: #6102a1; font-size: 16px; -webkit-perspective: 50em; perspective: 50em; } figure.snip1256 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } figure.snip1256 img { opacity: 1; width: 100%; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } figure.snip1256 figcaption { position: absolute; top: 0; left: 0; width: 100%; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% -50%; -ms-transform-origin: 50% -50%; transform-origin: 50% -50%; z-index: 1; opacity: 0; padding: 20px 30px; } figure.snip1256 h3, figure.snip1256 p { line-height: 1.5em; } figure.snip1256 h3 { margin: 0; font-weight: 800; text-transform: uppercase; } figure.snip1256 p { font-size: 0.8em; font-weight: 500; margin: 0 0 15px; } figure.snip1256 .read-more { border: 2px solid #ffffff; padding: 0.5em 1em; font-size: 0.8em; text-decoration: none; color: #ffffff; display: inline-block; } figure.snip1256 .read-more:hover { background-color: #ffffff; color: #000000; } figure.snip1256:hover img, figure.snip1256.hover img { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); opacity: 0; } figure.snip1256:hover figcaption, figure.snip1256.hover figcaption { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }

COPIER LE CODE DANS ELEMENT HTML:

<figure class="snip1206"> <img src="wa_res/icons/bridge-g3cea8f3d9_640.jpg?t=340f1795_c005_4030_b4af_c477c124a526"/> <figcaption> <h2>WA FUSION</h2> <p>Avoir un Design efficace pour votre site web !</p> </figcaption> <a href="#"></a> </figure>

COPIER LE CODE CSS LIÉ A L'ELEMENT HTML:

figure.snip1206 { font-family: 'Ropa Sans'; color: #fff; position: relative; overflow: hidden; margin: 10px; min-width: 220px; max-width: 1200px; max-height: 350px; width: 100%; color: #000000; text-align: center; } figure.snip1206 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } figure.snip1206 img { opacity: 1; width: 100%; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } figure.snip1206:after { background: #ffffff; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; content: ''; opacity: 0.75; -webkit-transform: skew(-45deg) scaleX(0); transform: skew(-45deg) scaleX(0); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } figure.snip1206 figcaption { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; } figure.snip1206 h2, figure.snip1206 p { margin: 0; width: 100%; opacity: 0; } figure.snip1206 h2 { padding: 0 30px; display: inline-block; font-weight: 400; text-transform: uppercase; } figure.snip1206 p { padding: 0 50px; font-size: 0.8em; font-weight: 500; } figure.snip1206 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1; } figure.snip1206:hover:after, figure.snip1206.hover:after { -webkit-transform: skew(-45deg) scaleX(1); transform: skew(-45deg) scaleX(1); transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } figure.snip1206:hover figcaption h2, figure.snip1206.hover figcaption h2, figure.snip1206:hover figcaption p, figure.snip1206.hover figcaption p { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } figure.snip1206:hover figcaption h2, figure.snip1206.hover figcaption h2 { opacity: 1; } figure.snip1206:hover figcaption p, figure.snip1206.hover figcaption p { opacity: 0.7; }

COPIER LE CODE DANS ELEMENT HTML:

<figure class="snip0019"> <img src="wa_res/icons/hong-kong-gc27ca2ed7_640.jpg?t=340f1795_c005_4030_b4af_c477c124a526"/> <figcaption> <div><h2>Lorem <span>IPSUM</span></h2></div> <div><p>En imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page,Généralement, on utilise un texte en faux latin, le Lorem ipsum ou Lipsum.</p></div> <a href="#"></a> </figcaption> </figure>

COPIER LE CODE CSS LIÉ A L'ELEMENT HTML:

figure.snip0019 { font-family: 'Ropa Sans'; color: #fff; position: relative; overflow: hidden; margin: 10px; min-width: 220px; max-width: 999px; max-height: 280px; width: 100%; background: #000000; text-align: center; } figure.snip0019 * { -webkit-box-sizing: border-box; box-sizing: border-box; } figure.snip0019 img { opacity: 1; width: 100%; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } figure.snip0019 figcaption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: left; } figure.snip0019 figcaption > div { float: left; height: 100%; overflow: hidden; width: 50%; position: relative; } figure.snip0019 figcaption::before { position: absolute; top: 50%; bottom: 50%; left: 50%; width: 2px; content: ''; opacity: 0; background-color: rgba(255, 255, 255, 0); -webkit-transition: all 0.4s; transition: all 0.4s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } figure.snip0019 h2, figure.snip0019 p { margin: 0; padding: 20px; opacity: 0; position: absolute; top: 0; width: 100%; left: 0; -webkit-transition: opacity 0.45s, -webkit-transform 0.45s; transition: opacity 0.45s,-webkit-transform 0.45s,-moz-transform 0.45s,-o-transform 0.45s,transform 0.45s; } figure.snip0019 h2 { text-align: right; display: inline-block; word-spacing: -0.1em; font-weight: 300; text-transform: uppercase; bottom: 0; background: rgba(0, 0, 0, 0.5); -webkit-transform: translate3d(50%, 0%, 0); transform: translate3d(50%, 0%, 0); -webkit-transition-delay: 0s; transition-delay: 0s; } figure.snip0019 h2 span { font-weight: 800; } figure.snip0019 p { display: block; bottom: 0; text-align: left; font-weight: 300; top: 0%; color: #000; background: #ffffff; -webkit-transform: translate3d(-50%, 0%, 0); transform: translate3d(-50%, 0%, 0); -webkit-transition-delay: 0s; transition-delay: 0s; } figure.snip0019 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; color: #ffffff; } figure.snip0019:hover img { opacity: 0.7; } figure.snip0019:hover figcaption h2, figure.snip0019:hover figcaption p { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } figure.snip0019:hover figcaption h2 { opacity: 1; } figure.snip0019:hover figcaption p { opacity: 1; } figure.snip0019:hover figcaption::before { background: #ffffff; top: 0px; bottom: 0px; opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s; }

COPIER LE CODE DANS ELEMENT HTML:

<figure class="snip1321"><img src="wa_res/icons/ASLIDE_02.jpg?t=340f1795_c005_4030_b4af_c477c124a526" alt="sq-sample26"/> <figcaption><i class="ion-upload"></i> <h4>WA_FUSION</h4> <h2>Luis Santos</h2> </figcaption><a href="#"></a> </figure>

COPIER LE CODE CSS LIÉ A L'ELEMENT HTML:

@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); figure.snip1321 { font-family: 'Ropa Sans'; position: relative; overflow: hidden; margin: 10px; width: auto; color: #000000; text-align: center; -webkit-perspective: 50em; perspective: 50em; } figure.snip1321 * { -webkit-box-sizing: padding-box; box-sizing: padding-box; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } figure.snip1321 img { max-width: 100%; vertical-align: top; } figure.snip1321 figcaption { top: 50%; left: 20px; right: 20px; position: absolute; opacity: 0; z-index: 1; } figure.snip1321 h2, figure.snip1321 h4 { margin: 0; } figure.snip1321 h2 { font-weight: 600; } figure.snip1321 h4 { font-weight: 400; text-transform: uppercase; } figure.snip1321 i { font-size: 32px; } figure.snip1321:after { background-color: #ffffff; position: absolute; content: ""; display: block; top: 20px; left: 20px; right: 20px; bottom: 20px; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; opacity: 0; } figure.snip1321 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1; } figure.snip1321:hover figcaption, figure.snip1321.hover figcaption { -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } figure.snip1321:hover:after, figure.snip1321.hover:after { -webkit-transform: rotateX(0); transform: rotateX(0); opacity: 0.9; }

COPIER LE CODE DANS ELEMENT HTML:

<div class="container"> <div class="card"> <div class="face face1"> <div class="content"> <img src="wa_res/icons/newspaper.png?t=340f1795_c005_4030_b4af_c477c124a526"> <h3>News</h3> </div> </div> <div class="face face2"> <div class="content"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p> <a href="#">Read More</a> </div> </div> </div> </div>

COPIER LE CODE CSS LIÉ A L'ELEMENT HTML:

.container .card{border: none!important;} .container .card .face{ height: 200px; transition: 0.5s; } .container .card .face.face1{ position: relative; background: #333; display: flex; justify-content: center; align-items: center; z-index: 1; transform: translateY(100px); } .container .card:hover .face.face1{ background: #6102a1; transform: translateY(0); } .container .card .face.face1 .content{ opacity: 0.2; transition: 0.5s; } .container .card:hover .face.face1 .content{ opacity: 1; } .container .card .face.face1 .content img{ max-width: 100px; } .container .card .face.face1 .content h3{ margin: 10px 0 0; padding: 0; color: #fff; text-align: center; font-size: 1.5em; } .container .card .face.face2{ position: relative; background: #fff; display: flex; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8); transform: translateY(-100px); } .container .card:hover .face.face2{ transform: translateY(0); } .container .card .face.face2 .content p{ margin: 0; padding: 0; } .container .card .face.face2 .content a{ margin: 15px 0 0; display: inline-block; text-decoration: none; font-weight: 900; color: #333; padding: 5px; border: 1px solid #333; } .container .card .face.face2 .content a:hover{ background: #6102a1; color: #fff; }