Shopify Template Code - 11

Shopify Template Code - 11

<!DOCTYPE html>
<html lang="en" >
<head>
  <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'.">

<style>
body, .topbar, header, nav, .hero, aside, main, .teaser, footer{
  background-color: #222;
}
body, .button, .section h3 {
  font-family: Georgia, serif;
}
body, .button {
  color: whitesmoke;
}
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  width: 100%;
  margin: 0;
  padding: 0;
}
.topbar {
  grid-area: topbar;
  font-size: 1rem;
}
header {
  grid-area: header;
}
nav {
  grid-area: nav;
}
.hero {
  grid-area: hero;
}
.featured {
  grid-area: featured;
}
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-template-areas:
    "topbar"
    "header"
    "nav"
    "hero"
    "featured"
    "main"
    "aside"
    "teaser"
    "footer";
  grid-gap: .5rem;
  padding: .25rem;
}
@media only screen and (min-width: 550px) {
  .grid-container {
    grid-template-columns: repeat(2,1fr);
    grid-template-areas:
      "topbar topbar"
      "header header"
      "nav nav"
      "hero hero"
      "featured featured"
      "main main"
      "aside ."
      "teaser teaser"
      "footer footer";
  }
}
@media only screen and (min-width: 800px) {
  .grid-container {
    grid-template-columns: repeat(3,1fr);
    grid-template-areas:
      "topbar topbar topbar"
      "header header header"
      "nav nav nav"
      "hero hero hero"
      "featured featured featured"
      "aside main main"
      "teaser teaser teaser"
      "footer footer footer";
  }
}

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


/* 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(1,1fr);
  grid-template-areas:
    "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);
    grid-template-areas:
      "topbar_box_1 topbar_box_2 topbar_box_3 topbar_box_4";
  }
}
/* Defining the subgrid areas */
.header_box_1 {
  grid-area: header_box_1;
}
.header_box_2 {
  grid-area: header_box_2;
}
.header_box_3 {
  grid-area: header_box_3;
}
.header_box_4 {
  grid-area: header_box_4;
}
/* Styles for the nested grid container */
.sub_grid_header {
  display: grid;
  grid-template-columns: repeat(1,1fr);
  grid-template-areas:
    "header_box_1"
    "header_box_2"
    "header_box_3"
    "header_box_4";

}
/* Media query for the nested grid container */
@media only screen and (min-width: 800px) {
  .sub_grid_header {
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
      "header_box_1 header_box_2 header_box_3 header_box_4";
  }
}

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


.section h3, {
  color: #d00;
}
.button {
  background-color: #d00;
  color: whitesmoke;
}
.new {
  background-color: darkslategray;
}
.button:hover {
  background: #FAEBD7;
  color: #444;
}
.section h3, .new {
  color: burlywood;
}

.button {
  display: inline-block;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-align: center;
  padding: 0.75em 2em;
  cursor: pointer;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2);
  width: fit-content;
}

.block {
  display: block;
  width: 100%;
  border: none;
}

.new {
  padding: 0.5em 1em;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  font-size: 0.85em;
  width: fit-content;
}

.section {
  padding: 4em 0;
}
.section h3 {
  font-size: 2em;
  line-height: 1.5em;
  font-weight: 500;
}
.section .button {
  margin: 1em 0;
}

