mz-article

In this example below you will see how to do a mz-article with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by gregholvoet, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gregholvoet ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>mz-article</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Montserrat:300,400,700'>

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

  
</head>

<body>

  <div class="mz-article" style="margin: 0 auto;max-width: 780px;">
<div class="article__post">
    <h2>Entretien exclusif avec Future</h2>
    <h3>Entretien exclusif avec Future</h3>
    <p><strong>Entretien <a href="#">exclusif</a> avec Future, le seul qu’il ait accordé en France.</strong></p>

    <ul>
        <li><strong>Mouloud :</strong> <br>Tu as grandi <a href="#">dans un studio</a>,<br>avec Dungeon…</li>
        <li><strong>Mouloud :</strong> Tu as grandi dans un studio, avec Dungeon…</li>
        <li><strong>Mouloud :</strong> Tu as grandi dans un studio, avec Dungeon…</li>
    </ul>

    <ol>
        <li><strong>Mouloud :</strong> <br>Tu as grandi dans un studio,<br>avec Dungeon…</li>
        <li><strong>Mouloud :</strong> Tu as grandi dans un studio, avec Dungeon…</li>
        <li><strong>Mouloud :</strong> Tu as grandi dans un studio, avec Dungeon…</li>
    </ol>

    <p>
        Nayvadius DeMun Wilburn de son vrai nom, ou plutôt «&nbsp;Future&nbsp;» est né dans une banlieue d’Atlanta en Georgie. Son dernier album, sorti en juillet 2015, est arrivé en tête du classement Billboard 200. De passage à Londres, Clique a rencontré le rappeur, en exclusivité. L’occasion de revenir sur son succès, de parler réseaux sociaux, et de ses prochaines créations…
    </p>
    <p><strong>Mouloud :</strong> Tu as grandi dans un studio, avec Dungeon…
    </p>
    <blockquote>
        <p>
            <strong><strong>Future :</strong> J’ai grandi</strong> <em>dans un fumoir de crack, avec des junkies.</em>
        </p>
    </blockquote>
    <p><strong>Mouloud :</strong> Tu es né en 1983, à Atlanta…</p>
    <blockquote>
        <p><strong>Future :</strong> Je suis né dans le crack en 1983.</p>
    </blockquote>
    <p><strong>Mouloud :</strong> Qu’est-ce que tu voulais faire quand tu étais petit&nbsp;?</p>
    <blockquote>
        <p>
            <strong>
                Beaucoup de gens seront perdus et feront des choses qu’ils ne supporteront pas parce qu’ils n’étaient pas préparés.
            </strong><br>
            Les autres étaient préparés pour ce qui allait se passer. Comme les gangsters. Ils ont toujours connu ça, ils vivent comme ça depuis toujours. C’est une habitude, ils s’en fichent, ils n’ont pas de sentiments. Toi, tu fais un truc dont tu penses te relever. Mais tu pleures, tu gémis comme un bébé. C’est dingue comme les trucs peuvent arriver, les situations se retourner.
        </p>
    </blockquote>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/gregholvoet/mz-article-pPygLa */
.mz-article {
  font-weight: 300;
  font-size: 16px;
  line-height: 30px;
  font-family: "Montserrat", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media screen and (min-width: 480px) {
  .mz-article {
    font-size: 18px;
  }
}
.mz-article p,
.mz-article ol,
.mz-article ul {
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  margin-bottom: 60px;
}
.mz-article blockquote {
  max-width: 80%;
  margin: 0 auto 60px;
  margin-left: 0px;
  border-left: 1px solid;
  padding-left: 29px;
}
@media screen and (min-width: 480px) {
  .mz-article blockquote {
    margin-left: 30px;
  }
}
.mz-article blockquote p {
  font-size: 22px;
}
.mz-article blockquote strong,
.mz-article blockquote b {
  font-weight: 700;
}
.mz-article strong,
.mz-article b {
  font-weight: 400;
}
.mz-article em,
.mz-article i {
  font-style: italic;
}
.mz-article h2 {
  font-size: 24px;
  margin-bottom: 60px;
}
@media screen and (min-width: 480px) {
  .mz-article h2 {
    font-size: 32px;
  }
}
.mz-article h3 {
  font-size: 20px;
  margin-bottom: 60px;
}
@media screen and (min-width: 480px) {
  .mz-article h3 {
    font-size: 24px;
  }
}

Comments