Tendances WEB 2023

Nous sommes partout, à tout moment et tout le monde à la fois.

W3.CSS

LE framework responsive, mobile first en CSS :-)

Simple comme SELECT & CTRL+V

Diaporama

Analysez et inspirez-vous du code disponible sur le site de W3Schools : Diaporama

Exercices

prérequis : préparez 3 images de 1000px sur 350px

  1. éditez la page index.html
  2. placez les balises header, footer
  3. intégrez le diaporama
    • la div contenant les images, dans la balise header
    • le script, dans la balise body, juste avant la fermeture de la balise
    • les styles interne à la page, dans la balise head
code 
<!DOCTYPE html>
<html>
    <head>
        <title>Tendances WEB 2023</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
                
        <style>
            .mySlides {display:none}
            .w3-left, .w3-right, .w3-badge {cursor:pointer}
            .w3-badge {height:13px; width:13px; padding:0}
        </style>
                
    </head>
    <body>
        <header>
                
            <div class="w3-content w3-display-container" style="max-width:1000px">
                <img class="mySlides" src="img/1-nepal.jpg" style="width:100%">
                <img class="mySlides" src="img/2-loup.png" style="width:100%">
                <img class="mySlides" src="img/3-weave.png" style="width:100%">
                
                <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
                    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
                    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
                    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
                    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
                    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
                </div>
            </div>
                
        </header>
        <section class="w3-container w3-center">
            <h1>Tendances WEB 2023</h1>
            <p class="w3-animate-fading">Nous sommes partout, à tout moment et tout le monde à la fois.</p>
        </section>
        <footer class="w3-center">
            _ 
        </footer>
                
        <script>
            var slideIndex = 1;
            showDivs(slideIndex);

            function plusDivs(n) {
                showDivs(slideIndex += n);
            }

            function currentDiv(n) {
                showDivs(slideIndex = n);
            }

            function showDivs(n) {
                var i;
                var x = document.getElementsByClassName("mySlides");
                var dots = document.getElementsByClassName("demo");
                if (n > x.length) {
                    slideIndex = 1
                }
                if (n < 1) {
                    slideIndex = x.length
                }
                for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                }
                for (i = 0; i < dots.length; i++) {
                    dots[i].className = dots[i].className.replace(" w3-white", "");
                }
                x[slideIndex - 1].style.display = "block";
                dots[slideIndex - 1].className += " w3-white";
            }
        </script>
                
    </body>
</html>
Rendu Téléchargement

Liens utiles