.section.teaser {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.section.teaser.top-teaser .sectionImg {
  background: url("converting_traffic/1.webp") no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 450px;
  grid-column: 1/7;
}
.section.teaser.top-teaser .sectionCopy {
  grid-column: 8/12;
}
.section.teaser.bottom-teaser .sectionImg {
  background: url("converting_traffic/2.webp") no-repeat;
  background-size: cover;
  background-position: center 10%;
  width: 100%;
  height: 450px;
  grid-column: 1/7;
}
.section.teaser.bottom-teaser .sectionCopy {
  grid-column: 8/12;
}
.section.teaser.middle-teaser .sectionImg {
  background: url("converting_traffic/4.webp") no-repeat;
  background-size: cover;
  width: 100%;
  height: 450px;
  grid-column: 7/13;
  grid-row: 1/2;
}
.section.teaser.middle-teaser .sectionCopy {
  grid-column: 2/6;
}

@media (max-width: 700px) {
  :root {
    padding: 10%
  }

  .section {
    padding: 2em 0;
  }

  .block {
    display: block;
    width: 70%;
    border: none;
  }

  .new {
    margin: auto;
  }

  .section.teaser.mobileCenter {
    grid-template-rows: 1fr 1fr;
    text-align: center;
  }
  .section.teaser.mobileCenter .sectionImg {
    grid-column: 1/13;
    grid-row: 1/2;
    height: 100%;
  }
  .section.teaser.mobileCenter .sectionCopy {
    grid-column: 2/12;
    grid-row: 2/3;
    margin-top: 2em;
    padding: 0;
  }
 
}

.search__bar__header input[type="search"] {
  padding: 10px;
  outline: none;
  border: none;
  box-shadow: 0px 0px 2px #107fa8;
}

@media (max-width: 576px) {
  .search__bar__header input[type="button"] {
    padding: 9px;
    font-size: 0.7em;
  }
}

input {
  display: initial;
}


.search-button {
    padding: 10px;
    outline: none;
    border: none;
    cursor: pointer;
    background-color: red;
    color: whitesmoke;
    font-size: 1.2rem;
}




/*/////////////////////////////////////////////////////////////////////////////////*/
/*  Project Variables */
/*/////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////*/
/*  Full Screen Navigation Bar */
/*/////////////////////////////////////////////////////////////////////////////////*/
nav {
  width: 100%;
  background: #d00;
  position: relative;
}
nav ul {
  list-style: none;
  padding: 0 0 0 0;
}
nav .menu {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-around;
  list-style: none;
  position: relative;
}
nav .menu > li {
  cursor: pointer;
  display: flex;
  width: 100%;
  /* Displays the Menu Dropdown on hover or tap */
}
nav .menu > li a {
  width: 100%;
  text-align: center;
  padding: 1rem 0;
  text-decoration: none;
  color: whitesmoke;
}
nav .menu > li:after {
  content: "";
  display: inline;
  border: 1px solid #8a0000;
  height: 98%;
  margin-right: -1rem;
}
nav .menu > li li {
  padding: 1rem 0 1rem 1rem;
  color: whitesmoke;
}
nav .menu > li li:hover {
  background: #d00;
}
nav .menu > li > .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in;
  display: flex;
  flex-direction: row;
  background: #222;
}
nav .menu > li > .submenu .column {
  width: 25%;
}
nav .menu > li input[id*=submenu-toggle] {
  display: none;
}
nav .menu > li:hover {
  background: rgba(255, 255, 255, 0.7);
}
nav .menu > li:hover > .submenu, nav .menu > li:hover:focus > .submenu {
  opacity: 1;
  visibility: visible;
}

/*/////////////////////////////////////////////////////////////////////////////////*/
/*  Hamburger Menu Toggle */
/*/////////////////////////////////////////////////////////////////////////////////*/
nav #menu-toggle {
  display: none;
}
nav #menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}
nav #menu-toggle:checked + .menu-button-container .menu-button:before {
  margin-top: 0px;
  transform: rotate(405deg);
}
nav #menu-toggle:checked + .menu-button-container .menu-button:after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

