Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Bagaimana cara memisahkan kumpulan-kumpulan gambar dengan artikel tulisan agar tidak overlapping
Bagaimana yah supaya gambarnya tidak overlaping sama tulisan
<!DOCTYPE html>
<html>
<body>
<header>
<main>
<div id="content">
<h2>A Part of Sukabumi Landscape</h2>
<!-- gallery-->
<div class="gallery">
<a target="_blank" href="assets/image/Jembatan Gantung Cigunung.jpg"><img src="assets/image/Jembatan Gantung Cigunung.jpg" alt="Jembatan Cigunung" width="600" height="400"></a>
<div class="desc"><cite>Situ Gunung Suspension Bridge</cite>
<a href="https://situgunungbridge.com/">Want to Know more?</a>
</div>
</div>
<div class="gallery">
<a target="_blank" href="assets/image/Rafting Citarik.jpg"><img src="assets/image/Rafting Citarik.jpg" alt="Rafting Citarik" width="600" height="400"></a>
<div class="desc"><cite>Extreme sports (Rafting) in Citarik River</cite>
<a href="https://arusliar.co.id/">Want to Know more?</a>
</div>
</div>
<div class="gallery">
<a target="_blank" href="assets/image/Geopark Ciletuh.jpg"><img src="assets/image/Geopark Ciletuh.jpg" alt="Geopark Ciletuh" width="600" height="400"></a>
<div class="desc"><cite>A national Geopark at Sukabumi Regency</cite>
<a href="https://www.mytrip.co.id/article/7-objek-wisata-wajib-di-geopark-ciletuh-sukabumi">Want to Know more?</a>
</div>
</div>
<div class="gallery">
<a target="_blank" href="assets/image/Pantai-Ujung-Genteng-4.jpg"><img src="assets/image/Pantai-Ujung-Genteng-4.jpg" alt="Pantai UjungGenteng" width="600" height="400"></a>
<div class="desc"><cite>Ujung Genteng is a village in an area of Ciletuh</cite>
<a href="https://www.gotravelly.com/blog/tempat-wisata-ujung-genteng/">Want to Know more?</a>
</div>
</div>
<article style="padding:11px;">
<h2>Our Story</h2>
<p>This website is created for promote Sukabumi Tourism. There is so many natural attractions that you all can visit and enjoy. In this site we will guide you to some place you can visit.</p>
</article>
</div>
</main>
</body>
</html>
css nya
div.gallery {
margin: 5px;
border: 1px solid seagreen;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid black;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
\* {
box-sizing: border-box;
}
