neisdev/index.html

## index.html
<body>
  <div class="content">

    <!-- To Top Button -->
    <button onclick="topFunction()" id="to-top" title="Go to top">&uarr;</button>

    <!-- Navigation Bar -->
    <div class="topnav" id="myTopnav">
      <a href="https://www.netflix.com" class="symbol-div"><img src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/113/037/original/Netflix_Logo_RGB.png?1706649012" id="netflix-symbol" alt="Netflix Symbol">
      </a>
      <div class="topnav-centered">
        <a href="#home" class="active">Home</a>
        <a rel="noopener" href="#cast_carousel">Characters</a>
        <a href="https://www.netflix.com/gb/title/81519223#season-selector-container">Episodes</a>
      </div>

      <div class="topnav-right">
        <a href="https://www.netflix.com/login" class="signin-btn button">Sign In</a>
        <a href="javascript:void(0);" class="icon" onclick="mobileNav()">
          <i class="fa fa-bars"></i>
        </a>
      </div>
    </div>

    <!-- Hero Section -->
    <div class="hero">
      <header>
        <img src="https://images.workpointtoday.com/workpointnews/2022/07/23153907/1658565544_95426_1.png" alt="The Glory Logo" id="glory-logo">
        <div class="banner">
          <h1>The Glory</h1>
          <p>Years after surviving horrific abuse in high school, a woman puts an elaborate revenge scheme
            in motion to make the perpetrators pay for their crimes.</p><br>
          <a href="https://www.netflix.com/title/81519223" class="cta-button">Watch Now</a>
        </div>
      </header>
    </div>

    <!-- Trailer Section -->
    <div class="container">
      <div class="image-stack">
        <div class="image-stack__item image-stack__item--top">
          <div class="trailer"><br>
            <h2>Watch the Season 1 Trailer</h2>
            <div class="container">
              <iframe class="trailer-iframe" width="560" height="315" src="https://www.youtube.com/embed/tqVVrTvrI8U?si=OPQ0I__jtjZ1JlVU&amp;loop=1&amp;controls=0&amp;end=113" title="YouTube video player" frameborder="0" rel="0" loop="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            </div>
          </div>
        </div>
        <div class="image-stack__item image-stack__item--bottom">
          <div class="image-2">
            <img src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/113/038/original/the-glory-images.jpeg?1706649063" id="bg-image-2" alt="Song Hye-go as Moon Dong-eun">
          </div>
        </div>

        <!-- Responsive Carousel from https://codepen.io/noirsociety -->
        <div class="image-stack__item image-stack__item--bottom2">
          <main id="cast_carousel">
            <ul class="slider">
              <li class="item" style="background-image: url(https://photos.hancinema.net/photos/fullsizephoto1642778.jpg);">
                <div class="carousel-content">
                  <h1 class="title">Moon Dong-eun</h1>
                  <p class="description">Moon Dong-eun was horrifically bullied by a group of her
                    classmates. After dropping out of high school, Dong-eun has spent years
                    preparing for revenge. After all, revenge is a dish best served cold.</p>
                </div>
              </li>
              <li class="item" style="background-image: url(https://photos.hancinema.net/photos/fullsizephoto1597765.jpg);">
                <div class="carousel-content">
                  <h1 class="title">Park Yeon-jin</h1>
                  <p class="description">As a teen, Yeon-jin was
                    the most conniving of Dong-eun’s bullies. Her family's wealth ensured she
                    never got in trouble for her crimes. As an adult, Yeon-jin is a popular
                    weathercaster, married to a powerful man with an adorable daughter.
                    But Yeon-jin has no idea Dong-eun has been tracking her — and her family — for
                    years.</p>
                </div>
              </li>
              <li class="item" style="background-image: url(https://photos.hancinema.net/photos/fullsizephoto1597757.jpg);">
                <div class="carousel-content">
                  <h1 class="title">Joo Yeo-jeong</h1>
                  <p class="description">Medical intern Joo Yeo-jeong meets Dong-eun when they’re both
                    inpatients at
                    the hospital where he works. Absorbed by her revenge plot, Dong-eun is wary of
                    his privileged life.
                    Despite it all, their paths continue to intersect as she gets closer and closer
                    to taking out her enemies. </p>
                </div>
              </li>
              <li class="item" style="background-image: url(https://photos.hancinema.net/photos/fullsizephoto1629639.jpg);">
                <div class="carousel-content">
                  <h1 class="title">Jeon Jae-joon</h1>
                  <p class="description">Jeon Jae-jun was another of Dong-eun’s bullies. Now he’s all
                    grown up and owns a ritzy golf club. Jae-jun is still just as arrogant and
                    insufferable as he was in high
                    school — but now it’s Dong-eun who has the power to destroy his life. </p>
                </div>
              </li>
            </ul>
            <nav class='nav'>
              <ion-icon class='btn prev' name="arrow-back-outline"></ion-icon>
              <ion-icon class='btn next' name="arrow-forward-outline"></ion-icon>
            </nav>
          </main>
          <footer>
            <div class="footer-box">
              <div class="footer-links">
                <a href="https://codepen.io/mink-a" class="fa fa-codepen"></a>
                <a href="https://www.linkedin.com/in/minka27" target="_blank" class="fa fa-linkedin"></a>
                <a href="https://github.com/minka-27" target="_blank" class="fa fa-github"></a>
              </div>

              <p class="text-center mt-5">
                Coded by Minka Ansa for the
                <a href="https://www.shecodes.io/contests/binge-worthy-tv-show" target="_blank">Binge
                  Worthy TV Show</a> Challenge
              </p>
              <p class="web-warning">(This website looks best in a full-screen desktop browser)</p>
            </div>
          </footer>

          <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
          <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

        </div>
      </div>
    </div>
  </div>

  <script src="./script.js"></script>