.menu-button-container {
  display: none;
  position: absolute;
  top: calc( 1rem + 8px);
  right: 1rem;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-self: flex-end;
  align-items: center;
}
.menu-button-container *, .menu-button-container *:before, .menu-button-container *:after {
  display: block;
  background-color: #00353b;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}
.menu-button-container .menu-button:before {
  content: "";
  margin-top: calc((1rem/2) * -1);
}
.menu-button-container .menu-button:after {
  content: "";
  margin-top: calc(1rem/2);
}

/*/////////////////////////////////////////////////////////////////////////////////*/
/*  Mobile Navigation */
/*/////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 800px) {
  nav {
  width: 70%;
}
  nav .menu {
    max-width: 100%;
  }
  nav #menu-toggle ~ .menu {
    visibility: hidden;
    opacity: 0;
  }
  nav #menu-toggle:checked ~ .menu {
    position: absolute;
    top: 0;
    flex-direction: column;
    width: 100% !important;
    background: #eee809;
    visibility: visible;
    opacity: 1;
  }
  nav #menu-toggle:checked ~ .menu li {
    position: relative;
    display: block;
    padding: 1rem 0 1rem 1rem;
  }
  nav #menu-toggle:checked ~ .menu li:hover {
    background: #eee809;
  }
  nav #menu-toggle:checked ~ .menu li:after {
    display: none;
  }
  nav #menu-toggle:checked ~ .menu li > .submenu {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    width: calc(100% + (2* 1rem));
    margin: 1rem -1rem;
    display: flex;
    flex-direction: column;
  }
  nav #menu-toggle:checked ~ .menu li > .submenu .column {
    width: 100%;
  }
  nav #menu-toggle:checked ~ .menu li input[id*=submenu-toggle]:checked ~ .submenu {
    position: initial;
    display: flex;
    background: #fff;
    visibility: visible;
    opacity: 1;
  }
  nav .menu-button-container {
    display: block;
  }
  nav .submenu-button-container {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 3rem;
    width: 90%;
    cursor: pointer;
    flex-direction: column;
    width: 90%;
  }

  .menu-button-container {
    display: block;
    z-index: 999;
  }
  .section.valueProps {
  padding: 0 var(--sectionPadding) 5em;
}
.section.valueProps h3 {
  text-align: center;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2.5em;
}
.grid-3 .grid-3-item h4 {
  font-weight: 500;
  font-size: 1.2em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}
.grid-3 .grid-3-item .grid-3-img {
  margin: 2em 0;
  width: 100%;
  height: 250px;
}
.grid-3 .grid-3-item:nth-of-type(1) .grid-3-img {
  background: url("https://static1.squarespace.com/static/5425ba71e4b007ffd6b55c47/57d03c41e6f2e1d7acf3b3c7/57d040f1bebafbba56d9f35d/1473265909906/IMG_1908.JPG?format=2500w") no-repeat;
  background-size: cover;
  background-size: 125%;
  background-position: -5% top;
}
.grid-3 .grid-3-item:nth-of-type(2) .grid-3-img {
  background: url("https://static1.squarespace.com/static/5425ba71e4b007ffd6b55c47/57d03c41e6f2e1d7acf3b3c7/57d041e6b8a79bd46188f7d0/1473266157317/IMG_7650.JPG?format=2500w") no-repeat;
  background-size: cover;
  background-position: center center;
}
.grid-3 .grid-3-item:nth-of-type(3) .grid-3-img {
  background: url("https://static1.squarespace.com/static/5425ba71e4b007ffd6b55c47/5438382ee4b04156f923058a/5850426ed482e9af3126f43a/1511895748624/_AAA2732.jpg?format=2500w") no-repeat;
  background-size: cover;
  background-position: right bottom;
}
}

.hero .innertext {
  background: rgba(0, 0, 0, 0.3) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAD0lEQVQIW2NkQABjRmQOAAM+AGkQsDBSAAAAAElFTkSuQmCC) repeat;
}

/* Hero */
  .hero, .content{
    text-align:center;
    width: 100%;}
  .innertext{
    min-height:600px;
  }
 
  .hero h1{
    text-align: center;
    text-shadow: 2px 2px brown;
  }
 
  .copy{
    position:absolute;
    margin: 6em 0 0 0;
    width:100%;}
 
  .hero h1{
    text-align: center;
    margin-top: 4%; }
 
  .hero button{
    padding: 10px;
    outline: none;
    border: none;
    background-color: gold;
    color: black;
    width: 30%;}


  #hero1 {background: url('converting_traffic/cycle/5.webp'); background-size: cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; border-bottom: 1px solid #424141;}
  @media (max-width: 800px) { #hero1 { background: url('converting_traffic/37.webp'); }}
.menu-item {
  font-size: 1rem;
  font-weight: bold;
  padding: 7px 12px;
  background: #d00;
  color: whitesmoke;
  text-align: left;
  margin: 0;
}
.menu-item a {
  background-color: #222;
  display: block;
  text-decoration: none;
  width: 100%;
  color: whitesmoke;
}

.menu-item ul {
  background: #222;
  font-size: 1rem;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
  margin: 0;
  height: 0;
  transition: height 1s ease;
}
.menu-item.menu1:hover ul {
  color: burlywood;
  height: 100%;
}
.menu-item.menu2:hover ul {
  height: 100%;
}
.menu-item.menu3:hover ul {
  height: 100%;
}
.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  display: block;
  width: 50%;
  text-align: left;
}
.menu-item ul a:hover {
  background: grey;
  color: white;
}
.menu-item li {
  border-bottom: 1px solid burlywood;
}
 .menu-item li:hover {
  background: darkslategray;
}


html {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  background: #f5f4f4;
  font-size: 13px;
  font-family: "Arvo", monospace;
}
@supports (display: grid) {
  body,
html {
    display: block;
  }
}

.message {
  border: 1px solid #d2d0d0;
  padding: 2em;
  font-size: 1.7vw;
  box-shadow: -2px 2px 10px 0px rgba(68, 68, 68, 0.4);
}
@supports (display: grid) {
  .message {
    display: none;
  }
}

.section {
  display: none;
  padding: 2rem;
}
@media screen and (min-width: 768px) {
  .section {
    padding: 4rem;
  }
}
@supports (display: grid) {
  .section {
    display: block;
  }
}

h1 {
  font-size: 2rem;
  margin: 0 0 1.5em;
}

.grid {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: row dense;
}

.item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  background: #0c9a9a;
  color: #fff;
  grid-column-start: auto;
  grid-row-start: auto;
  color: #fff;
  background: url("https://images.unsplash.com/photo-1470124182917-cc6e71b22ecc?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=");
  background-size: cover;
  background-position: center;
  box-shadow: -2px 2px 10px 0px rgba(68, 68, 68, 0.4);
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  counter-increment: item-counter;
}
.item:nth-of-type(3n) {
  background-image: url("https://images.unsplash.com/photo-1422255198496-21531f12a6e8?dpr=2&auto=format&fit=crop&w=1500&h=996&q=80&cs=tinysrgb&crop=");
}
.item:nth-of-type(4n) {
  background-image: url("https://images.unsplash.com/photo-1490914327627-9fe8d52f4d90?dpr=2&auto=format&fit=crop&w=1500&h=2250&q=80&cs=tinysrgb&crop=");
}
.item:nth-of-type(5n) {
  background-image: url("https://images.unsplash.com/photo-1476097297040-79e9e1603142?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=");
}
.item:nth-of-type(6n) {
  background-image: url("https://images.unsplash.com/photo-1464652149449-f3b8538144aa?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=");
}
.item:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.3;
  transition: opacity 0.3s ease-in-out;
}
.item:hover {
  transform: scale(1.05);
}
.item:hover:after {
  opacity: 0;
}
.item--medium {
  grid-row-end: span 2;
}
.item--large {
  grid-row-end: span 3;
}
.item--full {
  grid-column-end: auto;
}
@media screen and (min-width: 768px) {
  .item--full {
    grid-column: 1/-1;
    grid-row-end: span 2;
  }
}
.item__details {
  position: relative;
  z-index: 1;
  padding: 15px;
  color: #444;
  background: #fff;
  text-transform: lowercase;
  letter-spacing: 1px;
  color: #828282;
}
.item__details:before {
  content: counter(item-counter);
  font-weight: bold;
  font-size: 1.1rem;
  padding-right: 0.5em;
  color: #444;
}


