Cara menggunakan bootstrap prevent line break

Pada artikel ini saya akan membagikan tutorial membuat landing page menggunakan HTML, CSS, dan Bootstrap. Simak artikel ini sampai habis ya!

Landing page adalah halaman yang dibuka oleh user setelah mengklik sesuatu terlebih dahulu. Tidak hanya pada website, tetapi sebutan “landing page” juga berlaku pada platform lain seperti media sosial, email, iklan berbayar, dan sebagainya.

Jika biasanya halaman website berisi banyak link dan menu, landing page dirancang untuk mengarahkan pengunjung agar melakukan suatu tindakan yang spesifik.

Walaupun berada pada satu website yang sama, landing page sebenarnya dibuat secara terpisah. Hal ini bertujuan untuk menjauhkan user dari link atau menu lain yang bisa mengalihkan perhatian user.

Dari sini dapat disimpulkan bahwa landing page yang baik adalah landing page yang berorientasi pada “action” yang akan dilakukan user.

Untuk Apa Saja Penggunaan Landing Page?

Halaman ini dapat digunakan untuk mendorong berbagai jenis kampanye, mulai dari iklan, email marketing, kampanye media sosial, dan sebagainya. Berikut beberapa penggunaan landing page lainnya:

  • Download eBook
  • Membeli produk
  • Reservasi untuk event tertentu
  • Mempelajari produk/jasa baru
  • Registrasi untuk mendapat trial atau demo
  • Klaim penawaran promosi, dan masih banyak lagi

Landing page harus dibuat secara unik dan disesuaikan dengan tujuannya. Dengan begitu, user bisa fokus dan melakukan action yang kita inginkan.

Berikut adalah contoh landing page sederhana yang dibuat dengan HTML, CSS dan Bootstrap.

Cara menggunakan bootstrap prevent line break

Baca Juga : Serunya Belajar Full Stack Web Development di Intensive Bootcamp Gamelab Indonesia

Cara Membuat Landing Page

Pertama kita perlu membuat starter template dengan cara menyalin source code dari website Bootstrap seperti pada gambar berikut,

Cara menggunakan bootstrap prevent line break

Membuat index.html

Buatlah file index.html dan masukkan script berikut.





  

    

    

    



    

    



    Hello, world!

  

  

    

Hello, world!

Selanjutnya edit, hapus, dan gunakan yang kita perlukan. Berikut contohnya:





  

    

    

    



    

    



    

    



    Landing Page | Muhammad Farid

  

  

   

  



Membuat Navbar





      

Maje Graphics

Berikut hasil dari source code di atas

Cara menggunakan bootstrap prevent line break

Membuat Jumbotron

index.html



    

Cara menggunakan bootstrap prevent line break


Maje Graphics

Jasa Desain Grafis 2D





  

    

    

    



    

    



    

    



    Landing Page | Muhammad Farid

  

  

   

  



0

Hasil dari source code di atas

Cara menggunakan bootstrap prevent line break

Membuat About

index.html



    

About Us

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ut, fugit, illum atque dolor adipisci, commodi natus nulla quae fugiat voluptatem animi reprehenderit consequuntur quasi itaque repellendus vel totam maiores recusandae iusto non quis corporis? Explicabo sequi amet expedita. Sunt, accusantium quibusdam! Corporis officiis, minima eos aperiam pariatur sed ab esse tempora! Eum nobis vel, itaque beatae laborum a officiis, quam, sequi nihil corporis ipsam suscipit necessitatibus labore inventore distinctio quisquam qui impedit et voluptatem. Nihil deserunt facere autem. Explicabo odit nostrum eos accusantium fugiat pariatur laboriosam velit illo veniam, sint, consequuntur distinctio? Nobis nam corrupti, nulla earum quos sint?

Hasil dari source code di atas

Cara menggunakan bootstrap prevent line break

Membuat Desain

index.html



    

Design type

Cara menggunakan bootstrap prevent line break

Design Type 1

this is an example of design type 1

Cara menggunakan bootstrap prevent line break

Design Type 2

this is an example of design type 2

Cara menggunakan bootstrap prevent line break

Design Type 3

this is an example of design type 3

Cara menggunakan bootstrap prevent line break

Design Type 4

this is an example of design type 4

Cara menggunakan bootstrap prevent line break

Design Type 5

this is an example of design type 5

Hasil dari source code di atas

Cara menggunakan bootstrap prevent line break

Membuat Testimoni

index.html



    

Testimonials

Cara menggunakan bootstrap prevent line break


"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda eveniet mollitia debitis, ducimus voluptatibus cum dignissimos natus iusto tempora fugit."

- Nobita -

Cara menggunakan bootstrap prevent line break


"Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo rem illo obcaecati nisi laudantium. Illum, aut repellat unde hic porro maxime molestiae doloremque dolorum iure?"

- Shizuka -

Cara menggunakan bootstrap prevent line break


"Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi ipsum mollitia corrupti pariatur eligendi suscipit labore! Libero perspiciatis numquam amet cum nulla."

- Ogiwara Sayu -

Previous Next

Hasil dari source code di atas

Cara menggunakan bootstrap prevent line break

Membuat Contact

index.html



    

Contact Us to Order

Let's talk

To request a design or want to meet up for coffee. contact us directly or fill out the form and we will get back to you promtly.

Kirim

Cara menggunakan bootstrap prevent line break



Jl. Lorem ipsum No.123, dolor sit., Kec. consectetur,
pariatur city, eligendi 56789



Hasil dari source code di atas

Cara menggunakan bootstrap prevent line break

Membuat Footer

index.html



    

      

Created By Muhammad Farid Majdi

powered by gamelab.id

Hasil dari source code di atas

Cara menggunakan bootstrap prevent line break

Membuat style.css

::-webkit-scrollbar {

  display: none;

}

.selector-for-some-widget {

  box-sizing: content-box;

}

body {

  background-color: whitesmoke;

  padding: 0px;

  margin: 0px;

  width: 100%;

  height: 100%;

}

.jumbotron {

  padding-top: 6rem;

}

#about {

  background-color: #baffc0;

}

#design {

  background-color: #7cec87;

}

.card {

  position: relative;

  overflow: hidden;

}

.img-title {

  position: absolute;

  width: 100%;

  height: 100%;

  background-color: rgba(5, 5, 5, 0.7);

  top: 300px;

  transition: all 0.5s ease-in;

}

.img-title p,

h3 {

  line-height: 20px;

  position: relative;

  top: 130px;

  text-shadow: rgba(5, 5, 5, 0.5);

}

.card:hover .img-title {

  top: 0;

  transition: all 0.5s ease-out;

}

.card img {

  transform: scale(1);

  transition: all 0.3s ease-out;

}

.card:hover img {

  transform: scale(1.1);

  transition: all 0.3s ease-in;

}

#testimoni {

  background-color: #baffc0;

}

#contact {

  background-color: whitesmoke;

}

section {

  padding-top: 5rem;

}

Demikian tutorial dari saya tentang membuat landing page sederhana dengan menggunakan HTML, CSS, dan Bootstrap. Buat kamu yang ingin belajar pembuatan website dari 0, saya sarankan untuk ambil learning path frontend web developer dari Gamelab. Materinya disusun dengan runtut dan mudah dipahami bahkan oleh pemula. Yuk cobain!

Artikel ini merupakan kontribusi dari peserta program magang Gamelab Indonesia. Isi dari artikel ini tidak mewakili pandangan tim Gamelab.