Modèles de Tutoriel de comment ça marche

1°

Code :

<div class="container is-fluid">
    <section class="section">
      <div class="container has-text-centered">
        <h2 class="title is-spaced">Future of the Internet</h2>
        <p class="subtitle">Decentralized, secure, private. The PiperNet is on it's way to revolutionize
           every smartphone, PC, and smart-fridge near you.</p><a class="button is-primary" href="#">
             Join the Revolution!</a>
      </div>
    </section>
  </div>

---

2°

Code :

 <div class="container is-fluid">
    <section class="section">
      <div class="container has-text-centered">
        <h2 class="title is-spaced">Future of the Internet</h2>
        <p class="subtitle">Decentralized, secure, private. The PiperNet is on it's way to revolutionize 
           every smartphone, PC, and smart-fridge near you.</p>
        <div class="buttons is-centered"><a class="button is-primary" href="#">Join the Revolution!</a>
        </div>
        <h3 class="title is-5">Great Companies that already use PiperNet</h3>
        <div class="columns">
          <div class="column">
           <img src="https://bulma.dev/placeholder/logos/gitscape.svg?primary=00d1b2" alt=""></div>
          <div class="column">
           <img src="https://bulma.dev/placeholder/logos/k-hole.svg?primary=00d1b2" alt=""></div>
          <div class="column">
           <img src="https://bulma.dev/placeholder/logos/tholio.svg?primary=00d1b2" alt=""></div>
          <div class="column">
           <img src="https://bulma.dev/placeholder/logos/plucky.svg?primary=00d1b2" alt=""></div>
          <div class="column">
           <img src="https://bulma.dev/placeholder/logos/1stsight.svg?primary=00d1b2" alt=""></div>
        </div>
      </div>
    </section>
  </div>

---

3°

Code :

 <div class="container is-fluid">
    <section class="section">
      <div class="container">
        <div class="columns is-vcentered">
          <div class="column is-7 has-text-centered">
            <h3 class="title">Join our newsletter!</h3>
            <p class="subtitle">We'll never share your email address.</p>
          </div>
          <div class="column is-5">
            <div class="field has-addons">
              <div class="control is-expanded">
                <input class="input" type="email" placeholder="Email" aria-label="email"
                  aria-describedby="call-to-action-button-04">
              </div>
              <div class="control">
                <button class="button is-primary" id="call-to-action-button-04">Subscribe</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

---

4°

Code :

 <div class="container is-fluid">
    <section class="section">
      <div class="container has-text-centered">
        <h2 class="title is-spaced">Follow us on Social Media:</h2>
        <div class="buttons is-centered"><a class="button" href="#"><img src="../../all-css/placeholder/
          icons/twitter.svg"
          alt=""></a><a class="button" href="#"><img src="../../all-css/placeholder/icons/facebook-f.svg"
          alt=""></a><a class="button" href="#"><img src="../../all-css/placeholder/icons/instagram.svg"
          alt=""></a><a class="button"
          href="#"><img src="../../all-css/placeholder/icons/linkedin-in.svg" alt=""></a></div>
      </div>
    </section>
  </div>

---