Add Styling to About Section

Merapikan dan Menyempurnakan Tampilan About dengan CSS

Setelah Header dan Landing Page berhasil dirapikan, langkah selanjutnya dalam proses styling adalah About Section.
About section biasanya berisi penjelasan singkat perusahaan, nilai, dan statistik, sehingga tampilannya harus seimbang, rapi, dan mudah dibaca.

Pada tahap ini, kita fokus pada:

penyamaan lebar konten kiri & kanan
pengaturan layout kolom
perapian jarak
styling elemen statistik (kotak kuning)

Tujuan Styling About Section

Styling About bertujuan untuk:

Membuat konten terlihat seimbang secara visual
Menghindari kesan “berat sebelah”
Menampilkan statistik secara menonjol tapi rapi
Menjaga konsistensi desain dengan section sebelumnya

💡 Prinsip utama

About section bukan dekorasi, tapi penjelasan identitas.
Jadi harus bersih, terstruktur, dan nyaman dilihat.

1. Menandai About Section dengan ID

Langkah awal yang penting adalah memberi ID khusus, karena:

Section ini hanya satu
Styling-nya bersifat spesifik

<section id="about"> ... </section>

📌 Kenapa pakai id?

Lebih jelas secara struktur
Mudah dibaca
Styling lebih terarah

2. Menyeimbangkan Lebar Kiri & Kanan (50% – 50%)

Jika bagian kanan terlihat lebih besar dari kiri, kita bisa menyamakannya dengan lebar 50% – 50%.

#about { display: flex; } #about .left, #about .right { width: 50%; }

📌 Hasil:

Konten kiri & kanan imbang
Tampilan lebih profesional

3. Kenapa Penulisan CSS Disusun dari Atas ke Bawah?

Susunan seperti ini:

#about { } #about .left { } #about .right { }

dipilih karena:

lebih mudah dibaca
alur styling jelas
memudahkan pengembangan

💡 Best practice

CSS yang rapi = lebih mudah dikembangkan
CSS random = cepat bikin pusing

4. Mengatur Statistik Menjadi 3 Kolom

Pada About section, biasanya terdapat 3 statistik (misalnya experience, project, client).

Untuk itu, kita gunakan Grid atau Flex dengan pembagian 3 kolom.

.stats { display: grid; grid-template-columns: repeat(3, 1fr); }

📌 1fr 1fr 1fr artinya:

setiap kolom punya ukuran sama

5. Merapikan Posisi Teks Statistik

Agar isi statistik terlihat rapi:

.stats { text-align: center; }

📌 Ini membuat:

angka
judul
deskripsi

berada di posisi tengah dan lebih seimbang.

6. Menambahkan Jarak dari Atas (Margin Top)

Agar About section tidak terlalu menempel ke section sebelumnya:

#about { margin-top: 72px; }

📌 Margin ini membuat:

section “bernapas”
alur scroll lebih nyaman

7. Styling Kotak Statistik (Kotak Kuning)

Kotak statistik biasanya ditandai dengan:

background warna
padding
border radius

.stat-number { background-color: #facc15; /* kuning */ padding: 10px; border-radius: 6px; }

📌 Warna cerah membantu:

statistik lebih menonjol
mudah ditangkap mata

8. Memberi Class Item agar Lebih Tertata

Jika statistik masih terlihat berantakan, beri class pembungkus:

<div class="stats"> <div class="item"> <div class="stat-number">500+</div> <p>Projects</p> </div> </div>

.item { display: flex; flex-direction: column; align-items: center; }

📌 Ini memastikan:

angka di atas
teks di bawah
posisi konsisten

9. Mengatur Jarak Bawah Antar Elemen

Agar teks tidak terlalu menempel dengan kotak kuning:

.stat-number { margin-bottom: 16px; }

📌 Efeknya:

lebih rapi
visual lebih lega
mirip desain profesional

Hasil Akhir yang Diharapkan

Setelah styling dilakukan:

About section simetris
Statistik sejajar & rapi
Jarak antar elemen nyaman
Tampilan konsisten dengan header & landing

Tidak heboh, tapi terasa profesional.

Ringkasan Langkah Styling About

Tambahkan id="about"
Atur layout kiri–kanan 50%
Gunakan Grid untuk statistik 3 kolom
Pusatkan teks statistik
Tambahkan margin atas
Styling kotak statistik
Gunakan class item
Tambahkan jarak antar elemen

Penutup

Styling About Section adalah tahap penting untuk membangun kepercayaan visual pada website.
Section ini menjawab pertanyaan pengunjung:

“Siapa kamu, dan seberapa kredibel?”

Dengan CSS yang rapi:

pesan tersampaikan
tampilan bersih
website terasa profesional

Belajar CSS Bagian 13 : Add Styling to About