Shopify Template Card

Shopify Template Card

Now we need to add a card to dress up our content a little.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

/* Defining the grid areas */

nav {

grid-area: nav;

background-color: #00242f57;

}

main {

grid-area: main;

background-color: #E5E5E5;

color: #1A1A1A;

}

aside {

grid-area: aside;

background-color: #BFBFBF;

color: #4D4D4D;

}

footer {

grid-area: footer;

background-color: #4D4D4D;

color: #BFBFBF;

}

/* Styles for the grid container */

.grid-container {

display: grid;

/* Styles for the placement of the grid areas */

grid-template-areas:

"nav"

"main"

"aside"

"footer";

grid-gap: .5rem;

padding: .25rem;

}

/* 2 media queries for the grid container */

@media only screen and (min-width: 550px) {

.grid-container {

grid-template-columns: repeat(2,1fr);

grid-template-areas:

"nav nav"

"main main"

"aside ."

"footer footer";

grid-gap: .75rem;

padding: .5rem;

}

}

@media only screen and (min-width: 800px) {

.grid-container {

grid-template-columns: repeat(3,1fr);

grid-template-areas:

"nav nav nav"

"aside main main"

"footer footer footer";

grid-gap: 1rem;

padding: .75rem;

}

}

/* Styles for the grid items */

.grid-box {

padding: .5rem;

font-size: 1.25rem;

border-radius: .125rem;

}

/* 2 media queries for the grid items */

@media only screen and (min-width: 550px) {

.grid-box {

padding: .75rem;

font-size: 1.5rem;

}

}

@media only screen and (min-width: 800px) {

.grid-box {

padding: 1rem;

font-size: 1.25rem;

}

}

/*Navbar*/

.logo{

background: url(/img/logo.webp) no-repeat top left;

margin: 10px;

width: 200px;

height: 45px;

}

.logo:hover {

filter: brightness(110%);

}

ul.topnav {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

ul.topnav li {float: left;}

ul.topnav li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px) {

ul.topnav li.right,

ul.topnav li {float: none;}

}

li {

list-style-type: none;

}

ol,ul {

list-style: none;

list-style-type: none;

}

input[type=radio] {

display: none;

}

body .swanky_title {

float: right;

text-align: left;

width: 400px;

color: white;

position: relative;

top: 70px;

}

body .swanky_title__social a {

position: relative;

overflow: hidden;

width: 140px;

margin-right: 15px;

text-decoration: none;

padding: 0px 0px 5px 0px;

height: 40px;

border: 2px solid white;

float: left;

color: white;

font-size: 12px;

font-weight: 400;

margin-top: 20px;

}

body .swanky_title__social a .slide {

height: 45px;

width: 100px;

float: left;

position: absolute;

transform: skew(20deg);

left: -120px;

transition-property: left;

transition-duration: 0.2s;

background: white;

}

body .swanky_title__social a .slide .arrow {

position: absolute;

right: 31px;

top: 24px;

opacity: 0;

transform: skew(-20deg);

}

body .swanky_title__social a .slide .arrow .stem {

width: 10px;

height: 2px;

background: #858490;

}

body .swanky_title__social a .slide .arrow .point {

width: 6px;

height: 6px;

border-right: 2px solid #858490;

top: -3px;

right: 1px;

position: absolute;

transform: rotate(45deg);

border-top: 2px solid #858490;

}

body .swanky_title__social a img {

width: 16px;

margin-left: 10px;

position: relative;

margin-right: 8px;

transition-property: margin-left;

transition-duration: 0.1s;

margin-top: 10px;

top: 4px;

}

body .swanky_title__social a:hover > .slide {

left: -70px;

transition-property: left;

transition-duration: 0.1s;

}

body .swanky_title__social a:hover > img {

margin-left: 40px;

transition-property: margin-left;

transition-duration: 0.1s;

}

body .swanky_title__social a:hover > .slide .arrow {

right: 11px;

opacity: 1;

transition-property: right, opacity;

transition-delay: 0.07s;

transition-duration: 0.2s;

}

