Simple Hero Image Display

INFORMATION & CODE

Hero-Image

What the Code Does

This code is a responsive front-end template that provides a layout switcher, allowing users to toggle between a single "hero image" view and a multi-item "grid view" showcasing different profiles or portfolios. It combines HTML structure, CSS styling, and JavaScript interactivity to create a clean, card-based display complete with background images, descriptive text overlays, and responsive media queries for smaller screens.

How the Code Work

How it works is that the HTML establishes the core structure, including a navigation box with two buttons, a single featured image container, and a three-column grid container holding multiple profile cards. The CSS styles these elements using modern layout techniques like CSS Grid, absolute positioning for text overlays, and rounded, shadow-enhanced boxes. It also includes responsive @media queries that adjust the grid columns and element heights when viewed on mobile devices or narrower screens.

The accompanying JavaScript brings the interface to life by listening for click events on the navigation buttons. When the first button ("Default") is clicked, it displays the single hero image while hiding the grid. When the second button ("Grid view") is clicked, it switches the display properties to show the multi-image grid and hide the single image.

How to Use the Code

To use this code, you need to split it into three separate files within the same directory: an HTML file containing the markup, and named index.html, a CSS file named styles.css containing the design rules, and a JavaScript file named scripts.js containing the interactivity logic. To combine the HTML, CSS (wrapped in a <style> tag within the <head>), and JavaScript (wrapped in a <script> tag at the bottom of the <body> or in an external file) into a single .html file. You can then open the file in any web browser to view the interface and click the buttons to toggle between the default and grid layouts. To customize it, simply replace the placeholder image URLs with your own assets and update the text content with your desired profile information.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UFT-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Hero Image Display</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js" crossorigin></script>
  </head>
  <body>
    <div class="outer_page">
      <h1>Hero Image</h1>
      <div class="link_box">
        <button type="link" class="link_btn">Default » </button>
        <button type="link" class="link_btn">grid view » </button>
      </div>
      <div class="hero_image">
        <div class="text">
          <h2>Jennie</h2> 
          <h2>Lin</h2>
          <h3>Freelance Photographer</h3>
          <p>Enail: jenneylin@mail.com</p>
          <p>Mobile: 09876543210</p>
        </div>
      </div>
    
      <div class="hero_image_grid">
        <div class="grid-image">
          <div class="image">
            <div class="text">
              <h2>John</>
              <h2>Doe</h2>
              <h3>Photographer</h3>
              <p>Email: johndoe@mail.com</p>
              <p>Mobile: 01234567890</p>
            </div>
          </div>
        </div>
        <div class="grid-image">
          <div class="image" id="img1">
            <div class="bottom_text">
              <h2>Pat</> 
              <h2>Cley</h2>
              <h3>Potter</h3>
              <p>Email: patclay@mail.com</p>
              <p>09876543210</p>
            </div>
          </div>
        </div>
        <div class="grid-image">
          <div class="image" id="img2">
            <div class="text">
              <h2>Dave</h2> 
              <h2>Hickory</h2>
              <h3>Chef</h3>
              <p>Email: chefhickory@mail.com</p>
              <p>Telephone: 05432167890</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                      .link_box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        width: 400px;
        padding: 20px 10px;
        margin: 0 auto 20px auto;
        border: var(--btn-border);
      }

      .link_btn {
        width: 100%;
        padding: 10px;
      }
                  
      .hero_image {
        display: none;
        position: relative;
        top: 20px;
        left: 50%;
        transform: translatex(-50%);
        max-width: 600px;
        height: 400px;
        padding: 10px 10px;
        margin-bottom: 20px;
        background-image: url("https://e-nash.net/photos/puppy-3688871_1920.jpg");
        background-size: cover;
        border: 2px solid #ffffff;
        border-radius: 20px;
        box-shadow: 2px 2px 7px #333333;
      }
      
      @media(max-width: 780px) {
        .hero_image {
          height: 60vw;
          font-size: 14px
        }
      }
      
      .active.hero_image {
        display: none;
      }
      
      .hero_image:hover {
        box-shadow: 2px 2px 15px #000000;
      }

      .hero_image_grid {
        display: none;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
        padding: 20px;
        margin: 20px 0 20px 0;
        background-color: #ffffff;
        border-radius: 20px;
        overflow: hidden;
      }
      
      @media(max-width: 780px) {
        .hero_image_grid {
          grid-template-columns: 1fr;
        }
      }
      
      .hero_image_grid:hover {
        box-shadow: 4px 4px 15px #000000;
      }
      
      .grid-image {
        background-color: rgba(170, 170, 170, 0.5);
        border: 2px solid #ffffff;
        border-radius: 20px;
        box-shadow: 2px 2px 7px #333333;
        overflow: hidden;
      }
      
      .image {
        position: relative;
        width: 100%;
        height: 610px;
        padding: 10px;
        background-image: url("https://e-nash.net/photos/photographer-1096369_1920.jpg");
        background-size: cover;
        box-shadow: 2px 2px 7px #333333;
      }
      
      #img1 {
        background-image: url("https://e-nash.net/photos/pottery-gce9908d5e_1920.jpg");
      }
      
      #img2 {
        background-image: url("https://e-nash.net/photos/man-890885_1920.jpg");
      }
      
      @media(max-width: 980px) {
        .image {
          height: 540px;
        }
      }
      
      .text {
        font-size: 12px;
        width: 230px;
        padding: 10px;
        background-color: rgba(124, 124, 124, 0.5);
        border-radius: 10px;
      }
      @media(max-width: 980px) {
        .text {
          font-size: 12px;
          width: 200px;
        }
      }
      .bottom_text {
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 210px;
        padding: 10px;
        background-color: rgba(124, 124, 124, 0.5);
        border-radius: 10px;
        color: #ffffff;
        font-size: 12px;
      }
      @media(max-width: 980px) {
        .bottom_text {
          font-size: 12px;
          width: 200px;
        }
      }
      .text h2,
      .text h3,
      .text p {
        color: #ffffff;
        line-height: 2px;
        font-family: "Courier New", monospace;
        font-weight: 700;
      }

      .text p {
        font-size: 12px;
      }

      .bottom_text h2,
      .bottom_text h3,
      .bottom_text p {
        color: #ffffff;
        line-height: 2px;
        font-family: "Courier New", monospace;
        font-weight: 700;
      }

      .bottom_text p {
        font-size: 12px;
      }

JAVASCRIPT


                const sglimage = document.querySelector(".hero_image");
const multimage = document.querySelector(".hero_image_grid");
const link = document.querySelectorAll(".link_btn");
      
link[0].onclick = function() {
  sglimage.style.display = "block";
  multimage.style.display = "none";
}
link[1].onclick = function() {
  multimage.style.display = "grid";
  sglimage.style.display = "none";
}

MENU

INFORMATION & CODE

Hero-Image

What the Code Does

How the Code Work

How to Use the Code

HTML

CSS

JAVASCRIPT

PREVIEW

Hero Image

Jennie

Lin

Freelance Photographer

John

Doe

Photographer

Pat

Cley

Potter

Dave

Hickory

Chef