<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="panels">
<div class="panel first">
<p>Panel 1</p>
</div>
<div class="panel second">
<p>Panel 2</p>
</div>
<div class="panel third">
<p>Panel 3</p>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
<!--
DESCRIPTION:
Your challenge is to create a set of responsive panels.
The user should be able to click on a panel, it should expand
revealing more info on the subject of the panel.
When the user clicks on the panel again, it should get back to the original state.
Example gif:
https://docs.google.
com/presentation/d/e/2PACX-1vQabQ1b7iLGqmB_MyTaKl85CSiQVGkrYQviaef03cZZOi59IEwUahS0fDqY0JkoOjY_aaE_P
gTlN6_6/pub?start=false&loop=false&delayms=3000
Remember: the panel needs to be responsive.
CSS:
box-sizing, flex box, flex children,
transition, text-transform, transform,
opacity, justfication and alignment
JS:
querySelectorAll, classList, addEventListener -->
<!--
DETAILED INSTRUCTIONS
1. Choose how many panels you wish to have
2. Style the vertical/horizontal panels, align everything into place
3. Figure out how to expand a panel and transition to a larger size