body .swanky .intro {

float: right;

color: white;

width: 370px;

top: 50px;

position: relative;

}

body .swanky .intro h1 {

text-shadow: 0px 2px rgba(0, 0, 0, 0.26);

}

body .swanky .intro p {

line-height: 20px;

text-shadow: 0px 1px rgba(0, 0, 0, 0.26);

}

body .swanky_wrapper {

height: auto;

overflow: hidden;

border-radius: 4px;

background: #333;

}

body .swanky_wrapper label {

padding: 25px;

float: left;

height: 72px;

border-bottom: 1px solid #555;

position: relative;

width: 100%;

color: #eff4fa;

transition: text-indent 0.15s, height 0.3s;

box-sizing: border-box;

}

body .swanky_wrapper label img {

margin-right: 10px;

position: relative;

top: 2px;

width: 16px;

}

body .swanky_wrapper label span {

position: relative;

top: -3px;

}

body .swanky_wrapper label:hover {

background: #333;

border-bottom: 1px solid #000;

text-indent: 4px;

}

body .swanky_wrapper label:hover .bar {

width: 100%;

}

body .swanky_wrapper label .bar {

width: 0px;

transition: width 0.15s;

height: 2px;

position: absolute;

display: block;

background: #333;

bottom: 0;

left: 0;

}

body .swanky_wrapper label .lil_arrow {

width: 5px;

height: 5px;

transition: transform 0.8s;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

border-top: 2px solid white;

border-right: 2px solid white;

float: right;

position: relative;

top: 6px;

right: 2px;

transform: rotate(45deg);

}

body .swanky_wrapper__content {

position: absolute;

display: none;

overflow: hidden;

left: 0;

width: 100%;

}

body .swanky_wrapper__content li {

width: 100%;

opacity: 0;

left: -100%;

background: #4f4e4e;

padding: 25px 0px;

text-indent: 25px;

box-shadow: 0px 0px gold inset;

transition: box-shadow 0.3s, text-indent 0.3s;

position: relative;

}

body .swanky_wrapper__content li:hover {

background: #333;

box-shadow: 3px 0px #ccc inset;

transition: box-shadow 0.3s linear, text-indent 0.3s linear;

text-indent: 31px;

}

body .swanky_wrapper__content .clear {

clear: both;

}

input[type=radio]:checked + label .swanky_wrapper__content {

display: block;

top: 68px;

border-bottom: 1px solid #333;

}

input[type=radio]:checked + label > .lil_arrow {

transition: transform 0.8s;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

transform: rotate(135deg);

border-top: 2px solid gold;

border-right: 2px solid gold;

}

