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.
Maje Graphics
- Home
- About Us
- Design
- Testimonials
- Contact
Berikut hasil dari source code di atas
Kirim
gamelab.id
Hasil dari source code di atas
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.