Cara Membuat Blog Web,Contact,Dan Footer

Assalamualaikum Wr. Wb

Ahmad Dindan Romadhoni

cara membuat Blog Dengan Card Bootstrap4

kemarin kita sudah membuat news dengan card dari bootstrap sekarang kita akan membuat blog website dengan card dari bootstrap

untuk membuat blog website masukan script berikut:

<section class="Blog" id="Blog"></section>

    <div class="container">

        <h1>Blog</h1>

        <div class="card-group">

  <div class="card">

    <img src="img/jepara1.jpg" class="card-img-top" alt="...">

    <div class="card-body">

      <h5 class="card-title">Card title</h5>

    </div>

    <div class="card-footer">

      <small class="text-muted">Last updated 3 mins ago</small>

    </div>

  </div>

  <div class="card">

    <img src="img/jepara1.jpg" class="card-img-top" alt="...">

    <div class="card-body">

      <h5 class="card-title">Card title</h5>

    </div>

    <div class="card-footer">

      <small class="text-muted">Last updated 3 mins ago</small>

    </div>

  </div>

 <div class="card">

    <img src="img/jepara1.jpg" class="card-img-top" alt="...">

    <div class="card-body">

      <h5 class="card-title">Card title</h5>

    </div>

    <div class="card-footer">

      <small class="text-muted">Last updated 3 mins ago</small>

    </div>

  </div>

</div>

    </div>

Dan Hasilnya adalah:

Cara Membuat Contact Dengan Form Dari Bootstrap

Pada kali ini kita akan memberikan tutorial cara membuat  contact dengan bootstrap.Untuk membuat contact dengan form dari bootstrap anda bias menggunakan class “form-control” pada tag <input>,<textarea>,<select> dan elemnt form yang bisa digunankan lainnya

Perhatikan contoh script contact berikut ini:

<section class="contact" id="contact"></section>

<div class="container">

  <h1>Contact</h1>

  <div class="row">

    <div class="col-sm-12 col-sm-offsite-2">

      <form>

    <div class="form-group">

    <label for="nama">Nama</label>

    <input type="text" class="form-control" id="nama" placeholder="Masukan Nama">

      </div>

      <div class="form-group"></div>

    <label for="email">Email</label>

    <input type="email" class="form-control" placeholder="Masukan Email">

      </div>

    </div>

        <div class="form-group">

    <label for="email">Pesan</label>

  <textarea class="form-control" rows="5" placeholder="Masukan Pesan">

    </textarea>

    </div>

</div>

</div>

  </form>

Dan Hasilnya adalah berikut:

Selanjutnya kita akan membuat footer,Untuk Membuat footer perhatikan script berikut:

<div class="footer text-center bg-dark text-light">

<footer>

<p>copyright @ | Dindan Pedia</p>

</footer>

</div>

Dan Hasilnya adalah berikut:

Sekian Tutorial dari saya terimakasih,Dan sampai jumpa ditutorial berikutnya.