input[type=radio]:checked + label {

height: 355px;

background: #333;

text-indent: 4px;

transition-property: height;

transition-duration: 0.6s;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

input[type=radio]:checked + label .bar {

width: 0;

}

input[type=radio]:checked + label li:nth-of-type(1) {

-webkit-animation: in 0.15s 0.575s forwards;

animation: in 0.15s 0.575s forwards;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

-moz-animation: in 0.15s 0.575s forwards;

-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

input[type=radio]:checked + label li:nth-of-type(2) {

-webkit-animation: in 0.15s 0.7s forwards;

animation: in 0.15s 0.7s forwards;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

-moz-animation: in 0.15s 0.7s forwards;

-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

input[type=radio]:checked + label li:nth-of-type(3) {

-webkit-animation: in 0.15s 0.825s forwards;

animation: in 0.15s 0.825s forwards;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

-moz-animation: in 0.15s 0.825s forwards;

-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

input[type=radio]:checked + label li:nth-of-type(4) {

-webkit-animation: in 0.15s 0.95s forwards;

animation: in 0.15s 0.95s forwards;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

-moz-animation: in 0.15s 0.95s forwards;

-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

@-webkit-keyframes in {

from {

left: -100%;

opacity: 0;

}

to {

left: 0;

opacity: 1;

}

}

@keyframes in {

from {

left: -100%;

opacity: 0;

}

to {

left: 0;

opacity: 1;

}

}

.love {

position: absolute;

right: 20px;

bottom: 0px;

font-size: 11px;

font-weight: normal;

}

.love p {

color: white;

font-weight: normal;

font-family: "Open Sans", sans-serif;

}

.love a {

color: white;

font-weight: 700;

text-decoration: none;

}

.love img {

position: relative;

top: 3px;

margin: 0px 4px;

width: 10px;

}

.brand {

position: absolute;

left: 20px;

bottom: 14px;

}

.brand img {

width: 30px;

}

</style>

</head>

<body>

<div class="grid-container">

<nav>

<ul class="topnav">

<a href="/" aria-label="go to home page">

<li>

<div class="logo"></div>

</li>

</a>

<li class="right"><a href="/">Home</a></li>

<li class="right"><a href="{% url 'pages:about' %}">About</a></li>

<li class="right"><a href="{% url 'contact:contact' %}">Contact</a></li>

</ul>

</nav>

<main class="grid-box">

<h3 style="color:#444;">Content</h3>

</main>

<aside class="grid-box">

<!-- / Begin Body -->

<div class='swanky'>

<!-- / Introduction Block -->

<!-- /////////// Begin Dropdown //////////// -->

<div class='swanky_wrapper'>

<input id='Dashboard' name='radio' type='radio'>

<label for='Dashboard'>

<span>Introduction</span>

<div class='lil_arrow'></div>

<div class='bar'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>How to use</li>

<li>About</li>

<li>Analytics</li>

<li>Code Blocks</li>

</ul>

</div>

</label>

<input id='Sales' name='radio' type='radio'>

<label for='Sales'>

<span>Setup</span>

<div class='lil_arrow'></div>

<div class='bar'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>Windows</li>

<li>Browsers</li>

<li>Screen readers</li>

<li>Helper tools </li>

</ul>

</div>

</label>

<input id='Messages' name='radio' type='radio'>

<label for='Messages'>

<span>Knowledge</span>

<div class='lil_arrow'></div>

<div class='bar'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>Colours & contrast</li>

<li>Semantics</li>

<li>ARIA</li>

<li>Keyboard only</li>

<li>Screen readers</li>

</ul>

</div>

</label>

<input id='Users' name='radio' type='radio'>

<label for='Users'>

<span>Code</span>

<div class='lil_arrow'></div>

<div class='bar'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>New User</li>

<li>User Groups</li>

<li>Permissions</li>

<li>Passwords</li>

</ul>

</div>

</label>

<input id='Settings' radio='radio' type='radio'>

<label for='Settings'>

<span>Examples</span>

<div class='lil_arrow'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>HTML Boilerplate</li>

<li>Hiding elements</li>

<li>Headings</li>

<li>Tables</li>

<li>Forms</li>

<li>Widgets</li>

<li>Sensible ARIA usage</li>

</ul>

</div>

</label>

</div>

<!-- /////////// End Dropdown //////////// -->

</div>

</aside>

<footer class="grid-box">

footer

</footer>

</div>

</body>

</html>

Now we need to add a card to dress up our content a little.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

html {

font-size: 72.5%;

margin: 0; padding: 0; }

body {

font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */

line-height: 1.6;

font-weight: 400;

font-family: Georgia, serif;

color: #222; }

/* Typography

–––––––––––––––––––––––––––––––––––––––––––––––––– */

h1,

h2,

h3,

h4,

h5,

h6,

.h1,

.h2,

.h3,

.h4,

.h5,

.h6 {

font-family: Georgia, serif;;

font-weight: bold;

letter-spacing: 0.06rem;

color: #444;

line-height: 1.3;

}

h1,

.h1 {

font-size: 3rem;

}

@media only screen and (min-width: 750px) {

h1,

.h1 {

font-size: 4rem;

}

}

h2,

.h2 {

font-size: 2rem;

color: #fff;

}

@media only screen and (min-width: 750px) {

h2,

.h2 {

font-size: 2.4rem;

color: #fff;

}

}

h3,

.h3 {

font-size: 1.7rem;

}

@media only screen and (min-width: 750px) {

h3,

.h3 {

font-size: 1.8rem;

}

}

h4,

.h4 {

font-size: 1.5rem;

}

h5,

.h5 {

font-size: 1.2rem;

}

@media only screen and (min-width: 750px) {

h5,

.h5 {

font-size: 1.3rem;

}

}

h6,

.h6 {

color: rgba(var(--color-foreground), 0.75);

margin-block-start: 1.67em;

margin-block-end: 1.67em;

}

/* Defining the grid areas */

nav {

grid-area: nav;

background-color: #00242f57;

}

main {

grid-area: main;

background-color: #E5E5E5;

color: #1A1A1A;

}

aside {

grid-area: aside;

background-color: #BFBFBF;

color: #4D4D4D;

}

footer {

grid-area: footer;

background-color: #4D4D4D;

color: #BFBFBF;

}

/* Styles for the grid container */

.grid-container {

display: grid;

/* Styles for the placement of the grid areas */

grid-template-areas:

"nav"

"main"

"aside"

"footer";

grid-gap: .5rem;

padding: .25rem;

}

/* 2 media queries for the grid container */

@media only screen and (min-width: 550px) {

.grid-container {

grid-template-columns: repeat(2,1fr);

grid-template-areas:

"nav nav"

"main main"

"aside ."

"footer footer";

grid-gap: .75rem;

padding: .5rem;

}

}

@media only screen and (min-width: 800px) {

.grid-container {

grid-template-columns: repeat(3,1fr);

grid-template-areas:

"nav nav nav"

"aside main main"

"footer footer footer";

grid-gap: 1rem;

padding: .75rem;

}

}

/* Styles for the grid items */

.grid-box {

padding: .5rem;

font-size: 1.25rem;

border-radius: .125rem;

}

/* 2 media queries for the grid items */

@media only screen and (min-width: 550px) {

.grid-box {

padding: .75rem;

font-size: 1.5rem;

}

}

@media only screen and (min-width: 800px) {

.grid-box {

padding: 1rem;

font-size: 1.25rem;

}

}

/*Navbar*/

.logo{

background: url(/img/logo.webp) no-repeat top left;

margin: 10px;

width: 200px;

height: 45px;

}

.logo:hover {

filter: brightness(110%);

}

ul.topnav {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

ul.topnav li {float: left;}

ul.topnav li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px) {

ul.topnav li.right,

ul.topnav li {float: none;}

}

li {

list-style-type: none;

}

ol,ul {

list-style: none;

list-style-type: none;

}

input[type=radio] {

display: none;

}

body .swanky_title {

float: right;

text-align: left;

width: 400px;

color: white;

position: relative;

top: 70px;

}

body .swanky_title__social a {

position: relative;

overflow: hidden;

width: 140px;

margin-right: 15px;

text-decoration: none;

padding: 0px 0px 5px 0px;

height: 40px;

border: 2px solid white;

float: left;

color: white;

font-size: 12px;

font-weight: 400;

margin-top: 20px;

}

body .swanky_title__social a .slide {

height: 45px;

width: 100px;

float: left;

position: absolute;

transform: skew(20deg);

left: -120px;

transition-property: left;

transition-duration: 0.2s;

background: white;

}

body .swanky_title__social a .slide .arrow {

position: absolute;

right: 31px;

top: 24px;

opacity: 0;

transform: skew(-20deg);

}

body .swanky_title__social a .slide .arrow .stem {

width: 10px;

height: 2px;

background: #858490;

}

body .swanky_title__social a .slide .arrow .point {

width: 6px;

height: 6px;

border-right: 2px solid #858490;

top: -3px;

right: 1px;

position: absolute;

transform: rotate(45deg);

border-top: 2px solid #858490;

}

body .swanky_title__social a img {

width: 16px;

margin-left: 10px;

position: relative;

margin-right: 8px;

transition-property: margin-left;

transition-duration: 0.1s;

margin-top: 10px;

top: 4px;

}

body .swanky_title__social a:hover > .slide {

left: -70px;

transition-property: left;

transition-duration: 0.1s;

}

body .swanky_title__social a:hover > img {

margin-left: 40px;

transition-property: margin-left;

transition-duration: 0.1s;

}

body .swanky_title__social a:hover > .slide .arrow {

right: 11px;

opacity: 1;

transition-property: right, opacity;

transition-delay: 0.07s;

transition-duration: 0.2s;

}

body .swanky .intro {

float: right;

color: white;

width: 370px;

top: 50px;

position: relative;

}

body .swanky .intro h1 {

text-shadow: 0px 2px rgba(0, 0, 0, 0.26);

}

body .swanky .intro p {

line-height: 20px;

text-shadow: 0px 1px rgba(0, 0, 0, 0.26);

}

body .swanky_wrapper {

height: auto;

overflow: hidden;

border-radius: 4px;

background: #333;

}

body .swanky_wrapper label {

padding: 25px;

float: left;

height: 72px;

border-bottom: 1px solid #555;

position: relative;

width: 100%;

color: #eff4fa;

transition: text-indent 0.15s, height 0.3s;

box-sizing: border-box;

}

body .swanky_wrapper label img {

margin-right: 10px;

position: relative;

top: 2px;

width: 16px;

}

body .swanky_wrapper label span {

position: relative;

top: -3px;

}

body .swanky_wrapper label:hover {

background: #333;

border-bottom: 1px solid #000;

text-indent: 4px;

}

body .swanky_wrapper label:hover .bar {

width: 100%;

}

body .swanky_wrapper label .bar {

width: 0px;

transition: width 0.15s;

height: 2px;

position: absolute;

display: block;

background: #333;

bottom: 0;

left: 0;

}

body .swanky_wrapper label .lil_arrow {

width: 5px;

height: 5px;

transition: transform 0.8s;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

border-top: 2px solid white;

border-right: 2px solid white;

float: right;

position: relative;

top: 6px;

right: 2px;

transform: rotate(45deg);

}

body .swanky_wrapper__content {

position: absolute;

display: none;

overflow: hidden;

left: 0;

width: 100%;

}

body .swanky_wrapper__content li {

width: 100%;

opacity: 0;

left: -100%;

background: #4f4e4e;

padding: 25px 0px;

text-indent: 25px;

box-shadow: 0px 0px gold inset;

transition: box-shadow 0.3s, text-indent 0.3s;

position: relative;

}

body .swanky_wrapper__content li:hover {

background: #333;

box-shadow: 3px 0px #ccc inset;

transition: box-shadow 0.3s linear, text-indent 0.3s linear;

text-indent: 31px;

}

body .swanky_wrapper__content .clear {

clear: both;

}

input[type=radio]:checked + label .swanky_wrapper__content {

display: block;

top: 68px;

border-bottom: 1px solid #333;

}

input[type=radio]:checked + label > .lil_arrow {

transition: transform 0.8s;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

transform: rotate(135deg);

border-top: 2px solid gold;

border-right: 2px solid gold;

}

input[type=radio]:checked + label {

height: 355px;

background: #333;

text-indent: 4px;

transition-property: height;

transition-duration: 0.6s;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

input[type=radio]:checked + label .bar {

width: 0;

}

input[type=radio]:checked + label li:nth-of-type(1) {

-webkit-animation: in 0.15s 0.575s forwards;

animation: in 0.15s 0.575s forwards;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

-moz-animation: in 0.15s 0.575s forwards;

-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

input[type=radio]:checked + label li:nth-of-type(2) {

-webkit-animation: in 0.15s 0.7s forwards;

animation: in 0.15s 0.7s forwards;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

-moz-animation: in 0.15s 0.7s forwards;

-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

input[type=radio]:checked + label li:nth-of-type(3) {

-webkit-animation: in 0.15s 0.825s forwards;

animation: in 0.15s 0.825s forwards;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

-moz-animation: in 0.15s 0.825s forwards;

-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

input[type=radio]:checked + label li:nth-of-type(4) {

-webkit-animation: in 0.15s 0.95s forwards;

animation: in 0.15s 0.95s forwards;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

-moz-animation: in 0.15s 0.95s forwards;

-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

@-webkit-keyframes in {

from {

left: -100%;

opacity: 0;

}

to {

left: 0;

opacity: 1;

}

}

@keyframes in {

from {

left: -100%;

opacity: 0;

}

to {

left: 0;

opacity: 1;

}

}

.love {

position: absolute;

right: 20px;

bottom: 0px;

font-size: 11px;

font-weight: normal;

}

.love p {

color: white;

font-weight: normal;

font-family: "Open Sans", sans-serif;

}

.love a {

color: white;

font-weight: 700;

text-decoration: none;

}

.love img {

position: relative;

top: 3px;

margin: 0px 4px;

width: 10px;

}

.brand {

position: absolute;

left: 20px;

bottom: 14px;

}

.brand img {

width: 30px;

}

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

<nav>

<ul class="topnav">

<a href="/" aria-label="go to home page">

<li>

<div class="logo"></div>

</li>

</a>

<li class="right"><a href="/">Home</a></li>

<li class="right"><a href="{% url 'pages:about' %}">About</a></li>

<li class="right"><a href="{% url 'contact:contact' %}">Contact</a></li>

</ul>

</nav>

<main class="grid-box">

<!-- partial:index.partial.html -->

<div class="message">

Sorry, your browser does not support CSS Grid. 😅

</div>

<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>

<!-- partial -->

</main>

<aside class="grid-box">

<!-- / Begin Body -->

<div class='swanky'>

<!-- / Introduction Block -->

<!-- /////////// Begin Dropdown //////////// -->

<div class='swanky_wrapper'>

<input id='Dashboard' name='radio' type='radio'>

<label for='Dashboard'>

<span>Introduction</span>

<div class='lil_arrow'></div>

<div class='bar'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>How to use</li>

<li>About</li>

<li>Analytics</li>

<li>Code Blocks</li>

</ul>

</div>

</label>

<input id='Sales' name='radio' type='radio'>

<label for='Sales'>

<span>Setup</span>

<div class='lil_arrow'></div>

<div class='bar'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>Windows</li>

<li>Browsers</li>

<li>Screen readers</li>

<li>Helper tools </li>

</ul>

</div>

</label>

<input id='Messages' name='radio' type='radio'>

<label for='Messages'>

<span>Knowledge</span>

<div class='lil_arrow'></div>

<div class='bar'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>Colours & contrast</li>

<li>Semantics</li>

<li>ARIA</li>

<li>Keyboard only</li>

<li>Screen readers</li>

</ul>

</div>

</label>

<input id='Users' name='radio' type='radio'>

<label for='Users'>

<span>Code</span>

<div class='lil_arrow'></div>

<div class='bar'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>New User</li>

<li>User Groups</li>

<li>Permissions</li>

<li>Passwords</li>

</ul>

</div>

</label>

<input id='Settings' radio='radio' type='radio'>

<label for='Settings'>

<span>Examples</span>

<div class='lil_arrow'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>HTML Boilerplate</li>

<li>Hiding elements</li>

<li>Headings</li>

<li>Tables</li>

<li>Forms</li>

<li>Widgets</li>

<li>Sensible ARIA usage</li>

</ul>

</div>

</label>

</div>

<!-- /////////// End Dropdown //////////// -->

</div>

</aside>

<footer class="grid-box">

footer

</footer>

</div>

</body>

</html>

Now lets add a hero image.



Free shipping when you spend $50 or more.

Shop Now