https://github.com/teotimepacreau/discarding-effect-and-container-queries-day3-of-100daysofcode
Discarding effect and container queries to adapt cards dynamically built with CSS and HTML
https://github.com/teotimepacreau/discarding-effect-and-container-queries-day3-of-100daysofcode
100daysofcode card-effect coding-challenge container-queries css css-transitions discarding-effect flexbox grid hover-effect html restaurant-menu
Last synced: about 2 months ago
JSON representation
Discarding effect and container queries to adapt cards dynamically built with CSS and HTML
- Host: GitHub
- URL: https://github.com/teotimepacreau/discarding-effect-and-container-queries-day3-of-100daysofcode
- Owner: teotimepacreau
- Created: 2023-02-25T03:41:29.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-25T10:53:16.000Z (about 2 years ago)
- Last Synced: 2025-01-15T10:32:44.399Z (4 months ago)
- Topics: 100daysofcode, card-effect, coding-challenge, container-queries, css, css-transitions, discarding-effect, flexbox, grid, hover-effect, html, restaurant-menu
- Language: CSS
- Homepage: https://teotimepacreau.github.io/Discarding-effect-and-container-queries-Day3-of-100DaysOfCode/
- Size: 11.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Discarding effect and container queries to adapt cards dynamically
# Project goal
- discarding effect with translateX + rotate + scale
- enabling dynamic and adaptive styling with container queries (the card change its layout based on it's own size)
- position relative and position absolute to create the top left icon
- border-radius container handle with images thanks to "overflow: hidden"
- images taking up all parent thanks to Flexbox
- input styling with ellipsis to avoid text overflow
- CSS animation + transition to give it the smooth effect
- hover-effect
- responsive handle
- Flexbox to create component and align + Grid for the general UI
# 🛠️
HTML, CSS