Di part 7 ini kita akan kembali lagi ke halaman home / index.html melanjutkan sisa-sisa part sebelumnya yang baru sampai bagian My Projects / My Portfolio, kali ini kita akan membuat bagian Our Service / Layanan Kami dibagian bawahnya. Bagian ini biasanya menggunakan gambar sebagai ikon dari layanan tersebut dan sedikit deskripsi.

HTML

<div class="container-fluid">
  <div class="col-sm-12 judul-our-services">
    <h2 class="text-center">Our Services</h2>
  </div>
  <div class="col-md-6 col-sm-12 service-kiri">
    <div class="item-service">
      <ul>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </li>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </li>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </li>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </li>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="col-md-6 col-sm-12 service-kanan">
    <div class="item-service">
      <ul>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </li>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </li>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </li>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </li>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Copy kode diatas tepat dibagian bawah setelah tag </div> penutup bagian My Projects di part sebelumnya, jika kalian perhatikan kode diatas menggunakan list <li> yang tidak berbeda jauh dengan kode saat kita membuat bagian widget di sidebar tapi bagian ini akan ditampilkan lebih bagus lagi tidak seperti widget yang benar-benar menampilkan sebagai list.

ads by posciety

CSS

Code CSS yang digunakan seperti ini:

.judul-our-services {
   margin: 3% 0;
}
.item-service {
   height: 100%;
   overflow: auto;
}
.service-kiri {
   height: 70vh;
   margin-bottom: 5%;
}
.service-kanan {
   height: 70vh;
   margin-bottom: 5%;
   direction: rtl;
}
.item-service ul {
   list-style: none;
}
.item-service ul li {
   width: 99%;
}
.item-service li:nth-child(odd) .gambar-item-service {
   float: left;
}
.item-service li:nth-child(even) .gambar-item-service {
   float: right;
}
.gambar-item-service img {
   width: 100%;
}
.deskripsi-item-service p {
   text-align: justify;
}

Mungkin ada beberapa pembaca yang bertanya apa itu nth-child seperti yang ditulis di CSS diatas, silahkan pelajari selengkapnya tentang nth-child disini.

Kita buat bagian Our Service ini menjadi dibagian yaitu kiri dan kanan, uniknya lagi masing-masing bagian ini bisa di scroll didalam kolom / div yang artinya jika kalian memiliki layanan yang super banyak tetap dapat dibaca dengan cara scroll pada bagian ini dan halaman tetap diam.

Untuk mencobanya, silahkan Save dan lihat hasilnya !

Masih bingung ? Lihat : Video tutorial membuat website responsive Bootstrap Part 7.

Bagaimana bisa scroll di dalam kolom seperti itu ? Bahkan scroll keduanya (kanan & kiri), silahkan klik disini untuk mempelajari selengkapnya tentang membuat scroll didalam kolom / div. Seperti biasa, desain yang digunakan disini hanya contoh saja (terapkan gaya seperti warna dan gambar yang ditampilkan sesuai keperluan supaya terlihat lebih menarik).

Klik disini untuk melanjutkan ke part berikutnya, atau klik disini untuk membaca lagi part sebelumnya (part 6).

Selamat mencoba !