Untuk membuat Web Company Profile dengan bootstrap pertama kita harus membuat struktur folder untuk menyimpan file nya. Pertama silahkan buat folder companyprofile, kemudian buka foldernya dengan Visual Studio Code. Setelah terbuka silahkan buat file baru dengan nama index.html
Setelah jadi file index.html silahkan copy starter template dari bootstrap 5 disini https://getbootstrap.com/docs/5.1/getting-started/introduction/ setelah itu paste pada index.html seperti berikut :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
Setelah itu kita setting terlebih dahulu jenis font yang akan kita pakai sesuai dengan desain sudah di buat Fitur Rumah, Kontak dan Footer Pada Web Company Profile dengan Figma #6, degan cara buka https://fonts.google.com/?query=noto+sans setelah itu pilih font apa yang mau dipakai, seperti berikut :
Selanjutnya copy link nya lalu paste pada file index.html
<!-- Font Google -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
Selanjutnya, buat folder css pada vsCode nya, lalu buat file style.css seperti berikut :
font-family: 'Noto Sans', sans-serif;
Lalu koneksikan file style.css dengan index.html dengan cara :
<!-- My Style --> <link rel="stylesheet" href="css/style.css">
Edit titlenya menjadi
<title>Rumah Idaman - Moro Adver</title>
Setelah itu ubah iconnya dengan cara import logo yang ada pada figma, klik icon logo pada figma lalu klik Export
Setelah itu buat folder asset, lalu simpan image hasil export ke dalamnya. asset/img/icon.png
Setelah itu buat code seperti dibawah ini :
<!-- Icon Logo --> <link rel="icon" href="asset/img/icon.png" type="image/x-icon">
Selanjutnya kita akan membuat sebuah navbar, dengan cara masuk ke bootstrap https://getbootstrap.com/docs/5.1/components/navbar/ lalu paste kedalam index.html
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MORO ADVER</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LAYANAN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FITUR</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">KONTAK</a>
</li>
</ul>
<div>
<button class="button-primary">DAFTAR</button>
<button class="button-secundary">DAFTAR</button>
</div>
</div>
</div>
</nav>
Selanjutnya kita akan menambahkan logo pada samping judul, tambahkan code img berikut :
<a class="navbar-brand" href="#">
<img src="asset/img/icon.png" alt="" width="30" class="d-inline-block align-text-top"> MORO ADVER</a>
Untuk membuat navbar bisa berada pada posisi center, maka tinggal dihapus saja fluid nya pada container seperti berikut
<div class="container">
Untuk membuat menunya berada ditengah kita cukup menambahkan class pada ul seperti berikut :
<ul class="navbar-nav mx-auto">
Agar menu pada navbar bisa rapi tambahkan margin pada sumbu x sebesar 2, seperti code berikut :
<ul class="navbar-nav mx-auto">
<li class="nav-item mx-2">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="#">LAYANAN</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="#">FITUR</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="#">KONTAK</a>
</li>
</ul>
Selanjutnya tambahkan bold pada judul navbar, dengan cara menambahkan css navbar-brand menjadi seperti ini :
.navbar-brand {
font-weight: bold;
}
Pada bagian navbarny agar supaya logo dan tulisannya berjaran mka kita tambahkan margin end sebesar 2
<a class="navbar-brand" href="#">
<img src="asset/img/icon.png" alt="" width="30" class="d-inline-block align-text-top me-2"> MORO ADVER</a>
Setelah itu pada bagian link yang aktif kita tambahkan css sebagai berikut :
body {
font-family: "Noto Sans", sans-serif;
}
.navbar-brand {
font-weight: bold;
font-size: 20px;
}
.nav-link {
font-size: 16px;
}
.nav-link.active {
font-weight: bold;
}
Hasilnya akan seperti gambar berikut :
Setelah itu kita akan edit tombol yang ada pada sebelah kanan, pertama buat class button pada css
.button-promary {
width: 109px;
height: 34px;
background-color: #fff;
}
Kemudian kita akan membuat variable agar supaya konsisten font yang digunakan tanpa harus mengetikan code warnanya :
:root {
--pr-color: #025782;
}
body {
font-family: "Noto Sans", sans-serif;
}
.navbar-brand {
font-weight: bold;
font-size: 20px;
}
.nav-link {
font-size: 16px;
}
.nav-link.active {
font-weight: bold;
}
.button-primary {
width: 109px;
height: 34px;
background-color: #fff;
color: var(--pr-color);
border: none;
font-size: 16px;
font-weight: bold;
}
Setelah itu ubah backgroung navbar menjadi transparant, seperti berikut :
<nav class="navbar navbar-expand-lg navbar-light bg-transparant">
Setelah itu rapikan code css sesuai kebutuhan, atau bisa seperti dibawah ini :
:root {
--pr-color: #025782;
--sc-color: #000;
}
body {
font-family: "Noto Sans", sans-serif;
background-color: #F6FBFF;
}
.navbar-brand {
font-weight: bold;
font-size: 20px;
}
.nav-link {
font-size: 16px;
}
.nav-link.active {
font-weight: bold;
}
.button-primary {
width: 109px;
height: 34px;
background-color: transparent;
color: var(--sc-color);
border: none;
font-size: 16px;
}
.button-secondary {
width: 109px;
height: 34px;
background-color: #fff;
color: var(--pr-color);
border: none;
font-size: 16px;
font-weight: bold;
}
Sehingga hasil akhir dari navbar adalah sebagai berikut :
