search

chingu-voyages / v48-tier1-team-05

A dinosaur app for viewing detailed information about your favorite dinosaurs | Chingu Voyage-48 | https://chingu.io/
https://chingu-voyages.github.io/v48-tier1-team-05/
4 stars 1 forks source link

Implement card flip - without length solution #151

Closed terrifricker closed 6 months ago

terrifricker commented 6 months ago
  1. Implement card flip. Using Matt's css for flipping cards, I changed some class names to the following. The card-body div is required to handle the flipping. The new elements needed were added to Ki's onSearch function that creates the cards. David's css for the cards. 
    <div class="card">
  <div class="card-body">
    <div class="card-front"></div>
    <div class="card-back"></div>
  </div>
</div>

https://github.com/chingu-voyages/v48-tier1-team-05/assets/51532684/14d82e11-debf-4f12-8f76-39239c136d76

  1. nth-child css is used to create the four background gradients for the card fronts and the four border colors for the card backs borders.

colored card fronts

Still needed: Solve the problem of the back cards growing too large (Using a min-height doesn't work for having front and back cards in the same space.)