Widodo

Panduan Membuat Landing Page Dengan Bootstrap 3 - Materi 3 Membuat Content Layanan

Membuat Landing Page

Panduan Membuat Landing Page Dengan Bootstrap 3 : Halo teman-teman sudah beberapa hari ini s-widodo.com belum sempat update tutorial membuat Landing page, dalam kesempatan ini kita akan melanjutkan materi ke 3 yaitu membuat content layanan atau service dalam web.

Layanan ini biasa digunakan dalam sebuah website landing page maupun web company profile yang memiliki sebuah layanan contohnya di website s-widodo.com yang memiliki layanan pembuatan website dll. Dalam tutorial ini kita menggunakan custom css dan di tambah plugin icon dari Font Awesome, font awesome ini adalah sekumpulan vector icon yang dapat di gunakan dengan mudah dalam website.

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

Siapkan Project Anda

Buat yang kemarin sudah mengkuti materi pertama dan ke dua sekarang kalian buka kembali projectnya dan buka file index.html kalian masing masing.

Dalam Menampilkan  icon kita menggunakan Font Awesome yang bisa anda ambil dari website Font Awesome dalam contoh ini aya mengunakan  CDN artinya kita harus ada jaringan internet untuk menampilkan iconya tetapi jika Anda ingin file ofline bisa langsung di download pada website resminya.

Sekarang kalian buka file style.css dan simpan kode dibwah ini dan simpan di baris paling atas:

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

Membuat Container, Wadah/Pembungkus

Silahkan teman-teman ke baris paling bawah di style.css dan buat code css seperti dibawah ini 

/* ------------------------------------------------
	CONTAINER
-------------------------------------------------- */
.sw-container {
    padding: 90px 0px;
    position: relative;
}

 

Membuat Title Atau Judul

Title ini berfungsi untuk membuat judul disetiap konten halaman landing page Anda buatlah kode css seperti dibawah ini

/* ------------------------------------------------
    TITLE
--------------------------------------------------*/
.area-title{
  margin-bottom:80px;
  position: relative;
}

.area-title h2{
  color: #333;
  font-size:50px;
  font-weight:700;
  text-transform: capitalize;
}

.area-title h2 span{
  color:#383C9C;
}

 

Membuat Content Servis Atau Layanan

Sekarang kita membuat struktur kode css untuk layanan atau servis di landing page Anda carangan sangat mudah silahakn kalian ikuti struktur kode css dibawah ini

/* -------------------------------------------------
    SERVICE / LAYANAN
---------------------------------------------------*/
.service-item {
    padding: 15px 10px 15px 10px;
    background: #fff;
    height: 270px;
    margin-bottom: 50px;
}

.service-item .icon {
    text-align: center;
    color:#383C9C;
    font-size: 40px;
    line-height: 45px;
    margin: auto;
    margin-bottom: 20px;
}

.service-item .des h3 {
    font-size: 18px;
    color: #383C9C;
    font-weight:600;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}


.service-item .des p {
    font-size: 14px;
}

 

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

<!-- Layanan -->
<div class="sw-container">
<div class="container">
        <div class="row">
          <div class="area-title text-center">
            <h2>Laya<span>nan</span></h2>
          </div>

          <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
              <div class="service-item text-center">
                  <div class="icon"><i class="fa fa-cogs"></i></div>
                  <div class="des">
                      <h3>Lorem Ipsum Lorem Ipsum</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio necessitatibus quos quo sapiente nihil dignissimos exercitationem fugiat neque, praesentium aut. Quas itaque odit, ipsa nisi autem quisquam ducimus eaque dolore!</p>
                  </div>
              </div>
          </div>


          <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
              <div class="service-item text-center">
                  <div class="icon"><i class="fa fa-cogs"></i></div>
                  <div class="des">
                      <h3>Lorem Ipsum Lorem Ipsum</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio necessitatibus quos quo sapiente nihil dignissimos exercitationem fugiat neque, praesentium aut. Quas itaque odit, ipsa nisi autem quisquam ducimus eaque dolore!</p>
                  </div>
              </div>
          </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
              <div class="service-item text-center">
                  <div class="icon"><i class="fa fa-cogs"></i></div>
                  <div class="des">
                      <h3>Lorem Ipsum Lorem Ipsum</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio necessitatibus quos quo sapiente nihil dignissimos exercitationem fugiat neque, praesentium aut. Quas itaque odit, ipsa nisi autem quisquam ducimus eaque dolore!</p>
                  </div>
              </div>
          </div>
    </div>
  </div>
</div>

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.

 

Dalam tutorial ini akan kami update kembali untuk content videonya

 #NgodingYuk



0 Komentar


Copyright © 2015 S-widodo.com Digital marketing