Pada latihan sebelumnya, kita sudah menerapkan font yang didapatkan dari Google Font dengan properti font-family dan mengubah warna font dengan menggunakan properti color. Nah setelah mempelajari komponen box seperti padding, border, dan margin saatnya kita terapkan pada proyek yang sudah kita buat sebelumnya. Mulai dari menetapkan ukuran gambar, membuat efek gaya kartu, dan membuat jumbotron.
Hingga pada akhir latihan ini kita dapat mempercantik tampilan website profil tampak seperti ini:
Sudah siap? Silakan buka kembali proyeknya dengan text editor yang Anda miliki.
Daftar Isi
Menetapkan ukuran pada gambar
Sekarang saatnya kita mulai terapkan apa yang baru kita pelajari. Langkah pertama mari kita ubah dimensi dari gambar yang kita tampilkan. Pada berkas style.css, buat rule baru untuk selector .featured-images dengan properti dan nilai sebagai berikut:
.featured-image {
width: 100%;
max-height: 300px;
}
Kemudian terapkan rule tersebut pada seluruh elemen gambar kecuali gambar logo kota Bandung yang terdapat di dalam elemen <aside>. Untuk menerapkannya kita tuliskan class atribut dengan nilai featured-image.
<img src="assets/image/history.jpg" class="featured-image" alt="sejarah"> ... <img src="assets/image/geografis.jpg" class="featured-image" alt="geografis"> ... <img src="assets/image/farm-house.jpg" class="featured-image" alt="farm house"> ... <img src="assets/image/bosscha.jpg" class="featured-image" alt="bosscha">
Setelah menerapkannya maka tampilan gambar akan menjadi seperti ini:
Gambar yang ditampilkan jadi memenuhi lebar jendela browser. Namun karena kita menetapkan juga properti max-height, gambar yang ditampilkan menjadi tidak proporsional. Solusinya kita tambahkan properti object-fit: cover; dan object-position: center; pada .featured-image selector.
.featured-image {
width: 100%;
max-height: 300px;
object-fit: cover;
object-position: center;
}
Kedua properti tersebut membuat gambar yang ditampilkan dapat menyesuaikan lebar dan panjang dengan mempertahankan kualitas rasio aslinya. Tetapi untuk menyesuaikannya terdapat area gambar yang terpotong atau tidak ditampilkan, tetapi tampilan gambar akan tetap proporsional.
Selanjutnya kita atur juga ukuran gambar logo kota Bandung pada elemen <aside>. Agar logo tampak tidak terlalu besar kita atur properti width dengan nilai 200px. Silakan buat rules baru dengan selector .profile img, kemudian tuliskan properti width dengan nilainya.
.profile img {
width: 200px;
}
Sehingga sekarang logo akan nampak lebih kecil.
Menerapkan card style pada elemen <article>
Selanjutnya kita atur tampilan pada tiap elemen <article>, buat elemen tersebut bergaya card effect dengan menerapkan properti box-shadow dan border-radius sehingga hasilnya akan tampak seperti ini:
Pertama kita buat rule baru dengan selector .card, kemudian terapkan properti dan nilainya sebagai berikut:
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
Selanjutnya terapkan rule tersebut pada seluruh elemen <article> yang ada. Untuk menerapkannya, tambahkan atribut class dengan nilai card.
<article id="sejarah" class="card">
...
<article id="geografis" class="card">
...
<article id="wisata" class="card">
...
<aside>
<article class="profile card">
....
Sekarang tiap sisi elemen <article> akan tampak dikelilingi oleh drop shadow dan memiliki ujung yang bulat pada tiap sisinya.
Jika dirasa drop shadow tak terlalu jelas, kita bisa mengubah nilainya. Agar mudah dalam menentukan nilai drop shadow yang kita inginkan, kita bisa gunakan tools yang tersedia secara online pada tautan berikut: https://www.cssmatic.com/box-shadow.
Selanjutnya kita perbaiki tepian konten pada card karena tampak terlalu sempit dari sisi cardnya. Alhasil, konten agak sulit dibaca. Kita bisa mengaturnya dengan properti margin dan padding. Silakan tambahkan properti dan nilai berikut pada rule .card:
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
padding: 20px;
margin-top: 20px;
}
Sekarang konten di dalam card lebih proporsional dan mudah dibaca, bukan?
Selanjutnya kita akan mengatur header dengan membuat efek jumbotron dan memperbaiki tampilan navigasi menjadi nampak seperti ini:
Sebagai langkah awal, yuk kita buat rule baru dengan selector .jumbotron lalu terapkan properti dan nilainya seperti ini:
.jumbotron {
padding: 60px;
background-color: #00c8eb;
text-align: center;
font-size: 20px;
color: white;
}
Lalu pada berkas HTML, letakkan elemen <h1> dan <p> yang terdapat pada <header> dengan menggunakan <div> yang diberikan atribut class jumbotron. Sehingga struktur HTML pada elemen <header> tampak seperti ini:
<header>
<div class="jumbotron">
<h1>Bandung</h1>
<p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.</p>
</div>
<nav>
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
</nav>
</header>
Sehingga sekarang header akan nampak dengan efek jumbotron.
Lanjut, kita akan memperbaiki tampilan navigasi agar terlihat cocok dengan header yang ditampilkan. Seperti biasa, buatlah rule baru dengan selector nav li. Selector tersebut akan mengatur elemen <li> yang menjadi turunan dari elemen <nav>, berikan properti dan nilai berikut pada selector tersebut:
nav li {
display: inline;
list-style-type: none;
margin-right: 20px;
}
Nilai inline pada properti display akan membuat elemen <li> menerapkan sifat inline, sehingga elemen akan ditampilkan tanpa membuat baris baru. Dan properti list-style-type dengan nilai none akan menghilangkan tanda titik yang dihasilkan tiap item pada list. Dengan begitu navigasi akan nampak seperti ini:
Selanjutnya beri background-color dan ubah warna teks pada navigasi agar nampak sesuai dengan header. Tuliskan rule baru dengan selector nav kemudian atur background-color dan padding dengan nilai berikut:
nav {
background-color: #00a2c6;
padding: 5px;
}
Kemudian untuk mengatur warna teks pada navigasi, kita tambahkan properti color pada selector nav a yang sudah kita buat pada latihan sebelumnya.
nav a {
font-size: 18px;
font-weight: 400;
text-decoration: none;
color: white;
}
Dengan begitu navigasi akan terlihat sesuai dengan header yang ditampilkan.
Pada langkah ini, website yang kita bangun sudah mulai tampak menarik bukan?
Menyesuaikan Padding dan Margin pada body dan elemen <main>
Terakhir kita akan menyesuaikan margin dan padding yang ditampilkan pada body dan elemen <main>. Sehingga akan tampak seperti ini:
Pertama kita hilangkan nilai margin dan padding standar browser dengan menuliskan properti margin dan padding yang diberi nilai 0 pada body selector.
body {
font-family: 'Quicksand', sans-serif;
margin: 0;
padding: 0;
}
Dengan begitu layout yang ditampilkan akan memenuhi seluruh lebar dan tinggi dari jendela browser.
Tetapi konten yang terdapat di dalam elemen <main> perlu sedikit jarak agar konten yang ditampilkan sedikit nyaman untuk dilihat. Kita dapat atur jarak tersebut dengan menambahkan padding pada selector main. Silakan tuliskan rule baru dengan selector main dan beri nilai 20px pada properti padding.
main {
padding: 20px;
}
Nah sekarang website pun jadi lebih nyaman dilihat.
Pada latihan selanjutnya kita akan memindahkan elemen aside sehingga berada di samping elemen content. Untuk melakukannya kita harus mengenal dulu apa itu positioning dan floating. Sampai jumpa di materi selanjutnya ya!