Widodo

Panduan Membuat Landing Page Dengan Bootstrap 3 - Materi 5 Membuat Content Price

Cara Membuat Pricing

Halo teman-teman hari ini kitak akan melanjutkan lagi materinya, sekarang kita akan belajar membuat Price atau Harga tujuanya untuk memberikan tabel harga sebuah produk kita yang ada di dala wesbite.

Bagi teman-teman yang sudah mengikuti tutorial sebelumnya yaitu membuat Content Profile di materi 4 teman-teman bisa buka kembali tutorialnya yang ketinggalan.

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
  4. Panduan Membuat Landing Page Dengan Bootstrap 3 - Materi 4 Membuat Content Profile

Siapkan Project Anda

Buat yang kemarin sudah mengkuti materi 4 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 sedikit.

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

/* -------------------------------------------------
PRICING
---------------------------------------------------*/
.sw-pricing {
padding: 70px 0px;
background:#d9edf7;
}

 

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 Layanan

<!-- HARGA -->
<div class="sw-pricing">
<div class="container">
    <div class="row">
          <div class="area-title text-center">
            <h2>Harga</h2>
          </div>
        <div class="col-md-4">
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h4 class="text-center">
                        DEV PLAN</h4>
                </div>
                <div class="panel-body text-center">
                    <p class="lead">
                        <strong>200.000 / month</strong></p>
                </div>
                <ul class="list-group list-group-flush text-center">
                    <li class="list-group-item"><i class="icon-ok text-danger"></i>Personal use</li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i>Unlimited projects</li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i>27/7 support</li>
                </ul>
                <div class="panel-footer">
                    <a class="btn btn-lg btn-block btn-danger" href="http://www.s-widodo.com/ministore">PESAN</a>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="text-center">
                        PRO PLAN</h4>
                </div>
                <div class="panel-body text-center">
                    <p class="lead">
                        <strong>800.000 / 6 month</strong></p>
                </div>
                <ul class="list-group list-group-flush text-center">
                    <li class="list-group-item"><i class="icon-ok text-danger"></i>Personal use</li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i>Unlimited projects</li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i>27/7 support</li>
                </ul>
                <div class="panel-footer">
                    <a class="btn btn-lg btn-block btn-info" href="http://www.s-widodo.com/ministore">PESAN</a>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h4 class="text-center">
                        FREE PLAN</h4>
                </div>
                <div class="panel-body text-center">
                    <p class="lead">
                        <strong>1.500.000 / year</strong></p>
                </div>
                <ul class="list-group list-group-flush text-center">
                    <li class="list-group-item"><i class="icon-ok text-danger"></i>Personal use</li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i>Unlimited projects</li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i>27/7 support</li>
                </ul>
                <div class="panel-footer">
                    <a class="btn btn-lg btn-block btn-success" href="http://www.s-widodo.com/ministore">PESAN</a>
                </div>
            </div>
        </div>
  </div>
</div>
</div>

Dalam Struktur kode HTML diatas kita menggunakan 3 GRID artinya 3 kolom saja

Sialahkan  jalankan di Browser  kalian masing-masing jika belum berhasil dalam membuat content price ini bisa anda tanyakan pada kolom komentar. Struktur maupun tampilan price ini bisa anda modofikasi kembali sesuai dengan selera kalian masing-masing.

*Saya mohon maaf jika content videonya belum sempat saya buat, tetapi isyaallah jika ada waktu akan saya lengkapi semua videonya.

Jika Tutorial ini bermanfaat silahkan Anda bagikan ke teman-teman.



0 Komentar


Populer Post

Copyright © 2015 S-widodo.com Digital marketing