Jinsi ya Kutengeneza Image Galleries kwa Static Pages
💻 Full Working Code
📁 gallery.html
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<title>Image Gallery - Faulink</title>
<style>
body { font-family: Arial; text-align: center; background: #fafafa; margin: 0; }
h2 { background: #007bff; color: white; padding: 20px; }
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
padding: 20px;
}
.gallery img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 10px;
transition: 0.3s;
}
.gallery img:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<h2>Faulink Image Gallery</h2>
<div class="gallery">
<img src="https://via.placeholder.com/400x300" alt="Image 1">
<img src="https://via.placeholder.com/400x300" alt="Image 2">
<img src="https://via.placeholder.com/400x300" alt="Image 3">
<img src="https://via.placeholder.com/400x300" alt="Image 4">
</div>
</body>
</html>
________________________________________
🎥 YouTube Description
Hapa tunajifunza jinsi ya kutengeneza Image Gallery kwa HTML na CSS.
Utaona matumizi ya CSS Grid layout kwa kupanga picha kwa mpangilio unaobadilika.
Mbinu hii ni bora kwa blogs, portfolio, na static websites.
🔔 Jiunge na Faulink kwa tutorials bora zaidi za web design.
________________________________________
🏷️ Hashtags
#HTML #CSS #ImageGallery #WebDesign #Faulink #Coding #GridLayout
🚀 Unahitaji mfumo au website ya biashara?
Chagua huduma hapa chini kisha mteja bofya moja kwa moja kwenda kwenye ukurasa wa huduma au kuwasiliana nasi kwa WhatsApp.