</style>

</head>
  <body>
      <div class="grid-container">
            <div class="grid-box topbar sub_grid_topbar">
                <div class="topbar_box_1">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-phone-vibrate-fill" viewBox="0 0 16 16">
                    <path d="M4 4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm5 7a1 1 0 1 0-2 0 1 1 0 0 0 2 0zM1.807 4.734a.5.5 0 1 0-.884-.468A7.967 7.967 0 0 0 0 8c0 1.347.334 2.618.923 3.734a.5.5 0 1 0 .884-.468A6.967 6.967 0 0 1 1 8c0-1.18.292-2.292.807-3.266zm13.27-.468a.5.5 0 0 0-.884.468C14.708 5.708 15 6.819 15 8c0 1.18-.292 2.292-.807 3.266a.5.5 0 0 0 .884.468A7.967 7.967 0 0 0 16 8a7.967 7.967 0 0 0-.923-3.734zM3.34 6.182a.5.5 0 1 0-.93-.364A5.986 5.986 0 0 0 2 8c0 .769.145 1.505.41 2.182a.5.5 0 1 0 .93-.364A4.986 4.986 0 0 1 3 8c0-.642.12-1.255.34-1.818zm10.25-.364a.5.5 0 0 0-.93.364c.22.563.34 1.176.34 1.818 0 .642-.12 1.255-.34 1.818a.5.5 0 0 0 .93.364C13.856 9.505 14 8.769 14 8c0-.769-.145-1.505-.41-2.182z"/>
                  </svg> 770-897-6107
                </div>
                <div class="topbar_box_2">
                  
                    <svg xmlns="http://www.w3.org/2000/svg" width="16.822035" height="16.822035" viewBox="0 0 16.822035 16.822035"><g id="email" transform="matrix(0.35045904,0,0,0.35045904,-0.70091808,-0.70091808)"><g id="email-2" data-name="email"><rect x="2" y="20" width="48" height="26" id="rect4" style="fill:#1aa6b8" /><polygon points="50,20.06 2,20.06 26,2 " id="polygon6" style="fill:#24b9cc" /><polygon points="39.12,6.09 5.71,6.09 5.71,38.02 46.29,38.02 46.29,13.83" id="polygon8" style="fill:#eae8e8" /><polygon points="39.12,6.09 39.12,13.83 46.29,13.83" id="polygon10" style="fill:#d7d4d4"/><polygon points="50,20 50,50 26,34" id="olygon12" style="fill:#80deea"/><polygon points="26,34 2,50 2,20" id="polygon14" style="fill:#80deea"/><polygon points="50,50 2,50 26,34" id="polygon16" style="fill:#5cd4e3" /><path d="m 26,12 a 8,8 0 1 0 5.19,14.08 l -1,-1.22 A 6.4,6.4 0 1 1 32.4,20 v 1.2 a 1.2,1.2 0 0 1 -2.4,0 V 16 h -1.6 v 0.82 A 4,4 0 0 0 26,16 4,4 0 1 0 28.88,22.76 2.79,2.79 0 0 0 34,21.6 v 0 -1.6 a 8,8 0 0 0 -8,-8 z m 0,10.4 A 2.4,2.4 0 1 1 28.4,20 2.4,2.4 0 0 1 26,22.4 Z" id="path18"    inkscape:connector-curvature="0" style="fill:#ff6e40" /></g></g></svg> greggeniis@gmail.com
                </div>
                <div class="topbar_box_3">
                </div>
                <div class="topbar_box_4">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-node-minus" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M11 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM6.025 7.5a5 5 0 1 1 0 1H4A1.5 1.5 0 0 1 2.5 10h-1A1.5 1.5 0 0 1 0 8.5v-1A1.5 1.5 0 0 1 1.5 6h1A1.5 1.5 0 0 1 4 7.5h2.025zM1.5 7a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zM8 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5A.5.5 0 0 1 8 8z"/></svg> Login
                </div>
          </div>
            <header class="grid-box header sub_grid_header">
                  <div class="header-box-1">
                      <a href="/" aria-label="go to home page">
                      <img src="img/logo.webp" alt="{{ product.featured_image.alt | escape }}" loading="lazy" style="height: 35px; width: 186px;">
                    </a>
                    </div>
                    <div class="header-box-2">
                  </div>
                    <div class="header-box-3">
                      <div class="search__bar__header">
                      <form action="{% url 'search:search_results' %}" method="get">
                          <div class="search-box">
                          <input type="search" name="q" class="search-input" id="search" placeholder="search">
                          <button type="submit" class="submit search-button">
                          Search
                          </button>
                        </div>
                      </form>
                    </div>
                    </div>
                    <div class="header-box-4">
                      
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-folder-symlink-fill" viewBox="0 0 16 16">
                          <path d="M13.81 3H9.828a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 6.172 1H2.5a2 2 0 0 0-2 2l.04.87a1.99 1.99 0 0 0-.342 1.311l.637 7A2 2 0 0 0 2.826 14h10.348a2 2 0 0 0 1.991-1.819l.637-7A2 2 0 0 0 13.81 3zM2.19 3c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293L7.586 3H2.19zm9.608 5.271l-3.182 1.97c-.27.166-.616-.036-.616-.372V9.1s-2.571-.3-4 2.4c.571-4.8 3.143-4.8 4-4.8v-.769c0-.336.346-.538.616-.371l3.182 1.969c.27.166.27.576 0 .742z"/>
                        </svg>
                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-compass" viewBox="0 0 16 16">
                                <path d="M8 16.016a7.5 7.5 0 0 0 1.962-14.74A1 1 0 0 0 9 0H7a1 1 0 0 0-.962 1.276A7.5 7.5 0 0 0 8 16.016zm6.5-7.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
                                <path d="M6.94 7.44l4.95-2.83-2.83 4.95-4.949 2.83 2.828-4.95z"/>
                              </svg>
                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-droplet-half" viewBox="0 0 16 16">
                              <path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10c0 0 2.5 1.5 5 .5s5-.5 5-.5c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/>
                              <path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z"/>
                             </svg>
            
              </div>
            </header>
 
  <nav class="navbar">

    <!-- Menu Toggle for Small Screens -->
    
      <input id="menu-toggle" type="checkbox" />
      <label class='menu-button-container' for="menu-toggle">
          <div class='menu-button'></div>
      </label>
    
    <!--/ Menu Toggle for Small Screens -->
    
    <!-- Main Menu -->
    
      <ul class="menu">
        <li>

          <a href="">Products &#8595;</a>

          <!-- Submenu Toggle for Small Screens -->
            <input class='submenu-toggle' id="submenu-toggle-id" type="checkbox" />
            <label class='submenu-button-container' for="submenu-toggle-id">
                <div class='submenu-button'></div>
            </label>
          <!--/ Submenu Toggle for Small Screens -->

          <!-- Submenu -->
          <div class="submenu">

            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li>Sub Menu 2</li>
              </ul>

            </div>

            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
              </ul>

            </div>
            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>
            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>

          </div>
          <!--/ Submenu -->

        </li>
        <li>

          <a href="">Products &#8595;</a>

          <!-- Submenu Toggle for Small Screens -->
            <input class='submenu-toggle' id="submenu-toggle-id" type="checkbox" />
            <label class='submenu-button-container' for="submenu-toggle-id">
                <div class='submenu-button'></div>
            </label>
          <!--/ Submenu Toggle for Small Screens -->

          <!-- Submenu -->
          <div class="submenu">

            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 2</a></li>
              </ul>

            </div>

            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>
            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>
            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>

          </div>
          <!--/ Submenu -->

        </li>
        <li>

          <a href="">Products &#8595;</a>

          <!-- Submenu Toggle for Small Screens -->
            <input class='submenu-toggle' id="submenu-toggle-id" type="checkbox" />
            <label class='submenu-button-container' for="submenu-toggle-id">
                <div class='submenu-button'></div>
            </label>
          <!--/ Submenu Toggle for Small Screens -->

          <!-- Submenu -->
          <div class="submenu">

            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
              </ul>

            </div>

            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>
            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>
            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>

          </div>
          <!--/ Submenu -->

        </li>
        <li>

          <a href="">Products &#8595;</a>

          <!-- Submenu Toggle for Small Screens -->
            <input class='submenu-toggle' id="submenu-toggle-id" type="checkbox" />
            <label class='submenu-button-container' for="submenu-toggle-id">
                <div class='submenu-button'></div>
            </label>
          <!--/ Submenu Toggle for Small Screens -->

          <!-- Submenu -->
          <div class="submenu">

            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
              </ul>

            </div>

            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>
            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>
            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>

          </div>
          <!--/ Submenu -->

        </li>
        <li>

          <a href="">Products &#8595;</a>

          <!-- Submenu Toggle for Small Screens -->
            <input class='submenu-toggle' id="submenu-toggle-id" type="checkbox" />
            <label class='submenu-button-container' for="submenu-toggle-id">
                <div class='submenu-button'></div>
            </label>
          <!--/ Submenu Toggle for Small Screens -->

          <!-- Submenu -->
          <div class="submenu">

            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
              </ul>

            </div>

            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>
            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>
            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>

          </div>
          <!--/ Submenu -->

        </li>
        <li>

          <a href="">Products &#8595;</a>

          <!-- Submenu Toggle for Small Screens -->
            <input class='submenu-toggle' id="submenu-toggle-id" type="checkbox" />
            <label class='submenu-button-container' for="submenu-toggle-id">
                <div class='submenu-button'></div>
            </label>
          <!--/ Submenu Toggle for Small Screens -->

          <!-- Submenu -->
          <div class="submenu">

            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
              </ul>

            </div>

            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>
            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>
            <div class="column">

              <ul>
                <li><a href="">Sub Menu 1</a></li>
                <li><a href="">Sub Menu 1</a></li>
                
                
              </ul>

            </div>

          </div>
          <!--/ Submenu -->

        </li>

      </ul>

  </nav>
    

            <div class="grid-box hero">
              <section id="hero1" class="hero">
                <div class="innertext">
                  <div class="copy">
                    <h1 style="margin: 3%; font-weight: bolder; padding: 1%;">Websites are Supposed to Drive Traffic & Make Sales!
                    <br>
                    <span style="color:red;">So ... Why Do So Many Fail to Do Either? </span></h1>
                      <a href="{% url 'pages:clean_code_2021' %}" class="button">Click For The Truth</a>
                  </div>
                </div>
              </section>    
           </div>
           <div class="featured">
                <section class="section teaser top-teaser mobileCenter">
                       <div class="sectionImg"></div>
                       <div class="sectionCopy" data-aos="fade-up">
                         <div class="new">
                           <span>Just In!</span>
                         </div>
                         <h3>Fall/Winter Yarns</h3>
                         <p>New fibers and colors to fit a moody Winter palette. Knit, crochet, and macrame with our range of earth-friendly yarns. </p>
                         <a href="#" class="button block">Shop Bundles</a>
                       </div>
                  </section>
                  <section class="section teaser middle-teaser mobileCenter">
                         <div class="sectionImg"></div>
                         <div class="sectionCopy" data-aos="fade-up">
                           <h3>Knit 1, Purl 2</h3>
                           <p>Dive into a new project with easy to follow patterns in a range of styles for beginning to advanced knitters. </p>
                           <a href="#" class="button block">Shop Patterns</a>
                         </div>
                  </section>
                  <section class="section teaser bottom-teaser mobileCenter">
                         <div class="sectionImg"></div>
                         <div class="sectionCopy" data-aos="fade-up">
                           <h3>Cozy Up</h3>
                           <p>One-of-a-kind hats, scarves, and sweaters to keep you looking fine and feeling cozy.</p>
                           <a href="#" class="button block">Shop Accessories</a>
                         </div>
                  </section>
           </div>
           <div class="grid-box teaser">
                  Teaser
           </div>
           <main class="grid-box">
                 <!-- partial:index.partial.html -->
                <div class="message">
                  Sorry, your browser does not support CSS Grid. 😅
                </div>
                <section class="section">
                  <h1>Nom Nom Gallery</h1>
                  <div class="grid">
                    <div class="item">
                      <div class="item__details">
                        jelly-o brownie sweet
                      </div>
                    </div>
                    <div class="item item--large">
                      <div class="item__details">
                        Muffin jelly gingerbread
                      </div>
                    </div>
                    <div class="item item--medium">
                      <div class="item__details">
                        sesame snaps chocolate
                      </div>
                    </div>
                    <div class="item item--large">
                      <div class="item__details">
                        Oat cake
                      </div>
                    </div>
                    <div class="item item--full">
                      <div class="item__details">
                         jujubes cheesecake
                      </div>
                    </div>
                    <div class="item item--medium">
                      <div class="item__details">
                        Dragée pudding brownie
                      </div>
                    </div>
                    <div class="item item--large">
                      <div class="item__details">
                        Oat cake
                      </div>
                    </div>
                    <div class="item">
                      <div class="item__details">
                        powder toffee
                      </div>
                    </div>
                    <div class="item item--medium">
                      <div class="item__details">
                        pudding cheesecake
                      </div>
                    </div>
                    <div class="item item--large">
                      <div class="item__details">
                        toffee bear claw
                      </div>
                    </div>
                    <div class="item">
                      <div class="item__details">
                        cake cookie croissant
                      </div>
                    </div>
                    <div class="item item--medium">
                      <div class="item__details">
                        liquorice sweet roll
                      </div>
                    </div>
                    <div class="item item--medium">
                      <div class="item__details">
                        chocolate marzipan
                      </div>
                    </div>
                    <div class="item item--large">
                      <div class="item__details">
                        danish dessert lollipop
                      </div>
                    </div>
                    <div class="item">
                      <div class="item__details">
                        sugar plum dragée
                      </div>
                    </div>
                  </div>
                </section>
              </main>
           <aside class="grid-box">
              <div class="menu-item menu1">
                <h4><a href="#">HTML</a></h4>
                <ul>
                  <li><a href="#">Tags</a></li>
                  <li><a href="#">Elements</a></li>
                  <li><a href="#">Attributes</a></li>
                  <li><a href="#">Images</a></li>
                  <li><a href="#">Text</a></li>
                  <li><a href="#">Colors</a></li>
                  <li><a href="#">Fonts</a></li>
                </ul>
              </div>
              <div class="menu-item menu2">
                <h4><a href="#">CSS</a></h4>
                <ul>
                  <li><a href="#">Architecture</a></li>
                  <li><a href="#">Columns</a></li>
                  <li><a href="#">Rows</a></li>
                  <li><a href="#">Areas</a></li>
                  <li><a href="#">Gaps</a></li>
                </ul>
              </div>
              <div class="menu-item menu3">
                <h4><a href="#">SHOPIFY</a></h4>
                <ul>
                  <li><a href="#">Architecture</a></li>
                  <li><a href="#">Columns</a></li>
                  <li><a href="#">Rows</a></li>
                  <li><a href="#">Areas</a></li>
                  <li><a href="#">Gaps</a></li>
                </ul>
              </div>
           </aside>
           <div class="teaser">
              <p>
                Call to action
              </p>
           </div>    
           <footer class="grid-box">
              <p>Footer</p>
           </footer>
       </div>
  </body>
</html>








Free shipping when you spend $50 or more.

Shop Now