Skip to content

Files

Latest commit

 

History

History

Day 05 - Unique-Image_Gallery

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
image.png
image.png
 
 
index.html
index.html
 
 
script.js
script.js
 
 
style.css
style.css
 
 

README.md

Expanding Cards

Description

This project is a creative way to display a collection of photos using expanding cards. The main page consists of several panels, each containing a different photo. When a panel is clicked, it expands to reveal the full photo and a caption (if you want to add).

Features

  • Responsive design: The layout adjusts according to the size of the user's screen.
  • Expanding cards: Clicking on a card expands it to show the full photo and a caption.
  • Smooth transitions: The expansion and contraction of the cards are animated for a smooth visual experience.

How to Use

  1. Open index.html in your web browser.
  2. Click on any panel to expand it and view the full photo and caption (depends on you).
  3. Click on the expanded panel or another panel to contract it.

Project Structure

  • index.html: This file contains the HTML structure of the project. It includes several panels, each with a background image and a caption.
  • style.css: This file contains the CSS styles for the project. It includes styles for the panels and the expanding animation.
  • script.js: This file contains the JavaScript code for the project. It includes the functionality for expanding and contracting the panels.

Screenshots

Snap

Technologies Used

  • HTML
  • CSS
  • JavaScript