emjose / expanding-cards

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

Home Page:https://emjose.github.io/expanding-cards/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

About

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

https://emjose.github.io/expanding-cards/


Languages

Language:CSS 37.5%Language:HTML 35.8%Language:JavaScript 26.7%