landing page bootstrap

Landing Page Dengan Bootstrap #02 : Tahap Ngoding

Taufiksi – Kali ini kita akan mencoba membuat landing page menggunakan bootstrap. Landing page yang sederhana saja dulu, nanti kedepannya akan ditambah dengan berbagai fitur.

Kemarin kita sudah mengetahui persiapan yang harus dilakukan. Jadi saya akan menganggap kamu sudah menginstall berbagai macam keperluannya.

Kalau pusing tidak usah dilanjutkan wkwk. Tapi ini landing page yang akan kita buat sebenarnya sangat simpel, tapi sebisa mungkin terlihat estetik aja wkwk.

Tapi kita belum akan memasukan berbagai elemen seperti navigation dan lain lain. Itu akan kita buat di artikel selanjutnya.

Emm, biar ada pembahasan aja sih sebenarnya hehe. Suka ngga suka silahkan ikuti aja alurnya meskipun rada lambat.

Mulai Online-kan Projectmu

Udah ngodingnya capek, tapi masih di localhost ? tenang, yang kamu perlukan hanya uploud project ke hosting agar bisa diakses orang lain. Beli hosting sekarang dan dapatkan domain gratis.

Beli Hosting

Isi Artikel

Cara Membuat Landing Page Menggunakan Bootstrap

Baiklah kita akan memulai caranya membuat landing page menggunakan bootstrap. Pertama tama, saya ingin kamu membuat sebuah folder diberi nama “terserah kamu”.

Kemudian didalam folder tersebut buatlah sebuah file index.html dan style.css ditambah dengan folder img. Seperti pada gambar berikut ini.

landing page bootstrap

Ahh, gambar tersebut diambil dari timeline visual studio code. Bang, kenapa visual studio punyamu ada icon icon begitu ?. Itu icon karena saya menggunakan extension dari visual studio code yaitu Material Icon Theme.

Setelah kamu membuat semua file dan folder tersebut, kita akan mecoba test dengan menggunakan live server seperti yang sudah kita siapkan di artikel landing page sebelumnya karena tidak akan menggnakan XAMPP.

Caranya sangat mudah, kamu hanya tinggal klik kanan di vsc tepatnya didalam file index.html. Atau kamu bisa menggunakan shotcut Alt+L Alt+O.

Setelah kamu mengklik pilihan tersebut, maka otomatis akan membuka browser dan menampilkan port sebagai pengganti localhost. Port ini identik dengan programmer, dan biasanya dijadikan jokes http://127.0.0.1/ .

Tentunya halaman tersebut masih menampilkan warna putih kosong, karena kita belum otak atik file html dan sebagainya. Kelebihan live server sudah saya ceritakan ya kemarin ? yaitu ketika kita klik save file, maka browser akan otomatis merubah tampilannya tanpa perlu kita refresh page.

Install Bootstrap

Hal yang pertama kali harus dilakukan adalah menginstal bootstrap kedalam project kita. Caranya kamu hanya tinggal mengunjungi website bootstrap. Disitu terdapat berbagai cara untuk install bootstrap.

Kamu bisa menggunakan npm atau cdn. Jika menggunakan npm maka kamu perlu menginstal node js terlebih dahulu supaya bisa menggunakannya.

npm install bootstrap@5.2.0

Kode diatas kamu akan menginstall bootstrap versi 5.2.0 kamu bebas menggunakan versi yang mana, tapi untuk artikel kali ini, kita akan menggunakan 5.2.0 aja.

Seperti yang sudah saya katakan kalau install bootstrap ada dua cara. Dan selain npm kita bisa menggunakan cdn yaitu dengan memasukan code dibawah ini ke project kita.

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

dan

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

Untuk CSS kamu bisa memasukannya kedalam tag head html sedangkan javascript kamu bisa memasukannya sebelum tag penutup body.

Kemudian kamu akan membutuhkan icon pendukung nantinya. Kita akan menggunakan bootstrap icon juga untuk caranya kamu hanya tinggal mencari icon disini.

Kita akan menggunakan cdn saja supaya lebih meringkas codingannya, dan tidak kebanyakan file.

HTML