</body>

## netflix-the-glory-landing-page.markdown

      
    Raw
  

              netflix-the-glory-landing-page.markdown
            
          
    Netflix The Glory Landing Page

I created this landing page to showcase some of the skills I've learned during my coding journey. This is also an alternate and expanded version of my submission for SheCodes.io monthly challenge. The theme is 'Binge-Worthy TV Shows'
The carousel featured is from noirsociety on CodePen: https://codepen.io/noirsociety
A Pen by Minka on CodePen.
License.

  
## script.js
function mobileNav() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

// Script for To Top button
let toTopBtn = document.getElementById("to-top");
window.onscroll = function () {
  scrollFunction();
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    toTopBtn.style.display = "block";
  } else {
    toTopBtn.style.display = "none";
  }
}

function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome
}

// Script for responsive carousel
const slider = document.querySelector(".slider");

function activate(e) {
  const items = document.querySelectorAll(".item");
  e.target.matches(".next") && slider.append(items[0]);
  e.target.matches(".prev") && slider.prepend(items[items.length - 1]);
}

document.addEventListener("click", activate, false);

## style.css
/* Imported Google Font: 'Figtree' */
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

* {
  box-sizing: border-box;
}

body {
  max-width: 105%;
  max-height: 100%;
  color: #fff;
  font-family: "Figtree", sans-serif;
  background-color: #000;
  overflow-x: hidden;
}

/* Styling the parallax background photo */
.content::before {
  background-image: url(https://photos.hancinema.net/photos/fullsizephoto1603240.jpg);
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  right: -5;
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
}

.content {
  background-color: #000;
  margin: 0 -10px -10px -10px;
  position: relative;
  z-index: 0;
  overflow-x: hidden;
  max-width: 105%;
}

/* Responsive Navigation Bar */
.topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}

.topnav a:not(.symbol-div, .icon) {
  padding: 15px 40px;
  font-size: 24px;
}

.topnav a:not(.active) {
  margin-left: -4px;
}

.topnav img {
  max-width: 50px;
}

/* Centering some links in the nav bar */
.topnav-centered {
  flex-grow: 1;
  text-align: center;
}

.topnav-centered a {
  color: #fff;
  text-decoration: none;
  padding: 15px 40px;
}

.topnav-right a:not(.icon) {
  text-decoration: none;
  padding: 10px 30px;
}

.topnav .icon {
  color: #fff;
  display: none;
  padding: 10px 20px;
  font-size: 24px;
}

.topnav a:not(:first-child, .icon):hover,
.topnav a.active {
  background-image: linear-gradient(
    180deg,
    rgba(229, 9, 20, 0.53) 0%,
    rgba(229, 9, 20, 0) 100%
  );
}

#netflix-symbol {
  margin-left: 24px;
  max-width: 210px;
  padding: 0;
}

/* Sign in button (Not available on smaller screens: 800px) */
.button {
  white-space: nowrap;
  font-size: 24px;
  margin-right: 24px;
  padding: 5px 30px;
  background: #fff;
  color: #000;
  border: solid 4px #f7f6f6;
  border-radius: 50px;
  height: 27px;
  width: 100px;
  cursor: pointer;
}

/* When the screen is less than 800 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 820px) {
  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.signin-btn {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 820px) {
  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive a.icon {
    font-size: 24px;
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    margin: 0;
    text-align: center;
    font-size: 17px;
  }

  .topnav.responsive div.topnav-centered {
    max-width: fit-content;
    margin-left: 24px;
    margin-right: -40px;
  }

  .topnav.responsive div.topnav-centered a {
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .topnav.responsive img#netflix-symbol {
    max-width: 100px;
    position: absolute;
    left: 0;
    top: 0;
  }

  #netflix-symbol {
    max-width: 105px;
  }

  /* Makes sign in button and active nav link non visible on smaller screens */
  .topnav a.signin-btn,
  .topnav a.active:not(.topnav.responsive a.active) {
    display: none;
  }
}

/* Styling the scroll to top button */
#to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: 2px solid white;
  background-color: transparent;
  color: white;
  cursor: pointer;
  padding: 12px 14px 15px 14px;
  border-radius: 40px;
  font-size: 24px;
}

