Membuat Website Parallax dengan Bootstrap 4 Part 2

Membuat Website Parallax dengan Bootstrap 4 Part 2 – Pada artikel kali ini kita masih dalam pembahasan yang sama dengan artikel sebelumnya, yaitu Membuat Website Parallax dengan Bootstrap 4 , kali ini kita akan melanjutkan dari artikel bagian pertama sebelumnya. Konsep website parallax kali ini kita akan membuat tiga bagian sebagai demonstrasi. Baiklah sekarang kita coba buat struktur html seperti berikut untuk membuat layout pertama

<div class="jumbotron paral paralsec">
    <h1 class="display-3">DUMET School</h1>
    <p class="lead">Parallax Website Bootstrap 4</p>
    <p class="lead">
      <a class="btn btn-info btn-lg btn-md" href="#" role="button">Pelajari</a>
    </p>
  </div>

Selanjutnya ini adalah layout kedua dengan dua kolom, teks di sebelah kiri dan gambar di sebelah kanan

<div class="jumbotron paral paralsec1">
    <div class="row">
      <div class="col-6 ">
        <h1 class="display-3 text-right">DUMET School</h1>
        <p class="text-right">Deskripsi paragraf</p>
      </div>
      <div class="col-6">
        <img src="https://img.webnots.com/2017/05/parallax.jpg" class="img-fluid">
      </div>
    </div>
  </div>

Lalu sekarang adalah layout yang ketiga gambar di sebelah kiri dan teks di sebelah kanan

  <div class="jumbotron paral paralsec2">
    <div class="row">
      <div class="col-6">
        <img src="https://img.webnots.com/2017/05/parallax.jpg" class="img-fluid">
      </div>
      <div class="col-6 ">
        <h1 class="display-3 text-left">DUMET School</h1>
        <p class="text-left">Deskripsi paragraf</p>
      </div>
    </div>
  </div>

Konten yang terakhir adalah footernya

  <footer class="wn-footer">
    <p>
      <a href="#">Back to top</a>
    </p>
  </footer>

Baiklah teman-teman kira – kira hasil akhirnya akan terlihat seperti ini

<div class="jumbotron paral paralsec">
    <h1 class="display-3">DUMET School</h1>
    <p class="lead">Parallax Website Bootstrap 4</p>
    <p class="lead">
      <a class="btn btn-info btn-lg btn-md" href="#" role="button">Pelajari</a>
    </p>
  </div>

  <div class="jumbotron paral paralsec1">
    <div class="row">
      <div class="col-6 ">
        <h1 class="display-3 text-right">DUMET School</h1>
        <p class="text-right">Deskripsi paragraf</p>
      </div>
      <div class="col-6">
        <img src="https://img.webnots.com/2017/05/parallax.jpg" class="img-fluid">
      </div>
    </div>
  </div>

  <div class="jumbotron paral paralsec2">
    <div class="row">
      <div class="col-6">
        <img src="https://img.webnots.com/2017/05/parallax.jpg" class="img-fluid">
      </div>
      <div class="col-6 ">
        <h1 class="display-3 text-left">DUMET School</h1>
        <p class="text-left">Deskripsi paragraf</p>
      </div>
    </div>
  </div>

  <footer class="wn-footer">
    <p>
      <a href="#">Back to top</a>
    </p>
  </footer>