Persiapan Membuat Navbar Pada Web Company Profile Dengan Bootstrap 5 Di Visual Studio Code #1

admin — Mon, 17 Jan 2022 12:14:33 +0000

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 :



  
    
    
    

    
    

    Hello, world!
  
  
    Hello, world!

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

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 :

Edit titlenya menjadi

Rumah Idaman - Moro Adver

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 :

Selanjutnya kita akan membuat sebuah navbar, dengan cara masuk ke bootstrap https://getbootstrap.com/docs/5.1/components/navbar/ lalu paste kedalam index.html

Selanjutnya kita akan menambahkan logo pada samping judul, tambahkan code img berikut :

          
             MORO ADVER

Untuk membuat navbar bisa berada pada posisi center, maka tinggal dihapus saja fluid nya pada container seperti berikut

Untuk membuat menunya berada ditengah kita cukup menambahkan class pada ul seperti berikut :

Agar menu pada navbar bisa rapi tambahkan margin pada sumbu x sebesar 2, seperti code berikut :

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


             MORO ADVER

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 :

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 :

Membuat Navbar – Citra Air Nusantara (CAN)

Persiapan Membuat Navbar Pada Web Company Profile Dengan Bootstrap 5 Di Visual Studio Code #1

Hello, world!