Site web

[awrimka]

<link
  https://www.instagram.com/p/C2H-DIUNCty/?igsh=MWt1dnFrZG0zZjN4eA==/>
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide@3.4.1/dist/glide.min.js"></script>
<link
  rel="stylesheet"
  href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"
/>

<link rel="stylesheet" href="/style.css" />
<title>Document</title>

MON blog

• Accueil
• Qui sommes-nous
• Nos services
• Categories
• Contactez-nous

• 

  Design minimaliste industriel

• 

  Décoration intérieure tropicale

• 

  Accessoires bohèmes ethniques

• 

  Textiles géométriques colorés

• 

  Mobilier vintage moderne

• 

  Éclairage rustique chic

      <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
          <i class="las la-arrow-left"></i>
        </button>
        <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
          <i class="las la-arrow-right"></i>
        </button>
      </div>
    </div>
  </section>
</header>

<main class="main">
  <h1 class="main-title">En vedette</h1>
  <section class="main-section">
    <div class="article">
      <div class="article-image">
        <img
          src="https://images.pexels.com/photos/13150561/pexels-photo-13150561.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
        />
      </div>
      <div class="article-text">
        <h2>Textiles géométriques colorés</h2>
        <p>
          Dans ce cas, l'espace entre l'unité de mesure et l'opérateur "-"
          est important pour que la fonction "calc" soit correctement
          interprétée par le navigateur web.Dans ce cas, l'espace entre
          l'unité de mesure et l'opérateur "-" est important pour que la
          fonction "calc" soit correctement interprétée par le navigateur
          web.
        </p>
        <button class="article-seeMore">voir details</button>
        <div class="comments">
          <div><i class="las la-comments"></i> <span>1</span></div>
          <div class="share">
            <p>partager</p>
            <span> <i class="lab la-facebook-f"></i></span>
            <span> <i class="lab la-twitter"></i></span>
          </div>
        </div>
      </div>
    </div>
    <div class="article">
      <div class="article-text">
        <h2>Textiles géométriques colorés</h2>
        <p>
          Dans ce cas, l'espace entre l'unité de mesure et l'opérateur "-"
          est important pour que la fonction "calc" soit correctement
          interprétée par le navigateur web.Dans ce cas, l'espace entre
          l'unité de mesure et l'opérateur "-" est important pour que la
          fonction "calc" soit correctement interprétée par le navigateur
          web.
        </p>
        <button class="article-seeMore">voir details</button>
        <div class="comments">
          <div><i class="las la-comments"></i> <span>1</span></div>
          <div class="share">
            <p>partager</p>
            <span> <i class="lab la-facebook-f"></i></span>
            <span> <i class="lab la-twitter"></i></span>
          </div>
        </div>
      </div>
      <div class="article-image">
        <img
          src="https://images.pexels.com/photos/14912277/pexels-photo-14912277.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
        />
      </div>
    </div>
    <div class="article-footer-1">
      <div class="article-image__footer-1">
        <img
          src="https://images.pexels.com/photos/2084255/pexels-photo-2084255.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
        />
      </div>
      <div class="article-text__footer-1">
        <h2>Textiles géométriques colorés</h2>
        <p>
          Dans ce cas, l'espace entre l'unité de mesure et l'opérateur "-"
          est important pour que la fonction "calc" soit correctement
          interprétée par le navigateur web.Dans ce cas, l'espace entre
          l'unité de mesure et l'opérateur "-" est important pour que la
          fonction "calc" soit correctement interprétée par le navigateur
          web.
        </p>
        <button class="article-seeMore">voir details</button>
        <div class="comments">
          <div><i class="las la-comments"></i> <span>1</span></div>
          <div class="share">
            <p>partager</p>
            <span> <i class="lab la-facebook-f"></i></span>
            <span> <i class="lab la-twitter"></i></span>
          </div>
        </div>
      </div>
    </div>
    <div class="article-footer-2">
      <div class="article-image__footer-2">
        <img
          src="https://images.pexels.com/photos/1590077/pexels-photo-1590077.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
        />
      </div>
      <div class="article-text__footer-2">
        <h2>Textiles géométriques colorés</h2>
        <p>
          Dans ce cas, l'espace entre l'unité de mesure et l'opérateur "-"
          est important pour que la fonction "calc" soit correctement
          interprétée par le navigateur web.Dans ce cas, l'espace entre
          l'unité de mesure et l'opérateur "-" est important pour que la
          fonction "calc" soit correctement interprétée par le navigateur
          web.
        </p>
        <button class="article-seeMore">voir details</button>
        <div class="comments">
          <div><i class="las la-comments"></i> <span>1</span></div>
          <div class="share">
            <p>partager</p>
            <span> <i class="lab la-facebook-f"></i></span>
            <span> <i class="lab la-twitter"></i></span>
          </div>
        </div>
      </div>
    </div>
    <div class="SideBar">
      <div class="SideBar-newletter">
        <h1>New letter</h1>
        <div class="newletter-action">
          <input
            type="text"
            placeholder="Entrer votre email"
            class="newletter-Input"
          />
          <button class="new-Btn">S'abonner</button>
        </div>
      </div>
      <div class="recent">
        <h1>Article récents</h1>
        <div>
          <ul class="recent__items">
            <li class="recent__item">
              <img
                src="https://images.pexels.com/photos/1005058/pexels-photo-1005058.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt="slide1"
              />
              <h4>Design minimaliste industriel</h4>
            </li>
            <li class="recent__item">
              <img
                src="https://images.pexels.com/photos/1439179/pexels-photo-1439179.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt="slide1"
              />
              <h4>Design minimaliste industriel</h4>
            </li>
            <li class="recent__item">
              <img
                src="https://images.pexels.com/photos/9985530/pexels-photo-9985530.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt="slide1"
              />
              <h4>Design minimaliste industriel</h4>
            </li>
            <li class="recent__item">
              <img
                src="https://images.pexels.com/photos/9667021/pexels-photo-9667021.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt="slide1"
              />
              <h4>Design minimaliste industriel</h4>
            </li>
            <li class="recent__item">
              <img
                src="https://images.pexels.com/photos/3234638/pexels-photo-3234638.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt="slide1"
              />
              <h4>Design minimaliste industriel</h4>
            </li>
          </ul>
        </div>
      </div>
      <div class="sidebar-social-media">
        <div class="sidebar-social-media__content">
          <h3>Suivez nous</h3>
          <div class="sidebar-social-media__content_icon">
            <span><i class="lab la-twitter"></i></span>
            <span><i class="lab la-instagram"></i></span>
            <span><i class="lab la-facebook-f"></i></span>
            <span><i class="lab la-linkedin-in"></i></span>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>
<script>
  new Glide('.glide', {
    type: 'carousel',
    perView: 5,
    focusAt: 'center',
    autoplay: 3000,
    arrows: {
      prev: '.glide__arrow--left',
      next: '.glide__arrow--right',
    },
  }).mount();
</script>