Oke daripada kelamaan, lagipula codenya sangat banyak ini. Berikut adalah landing page bootstrap yang kamu nantikan. Selamat menikmati.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page Bootstrap</title>
    <link rel="icon" type="image/x-icon" href="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo-shadow.png">
    <link rel="stylesheet" href="style.css">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
</head>
<body>
    <section class="masterhead vh-100 vw-100 text-center pt-5 pb-5">
        <div class="container">
            <div class="row align-items-center text-start">
                <div class="col-lg-6">
                    <h1>LANDING PAGE <br><span>BOOTSTRAP</span></h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus non nulla ut pulvinar.</p>
                    <hr>
                    <div class="row text-center justify-content-center row-cols-auto" style="row-gap: 20px;">
                        <div class="col">
                            <a href="#"><i class="bi bi-whatsapp"></i></a>
                        </div>
                        <div class="col">
                            <a href="#"><i class="bi bi-facebook"></i></a>
                        </div>
                        <div class="col">
                            <a href="#"><i class="bi bi-twitter"></i></a>
                        </div>
                        <div class="col">
                            <a href="#"><i class="bi bi-linkedin"></i></a>
                        </div>
                        <div class="col">
                            <a href="#"><i class="bi bi-pinterest"></i></a>
                        </div>
                        <div class="col">
                            <a href="#"><i class="bi bi-github"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="mw-100 img-holder m-auto" style="height:fit-content">
                        <svg viewBox="0 0 640 591" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <path d="M559.263 103.764C568.272 108.879 573.868 118.413 573.943 128.774L574.637 225.19C574.711 235.55 569.253 245.163 560.318 250.408L477.166 299.217C468.231 304.461 457.176 304.541 448.166 299.425L364.321 251.818C355.311 246.702 349.715 237.169 349.641 226.808L348.947 130.392C348.872 120.032 354.331 110.418 363.266 105.174L446.418 56.365C455.353 51.1202 466.407 51.0407 475.417 56.1564L559.263 103.764Z" stroke="white" stroke-width="6"/>
                            <path d="M209.158 407.94C212.265 409.704 214.194 412.991 214.22 416.564L214.828 501.014C214.853 504.587 212.971 507.902 209.89 509.71L137.058 552.461C133.977 554.27 130.165 554.297 127.058 552.533L53.6182 510.834C50.5114 509.07 48.5817 505.783 48.556 502.21L47.9485 417.76C47.9228 414.187 49.8049 410.873 52.886 409.064L125.718 366.313C128.799 364.504 132.611 364.477 135.718 366.241L209.158 407.94Z" stroke="white" stroke-width="6"/>
                            <path d="M279.004 80.815C289.524 74.7414 302.484 74.7414 313.004 80.815L481.654 178.185C492.173 184.259 498.654 195.483 498.654 207.63V402.37C498.654 414.517 492.174 425.741 481.654 431.815L313.004 529.185C302.484 535.259 289.524 535.259 279.004 529.185L110.354 431.815C99.8343 425.741 93.354 414.517 93.354 402.37V207.63C93.354 195.483 99.8343 184.259 110.354 178.185L279.004 80.815Z" fill="#EFEFEF" stroke="#FF9900" stroke-width="17"/>
                            <g filter="url(#filter0_i_1451_11)">
                            <path d="M279.004 102.838C289.523 96.7649 302.484 96.7649 313.004 102.838L462.581 189.197C473.1 195.27 479.581 206.495 479.581 218.642V391.358C479.581 403.505 473.1 414.73 462.581 420.803L313.004 507.161C302.484 513.235 289.523 513.235 279.004 507.161L129.427 420.803C118.907 414.73 112.427 403.505 112.427 391.358V218.642C112.427 206.495 118.907 195.27 129.427 189.197L279.004 102.838Z" fill="url(#pattern0)"/>
                            </g>
                            <g filter="url(#filter1_d_1451_11)">
                            <path d="M242.137 99.3464C248.04 102.698 251.706 108.944 251.755 115.732L252.054 157.292C252.103 164.08 248.527 170.378 242.673 173.814L206.83 194.853C200.976 198.289 193.734 198.341 187.831 194.99L151.69 174.469C145.787 171.117 142.12 164.871 142.072 158.083L141.773 116.523C141.724 109.735 145.3 103.437 151.154 100.001L186.996 78.9622C192.85 75.526 200.093 75.4739 205.996 78.8256L242.137 99.3464Z" fill="url(#paint0_linear_1451_11)"/>
                            </g>
                            <path d="M229.323 112.003C232.43 113.767 234.359 117.054 234.385 120.627L234.609 151.813C234.635 155.385 232.753 158.7 229.672 160.509L202.776 176.296C199.695 178.105 195.883 178.132 192.776 176.368L165.657 160.969C162.55 159.205 160.62 155.918 160.594 152.345L160.37 121.16C160.344 117.587 162.227 114.272 165.308 112.464L192.203 96.6763C195.284 94.8678 199.096 94.8404 202.203 96.6044L229.323 112.003Z" stroke="white"/>
                            <g filter="url(#filter2_d_1451_11)">
                            <path d="M526.731 386.209C531.081 388.679 533.782 393.282 533.818 398.283L534.062 432.209C534.098 437.211 531.463 441.852 527.15 444.384L497.891 461.558C493.577 464.09 488.241 464.129 483.891 461.659L454.388 444.907C450.039 442.438 447.337 437.835 447.301 432.834L447.057 398.907C447.021 393.906 449.656 389.265 453.97 386.733L483.229 369.558C487.542 367.026 492.879 366.988 497.228 369.458L526.731 386.209Z" fill="white"/>
                            </g>
                            <defs>
                            <filter id="filter0_i_1451_11" x="112.426" y="98.2832" width="367.156" height="413.434" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                            <feOffset/>
                            <feGaussianBlur stdDeviation="11"/>
                            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
                            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
                            <feBlend mode="normal" in2="shape" result="effect1_innerShadow_1451_11"/>
                            </filter>
                            <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
                            <use xlink:href="#image0_1451_11" transform="scale(0.015625)"/>
                            </pattern>
                            <filter id="filter1_d_1451_11" x="129.773" y="64.3477" width="134.281" height="145.119" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                            <feOffset/>
                            <feGaussianBlur stdDeviation="6"/>
                            <feComposite in2="hardAlpha" operator="out"/>
                            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1451_11"/>
                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1451_11" result="shape"/>
                            </filter>
                            <filter id="filter2_d_1451_11" x="439.059" y="359.632" width="103.004" height="111.853" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                            <feOffset/>
                            <feGaussianBlur stdDeviation="4"/>
                            <feComposite in2="hardAlpha" operator="out"/>
                            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1451_11"/>
                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1451_11" result="shape"/>
                            </filter>
                            <linearGradient id="paint0_linear_1451_11" x1="256.833" y1="167.724" x2="135.261" y2="97.3987" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#014CDF"/>
                            <stop offset="1" stop-color="#0038A6"/>
                            </linearGradient>
                            <image id="image0_1451_11" width="64" height="64" xlink:href="https://cdn.pixabay.com/photo/2016/06/06/17/05/woman-1439909_960_720.jpg"/>
                            </defs>
                        </svg>
                    </div>            
                </div>
            </div>
        </div>
    </section>
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>

CSS

Kemudian untuk CSSnya jangan ketinggalan.

a{
    text-decoration: none !important;
}
.masterhead{
    background-image: url('img/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    background-color: #F8F8F8;
}
.img-holder{
    width: 640px;
    height: 591px;
}

Gambar Background

Kemudian untuk background kamu bisa download gambarnya disini. Dan masukan kedalam folder img yang sudah kita buat tadi.

Penutup

Oke kita cukupkan seperti itu dulu. Kamu bisa coba sendiri, jika ada yang error bisa komen aja dah. Sapa tau nanti di benerin hehe.

Baiklah, sampai jumpa di artikel berikutnya babay.




Terima kasih sudah membaca artikelnya, tetap semangat jalani harimu meskipun dunia bertolak belakang dengan keinginanmu. Dan jangan lupa ngopi supaya sadar pahitnya dunia tidak semanis mimpi. Ahay

Tertanda Sayang


Taufik Nurhidayah
Traktir Kopi

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.