https://github.com/teotimepacreau/expanding-cards-day1-of-100daysofcode

Expanding image cards built with Vanilla JS, CSS, HTML
https://github.com/teotimepacreau/expanding-cards-day1-of-100daysofcode

100daysofcode css expanding-cards flexbox html landscape vanillajs

Last synced: 3 months ago
JSON representation

Expanding image cards built with Vanilla JS, CSS, HTML

• Host: GitHub
• URL: https://github.com/teotimepacreau/expanding-cards-day1-of-100daysofcode
• Owner: teotimepacreau
• Created: 2023-02-16T17:27:56.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-19T14:58:08.000Z (over 2 years ago)
• Last Synced: 2025-01-15T10:32:43.824Z (5 months ago)
• Topics: 100daysofcode, css, expanding-cards, flexbox, html, landscape, vanillajs
• Language: CSS
• Homepage: https://teotimepacreau.github.io/Expanding-Cards-Day1-of-100DaysOfCode/
• Size: 9.99 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Expanding Cards

![Expanding-cards-demo](https://github.com/teotimepacreau/Expanding-Cards-Day1-of-100DaysOfCode/blob/main/Expanding-cards.gif)

# Project goal

- handle images with object-fit: cover

- responsive handling

- CSS animation + transition to give it the smooth through the effect

- use Flexbox to create component and align

- add Vanilla JavaScript so that when the user click one of these cards, it changes the class and then expands with a CSS transition

- Vanilla JS eventListener, loops, class and attributes handling, create/remove DOM elements

# 🛠️

HTML, CSS, Vanilla JavaScript