Responsive Grid Gallery Layout

This project is a responsive, interactive grid gallery layout built using SCSS and CSS3, showcasing modern card-based UI components. It is designed to demonstrate skills learned in Cohort 2.0 under Sartak Sharma.

---

Demo

The layout features:

• A full-screen responsive grid layout with 4 columns and 6 rows.
• Interactive cards with hover effects.
• Overlay headings and smooth transitions.
• Top (.ctop) and bottom (.cbot) content panels on cards with fade-in/out animations.
• Flexbox-based content alignment inside cards.
• Custom typography using Google Fonts (Poppins).
• Background images and text overlays for visually appealing UI.

---

Technologies Used

• SCSS/SASS for structured and reusable styling.
• CSS Grid for creating complex layouts.
• Flexbox for content alignment inside cards.
• Google Fonts for custom typography.
• HTML5 & CSS3 for markup and styling.

---

Project Structure

├── index.html ├── styles │ └── main.scss ├── images │ ├── i1.jpg │ ├── i3.jpg │ ├── i4.jpg │ ├── i5.jpg │ └── extra.jpg └── README.md