Skip to content

teotimepacreau/Discarding-effect-and-container-queries-Day3-of-100DaysOfCode

Repository files navigation

Discarding effect and container queries to adapt cards dynamically

Discarding demo

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