Shopify Template Code - 2

Shopify Template Code - 2

<!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'.">

body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-family: Georgia, serif;
  background-color: #F8F4F4;
  width: 100%;
  color: #222; }
.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;
/* Defining the subgrid areas */
.topbar-box-1 {
  grid-area: topbar-box-1;
.topbar-box-2 {
  grid-area: topbar-box-2;
.topbar-box-3 {
  grid-area: topbar-box-3;
.topbar-box-4 {
  grid-area: topbar-box-4;
/* Styles for the nested grid container */
.sub_grid_topbar {
  display: grid;
  grid-template-columns: repeat(2,1fr);
    "topbar-box-1 topbar-box-2"
    "topbar-box-3 topbar-box-4";
/* Media query for the nested grid container */
@media only screen and (min-width: 800px) {
  .sub_grid_topbar {
    grid-template-columns: repeat(4,1fr);
      "topbar-box-1 topbar-box-2 topbar-box-3 topbar-box-4";

/* Styles for the sub-grid items */
.sub-grid-box {
  padding: .5rem;
  background-color: #7F7F7F;
  color: #fff;

      <div class="grid-container">
            <div class="grid-box topbar sub_grid_topbar">
              <div class="topbar_box_1">
                Phone #
              <div class="topbar_box_2">
              <div class="topbar_box_3">
              <div class="topbar_box_4">
            <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