HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
600x401
392 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>School Gallery</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <section class="gallery-section">
        <div class="gallery-header">
            <h2>Our School Life in Frames</h2>
            <p>Explore recent events, academic achievements, and daily activities at our campus.</p>
        </div>

        <div class="gallery-grid">
            <div class="gallery-item">
                <div class="image-box">
                    <img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?w=600" alt="Science Laboratory Class">
                    <span class="category-badge">Science Lab</span>
                    <div class="image-overlay">
                        <div class="overlay-text">
                            <h3>Chemistry Practical</h3>
                            <p>Grade 11 students exploring chemical reactions.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="gallery-item">
                <div class="image-box">
                    <img src="https://images.unsplash.com/photo-1588072432836-e10032774350?w=600" alt="Students in Classroom">
                    <span class="category-badge">Academics</span>
                    <div class="image-overlay">
                        <div class="overlay-text">
                            <h3>Interactive Learning</h3>
                            <p>Modern classrooms equipped with digital smart boards.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="gallery-item">
                <div class="image-box">
                    <img src="https://images.unsplash.com/photo-1544698310-74ea9d1c8258?w=600" alt="School Football Match">
                    <span class="category-badge">Sports</span>
                    <div class="image-overlay">
                        <div class="overlay-text">
                            <h3>Annual Football Tournament</h3>
                            <p>Celebrating teamwork, spirit, and athleticism.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="gallery-item">
                <div class="image-box">
                    <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=600" alt="Computer Lab">
                    <span class="category-badge">Technology</span>
                    <div class="image-overlay">
                        <div class="overlay-text">
                            <h3>Coding Bootcamp</h3>
                            <p>Students practicing C Programming and logic building.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="gallery-item">
                <div class="image-box">
                    <img src="https://images.unsplash.com/photo-1459257831348-f0cdd359235f?w=600" alt="School Art Exhibition">
                    <span class="category-badge">Arts</span>
                    <div class="image-overlay">
                        <div class="overlay-text">
                            <h3>Creative Arts Exhibition</h3>
                            <p>Showcasing fine arts and crafts designed by our students.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="gallery-item">
                <div class="image-box">
                    <img src="https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=600" alt="Graduation Ceremony">
                    <span class="category-badge">Events</span>
                    <div class="image-overlay">
                        <div class="overlay-text">
                            <h3>Graduation Day</h3>
                            <p>Honoring our seniors as they step out into the world.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</body>
</html>
/* Base Layout Setup */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f8f9fa;
    color: #333;
    padding: 40px 20px;
}

/* Gallery Section Wrapper */
.gallery-section {
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-header {
    text-align: center;
    margin-bottom: 40px;
}

.gallery-header h2 {
    font-size: 2.5rem;
    color: #1a365d; /* Classic corporate/school dark blue */
    margin-bottom: 10px;
}

.gallery-header p {
    color: #666;
    font-size: 1.1rem;
}

/* Modern CSS Grid Layout */
.gallery-grid {
    display: grid;
    /* auto-fit automatically calculates columns based on width */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

/* Gallery Card Structure */
.gallery-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

/* Hover elevation effect on the card itself */
.gallery-item:hover {
    transform: translateY(-5px);
}

.image-box {
    position: relative;
    width: 100%;
    height: 250px; /* Uniform height across items */
    overflow: hidden;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image aspect ratio behaves beautifully */
    transition: transform 0.5s ease;
}

/* Category Badge Positioning */
.category-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #1a365d;
    color: #fff;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 20px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Hover Overlay Styles */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(26, 54, 93, 0.9), rgba(0, 0, 0, 0.2));
    display: flex;
    align-items: flex-end;
    padding: 20px;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.4s ease;
    z-index: 1;
}

.overlay-text {
    color: #fff;
    transform: translateY(20px); /* Slid down out of frame initially */
    transition: transform 0.4s ease;
}

.overlay-text h3 {
    font-size: 1.25rem;
    margin-bottom: 5px;
    font-weight: 600;
}

.overlay-text p {
    font-size: 0.9rem;
    opacity: 0.9;
    line-height: 1.4;
}

/* --- THE HOVER TRICK --- */
/* When hovering over the image box, trigger these 3 shifts simultaneously */
.image-box:hover img {
    transform: scale(1.1); /* Zoom image slightly */
}

.image-box:hover .image-overlay {
    opacity: 1; /* Fade-in background gradient */
}

.image-box:hover .overlay-text {
    transform: translateY(0); /* Slide text smoothly upwards into view */
}
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
299KB
Transfer Size
298KB
Content Size
101.0ms
Dom Content Loaded
200.0ms
First Paint
289.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests