Membuat Website Parallax dengan Bootstrap 4 Part 2

07/09/2018    Maykhel David    128     Website

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

 
demikian artikel kali ini dimana kita telah membuat sebuah halaman website parallax dengan bootstrap 4. cukup mudah bukan. Jika kalian sudah selesai, kira kira akan seperti ini baris kode halamannya.

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

Silahkan gabungkan dengan css yang ada di artikel membuat website parallax dengan bootstrap part1. Semoga bermanfaat

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More