Menambahkan jumbotron

Menambahkan Jumbotron

Kita akan menambahkan banner besar atau biasa disebut jumbotron, diantara header dan content. Tambahkan kode HTML berikut antara elemen .header dan .content:

<div class="jumbotron"> <h2>Welcome to My Homepage</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor necessitatibus quae voluptate explicabo architecto fugiat asperiores illo quibusdam qui mollitia, porro fugit. Illum sapiente modi, ut harum aliquam accusamus unde.</p> </div>

Kemudian pada bagian style, tambahkan CSS berikut:

.jumbotron { width: 100%; padding: 80px 40px; box-sizing: border-box; text-align: center; color: white; background-color: #aaa; }

Hasil dari kode di atas akan tampil seperti ini:

Kita sekarang akan mengganti latar warnanya menggunakan gambar. Kamu bisa mengambil gambar yang gratis di internet, salahsatunya dapat kamu unduh dari website [https://unsplash.com].Websitetersebut menyediakan gambar-gambar berkualitas bagus dan gratis.

Pada tutorial ini saya akan menggunakan gambar dari web Unsplash dengan url ini: [https://images.unsplash.com/photo-1515111293107-b0cd6448f5f6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e4f56141064dbe63db663bb7a2c73b71&auto=format&fit=crop&w=1350&q=80]

Saya akan menggunakan langsung url tersebut pada CSS. Kamu dapat mengunduhnya terlebih dahulu dan menyimpannya di dalam folder project, atau langsung menggunakan url tersebut. Bila Kamu langsung menggunakan url tersebut, gambar tersebut nantinya hanya akan tampil bila terkoneksi dengan internet.

Tambahkan CSS berikut di bagian selector .jumbotron:

.jumbotron { background-color: #aaa; background-image: url(https://images.unsplash.com/photo-1515111293107-b0cd6448f5f6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e4f56141064dbe63db663bb7a2c73b71&auto=format&fit=crop&w=1350&q=80); background-size: cover; }

Kita menambahkan dua buat property, yakni background-image dan background-cover. Hasil dari tambahan property tersebut akan tampil seperti ini:

Property background-size:cover akan membuat gambar latar ditampilkan hingga tidak ada area yang tidak tertutup gambar latar.

Namun kombinasi warna teks dan gambar latar seperti hasil di atas kurang bagus, karena ada area gambar yang warnanya sama dengan teks, sehingga teks tidak terbaca dengan jelas. Untuk mengakali ini ada dua strategi. Pertama kita dapat edit dahulu gambar latarnya di aplikasi image editor dengan menambahkan layer transparan gelap sehingga warna gambarnya menjadi lebih gelap. Solusi kedua adalah dengan menambahkan layer transparan di HTML. Kita akan mencoba solusi kedua.

Tambahkan elemen .overlaypada bagian jumbotron seperti ini:

<div class="jumbotron"> <div class="overlay"></div> <h2>Welcome to My Homepage</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor necessitatibus quae voluptate explicabo architecto fugiat asperiores illo quibusdam qui mollitia, porro fugit. Illum sapiente modi, ut harum aliquam accusamus unde.</p> </div>

Pada kode di atas kita menambahkan satu elemen <div>dengan nama class overlay. Elemen ini tidak memiliki konten. Kita akan menggunakannya untuk membuat semacam lapisan warna gelap yang agak transparan, dan kita posisikan di atas .jumbotron. Tambahkan CSS berikut:

.jumbotron { background-size: cover; position: relative; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.4; }

Pertama-tama kita buat supaya position .jumbotron menjadi relative. Baru kita set position .overlay menjadi absolute. Kita set .overlay dengan warna latar hitam dan transparansi atau opacity 0.4. Kita juga set width dan heightnya menjadi 100% dari ukuran jumbotronnya. Hasilnya akan jadi seperti ini:

Jumbotronnya sekarang nampak lebih gelap dari sebelumnya, karena tertutup oleh overlay. Kamu dapat mengganti nilai property opacity agar lapisan gelapnya lebih tebal atau tipis. Nilai opacity berkisar antara 0 dan 1.

Namun jika kita perhatikan, teks di dalam jumbotron juga tertutup overlay. Kita ingin agar teks tersebut ada di atas overlay, sehingga lebih mudah dibaca. Tambahkan CSS berikut:

.jumbotron h2, .jumbotron p { position: relative; }

Dengan CSS di atas, elemen h2 dan p di dalam jumbotron akan naik ke layer di atas .overlay.

Terakhir, kita akan ganti font dari teks di jumbotron dengan jenis font lain yang lebih indah. Kamu dapat membuka website [ https://fonts.google.com] dan memilih font mana yang akan digunakan. Pada tutorial ini kita akan menggunakan font dengan nama Raleway.

Klik ikon (+) di bagian kanan atas font yang ingin dipilih:

Maka akan muncul panel di bagian bawah jendela. Klik panel tesebut sehingga muncul keterangan kode yang harus kita salin di dokumen html kita:

Pertama salin kode <link href=”... >dan simpan di bagian atas <head>sebelum <style> :

<!DOCTYPE html> <html> <head> <title>My Webpage</title> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <style type="text/css">

Kemudian kita dapat menambahkan kode font-family: 'Raleway', sans-serif;pada elemen yang ingin kita ganti fontnya. Misalnya saya akan pasang font tersebut pada .jumbotron:

.jumbotron { font-family: 'Raleway', sans-serif; width: 100%; padding: 80px 40px; box-sizing: border-box; text-align: center; color: white; }

Maka tampilannya sekarang, semua konten teks di dalam jumbotron akan menggunakan font Raleyway.