CodePen Embed - HowlsMovingCastlePage-FanPage

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <video id="cloud-background" autoplay muted loop>
      <source src="https://drive.google.com/uc?export=download&id=1RpggophiRHmo0tQASt0vRJ3r7TcuS1WJ" type="video/mp4" />
      Your browser does not support this video.
    </video>

    <nav class="navbar">
      <a href="#section1">Section 1</a>
      <a href="#hero">Home</a>
      <a href="#section2">Section 2</a>
    </nav>

    <section id="hero">
      <div id="hero-image"></div>
    </section>

    <section id="transition" class="section">
      <div class="card">
      <div class="card__front">
        <img src="https://i.imgur.com/9dDFYB9.png" alt="Futuristic GBA" class="card__image">
        <h3 class="card__title">Create Games</h3>
        <p class="card__description">Create Games Web. Create games in order to stock the web store.</p>
      </div>
      <div class="card__back">
        <a href="#" class="card__link">Click <strong>Here</strong> to go to page for creating Games!</a>
      </div>
    </div>

    <div class="card">
      <div class="card__front">
        <img src="https://i.imgur.com/sVPL9xD.png" alt="Futuristic PS4" class="card__image">
        <h3 class="card__title">Create Consoles</h3>
        <p class="card__description">Create Consoles Web. Create consoles in order to stock the web store.</p>
      </div>
      <div class="card__back">
        <a href="#" class="card__link">Click <strong>Here</strong> to go to page for creating Consoles!</a>
      </div>
    </div>
<div class="card">
      <div class="card__front">
        <img src="https://i.imgur.com/IMKWUEB.png" alt="Futuristic Shirt" class="card__image">
        <h3 class="card__title">Create T-Shirts</h3>
        <p class="card__description">Create T-shirta Web. Create T-Shirts in order to stock the web store.</p>
      </div>
      <div class="card__back">
        <a href="#" class="card__link">Click <strong>Here</strong> to go to page for creating T-Shirts!</a>
      </div>
    </div>
      <div class="card">
      <div class="card__front">
        <img src="https://i.imgur.com/IMKWUEB.png" alt="Futuristic Shirt" class="card__image">
        <h3 class="card__title">Create T-Shirts</h3>
        <p class="card__description">Create T-shirta Web. Create T-Shirts in order to stock the web store.</p>
      </div>
      <div class="card__back">
        <a href="#" class="card__link">Click <strong>Here</strong> to go to page for creating T-Shirts!</a>
      </div>
    </div>
      <div class="card">
      <div class="card__front">
        <img src="https://i.imgur.com/IMKWUEB.png" alt="Futuristic Shirt" class="card__image">
        <h3 class="card__title">Create T-Shirts</h3>
        <p class="card__description">Create T-shirta Web. Create T-Shirts in order to stock the web store.</p>
      </div>
      <div class="card__back">
        <a href="#" class="card__link">Click <strong>Here</strong> to go to page for creating T-Shirts!</a>
      </div>
    </div>
      <div class="card">
      <div class="card__front">
        <img src="https://i.imgur.com/IMKWUEB.png" alt="Futuristic Shirt" class="card__image">
        <h3 class="card__title">Create T-Shirts</h3>
        <p class="card__description">Create T-shirta Web. Create T-Shirts in order to stock the web store.</p>
      </div>
      <div class="card__back">
        <a href="#" class="card__link">Click <strong>Here</strong> to go to page for creating T-Shirts!</a>
      </div>
    </div>
      
      
    <!-- Add more cards  -->
    </section>

    <section id="section1" class="section">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus auctor, dui in lacinia luctus, risus orci fermentum mi, quis convallis mauris ex sed sem. Vivamus eu feugiat eros.</p>
    </section>

    <section id="section2" class="section glass">
      <div>
        <h2>Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus auctor, dui in lacinia luctus, risus orci fermentum mi, quis convallis mauris ex sed sem. Vivamus eu feugiat eros.</p>
      </div>
      <img src="https://i.imgur.com/DMH0gG2.png" alt="Image Description">
    </section>
  </body>
</html>

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}
body, html {
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  background: transparent;
  
}

#cloud-background {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

/* Navigation */
.navbar {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 80px;
  background-color: rgba(255,255,255,0.6);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar a {
  color: #333;
  text-decoration: none;
  font-size: 1.2em;
  transition: color 0.3s ease-in-out;
}

.navbar a:hover {
  color: #777;
}

/* Hero Section */

#hero {
  position: relative;
  width: 100%;
  height: 100vh; 
}

#hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://i.imgur.com/DMH0gG2.png') center no-repeat;
  background-size: cover;
}

/* Transition From Hero */

#transition {
  height: auto;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  padding: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

/* Card Style */
.card {
  perspective: 1000px;
  position: relative;
  width: 200px; /* default width for larger screens */
  height: 300px;
  margin: 1em;
}

@media screen and (max-width: 600px) { /* adjust breakpoint as needed */
  .card {
    width: 80vw; /* make the card width relative to the viewport width */
  }
}


.card__front,
.card__back {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform 0.7s ease-in-out;
  backface-visibility: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.card__front {
  background-color: #E5E4E2;
  color: #000;
}

.card__image {
  width: 100%;
  height: auto;
}

.card__back {
  background-color: #E5E4E2;
  color: #000;
  transform: rotateY(180deg);
}

.card:hover .card__front {
  transform: rotateY(180deg);
}

.card:hover .card__back {
  transform: rotateY(0);
}

.card a {
  color: inherit;
  text-decoration: none;
}

/* Sections Base Style */

.section {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px;
}

.section p {
  max-width: 80%;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 10px;
  margin: 0 auto;
  text-align: justify;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.glass {
  width: 90%;
  height: auto;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  margin: 40px auto;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.glass div {
  max-width: 45%;
}

.glass img {
  max-width: 45%;
  transition: transform 0.3s ease-in-out;
}

.glass img:hover {
  transform: scale(1.1);
}

View Compiled

This Pen is owned by bryanmax9 on CodePen.

See more by @bryanmax9 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.