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: Raleway; } /* 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=4c962515_fb3f_471e_8ad2_69a689e607e7> <h3>CODES CSS</h3> <p>Pour vos Menus</p> </div> <div id="News" class="tabcontent"> <img src=wa_res/icons/newspaper.png?t=4c962515_fb3f_471e_8ad2_69a689e607e7> <h3>News</h3> <p> Quelques nouvelles!</p> </div> <div id="Contact" class="tabcontent"> <img src=wa_res/icons/EUtu.png?t=4c962515_fb3f_471e_8ad2_69a689e607e7> <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=4c962515_fb3f_471e_8ad2_69a689e607e7> <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=4c962515_fb3f_471e_8ad2_69a689e607e7></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: Raleway; 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: Raleway; 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=4c962515_fb3f_471e_8ad2_69a689e607e7" 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:

<ul class="img-list"> <li><img src="wa_res/icons/AASLIDE_05.jpg?t=4c962515_fb3f_471e_8ad2_69a689e607e7"></li> </ul>

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

.img-list { list-style: none; padding: 0; margin: 0; } .img-list li { border: 5px solid transparent; box-sizing: border-box; width: 100%; float: left; position: relative; cursor: pointer; } .img-list img { vertical-align: middle; } /* Image Placeholder Styles -------------------------------------------------------------- */ .img-placeholder:before, .img-placeholder:after { padding-top: 100%; content: ""; display: block; } .img-placeholder { background: #222; box-shadow: 0 0 0 8px #222 inset, 0 0 0 9px #333 inset; color: #444; line-height: 0; text-align: center; display: block; } /* The hover effect -------------------------------------------------------------- */ .img-list li:before { transition: all .5s ease; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #333; transform: scale(0); } .img-list li:hover:before { opacity: .5; transform: scale(1); } .img-list li:after { transition: all .6s ease .2s; content: ""; position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px; border: 1px solid #aaa; background: #000; opacity: 0; transform: scale(0); } .img-list li:hover:after { opacity: .35; transform: scale(1); }

COPIER LE CODE DANS ELEMENT HTML:

<figure class="snip1482"> <figcaption> <h2>Norman Gordon</h2> <p>You don't get to be mom if you can't fix everything just right.</p> </figcaption> <a href="#"></a><img src="wa_res/icons/AASLIDE_04.jpg?t=4c962515_fb3f_471e_8ad2_69a689e607e7" alt="sample45" /> </figure>

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

.snip1482 { font-family: 'Raleay'; position: relative; margin: 10px 20px; min-width: 230px; max-width: 999px; min-height: 350px; width: 100%; color: #ffffff; text-align: right; line-height: 1.4em; background-color: #1a1a1a; font-size: 16px; } .snip1482 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .snip1482 img { position: absolute; right: 0%; top: 50%; opacity: 1; width: 100%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } .snip1482 figcaption { position: absolute; width: 50%; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 20px 0 20px 20px; } .snip1482 h2, .snip1482 p { margin: 0; width: 100%; -webkit-transform: translateX(20px); transform: translateX(20px); opacity: 0; } .snip1482 h2 { font-family: 'Playfair Display', Arial, sans-serif; text-transform: uppercase; margin-bottom: 5px; } .snip1482 p { font-size: 0.8em; } .snip1482 a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } .snip1482:hover img, .snip1482.hover img { width: 55%; right: -10%; } .snip1482:hover figcaption h2, .snip1482.hover figcaption h2, .snip1482:hover figcaption p, .snip1482.hover figcaption p { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; }