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
📁 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