Devco1
Home
Console
Upload
New File
New Folder
Tools
Info
About
/
home
/
aptodayn
/
varthaprapancham.com
/
Filename :
gallery.php
back
Copy
<?php include __DIR__ . "/config/db.php"; include __DIR__ . "/config/site.php"; include __DIR__ . "/includes/header.php"; $galleries = $conn->query(" SELECT id,title,cover_image FROM gallery WHERE status='published' ORDER BY id DESC "); ?> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Anek+Telugu:wght@100;200;300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <style> :root{ --fbd: 'Anek Telugu', 'Inter', system-ui, sans-serif; } html, body { overflow-x:hidden; background-color: #050505; font-family: var(--fbd); -webkit-font-smoothing: antialiased; } @media(max-width:960px){ body { padding-bottom: 85px !important; } } .gallery-wrap{ max-width:1400px; margin:auto; padding:40px 16px 80px; display:grid; grid-template-columns:repeat(auto-fill, minmax(310px, 1fr)); gap:25px; } .gallery-card { background: #111; border-radius: 12px; overflow: hidden; position: relative; text-decoration: none; display: flex; flex-direction: column; transition: all 0.4s ease; border-bottom: 3px solid rgba(255, 255, 255, 0.1); } .gallery-card:hover { transform: translateY(-8px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); } .gallery-img-wrap { width: 100%; aspect-ratio: 3 / 4; overflow: hidden; position: relative; background: #1a1a1a; } .gallery-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .gallery-card:hover img { transform: scale(1.08); } /* --- FOOTER MENU COLORS FOR GALLERY TITLES --- */ .gallery-title { padding: 22px 15px 20px; font-size: 19px; font-weight: 800; font-family: var(--fbd); text-align: center; line-height: 1.6; text-transform: uppercase; } /* 1. Pink Color (Like Gallery Icon) */ .gallery-card:nth-child(3n+1) .gallery-title { color: #e1306c; } .gallery-card:nth-child(3n+1) { border-bottom: 3px solid #e1306c; } /* 2. Gradient Color (Like Reels Icon) */ .gallery-card:nth-child(3n+2) .gallery-title { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .gallery-card:nth-child(3n+2) { border-bottom: 3px solid #dd2a7b; } /* 3. Dark Blue Color (Like Home/ePaper Icon) */ .gallery-card:nth-child(3n+3) .gallery-title { color: #0b3b7a; } .gallery-card:nth-child(3n+3) { border-bottom: 3px solid #0b3b7a; } @media(max-width:480px){ .gallery-wrap { grid-template-columns: repeat(2, 1fr); gap: 12px; } .gallery-title { font-size: 15px; padding: 14px 8px 12px; } } </style> <div class="gallery-wrap"> <?php while($g = $galleries->fetch_assoc()): ?> <?php $file_name = htmlspecialchars($g['cover_image']); $version = time(); ?> <a href="<?= $BASE_URL ?>/gallery_view.php?id=<?= $g['id'] ?>" class="gallery-card"> <div class="gallery-img-wrap"> <img src="<?= $BASE_URL ?>/admin/uploads/gallery/images/<?= $file_name ?>?v=<?= $version ?>" alt="<?= htmlspecialchars($g['title']) ?>" loading="lazy" > </div> <div class="gallery-title"><?= htmlspecialchars($g['title']) ?></div> </a> <?php endwhile; ?> </div> <?php include __DIR__ . "/includes/footer.php"; ?>