Widodo

Panduan Membuat Landing Page Dengan Bootstrap 3 - Materi 4 Membuat Content Profile

Membuat Landing Page

Assalamualaikum Wr, Wb

Sebelum masuk Materi  Kami s-widodo.com Mengucapkan Selamat Hari Raya Idul Fitri 1439 H.

Bertemu lagi bersama saya Widodo Founnder dari S-widodo.com Dalam Kesempatan Idul fitri ini saya sempatkan untuk melanjutkan Tutorial Membuat Landing Page kepada teman-teman, dalam materi ini kita sudah masuk ke materi empat (4).

Bagi teman-teman yang sudah mengikuti tutorial sebelumnya yaitu membuat Content layanan di materi 3 teman-teman bisa buka kembali tutorialnya yang ketinggala, untuk Membuat Content profile sebenarnya  masuk di Materi 3 jadi kebalik sama materi yang membuat layanan content.

Buat temen-temen yang belum baca tutorial sebelumnya silahkan kunjungi link dibawah ini:

  1. Panduan Membuat Landing Page Dengan Bootstrap 3 - Materi 1 Membuat Menu
  2. Panduan Membuat Landing Page Dengan Bootstrap 3 - Materi 2 Membuat Slider
  3. Panduan Membuat Landing Page Dengan Bootstrap 3 - Materi 3 Membuat Content Layanan

Siapkan Project Anda

Buat yang kemarin sudah mengkuti materi 3 sekarang kalian buka kembali projectnya dan buka file index.html dan style.css kalian masing masing. Dalam membuat content profile ini lebih mudah dibandingkan membuat content layanan karena stuktur css maupun htmlnya lebih ssedikit.

Sekarang buat struktur CSS profile dan simpan di file style.css seperti dibawah ini

/* -------------------------------------------------
    PROFILE
---------------------------------------------------*/
.sw-abouts {
	padding: 70px 0px;
	background:#f7f7f7;
}

.sw-abouts h3{
	font-size: 30px;
	text-transform: uppercase;
	font-weight: 500;
	padding: 0px;
	line-height: 30px;
	margin-bottom: 30px;
	text-align: left;
}

.sw-abouts p {
	font-size: 16px;
	line-height: 28px;
}

 

Jika struktur cssnya sudah siap semua, sekarang kita langsung ke file index.html untuk pembuatan struktur HTMLnya Ikuti kode HTML dibawah ini dan simpan di bawah kode slider

 

<!-- Profile -->
<div class="sw-abouts">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
        <img src="img/abouts.jpg" class="img-responsive">
      </div>

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
        <h3>Tentang Kami</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus aliquam rem reiciendis quos vel veniam beatae impedit molestiae dignissimos. Blanditiis similique omnis tempore placeat consequatur aliquid maiores excepturi asperiores dolor.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus aliquam rem reiciendis quos vel veniam beatae impedit molestiae dignissimos. Blanditiis similique omnis tempore placeat consequatur aliquid maiores excepturi asperiores dolor.</p>
      </div>

    </div>
  </div>
</div>

 

Dalam Struktur kode HTML diatas kita menggunakan 2 GRID artinya 2 kolom saja untuk menampilkan Gambar dan Deskripsi profilenya

Sialahkan  jalankan di Browser  kalian masinh-masing jika belum berhasil dalam membuat content layanan ini anda berkomentar di kolom komentar yang sudah kami sediakan. Jika Tutorial ini bermanfaat silahkan Anda bagikan ke teman-teman.

#NgodingYuk



Baca Artikel Lainya

0 Komentar


Copyright © 2015 S-widodo.com Digital marketing