/expanding-cards

Accordion cards that expand to reveal characters from film Inside Out.

Primary LanguageCSS

previous 100 days of code next

Accordion Cards


Accordion Cards

Table of Contents


#100DaysOfCode

Day 5: February 7, 2021

  • Growing up in an Asian and Filipino household, I was raised not to talk about my feelings.

  • Today, more teachers and educators are normalizing talking about your feelings in classrooms.

  • For Day 5, I turned a tutorial for accordion cards into a "How are you feeling today?" project.

  • The cards feature characters from one of my favorite films, Inside Out, by Disney and Pixar.

  • September 2022 Update: For accessibility, light text colors were changed to darker hues.


Installation

1. Git clone and cd into the repo folder:

git clone git@github.com:emjose/expanding-cards.git && cd expanding-cards

2. Run the command:

open index.html

Live Site

Live Site

Accordion Cards is responsive and keyboard-navigable.

• Each character card can be expanded by mouse click or by keyboard press.

Accordion Cards is a progressive web app.


Resources


Copyright

  • This project is for made for educational purposes only.

  • All Inside Out images and characters are copyright of © Disney and © Pixar. All Rights Reserved.


Let's Connect!

Twitter badge Linkedin badge Medium badge Instagram badge Gmail badge Portfolio badge Github badge

Back to Top