Full Page Feature Display

INFORMATION & CODE

Full Page Feature Display

What the Code Does

This code provides the HTML structure and CSS styling for a responsive, two-column "Full Page Feature Card." It is designed to showcase a product, service, or article by placing promotional text, a label, and a call-to-action button on one side, paired with a complementary feature image on the other.

How the Code Works

The code works by wrapping the layout inside a main container (.feature-wrapper) and splitting it into two equal columns using CSS floats and a 50% width distribution. The first column contains the textual elements—such as a small introductory label, a heading, a descriptive paragraph, and a styled download button—while the second column centers and displays a responsive feature image. Additionally, the CSS incorporates media queries to handle smaller screens (such as tablets and mobile devices), automatically stacking the columns vertically and adjusting font sizes and spacing to ensure the layout remains clean and readable across different screen resolutions.

How to Use the Code

To use this code, simply create an HTML file and paste the HTML markup into the <body> section, making sure to include the Google Fonts and FontAwesome script links in the <head>. Next, create a separate file named styles.css (or place the CSS code inside a <style> tag within the HTML document's <head>) to apply the visual design. You can easily customize the card by replacing the placeholder text (Lorem ipsum...), updating the image URL in the src attribute to point to your own graphic, and modifying the CSS color values to match your website's branding.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Full Page Feature Card</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="feature-wrapper">
      <div class="column">
        <label>Small Introduction</label>
        <h1>Lorem ipsum dolor sit.</h1>
        <p>
          Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et
          eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur
          eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad.
        </p>
        <button class="download_btn">Download</button>
      </div>
      <div class="column">
        <img src = "https://e-nash.net/photos/vpn-6332592_1920.jpg"class="img" alt="laptop packages">
      </div>
    </div>
  </body>
</html>

CSS


                      .feature-wrapper {
        width: 100%;
        height: 100%;
        padding: 10px;
        margin-top: 30px;
        border: 1px solid #aaaaaa;
        border-radius: 20px;
        overflow-y: auto;
      }
      .column {
        position: relative;
        float: left;
        width: 50%;
        height: 100%;
        padding: 10px;
        background-color: #efefef;
        border-radius: 0;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        overflow-y: auto;
      }
      .column:last-child {
        background-color: #dedede;
        border-radius: 0;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
      }
      @media(max-width: 980px) {
        .column {
          width: 100%;
          padding: 0; 
          border-radius: 0;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
        }
        .column:last-child {
          border-radius: 0;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
        }
      }
      label {
        position: relative;
        top: 50px;
        left: 1.5vw;
        color: #a1a1a1;
        font-size: 0.25vw;
      }
      @media(max-width: 480px) {
        label {
          top: 0px;
        }
      }
      .feature-wrapper h1 {
        position: relative;
        top: 70px;
        left: 7vw;
        width: 80%;
        color: #00cc00
        font-size: 6vw;
      }
      .feature-wrapper p {
        position: relative;
        top: 70px;
        left: 50px;
        right: 50px;
        width: calc(100% - 100px);
        color: #777777;
        font-size: 3vw;
        text-align: justify;
      }
      @media(max-width: 980px) {
        label {
          top: 10px;
          font-size: 1.25vw;
        }
        .feature-wrapper h1 {
          top: 0px;
          left: 6.5vw;
          font-size: 8vw;
        }
        .feature-wrapper p {
          top: 0px;
          left: 30px;
          right: 20px;
          width: calc(100% - 40px);
          font-size: 2vw;
        }
      }
      @media(max-width: 480px) {
        .feature-wrapper p {
          font-size: 3vw;
        }
        label {
          top: 0px;
          font-size: 2.5vw;
        }
      }
      .download_btn {
        display: block;
        margin: 90px 0 0 50px;
        padding: 8px 20px;
        background-color: #00aaff;
        border: 0;
        border-radius: 6px;
        outline: 0;
        color: #ffffff;
        font-weight: 900;
      }
      @media(max-width: 980px) {
        .download_btn {
          padding: 5px 15px;
          margin: 10px 0 0 20px;
          font-size: 12px;
        }
      }
      .download_btn:hover {
        background-color: #00a0f0;
      }
      .download_btn:active {
        background-color: #0090e0;
      }
      .img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        border-radius: 10px;
      }

MENU

INFORMATION & CODE