Simple Image Gallery Display

INFORMATION & CODE

Simple Image Gallery Display

What the code does

This code provides the foundation for a responsive, multi-column web page layout featuring a simple image gallery combined with a text block. Designed with a distinct retro aesthetic, it imports pixel-art style fonts ("Press Start 2P" and "VT323") from Google Fonts and includes FontAwesome for potential icon integration. The layout is structured to hold three primary content sections—two containing images and one containing a paragraph of placeholder text—all wrapped inside a centralized container that scales up to a maximum width of 1200 pixels.

How the code works

The visual arrangement works by utilizing CSS floats to place the different content containers side-by-side on desktop screens, mimicking a multi-column magazine or portfolio layout. The first section (.col) takes up a narrow vertical slice of the layout to display two stacked images, the middle section (.column) features a larger, offset featured image, and the final section (.cor) holds a paragraph of text styled with a light gray background and precisely positioned margins to align with the visual flow of the images. Additionally, the stylesheet includes a media query targeting screens narrower than 780 pixels; when triggered, this responsive behavior overrides the desktop floating columns, stacking the images and text vertically so the page remains easily readable and visually appealing on mobile devices.

How to use the code

To use this code, you need to split it into two separate files within the same directory on your computer: save the HTML portion as index.html and the CSS portion as styles.css (ensuring the CSS file name matches the <link rel="stylesheet" href="styles.css"> reference in the HTML <head>). Once saved, you can simply open the index.html file in any modern web browser to view the gallery. You can customize the page by replacing the placeholder image URLs with your own image links, swapping out the placeholder Latin text with your own content, or adjusting the CSS pixel dimensions if you want to alter the specific proportions of the columns for your own projects.

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 Image Gallery 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="wrapper">
      <div class="col">
        <img src ="https://e-nash.net/photos/pottery-gce9908d5e_1920.jpg" alt="potter at work"/>
        <img src ="https://e-nash.net/photos/photographer-1096369_1920.jpg" alt="professional photographer"/>
      </div>
      <div class="column">
        <img src ="https://e-nash.net/photos/seminar-512034_1920.jpg" class="img" alt="set up for seminar"/>
      </div>
      <div class="cor">
        <p>Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et.</p>
      </div>
    </div>
  </body>
</html>

CSS


                      * {
        box-sizing: border-box;
        font-family: "Press Start 2P", VT323, cursive;
      }
      body {
        padding: 10px;
        margin: 0;
      }
      .wrapper {
        max-width: 1200px;
        margin: auto;
      }
      .col {
        float: left;
        width: 17.5%;
        padding: 10px;
      }
      .cor {
        position: relative;
        float: left;
        width: calc(17.5% - 20px);
        padding: 10px;
        margin: 20px 0 0 20px; 
        background-color: #efefef;
      }
      .column {
        float: left;
        width: calc(65% - 20px);
        margin-left: 20px;
        padding: 10px;
        overflow: hidden;
      }
    @media(max-width: 780px) {
      .col,
      .cor,
      .column {
        width: calc(100% - 20px);
      }
    }
    @media(max-width: 780px) {
      .cor {
        margin-bottom: 40px;
      }
    }
      img {
        width: 100%;
        margin: 10px;
      }
    @media(max-width: 780px) {
      img {
        width: 103.5%;
        margin: 10px 0 10px 10px;
      }
    }
      .img {
        width: 115.25%;
        height: 595px;
        margin-left: -13%;
      }
      p {
        margin-top: 467px;
        color: #777;
        font-family: "VT323", cursive;          
        font-size: 16px;
        font-weight: 700;
        text-align: justify;
      }
    @media(max-width: 780px) {
      p {
        margin: 10px;
      }
    }

MENU

INFORMATION & CODE