HTML Code

HTML Code for the Website
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="alex" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
      background-color: rgb(0, 0, 0);
      color: white;
      font-family: 'Arial', sans-serif;
    }

    .video-container {
      position: relative;
      width: 50%;
      height: 100%;
      overflow: hidden;
    }

    .background-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .text-container {
      position: absolute;
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .left-text {
      font-family: 'Courier New', Courier, monospace;
      text-align: left;
      left: 100px;
      top: -200px; /* Move the left text up by 200 pixels */
    }

    .right-text {
      font-family: 'Courier New', Courier, monospace;
      text-align: right;
      right: 150px;
      top: -200px; /* Move the right text up by 200 pixels */
    }

    .image-container {
      position: absolute;
      top: 0px;
      right: 300px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .image-container2 {
      position: absolute;
      top: 0px;
      right: 50px;
      height: 112%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .image-container img,
    .image-container2 img {
      width: 50px;
      height: 50px;
      margin-bottom: 10px; /* Adjust the margin between images */
    }

    .image-description {
      text-align: center;
      font-size: 12px;
    }
  </style>
  <title>Aftermath</title>
</head>
<body>
    <div class="text-container left-text">
        <p>Information</p>
      </div>

      <div class="text-container right-text">
        <p>Staff Members</p>
      </div>

  <div class="video-container">
    <video class="background-video" autoplay loop muted>
      <source src="aftermath.mp4" type="video/mp4">
    </video>
  </div>

  <div class="image-container">
    <!-- Repeat the following lines for each image -->
<!-- Repeat the following lines for each image -->
<img src="harvestZ.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">harvestyt</div>

<img src="Mr. Brollow.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">brollow</div>

<img src="ZomB.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">bgeorge3</div>

<img src="Dotz.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">dotz105</div>

<img src="Bartard.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">bartard</div>

<img src="MrIncognito.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">mrincognito</div>

<img src="DrunkVolcano.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">drunkvolcano</div>

<img src="CheeseRat.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">freddycutter</div>

<img src="fishdoor222.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">fishdoor222</div>

<img src="Enji.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">enjifromph</div>

    <!-- Add more images and descriptions as needed -->
  </div>

  <div class="image-container2">
<img src="Dan.gif" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">ldanas</div>

<img src="Bruno.gif" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">bruno.is.pretty.much.insane</div>

<img src="Companion.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">Companion#9160</div>

<img src="Flerb.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">Flerb#9986</div>

<img src="FreeTech.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">freetech</div>

<img src="Gus.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">guthrum</div>

<img src="SaveData.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">savedata.</div>

<img src="sluice.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">sluice.</div>

<img src="Zennara.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">zennara</div>

<img src="BROTHER.png" style="margin-bottom: 5px;">
<div class="image-description" style="margin-bottom: 15px;">holla.</div>

    <!-- Add more images and descriptions as needed -->
  </div>
</body>
</html>
Editor is loading...