#to-top:hover {
  background-color: #555;
}

/* Styling the hero section */
.hero {
  margin-bottom: 80px;
  margin-left: 17px;
}

#glory-logo {
  margin-left: -31px;
  max-width: 617px;
  display: block;
  filter: invert(1);
}

header {
  text-align: justify;
  margin-left: 30px;
}

.banner {
  display: block;
  max-width: fit-content;
}

.banner h1 {
  font-size: 40px;
  display: block;
  font-weight: 600;
  margin: 0;
}

.banner p {
  width: 550px;
  font-size: 24px;
  font-weight: 400;
  word-spacing: -1.6px;
  margin-bottom: 17px;
}

/* Call to action button: 'Watch Now'*/

.cta-button {
  background: #e50914;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  padding: 15px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}

.cta-button:hover {
  background: #ff141f;
}

/* Styling for YouTube trailer */
.trailer {
  padding-top: 100px;
  padding-bottom: 300px;
  text-align: center;
  display: block;
  background-color: black;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.01) 0%,
    rgb(0, 0, 0) 12%,
    rgba(0, 11, 21, 0.98) 71%,
    rgb(1, 43, 81) 90%,
    transparent 94%
  );
}

.trailer iframe {
  width: 100%;
  max-width: 800px;
  height: 450px;
  display: block;
  margin: auto;
}

/* Using a grid to overlap the trailer, image below and carousel for smooth gradient */
.image-stack {
  display: grid;
  position: relative;
  grid-template-columns: repeat(12, 1fr);
}

.image-stack__item--top {
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: 1;
}

.image-stack__item--bottom {
  grid-column: 1 / -1;
  grid-row: 1;
  padding-top: 57%;
  margin-bottom: -1%;
}

.image-stack__item--bottom2 {
  grid-column: 1 / -1;
  grid-row: 2;
}

#bg-image-2 {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Media queries for main body content */

@media screen and (max-width: 820px) {
  html {
    overscroll-behavior: none;
  }
  /* Styling the parallax background photo */

  .content::before {
    /*     height: 100%; */
    /*     position: relative; */
    background: url(https://photos.hancinema.net/photos/fullsizephoto1603240.jpg);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-position: center;
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow-x: hidden;
  }

  .hero {
    margin-bottom: 40px;
    margin-left: 7px;
  }

  #glory-logo {
    margin-left: -25px;
    max-width: 308px;
  }

  header {
    margin-left: 24px;
    margin-right: 24px;
  }

  .banner {
    max-width: 100%;
  }

  .banner h1 {
    max-width: 100%;
    font-size: 26px;
  }

  .banner p {
    width: 300px;
    font-size: 17px;
    margin-right: 24px;
    word-spacing: -1.9px;
  }

  .cta-button {
    font-size: 17px;
    padding: 10px 15px;
  }

  /* Styling for YouTube trailer */
  .trailer {
    padding-top: 100px;
    padding-bottom: 300px;
    text-align: center;
    display: block;
    background-color: black;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.01) 0%,
      rgb(0, 0, 0) 12%,
      rgba(0, 11, 21, 0.98) 71%,
      rgb(1, 43, 81) 90%,
      transparent 94%
    );
  }

  .container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 62.5%;
    /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  }

  .trailer-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 90%;
    height: 100%;
  }

  .trailer h2 {
    font-size: 17px;
  }
}

@media screen and (max-width: 896px) {
  /* Using a grid to overlap the trailer, image below and carousel for smooth gradient */
  .image-stack {
    display: grid;
    position: relative;
    grid-template-columns: repeat(12, 1fr);
  }

  .image-stack__item--top {
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 1;
  }

  .image-stack__item--bottom {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-top: 100%;
    margin-bottom: -2%;
  }

  .image-stack__item--bottom2 {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #bg-image-2 {
    display: block;
    width: 125%;
    margin-left: -30px;
    /* height: 100%; */
    object-fit: cover;
    overflow: hidden;
  }
}

@media screen and (max-width: 1280px) {
  .image-stack__item--bottom {
    margin-top: 8%;
  }
}

@media screen and (max-width: 1024px) {
  .image-stack__item--bottom {
    margin-top: 25%;
  }
}

@media screen and (max-width: 912px) {
  .image-stack__item--bottom {
    margin-top: 35%;
  }
}

@media screen and (max-width: 820px) {
  .image-stack__item--bottom {
    margin-top: 50%;
  }
}

@media screen and (max-width: 768px) {
  .image-stack__item--bottom {
    margin-top: 52%;
  }
}

@media screen and (max-width: 390px) {
  .image-stack__item--bottom {
    margin-top: 109%;
  }
}

@media screen and (max-width: 430px) {
  .image-stack__item--bottom {
    margin-top: 95%;
  }
}

@media screen and (max-width: 414px) {
  .image-stack__item--bottom {
    margin-top: 100%;
  }
}

@media screen and (max-width: 390px) {
  .image-stack__item--bottom {
    margin-top: 106%;
  }
}

