exercises/05 - Flex Panel Gallery/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex Panels 💪</title>
  <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="./flex-panels.css">
  <style>
    html {
      box-sizing: border-box;
      background:#ffc600;
      font-family:'helvetica neue';
      font-size: 20px;
      font-weight: 200;
    }
    body {
      margin: 0;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }
    .cta {
      color:white;
      text-decoration: none;
    }
    .panel1 {
      background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
    }

    .panel2 {
      background-image: url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500);
    }

    .panel3 {
      background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d);
    }

    .panel4 {
      background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
    }

    .panel5 {
      background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
    }
  </style>
</head>
<body>

  <div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>

  <script>
    const panels = document.querySelectorAll('.panel')

    const togglePanel = (p, e) => {
      p.classList.toggle('open');
    }

    const toggleText = (p, e) => {
      if (e.propertyName.includes('flex')) p.classList.toggle('open-active');
    }

    panels.forEach(panel => {
      panel.addEventListener('click', togglePanel.bind(null, panel))
      panel.addEventListener('transitionend', toggleText.bind(null, panel))
    })
  </script>
</body>
</html>