Pertemuan 9
Cover
Melanjutkan pembelajaran tentang teknologi web dan pengembangan website.
Gallery
About Section Structure
📸 About Section Structure
<section class="about">
<img src="images/me.jpg" alt="Me" class="profile-pic">
<h2>About Me</h2>
<p>Bio...</p>
</section>
<img src="images/me.jpg" alt="Me" class="profile-pic">
<h2>About Me</h2>
<p>Bio...</p>
</section>
Struktur: Photo (profile) + Title + Bio paragraf
Styling About
🎨 Styling About Section
.about
{
padding : 40px ;
text-align : center ;
}
.profile-pic {
width : 150px ;
height : 150px ;
border-radius : 50% ;
object-fit : cover ;
margin-bottom : 20px ;
}
padding : 40px ;
text-align : center ;
}
.profile-pic {
width : 150px ;
height : 150px ;
border-radius : 50% ;
object-fit : cover ;
margin-bottom : 20px ;
}
💡
border-radius:50%
= perfect circle,
object-fit:cover
= crop photo nicely
Personal Touch
✨ Make It Personal!
💭 Ceritakan tentang yourself
"Nama saya... Saya suka drawing karena..."
"Nama saya... Saya suka drawing karena..."
🎨 Favorite art style
"Favorit saya adalah digital art / watercolor / illustration"
"Favorit saya adalah digital art / watercolor / illustration"
📖 Write 3-5 sentences
Bio jangan terlalu panjang, tapi cukup untuk introduce yourself
Bio jangan terlalu panjang, tapi cukup untuk introduce yourself
❤️ Show your passion!
Let personality shine through → memorable gallery
Let personality shine through → memorable gallery
Activity
🎯 Your Activity
-
Write personal bio
3-5 sentences about yourself, passion, favorite art style -
Prepare your photo
Choose nice profile photo → save to project folder -
Add About section
Add HTML markup untuk about section -
Style beautifully
Profile photo circular, text centered, good spacing -
Make it responsive!
Add media query untuk mobile → adjust layout