Name of code : Materialize example

Categorie : Framework CSS

Ce code est une page HTML qui utilise la bibliothèque Materialize pour la mise en forme et la mise en page. La page comprend une barre de navigation avec trois liens, un diaporama avec trois images et leurs titres et sous-titres correspondants, trois cartes avec des images, des titres, des descriptions et un lien "en savoir plus", ainsi qu'un pied de page avec un copyright et un lien supplémentaire. Le JavaScript est également utilisé pour initialiser le diaporama.

Demo : Materialize example

CSS

HTML

Visual Sstudio Code

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <meta charset="UTF-8">
    <title>Ma page avec Materialize</title>
  </head>
  <body>
    <nav>
      <div class="nav-wrapper">
        <a href="#" class="brand-logo center">Mon site</a>
        <ul id="nav-mobile" class="left hide-on-med-and-down">
          <li><a href="#">Accueil</a></li>
          <li><a href="#">À propos</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>
    <div class="slider">
      <ul class="slides">
        <li>
          <img src="https://archzine.fr/wp-content/uploads/2019/05/ac%CC%A7ores-portugal-le-plus-beau-pays-du-monde-paysage-magnifique-se%CC%81tonner-de-la-beaute%CC%81-de-la-terre.jpg">
          <div class="caption center-align">
            <h3>Titre de l'image 1</h3>
            <h5>Sous-titre de l'image 1</h5>
          </div>
        </li>
        <li>
          <img src="https://www.photo-paysage.com/albums/userpics/10001/thumb_Crepuscule_sur_le_lac_Leman.jpg">
          <div class="caption left-align">
            <h3>Titre de l'image 2</h3>
            <h5>Sous-titre de l'image 2</h5>
          </div>
        </li>
        <li>
          <img src="https://www.hostelworld.com/blog/wp-content/uploads/2017/09/grand-prismatic.jpg">
          <div class="caption right-align">
            <h3>Titre de l'image 3</h3>
            <h5>Sous-titre de l'image 3</h5>
          </div>
        </li>
      </ul>
    </div>
    <div class="container">
      <h1 class="header center">Bienvenue sur mon site</h1>
      <p class="flow-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
      <div class="row">
        <div class="col s12 m4">
          <div class="card">
            <div class="card-image">
              <img src="https://archzine.fr/wp-content/uploads/2019/05/ac%CC%A7ores-portugal-le-plus-beau-pays-du-monde-paysage-magnifique-se%CC%81tonner-de-la-beaute%CC%81-de-la-terre.jpg">
              <span class="card-title">Titre de la carte 1</span>
            </div>
            <div class="card-content">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="card-action">
              <a href="#">En savoir plus</a>
            </div>
          </div>
        </div>
        <div class="col s12 m4">
          <div class="card">
            <div class="card-image">
              <img src="https://www.photo-paysage.com/albums/userpics/10001/thumb_Crepuscule_sur_le_lac_Leman.jpg">
              <span class="card-title">Titre de la carte 2</span>
            </div>
            <div class="card-content">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="card-action">
              <a href="#">En savoir plus</a>
            </div>
          </div>
        </div>
        <div class="col s12 m4">
          <div class="card">
            <div class="card-image">
              <img src="https://www.hostelworld.com/blog/wp-content/uploads/2017/09/grand-prismatic.jpg">
              <span class="card-title">Titre de la carte 3</span>
            </div>
            <div class="card-content">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="card-action">
              <a href="#">En savoir plus</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="page-footer">
      <div class="footer-copyright">
        <div class="container">
          © 2023 Mon site
          <a class="grey-text text-lighten-4 right" href="#">Plus d'infos</a>
        </div>
      </div>
    </footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.slider');
        var instances = M.Slider.init(elems, {
          indicators: false
        });
      });
    </script>
  </body>
</html>