Shopify Template Code - 1

Shopify Template Code - 1

<!DOCTYPE html>
<html lang="en" >
  <meta charset="UTF-8">
  <title>Rapid Prototyping</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Example for rapid prototyping with CSS Grid Layout with focus on 'grid areas'.">

.topbar {
  grid-area: topbar;
header {
  grid-area: header;
nav {
  grid-area: nav;
.hero {
  grid-area: hero;
.team {
  grid-area: team;
main {
  grid-area: main;
aside {
  grid-area: aside;
.teaser {
  grid-area: teaser;
footer {
  grid-area: footer;

/* Styles for the grid container */
.grid-container {
  display: grid;
   /* Styles for the placement of the grid areas */
  grid-gap: .5rem;
  padding: .25rem;
@media only screen and (min-width: 550px) {
  .grid-container {
    grid-template-columns: repeat(2,1fr);
      "topbar topbar"
      "header header"
      "nav nav"
      "hero hero"
      "team team"
      "main main"
      "aside ."
      "teaser teaser"
      "footer footer";
@media only screen and (min-width: 800px) {
  .grid-container {
    grid-template-columns: repeat(3,1fr);
      "topbar topbar topbar"
      "header header header"
      "nav nav nav"
      "hero hero hero"
      "team team team"
      "aside main main"
      "teaser teaser teaser"
      "footer footer footer";

/* Styles for the grid items */
.grid-box {
  padding: .5rem;
/* Styles for the HTML elements */

.topbar, header, nav, .hero, aside, main, .teaser, footer, .team {
  background-color: #24272B;
  color: whitesmoke;

      <div class="grid-container">
            <div class="grid-box topbar">
                  <p>Info bar</p>
            <header class="grid-box header">
            <div class="grid-box hero">
                 Hero image
           <main class="grid-box">
           <aside class="grid-box">
           <div class="teaser">
                Call to action
           <footer class="grid-box">

Free shipping when you spend $50 or more.

Shop Now