Widodo

Panduan Membuat Landing Page Dengan Bootstrap 3 - Materi 6 Membuat Footer/Kontak

Cara membuat landing page

 

Halo teman-teman kembali lagi bersama saya WIDODO mohon maaf saya baru sempat meneruskan panduan ini, karena ada kesibukan dunia nyata,  jadi hari ini kika akan melanjutkan lagi materi Panduan membuat landing page dengan bootstrap 3. Dalam materi ini kita akan belajar membuat footer lebih tepatnya sih membuat kontak dan footer/credits.

Bagi teman-teman yang sudah mengikuti tutorial sebelumnya yaitu membuat Content Price di materi 5 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
  5. Panduan Membuat Landing Page Dengan Bootstrap 3 - Materi 5 Membuat Content Price

 

Siapkan Project Anda

Buat yang kemarin sudah mengkuti materi 5 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:

 

/*--------------------------------------------------
	KONTAK
---------------------------------------------------- */
.sw-contact {
	padding: 70px 0px;
	position: relative;
	background:#F8EDED;
}

.sw-contact iframe {
    padding:5px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
}


.contact-item {
    padding: 20px 30px;
    background: #fff;
    margin-bottom: 30px;
    border: 1px solid rgba(0,0,0,.1);
}

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


/*---------------------------------------
	CREDIT
-----------------------------------------*/
.credits{
	 width: 100%;
	 background:#fff;
	 padding:30px 0px; 
	 color:#4E4E4E;
}

.credits .credits-logo{
	display: inline-block;
	margin:25px 0px;
}

.credits p{
  color:#4E4E4E;
  font-size:13px;
  line-height:35px;
  padding:0px;
  margin:0px;
  letter-spacing: 1px;
  text-align: center;
  margin:26px 0px;
}

.credits p a {
  color:#4E4E4E;
  text-decoration: none;
}

.credits .social{
  position: relative;
  margin:16px 0px;
  text-align: center;
  float:right;
}

.credits .social ul{
  list-style: none;
  margin:auto;
  padding:0px;
  position: relative;
}

.credits .social ul li{
  list-style: none;
  margin:auto;
  display: inline-block;
}

.credits .social li a{
  color:#4E4E4E;
  font-size: 14px;
  line-height:30px;
  text-align: center;
  display: inline-block;
  margin: 12px ;
  float: right;
}

 

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 Price

<div class="sw-contact">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2361.884954999757!2d105.25921424658675!3d-5.386276737799316!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e40dafc87ed360f:0xceb60476e24b9c95!2sS-widodo.com Digital Marketing!5e0!3m2!1sid!2s!4v1494739221575" width="100%" height="417" frameborder="0" style="border:0"></iframe>
      </div>

      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
              <div class="contact-item text-center">
                <div class="icon"><i class="fa fa-map-marker"></i></div>
                  <div class="des">
                  <h3>Alamat</h3>
                  <p>Jalan Teuku Umar No.100 B Kedaton Kota Bandar Lampung</p>
                </div>
              </div>
          </div>

          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
              <div class="contact-item text-center">
                  <div class="icon"><i class="fa fa-mobile"></i></div>
                  <div class="des">
                      <h3>Hubungi kami!</h3>
                    <p>0896-XXXX-XXXX<br>
                    0821-XXXX-XXXX</p>
                  </div>
              </div>
           </div>

          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
              <div class="contact-item text-center">
                  <div class="icon"><i class="fa fa-envelope"></i></div>
                  <div class="des">
                      <h3>Email</h3>
                      <p>swidodocom@yahoo.com<br>
                      info@-widodo.com</p>
                  </div>
              </div>
           </div>

      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
          <div class="contact-item text-center">
              <div class="icon"><i class="fa fa-clock-o"></i></div>
              <div class="des">
                  <h3>Jam Kerja</h3>
                  <p>Senin to Sabtu - 09:00 to 17:00 <br>
                    Minggu - Pukul 09.00 tos 15.00</p>
              </div>
          </div>
       </div>

        </div>
      </div>

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


<div class="credits">
    <div class="container">
        <div class="row">

            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
              <div class="text-center">
                <p>Copyright © 2018 <a href="#">Landing page</a> | Design by : <a href="http://www.s-widodo.com" target="_blank">S-widodo.com Digital Marketing</a></p>
              </div>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="social">
                  <ul>
                    <li><a href="https://www.facebook.com/swidodocom" target="_blank"><i class="fa fa-facebook"></i></a></li>
                    <li><a href="http://twitter.com/swidododotcom" target="_blank"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="https://plus.google.com/u/0/106999525446516850579" target="_blank"><i class="fa fa-google"></i></a></li>
                    <li><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li>
                    
                  </ul>
                </div>
            </div>

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

Didalam content kontak ini saya memakai google map yang bisa anda buat langsung melelui google map

 

Sialahkan  jalankan di Browser  kalian masing-masing jika belum berhasil dalam membuat content footer/kontak ini bisa anda tanyakan pada kolom komentar. Struktur maupun tampilan footer/kontak  ini bisa anda modifikasi 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