@media screen and (max-width: 375px) {
  .image-stack__item--bottom {
    margin-top: 111%;
  }
}

@media screen and (max-width: 360px) {
  .image-stack__item--bottom {
    margin-top: 114%;
  }
}

@media screen and (max-width: 280px) {
  .image-stack__item--bottom {
    margin-top: 150%;
  }
}

.footer-box {
  display: block;
  background: linear-gradient(to bottom, rgba(11, 18, 24, 255), black 70%);
  padding: 30px;
  text-align: center;

  & .footer-email {
    font-size: 24px;
    color: white;
  }

  & .footer-links {
    margin-top: 15px;
  }

  & .fa {
    color: white;
    font-style: none;
    font-size: 40px;
    margin: 10px;
    text-decoration: none;
  }

  & p {
    font-size: 20px;

    & a {
      text-decoration: underline;
      color: white;
    }
  }
  & p.web-warning {
    font-size: 15px;
  }
}

/* Carousel Styling */
main * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body main {
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

main {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.item {
  width: 200px;
  height: 300px;
  list-style-type: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  box-shadow: 0 20px 30px rgba(255, 255, 255, 0.3) inset;
  transition: transform 0.1s, left 0.75s, top 0.75s, width 0.75s, height 0.75s;

  &:nth-child(1),
  &:nth-child(2) {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
  }

  &:nth-child(3) {
    left: 50%;
  }

  &:nth-child(4) {
    left: calc(50% + 220px);
  }

  &:nth-child(5) {
    left: calc(50% + 440px);
  }

  &:nth-child(6) {
    left: calc(50% + 660px);
    opacity: 0;
  }
}

.carousel-content {
  width: min(30vw, 400px);
  position: absolute;
  top: 50%;
  left: 3rem;
  transform: translateY(-50%);
  font: 400 0.85rem "Figtree", sans-serif;
  color: white;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: none;

  & .title {
    font-family: "Figtree", sans-serif;
    text-transform: uppercase;
  }

  & .description {
    line-height: 1.7;
    margin: 1rem 0 1.5rem;
    font-size: 1.2rem;
    font-weight: 500;
  }

  & button {
    width: fit-content;
    background-color: rgba(0, 0, 0, 0.1);
    color: white;
    border: 2px solid white;
    border-radius: 0.25rem;
    padding: 0.75rem;
    cursor: pointer;
  }
}

.item:nth-of-type(2) .carousel-content {
  display: block;
  animation: show 0.75s ease-in-out 0.3s forwards;
}

@keyframes show {
  0% {
    filter: blur(5px);
    transform: translateY(calc(-50% + 75px));
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.nav {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  user-select: none;

  & .btn {
    background-color: rgba(255, 255, 255, 0.5);
    color: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(0, 0, 0, 0.6);
    margin: 0 0.25rem;
    padding: 0.75rem;
    border-radius: 50%;
    cursor: pointer;

    &:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }
  }
}

@media (width > 650px) and (width < 820px) {
  .carousel-content {
    & .title {
      font-size: 1rem;
    }

    & .description {
      font-size: 0.9rem;
    }

    & button {
      font-size: 0.7rem;
    }
  }

  .item {
    width: 160px;
    height: 270px;

    &:nth-child(3) {
      left: 50%;
    }

    &:nth-child(4) {
      left: calc(50% + 170px);
    }

    &:nth-child(5) {
      left: calc(50% + 340px);
    }

    &:nth-child(6) {
      left: calc(50% + 510px);
      opacity: 0;
    }
  }
}

@media (width < 650px) {
  .carousel-content {
    & .title {
      font-size: 0.9rem;
    }

    & .description {
      font-size: 0.7rem;
    }

    & button {
      font-size: 0.7rem;
    }
  }

  .item {
    width: 130px;
    height: 220px;

    &:nth-child(3) {
      left: 50%;
    }

    &:nth-child(4) {
      left: calc(50% + 140px);
    }

    &:nth-child(5) {
      left: calc(50% + 280px);
    }

    &:nth-child(6) {
      left: calc(50% + 420px);
      opacity: 0;
    }
  }
}
	<body>
	<div class="content">

	<!-- To Top Button -->
	<button onclick="topFunction()" id="to-top" title="Go to top">↑</button>

	<!-- Navigation Bar -->
	<div class="topnav" id="myTopnav">
	<a href="https://www.netflix.com" class="symbol-div"><img src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/113/037/original/Netflix_Logo_RGB.png?1706649012" id="netflix-symbol" alt="Netflix Symbol">
	</a>
	<div class="topnav-centered">
	<a href="#home" class="active">Home</a>
	<a rel="noopener" href="#cast_carousel">Characters</a>
	<a href="https://www.netflix.com/gb/title/81519223#season-selector-container">Episodes</a>
	</div>

	<div class="topnav-right">
	<a href="https://www.netflix.com/login" class="signin-btn button">Sign In</a>
	<a href="javascript:void(0);" class="icon" onclick="mobileNav()">
	<i class="fa fa-bars"></i>
	</a>
	</div>
	</div>

	<!-- Hero Section -->
	<div class="hero">
	<header>
	<img src="https://images.workpointtoday.com/workpointnews/2022/07/23153907/1658565544_95426_1.png" alt="The Glory Logo" id="glory-logo">
	<div class="banner">
	<h1>The Glory</h1>
	<p>Years after surviving horrific abuse in high school, a woman puts an elaborate revenge scheme
	in motion to make the perpetrators pay for their crimes.</p><br>
	<a href="https://www.netflix.com/title/81519223" class="cta-button">Watch Now</a>
	</div>
	</header>
	</div>

	<!-- Trailer Section -->
	<div class="container">
	<div class="image-stack">
	<div class="image-stack__item image-stack__item--top">
	<div class="trailer"><br>
	<h2>Watch the Season 1 Trailer</h2>
	<div class="container">
	<iframe class="trailer-iframe" width="560" height="315" src="https://www.youtube.com/embed/tqVVrTvrI8U?si=OPQ0I__jtjZ1JlVU&loop=1&controls=0&end=113" title="YouTube video player" frameborder="0" rel="0" loop="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
	</div>
	</div>
	</div>
	<div class="image-stack__item image-stack__item--bottom">
	<div class="image-2">
	<img src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/113/038/original/the-glory-images.jpeg?1706649063" id="bg-image-2" alt="Song Hye-go as Moon Dong-eun">
	</div>
	</div>

	<!-- Responsive Carousel from https://codepen.io/noirsociety -->
	<div class="image-stack__item image-stack__item--bottom2">
	<main id="cast_carousel">
	<ul class="slider">
	<li class="item" style="background-image: url(https://photos.hancinema.net/photos/fullsizephoto1642778.jpg);">
	<div class="carousel-content">
	<h1 class="title">Moon Dong-eun</h1>
	<p class="description">Moon Dong-eun was horrifically bullied by a group of her
	classmates. After dropping out of high school, Dong-eun has spent years
	preparing for revenge. After all, revenge is a dish best served cold.</p>
	</div>
	</li>
	<li class="item" style="background-image: url(https://photos.hancinema.net/photos/fullsizephoto1597765.jpg);">
	<div class="carousel-content">
	<h1 class="title">Park Yeon-jin</h1>
	<p class="description">As a teen, Yeon-jin was
	the most conniving of Dong-eun’s bullies. Her family's wealth ensured she
	never got in trouble for her crimes. As an adult, Yeon-jin is a popular
	weathercaster, married to a powerful man with an adorable daughter.
	But Yeon-jin has no idea Dong-eun has been tracking her — and her family — for
	years.</p>
	</div>
	</li>
	<li class="item" style="background-image: url(https://photos.hancinema.net/photos/fullsizephoto1597757.jpg);">
	<div class="carousel-content">
	<h1 class="title">Joo Yeo-jeong</h1>
	<p class="description">Medical intern Joo Yeo-jeong meets Dong-eun when they’re both
	inpatients at
	the hospital where he works. Absorbed by her revenge plot, Dong-eun is wary of
	his privileged life.
	Despite it all, their paths continue to intersect as she gets closer and closer
	to taking out her enemies. </p>
	</div>
	</li>
	<li class="item" style="background-image: url(https://photos.hancinema.net/photos/fullsizephoto1629639.jpg);">
	<div class="carousel-content">
	<h1 class="title">Jeon Jae-joon</h1>
	<p class="description">Jeon Jae-jun was another of Dong-eun’s bullies. Now he’s all
	grown up and owns a ritzy golf club. Jae-jun is still just as arrogant and
	insufferable as he was in high
	school — but now it’s Dong-eun who has the power to destroy his life. </p>
	</div>
	</li>
	</ul>
	<nav class='nav'>
	<ion-icon class='btn prev' name="arrow-back-outline"></ion-icon>
	<ion-icon class='btn next' name="arrow-forward-outline"></ion-icon>
	</nav>
	</main>
	<footer>
	<div class="footer-box">
	<div class="footer-links">
	<a href="https://codepen.io/mink-a" class="fa fa-codepen"></a>
	<a href="https://www.linkedin.com/in/minka27" target="_blank" class="fa fa-linkedin"></a>
	<a href="https://github.com/minka-27" target="_blank" class="fa fa-github"></a>
	</div>

	<p class="text-center mt-5">
	Coded by Minka Ansa for the
	<a href="https://www.shecodes.io/contests/binge-worthy-tv-show" target="_blank">Binge
	Worthy TV Show</a> Challenge
	</p>
	<p class="web-warning">(This website looks best in a full-screen desktop browser)</p>
	</div>
	</footer>

	<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
	<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

	</div>
	</div>
	</div>
	</div>

	<script src="./script.js"></script>

	</body>
	function mobileNav() {
	var x = document.getElementById("myTopnav");
	if (x.className === "topnav") {
	x.className += " responsive";
	} else {
	x.className = "topnav";
	}
	}

	// Script for To Top button
	let toTopBtn = document.getElementById("to-top");
	window.onscroll = function () {
	scrollFunction();
	};

	function scrollFunction() {
	if (document.body.scrollTop > 20 \|\| document.documentElement.scrollTop > 20) {
	toTopBtn.style.display = "block";
	} else {
	toTopBtn.style.display = "none";
	}
	}

	function topFunction() {
	document.body.scrollTop = 0; // For Safari
	document.documentElement.scrollTop = 0; // For Chrome
	}

	// Script for responsive carousel
	const slider = document.querySelector(".slider");

	function activate(e) {
	const items = document.querySelectorAll(".item");
	e.target.matches(".next") && slider.append(items[0]);
	e.target.matches(".prev") && slider.prepend(items[items.length - 1]);
	}

	document.addEventListener("click", activate, false);
	/* Imported Google Font: 'Figtree' */
	@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

	* {
	box-sizing: border-box;
	}

	body {
	max-width: 105%;
	max-height: 100%;
	color: #fff;
	font-family: "Figtree", sans-serif;
	background-color: #000;
	overflow-x: hidden;
	}

	/* Styling the parallax background photo */
	.content::before {
	background-image: url(https://photos.hancinema.net/photos/fullsizephoto1603240.jpg);
	content: "";
	position: fixed;
	left: 0;
	top: 0;
	right: -5;
	z-index: -1;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	width: 100%;
	height: 100%;
	}

	.content {
	background-color: #000;
	margin: 0 -10px -10px -10px;
	position: relative;
	z-index: 0;
	overflow-x: hidden;
	max-width: 105%;
	}

	/* Responsive Navigation Bar */
	.topnav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
	}

	.topnav a:not(.symbol-div, .icon) {
	padding: 15px 40px;
	font-size: 24px;
	}

	.topnav a:not(.active) {
	margin-left: -4px;
	}

	.topnav img {
	max-width: 50px;
	}

	/* Centering some links in the nav bar */
	.topnav-centered {
	flex-grow: 1;
	text-align: center;
	}

	.topnav-centered a {
	color: #fff;
	text-decoration: none;
	padding: 15px 40px;
	}

	.topnav-right a:not(.icon) {
	text-decoration: none;
	padding: 10px 30px;
	}

	.topnav .icon {
	color: #fff;
	display: none;
	padding: 10px 20px;
	font-size: 24px;
	}

	.topnav a:not(:first-child, .icon):hover,
	.topnav a.active {
	background-image: linear-gradient(
	180deg,
	rgba(229, 9, 20, 0.53) 0%,
	rgba(229, 9, 20, 0) 100%
	);
	}

	#netflix-symbol {
	margin-left: 24px;
	max-width: 210px;
	padding: 0;
	}

	/* Sign in button (Not available on smaller screens: 800px) */
	.button {
	white-space: nowrap;
	font-size: 24px;
	margin-right: 24px;
	padding: 5px 30px;
	background: #fff;
	color: #000;
	border: solid 4px #f7f6f6;
	border-radius: 50px;
	height: 27px;
	width: 100px;
	cursor: pointer;
	}

	/* When the screen is less than 800 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
	@media screen and (max-width: 820px) {
	.topnav a:not(:first-child) {
	display: none;
	}

	.topnav a.signin-btn {
	display: none;
	}

	.topnav a.icon {
	float: right;
	display: block;
	}
	}

	/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
	@media screen and (max-width: 820px) {
	.topnav.responsive {
	position: relative;
	}

	.topnav.responsive a.icon {
	font-size: 24px;
	position: absolute;
	right: 0;
	top: 0;
	}

	.topnav.responsive a {
	float: none;
	display: block;
	margin: 0;
	text-align: center;
	font-size: 17px;
	}

	.topnav.responsive div.topnav-centered {
	max-width: fit-content;
	margin-left: 24px;
	margin-right: -40px;
	}

	.topnav.responsive div.topnav-centered a {
	width: 100%;
	align-items: center;
	justify-content: center;
	text-align: center;
	}

	.topnav.responsive img#netflix-symbol {
	max-width: 100px;
	position: absolute;
	left: 0;
	top: 0;
	}

	#netflix-symbol {
	max-width: 105px;
	}

	/* Makes sign in button and active nav link non visible on smaller screens */
	.topnav a.signin-btn,
	.topnav a.active:not(.topnav.responsive a.active) {
	display: none;
	}
	}

	/* Styling the scroll to top button */
	#to-top {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	border: 2px solid white;
	background-color: transparent;
	color: white;
	cursor: pointer;
	padding: 12px 14px 15px 14px;
	border-radius: 40px;
	font-size: 24px;
	}

	#to-top:hover {
	background-color: #555;
	}

	/* Styling the hero section */
	.hero {
	margin-bottom: 80px;
	margin-left: 17px;
	}

	#glory-logo {
	margin-left: -31px;
	max-width: 617px;
	display: block;
	filter: invert(1);
	}

	header {
	text-align: justify;
	margin-left: 30px;
	}

	.banner {
	display: block;
	max-width: fit-content;
	}

	.banner h1 {
	font-size: 40px;
	display: block;
	font-weight: 600;
	margin: 0;
	}

	.banner p {
	width: 550px;
	font-size: 24px;
	font-weight: 400;
	word-spacing: -1.6px;
	margin-bottom: 17px;
	}

	/* Call to action button: 'Watch Now'*/

	.cta-button {
	background: #e50914;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	padding: 15px 30px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	text-decoration: none;
	}

	.cta-button:hover {
	background: #ff141f;
	}

	/* Styling for YouTube trailer */
	.trailer {
	padding-top: 100px;
	padding-bottom: 300px;
	text-align: center;
	display: block;
	background-color: black;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background: linear-gradient(
	180deg,
	rgba(0, 0, 0, 0.01) 0%,
	rgb(0, 0, 0) 12%,
	rgba(0, 11, 21, 0.98) 71%,
	rgb(1, 43, 81) 90%,
	transparent 94%
	);
	}

	.trailer iframe {
	width: 100%;
	max-width: 800px;
	height: 450px;
	display: block;
	margin: auto;
	}

	/* Using a grid to overlap the trailer, image below and carousel for smooth gradient */
	.image-stack {
	display: grid;
	position: relative;
	grid-template-columns: repeat(12, 1fr);
	}

	.image-stack__item--top {
	grid-column: 1 / -1;
	grid-row: 1;
	z-index: 1;
	}

	.image-stack__item--bottom {
	grid-column: 1 / -1;
	grid-row: 1;
	padding-top: 57%;
	margin-bottom: -1%;
	}

	.image-stack__item--bottom2 {
	grid-column: 1 / -1;
	grid-row: 2;
	}

	#bg-image-2 {
	width: 100%;
	height: 100%;
	object-fit: contain;
	}

	/* Media queries for main body content */

	@media screen and (max-width: 820px) {
	html {
	overscroll-behavior: none;
	}
	/* Styling the parallax background photo */

	.content::before {
	/* height: 100%; */
	/* position: relative; */
	background: url(https://photos.hancinema.net/photos/fullsizephoto1603240.jpg);
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-position: center;
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	overflow-x: hidden;
	}

	.hero {
	margin-bottom: 40px;
	margin-left: 7px;
	}

	#glory-logo {
	margin-left: -25px;
	max-width: 308px;
	}

	header {
	margin-left: 24px;
	margin-right: 24px;
	}

	.banner {
	max-width: 100%;
	}

	.banner h1 {
	max-width: 100%;
	font-size: 26px;
	}

	.banner p {
	width: 300px;
	font-size: 17px;
	margin-right: 24px;
	word-spacing: -1.9px;
	}

	.cta-button {
	font-size: 17px;
	padding: 10px 15px;
	}

	/* Styling for YouTube trailer */
	.trailer {
	padding-top: 100px;
	padding-bottom: 300px;
	text-align: center;
	display: block;
	background-color: black;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background: linear-gradient(
	180deg,
	rgba(0, 0, 0, 0.01) 0%,
	rgb(0, 0, 0) 12%,
	rgba(0, 11, 21, 0.98) 71%,
	rgb(1, 43, 81) 90%,
	transparent 94%
	);
	}

	.container {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 62.5%;
	/* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	}

	.trailer-iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 90%;
	height: 100%;
	}

	.trailer h2 {
	font-size: 17px;
	}
	}

	@media screen and (max-width: 896px) {
	/* Using a grid to overlap the trailer, image below and carousel for smooth gradient */
	.image-stack {
	display: grid;
	position: relative;
	grid-template-columns: repeat(12, 1fr);
	}

	.image-stack__item--top {
	grid-column: 1 / -1;
	grid-row: 1;
	z-index: 1;
	}

	.image-stack__item--bottom {
	grid-column: 1 / -1;
	grid-row: 1;
	margin-top: 100%;
	margin-bottom: -2%;
	}

	.image-stack__item--bottom2 {
	grid-column: 1 / -1;
	grid-row: 2;
	}

	#bg-image-2 {
	display: block;
	width: 125%;
	margin-left: -30px;
	/* height: 100%; */
	object-fit: cover;
	overflow: hidden;
	}
	}

	@media screen and (max-width: 1280px) {
	.image-stack__item--bottom {
	margin-top: 8%;
	}
	}

	@media screen and (max-width: 1024px) {
	.image-stack__item--bottom {
	margin-top: 25%;
	}
	}

	@media screen and (max-width: 912px) {
	.image-stack__item--bottom {
	margin-top: 35%;
	}
	}

	@media screen and (max-width: 820px) {
	.image-stack__item--bottom {
	margin-top: 50%;
	}
	}

	@media screen and (max-width: 768px) {
	.image-stack__item--bottom {
	margin-top: 52%;
	}
	}

	@media screen and (max-width: 390px) {
	.image-stack__item--bottom {
	margin-top: 109%;
	}
	}

	@media screen and (max-width: 430px) {
	.image-stack__item--bottom {
	margin-top: 95%;
	}
	}

	@media screen and (max-width: 414px) {
	.image-stack__item--bottom {
	margin-top: 100%;
	}
	}

	@media screen and (max-width: 390px) {
	.image-stack__item--bottom {
	margin-top: 106%;
	}
	}

	@media screen and (max-width: 375px) {
	.image-stack__item--bottom {
	margin-top: 111%;
	}
	}

	@media screen and (max-width: 360px) {
	.image-stack__item--bottom {
	margin-top: 114%;
	}
	}

	@media screen and (max-width: 280px) {
	.image-stack__item--bottom {
	margin-top: 150%;
	}
	}

	.footer-box {
	display: block;
	background: linear-gradient(to bottom, rgba(11, 18, 24, 255), black 70%);
	padding: 30px;
	text-align: center;

	& .footer-email {
	font-size: 24px;
	color: white;
	}

	& .footer-links {
	margin-top: 15px;
	}

	& .fa {
	color: white;
	font-style: none;
	font-size: 40px;
	margin: 10px;
	text-decoration: none;
	}

	& p {
	font-size: 20px;

	& a {
	text-decoration: underline;
	color: white;
	}
	}
	& p.web-warning {
	font-size: 15px;
	}
	}

	/* Carousel Styling */
	main * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body main {
	height: 100vh;
	display: grid;
	place-items: center;
	overflow: hidden;
	}

	main {
	position: relative;
	width: 100%;
	height: 100%;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
	}

	.item {
	width: 200px;
	height: 300px;
	list-style-type: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	background-position: center;
	background-size: cover;
	border-radius: 20px;
	box-shadow: 0 20px 30px rgba(255, 255, 255, 0.3) inset;
	transition: transform 0.1s, left 0.75s, top 0.75s, width 0.75s, height 0.75s;

	&:nth-child(1),
	&:nth-child(2) {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform: none;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	}

	&:nth-child(3) {
	left: 50%;
	}

	&:nth-child(4) {
	left: calc(50% + 220px);
	}

	&:nth-child(5) {
	left: calc(50% + 440px);
	}

	&:nth-child(6) {
	left: calc(50% + 660px);
	opacity: 0;
	}
	}

	.carousel-content {
	width: min(30vw, 400px);
	position: absolute;
	top: 50%;
	left: 3rem;
	transform: translateY(-50%);
	font: 400 0.85rem "Figtree", sans-serif;
	color: white;
	text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
	opacity: 0;
	display: none;

	& .title {
	font-family: "Figtree", sans-serif;
	text-transform: uppercase;
	}

	& .description {
	line-height: 1.7;
	margin: 1rem 0 1.5rem;
	font-size: 1.2rem;
	font-weight: 500;
	}

	& button {
	width: fit-content;
	background-color: rgba(0, 0, 0, 0.1);
	color: white;
	border: 2px solid white;
	border-radius: 0.25rem;
	padding: 0.75rem;
	cursor: pointer;
	}
	}

	.item:nth-of-type(2) .carousel-content {
	display: block;
	animation: show 0.75s ease-in-out 0.3s forwards;
	}

	@keyframes show {
	0% {
	filter: blur(5px);
	transform: translateY(calc(-50% + 75px));
	}

	100% {
	opacity: 1;
	filter: blur(0);
	}
	}

	.nav {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	user-select: none;

	& .btn {
	background-color: rgba(255, 255, 255, 0.5);
	color: rgba(0, 0, 0, 0.7);
	border: 2px solid rgba(0, 0, 0, 0.6);
	margin: 0 0.25rem;
	padding: 0.75rem;
	border-radius: 50%;
	cursor: pointer;

	&:hover {
	background-color: rgba(255, 255, 255, 0.3);
	}
	}
	}

	@media (width > 650px) and (width < 820px) {
	.carousel-content {
	& .title {
	font-size: 1rem;
	}

	& .description {
	font-size: 0.9rem;
	}

	& button {
	font-size: 0.7rem;
	}
	}

	.item {
	width: 160px;
	height: 270px;

	&:nth-child(3) {
	left: 50%;
	}

	&:nth-child(4) {
	left: calc(50% + 170px);
	}

	&:nth-child(5) {
	left: calc(50% + 340px);
	}

	&:nth-child(6) {
	left: calc(50% + 510px);
	opacity: 0;
	}
	}
	}

	@media (width < 650px) {
	.carousel-content {
	& .title {
	font-size: 0.9rem;
	}

	& .description {
	font-size: 0.7rem;
	}

	& button {
	font-size: 0.7rem;
	}
	}

	.item {
	width: 130px;
	height: 220px;

	&:nth-child(3) {
	left: 50%;
	}

	&:nth-child(4) {
	left: calc(50% + 140px);
	}

	&:nth-child(5) {
	left: calc(50% + 280px);
	}

	&:nth-child(6) {
	left: calc(50% + 420px);
	opacity: 0;
	}
	}
	}