Pembukaan Video Yang Menarik

STEP 5: Menggunakan google font

Jika dilihat dari CSS yang kita buat pada step 4 terdapat "font-family" dibeberapa CSS selector namun jika kita jalankan file index.html, font tersebut belum diterapkan. Hal ini karena kita belum melakukan import Google Font ke dalam projek kita. Ada dua font yang kita gunakan pada projek ini yaitu Poppins, Abhaya Libre dan Pacifico.

Untuk menggunakan Google Font, dapat kita import font tersebut ke dalam projek kita. Ada dua cara melakukan import font kedalam sebuah projek,

1. Melakukan import ke dalam file style.css

Setelah memilih font yang diinginkan, copy dan paste nilai @import pada bagian paling atas style.css,

2. Melakukan import ke dalam file index.html

Setelah memilih font yang diinginkan, copy dan paste tag pada bagian

index.html diatas tag style.css,

Nah selesai sudah cara membuat header dengan video background dengan hasil seperti ini:

Untuk kode lengkapnya dapat dilihat disini ya,

Bagaimana? mudah bukan!

Yuk kreasikan dengan kreativitasmu untuk membuat header yang lebih menarik lagi! Kalau kalian butuh membuat header dengan cepat dan menarik, langsung aja cek di Elements BuildWith Angga ya! Ada banyak component lain yang bisa kalian gunakan juga loh.

STEP 2: Menambahkan video sebagai background

Pada file HTML, kita dapat membuat tag

di dalam untuk setiap section yang nantinya akan dibuat. Pada header kali ini akan ada tiga section yaitu video, navigation bar dan hero. Pada step dua ini, kita akan membuat
untuk video background terlebih dahulu. Didalam
tersebut akan kita tambahkan tag