Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<!DOCTYPE html> #165

Open
awrimka opened this issue Feb 13, 2024 · 0 comments
Open

<!DOCTYPE html> #165

awrimka opened this issue Feb 13, 2024 · 0 comments

Comments

@awrimka
Copy link

awrimka commented Feb 13, 2024

<link
  https://www.instagram.com/p/C2H-DIUNCty/?igsh=MWt1dnFrZG0zZjN4eA==/>
<script src="https://cdn.jsdelivr.net/npm/@glidejs/[email protected]/dist/glide.min.js"></script>
<link
  rel="stylesheet"
  href="https://www.canva.com/design/DAF8sDpk29Q/vr7rb7m0cR06In1o9MGhNg/edit?utm_content=DAF8sDpk29Q&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton.css"
    />

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

    Design minimaliste industriel

  • slide1

    Décoration intérieure tropicale

  • slide1

    Accessoires bohèmes ethniques

  • slide1

    Textiles géométriques colorés

  • slide1

    Mobilier vintage moderne

  • slide1

    É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>

Originally posted by @awrimka in #164

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant