A. PENDAHULUAN
- Pengertian
Di hari ini saya melanjutkan template yang kemaren, saya menambahkan section lagi yaitu mengenai Hobi saya. di bagian ini nantinya modelnya saya akan menambahkan gambar sesuai dengan hobi saya, dan untuk tata letaknya saya buat sebaris.
- Latar belakang masalah
Di karenakan template yang berada di Part 1 masih sedikit kontennya, maka saya menambahkan lagi yaitu mengenai Hobi saya.
B. MAKSUD DAN TUJUAN
Maksud dari kegiatan ini adalah menambahkan konten template yang saya buat kemaren dengan menambahkan konten Hobi Saya dan tujuan dari kegiatan ini adalah agar nantinya saya dapat mengerti bagaimana untuk membuat website dengan baik.
C. BATASAN DAN RUANG LINGKUP PEKERJAAN
- Menambahkan konten lagi kedalam template kemaren
- Membuat template menggunakan text editor
D. TARGET DAN HASIL YANG DIHARAPKAN
Agar konten template yang saya buat pada part 1 bisa tambah rame lagi.
E. METODE PELAKSANAAN
- Menambahkan konten dengan menggunakan komponen bahasa HTML & CSS
F. ALAT DAN BAHAN
- Laptop
- Text Editor
- Koneksi internet
G. TARGET WAKTU
08.00 - 16.00
H. TAHAPAN PELAKSANAAN
- Pertama saya menambahkan section lagi di bawah pengalaman programming.
- Saya menambahkan garis pada navigasinya pada css dengan menggunakan z-index dan border-bottom.
- Setelah saya menambahkan garis pada navigasinya saya lanjut menambahkan konten lagi yaitu mengenai Hobi Saya pada bagian Bawahnya.
Ini codingan HTML nya yang saya tambahkan mengenai Hobi Saya :
<!--Bagian Hobi--><section id="hobi"><div class="tengah"><div class="kolom"><h2 class="hobiku">Hobi Saya</h2><p>Kegiatan yang saya senangi di luar dunia maya adalah :</p></div><div class="tutorial-list"><div class="kotak-list"><img src="https://img.freepik.com/free-vector/young-man-sitting-armchair-reading-book_74855-6151.jpg?t=st=1658642982~exp=1658643582~hmac=185ce54c079ad8890cb7d932a46c012e68b7ed1b8d4af0db76bc16cba23f85f3&w=740"><p>Membaca Buku</p></div><div class="kotak-list"><img src="https://img.freepik.com/free-vector/flat-football-players-collection_52683-65665.jpg?t=st=1658642996~exp=1658643596~hmac=9de0a58129e7a6808607281df5423ac6a1add3d55c2fcf8b2d816b21d81eb68f&w=740" width="300"/><p>Bermain Bola</p></div><div class="kotak-list"><img src="https://img.freepik.com/premium-vector/man-dancing-listening-music_23-2148538028.jpg?w=740"/><p>Mendengarkan Musik</p></div></div></section>
Ini adalah codingan CSSnya :
section#hobi {
float: left;
margin-right: 30px;
}
.tutorial-list {
width: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
}
.kotak-list {
width: 20%;
margin: 0 auto;
}
.kotak-list img {
width: 100%;
height: 80%;
display: inline-flex;
}
.kotak-list p {
font-family: 'comic sans ms';
font-weight: 800;
font-size: 25px;
text-align: center;
color: #355764;
}
footer {
background-color: tomato;
text-align: center;
color: white;
font-family: 'comic sans ms';
height: 20px;
margin-top: 800px;
width: 100%;
}
Hasilnya codingan yang saya tambahakan di atas akan menjadi seperti ini :
Jika kalian ingin melihat hasilnya lebih lanjut kalian bisa cek di sini :
https://adelwinnugroho.github.io/template-03
I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA
Ada kesalahan ketika ketika membuat display(tata letak) nya menjadi sebaris sejajar, malah saling berdempetan
Solusi :
Saya menambahkan margin-right: 30px;
pada bagian section hobi.
J. KESIMPULAN YANG DIDAPAT
Ketika ingin mengubah posisi konten menjadi sejajar/sebaris, maka kita harus menambahkan margin agar kontennya nanti tidak terjadi tabrakan atau saling berdempetan.
K. REFERENSI
-
