Order Summary

INFORMATION & CODE

Order Summary

This code provides the structure and styling for a retro-themed "Order Summary" card, commonly found in shopping cart interfaces. It uses HTML for the content layout and CSS to create a clean, organized, and slightly nostalgic aesthetic through the use of specific fonts like "Press Start 2P" and "VT323."

How it Works

The HTML document organizes the order details into a "card" container. It utilizes a row and column structure—mimicking a table layout—to align product images, descriptions, and prices horizontally. It separates the page into three primary sections: two product rows, a discount coupon entry field, and a final price breakdown (subtotal, VAT, and total).

The CSS handles the visual presentation. It uses a :root block to define a color palette and shadow settings for consistency. A significant portion of the code is dedicated to Media Queries (@media). These rules detect the user's screen size and automatically adjust elements like image sizes, button positioning, and column widths to ensure the page remains readable on mobile devices, tablets, and desktops.

How to Use It

To use this code, you should follow these steps:

Create Files: Create two separate files in the same folder named index.html and styles.css.
Linking: Copy the HTML provided into your index.html file. Ensure the CSS file is linked correctly by adding <link rel="stylesheet" href="styles.css"> inside the <head> section of your HTML (currently, the provided CSS is separate, so you must link it for the styles to apply).
Deployment: You can open the index.html file in any modern web browser to view the order summary card.
Customization:

Content: Modify the text inside the <h3> and <p> tags within the HTML to update the product names, colors, or prices.
Images: Update the src attribute in the <img> tags to point to your own product images.
Styling: You can adjust the colors or fonts in the :root section of the CSS to change the entire theme of the card without needing to edit the HTML structure.

Note: This code serves as a visual template. The "APPLY" button and the calculated totals are currently static elements; to make them functional, you would need to integrate JavaScript to handle the click events and dynamic math.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UFT-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order Summary</title>
    <link rel="icon" type="image/x-icon" href="https://e-nash.net/photos/modules-favicon.png">
    <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="anonymous"></script>
  </head>
  <body>
    <div class="card">
      <div class="row">
        <div class="column-left">
          <div class="order-container">
            <img src="https://e-nash.net/photos/white_t-shirt.jpg" class="image" alt="White T-shirt">
          </div>
        </div>
        <div class="column-middle">
          <div class="order-container">
            <h3>T-Shirt One</h3>
            <p>Color: White, Size: M, Qty: 1</p>
          </div>
        </div>
        <div class="column-right">
          <div class="order-container">
            <h4>£ 35.95</h4>
          </div>
        </div>
      </div>
           
      <div class="row">
        <div class="column-left" id="last-child">
          <div class="order-container">
            <img src="https://e-nash.net/photos/Red_t-shirt.jpg" class="image" alt="Red T-shirt">
          </div>
        </div>
        <div class="column-middle">
          <div class="order-container">
            <h3>T-Shirt One</h3>
            <p>Color: Red, Size: M, Qty: 1</p>
          </div>
        </div>
        <div class="column-right">
          <div class="order-container">
            <h4>£ 35.95</h4>
          </div>
        </div>
      </div>
   
      <div class="row">
        <div class="button-wrapper">
          <h3 class="coupon">Discount Coupon Code</h3>
          <button type="button" class="button">
          <h3 class="coupon">APPLY</h3>
        </button>
      </div>
    
            
      <div class="row">
        <div class="col-left">
          <p>Subtotal</p>
          <p>VAT</p>
          <p>Delivery</p>
          <h4>Total</h4>
        </div>
        <div class="col-right">
          <p>£ 71.90</p>
          <p>£ 14.18</p>
          <p>£ 00.00</p>
          <h4>£ 85.08</h4>
        </div>
      </div>
    </div>
  </body>
</html>

CSS


                :root {
  --bg-color: #f5f5f5;
  --bg-primary: #d1d1d1;
  --bg-secondary: #e0e0e0;
  --border-light: 3px inset #ffffff;
  --border-dark: 2px solid #878787;
  --btn-border: 3px outset #ffffff; 
  --color-light: #878787;
  --color-dark: #444444;
  --shadow: 3px 4px 15px rgba(0, 0, 0, 0.3);
}
* {
  box-sizing: border-box;
  font-family: "Press Start 2P", VT323, cursive;
}
body {
  height: 98.5vh;
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  font-size: 16px;
  line-height: 1.5;
}
.card {
  width: 100%;
  max-width: 600px;
  min-height: 500px;
  padding: 20px;
  margin: auto;
  background-color: #fdfdf5;
	border-radius: 6px;
  box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2);
	overflow: hidden;
}
.row {
  display: table;
  width: 100%;
}
.row:nth-child(3) {
  width: 100%;
  padding: 8px;
  border-bottom: 1px solid #aaa;
}
.column-left {
  display: table-cell;
  width: 20%;
  margin-bottom: 16px;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  padding: 8px;
}
@media(max-width: 400px) {
  .column-left {
    padding: 8px;
  }
}
.column-middle {
  display: table-cell;
  width: 50%;
  margin-bottom: 16px;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  padding: 8px;
}
.column-right {
  display: table-cell;
  width: 25%;
  margin-bottom: 16px;
  border-bottom: 1px solid #aaa;
  padding: 8px;
}
@media(max-width: 400px) {
  .column-right {
    min-width: 100px;
  }
}
.order-container {
  display: table-cell;
  padding: 8px;
}
.order-container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}
img.image {
  position: relative;
  top: 32px;
  width: 100%;
  border: 1px solid #aaa;
}
@media(max-width: 600px) {
  img.image {
    width: 50px;
  }
}
h3, h4, p {
  position: relative;
  top: -24px;
  display: block;
  font-family: "VT323", cursive;
  font-size: 22px;
  color: var(--color-dark);
}
      
.button-wrapper {
  display: inline-block;
  width: 78%;
  max-height: 44px;
  padding: 0 20px;
  background-color: #efe;
  border: 2px solid #aaa;
  border-radius: 6px;
}
@media(max-width: 600px) {
  .button-wrapper {
    width: 69%;
  }
}
h3.coupon {
  font-family: "VT323", cursive;
  font-size: 24px;
  color: var(--color-dark);
  margin-top: 20px;
  padding: 5px;
  text-align: center;
}
@media(max-width: 600px) {
  h3.coupon {
    font-size: 22px;
  }
}
button[type="button"] {
  float: right;
  position: relative;
  top: -92px;
  left: 130px;
  width: 80px;
  height: 44px;
  max-height: 44px;
  padding: 5px 0 0 0;
  background-color: #def;
  border: 2px solid #aaa;
  border-radius: 6px;
}
@media(max-width: 600px) {
  button[type="button"] {
    top: -38px;
  }
}
@media(max-width: 400px) {
  button[type="button"] {
    top: -58px;
  }
}
.col-left {
  display: table-cell;
  width: 80%;
  padding: 40px 20px;
  border-right: 1px solid #aaa;
}
.col-right {
  display: table-cell;
  width: 20%;
  min-width: 100px;
  padding: 40px 20px;
}
.col-left p,
.col-right p,
.col-left h4,
.col-right h4 {
  line-height: 1;
}

MENU

INFORMATION & CODE

Order Summary

How it Works

How to Use It

HTML

CSS

PREVIEW

T-Shirt One

£ 35.95

T-Shirt One

£ 35.95

Discount Coupon Code

APPLY

Total

£ 85.08