Basic Spacing

Padding

Most of these elements should have some padding on the outside so they don't touch the edge of the page. To add padding, they should be put in a wrapper with the following properties, or the properties should be applied to the wrapper they're in. <div style="padding: 0px 40px"> <!--padding top and bottom, padding left and right--> </div>

Margins

To add whitespace above or below an element, add the following property or surround it a wrapper with it. <div style="margin: 10px 0px 10px 0px"> <!--margin top, right, bottom, left--> </div> Or you can use the following shorthand <div style="margin: 10px 0px"> <!--Margin top and bottom, left and right--> </div>

Centering

To center an element, surround it with this wrapper. <div style="display: flex; justify-content: center;"> <!-- Element to be centered goes here --> </div>

Ex reprehenderit laboris dolor occaecat sint ut. Cupidatat voluptate eu laboris anim adipisicing aliquip proident consequat ad incididunt dolore id irure. Ipsum proident eu proident labore ullamco dolor fugiat elit occaecat incididunt velit. Non aute ut sit in velit ullamco ipsum adipisicing laborum. Laborum elit Lorem et incididunt irure qui. Velit quis id veniam esse. Do cillum excepteur magna exercitation.

Column Layout

Two Column

<div style=" display: grid; margin: 0 auto; max-width: 70em; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100% / 2), 1fr)); column-gap: 50px; row-gap: 35px; padding: 0 40px; "> <div> <!-- Block of Content Goes Here --> </div> <div> <!-- Block of Content Goes Here --> </div> </div>
column-gap: is the horiztonal gap between content blocks
row-gap: is the vertcial gap between content blocks

Voluptate nostrud aliqua reprehenderit eu aliqua enim veniam et id. Cillum magna do excepteur officia laborum ad cillum id duis. Cupidatat mollit nulla sit ullamco consequat dolore sunt tempor sint consequat commodo commodo. Sunt occaecat laborum adipisicing proident eu qui laboris. Aute dolore eiusmod eiusmod eiusmod ea irure velit ut deserunt commodo. Qui consectetur laboris labore ipsum nisi eu.

Voluptate nostrud aliqua reprehenderit eu aliqua enim veniam et id. Cillum magna do excepteur officia laborum ad cillum id duis. Cupidatat mollit nulla sit ullamco consequat dolore sunt tempor sint consequat commodo commodo. Sunt occaecat laborum adipisicing proident eu qui laboris. Aute dolore eiusmod eiusmod eiusmod ea irure velit ut deserunt commodo. Qui consectetur laboris labore ipsum nisi eu.

Any Column, Fixed Width

Supports any number of content blocks. But their content will remain a fixed width for different screen sizes (except on small screens). <div style=" display: flex; justify-content: center; flex-wrap: wrap; column-gap: 50px; row-gap: 35px; "> <div style="max-width: 30em"> <!-- Block of Content --> </div> <div style="max-width: 30em"> <!-- Block of Content --> </div> <div style="max-width: 30em"> <!-- Block of Content --> </div> </div>
column-gap: is the horiztonal gap between content blocks
row-gap: is the vertcial gap between content blocks

Voluptate nostrud aliqua reprehenderit eu aliqua enim veniam et id. Cillum magna do excepteur officia laborum ad cillum id duis. Cupidatat mollit nulla sit ullamco consequat dolore sunt tempor sint consequat commodo commodo. Sunt occaecat laborum adipisicing proident eu qui laboris. Aute dolore eiusmod eiusmod eiusmod ea irure velit ut deserunt commodo. Qui consectetur laboris labore ipsum nisi eu.

Voluptate nostrud aliqua reprehenderit eu aliqua enim veniam et id. Cillum magna do excepteur officia laborum ad cillum id duis. Cupidatat mollit nulla sit ullamco consequat dolore sunt tempor sint consequat commodo commodo. Sunt occaecat laborum adipisicing proident eu qui laboris. Aute dolore eiusmod eiusmod eiusmod ea irure velit ut deserunt commodo. Qui consectetur laboris labore ipsum nisi eu.

Voluptate nostrud aliqua reprehenderit eu aliqua enim veniam et id. Cillum magna do excepteur officia laborum ad cillum id duis. Cupidatat mollit nulla sit ullamco consequat dolore sunt tempor sint consequat commodo commodo. Sunt occaecat laborum adipisicing proident eu qui laboris. Aute dolore eiusmod eiusmod eiusmod ea irure velit ut deserunt commodo. Qui consectetur laboris labore ipsum nisi eu.

Quotes

Quote w/ Attribution

<div style="max-width: 30em; padding: 0 40px;"> <p> "Quote Goes Here" </p> <div style="margin-top: 10px"> <div>John Doe,</div> <div>Heber County Tourism</div> </div> </div>

"Voluptate incididunt velit incididunt velit. In proident veniam sint duis id consectetur. Esse enim do occaecat veniam occaecat. Ad id sint velit ad eiusmod velit ea ex pariatur veniam. Dolore adipisicing est quis incididunt ullamco deserunt culpa nulla dolor aliqua irure."

John Doe,
Heber County Tourism

Quote w/ Subtle Attribution

<div style="max-width: 30em; padding: 0 40px;"> <p> "Quote Goes Here" </p> <div style="margin-top: 10px; color: #969696"> <div>John Doe,</div> <div>Heber County Tourism</div> </div> </div>

"Voluptate incididunt velit incididunt velit. In proident veniam sint duis id consectetur. Esse enim do occaecat veniam occaecat. Ad id sint velit ad eiusmod velit ea ex pariatur veniam. Dolore adipisicing est quis incididunt ullamco deserunt culpa nulla dolor aliqua irure."

John Doe,
Heber County Tourism

Italic Quote w/ Attribution

<div style="max-width: 30em; padding: 0 40px"> <p style="font-style: italic"> "Quote Goes Here" </p> <div style="margin-top: 10px"> <div>John Doe,</div> <div>Heber County Tourism</div> </div> </div>

"Voluptate incididunt velit incididunt velit. In proident veniam sint duis id consectetur. Esse enim do occaecat veniam occaecat. Ad id sint velit ad eiusmod velit ea ex pariatur veniam. Dolore adipisicing est quis incididunt ullamco deserunt culpa nulla dolor aliqua irure."

John Doe,
Heber County Tourism

Quote w/ Italic Attribution

<div style="max-width: 30em; padding: 0 40px"> <p> "Quote Goes Here" </p> <div style="margin-top: 10px; font-style: italic"> <div>John Doe,</div> <div>Heber County Tourism</div> </div> </div>

"Voluptate incididunt velit incididunt velit. In proident veniam sint duis id consectetur. Esse enim do occaecat veniam occaecat. Ad id sint velit ad eiusmod velit ea ex pariatur veniam. Dolore adipisicing est quis incididunt ullamco deserunt culpa nulla dolor aliqua irure."

John Doe,
Heber County Tourism

Centered Quote

<div style="max-width: 30em; padding: 0 40px; text-align: center"> <p> "Quote Goes Here" </p> <div style="margin-top: 10px;"> <div>John Doe,</div> <div>Heber County Tourism</div> </div> </div>

"Voluptate incididunt velit incididunt velit. In proident veniam sint duis id consectetur. Esse enim do occaecat veniam occaecat. Ad id sint velit ad eiusmod velit ea ex pariatur veniam. Dolore adipisicing est quis incididunt ullamco deserunt culpa nulla dolor aliqua irure."

John Doe,
Heber County Tourism

Buttons

Plain Button

<a href="#" style=" background-color: #3b8af1; color: #ffffff; padding: 10px 20px; text-decoration: none; display: inline-block;"> Click Me! </a>
padding: The first value is vertical padding the second is horizontal.
Click Me!

Button w/ Rounded Corners

<a href="#" style=" background-color: #3b8af1; color: #ffffff; padding: 10px 20px; border-radius: 5px; text-decoration: none; display: inline-block;"> Click Me! </a>
Click Me!

Button w/ Drop Shadow

<a href="#" style=" background-color: #3b8af1; color: #ffffff; padding: 10px 20px; border-radius: 5px; box-shadow: 2px 4px 15px 0px rgba(0, 0, 0, 0.1); text-decoration: none; display: inline-block;"> Click Me! </a>
padding: The first value is vertical padding, the second is horizontal.
box-shadow: The numbers represent horizontal offset, vertical offset, blur, spread, and the '.1' is opacity
Click Me!

Static Listings

Static Listing

<div style=" display: flex; justify-content: center; width: 100%; max-width: 1000px; flex-wrap: wrap; row-gap: 20px; column-gap: 20px; " > <img src="<IMG src goes here>" width="275" height="225" style="object-fit: cover; flex-grow: 1" /> <div style=" flex: 1 0 min(400px, 100%); flex-grow: 500; display: flex; flex-direction: column; justify-content: center; " > <strong class="h4"><!--Title Goes Here--></strong> <p> <!-- Description Goes Here --> </p> <div style=" display: flex; flex-direction: column; margin-top: 10px; " > <span>555-201-2918</span> <a href="<Url Goes Here>" ><!--URL Text Goes Here--></a > <span >Email: <a href="mailto:<Email Goes Here>" ><!--Email Goes Here-->></a ></span > </div> </div> </div>
Old Moe Guide Service

Magna ut nostrud adipisicing dolor consequat incididunt cupidatat. Voluptate qui cupidatat velit amet sit sunt anim commodo fugiat est qui minim ea. Culpa quis consectetur ex mollit ipsum veniam dolore.

555-201-2918 www.oldmoeguideservice.com Email: info@spinnerfall.com

Basic Wrapper

Surround static listings with this to provide proper spacing <div style="display: flex; flex-direction:column; row-gap: 30px; padding: 0 40px"> <!-- Static Listing 1 --> <!-- Static Listing 2 --> <!-- Static Listing 3 --> <!-- Static Listing 4 --> </div>
Old Moe Guide Service

Magna ut nostrud adipisicing dolor consequat incididunt cupidatat. Voluptate qui cupidatat velit amet sit sunt anim commodo fugiat est qui minim ea. Culpa quis consectetur ex mollit ipsum veniam dolore.

Old Moe Guide Service

Magna ut nostrud adipisicing dolor consequat incididunt cupidatat. Voluptate qui cupidatat velit amet sit sunt anim commodo fugiat est qui minim ea. Culpa quis consectetur ex mollit ipsum veniam dolore.

Old Moe Guide Service

Magna ut nostrud adipisicing dolor consequat incididunt cupidatat. Voluptate qui cupidatat velit amet sit sunt anim commodo fugiat est qui minim ea. Culpa quis consectetur ex mollit ipsum veniam dolore.

Centered Wrapper

Surround static listings with this to center them (and space them properly) <div style="display: flex; flex-direction:column; align-items: center; row-gap: 30px; padding: 0 40px"> <!-- Static Listing 1 --> <!-- Static Listing 2 --> <!-- Static Listing 3 --> <!-- Static Listing 4 --> </div>
Old Moe Guide Service

Magna ut nostrud adipisicing dolor consequat incididunt cupidatat. Voluptate qui cupidatat velit amet sit sunt anim commodo fugiat est qui minim ea. Culpa quis consectetur ex mollit ipsum veniam dolore.

Old Moe Guide Service

Magna ut nostrud adipisicing dolor consequat incididunt cupidatat. Voluptate qui cupidatat velit amet sit sunt anim commodo fugiat est qui minim ea. Culpa quis consectetur ex mollit ipsum veniam dolore.

Misc

Open Link in New Tab

<a href="<URL goes here>" target="_blank"></a> This link will open in a new tab.

2x2 Photo Grid

Note: The example below is inside a centered wrapper <div style=" max-width: 500px; grid-template-columns: repeat( auto-fit, minmax(max(150px, 100% / 2 - 10px), 1fr) ); grid-gap: 10px; width: 100%; display: grid; " > <img src="<IMG SRC>" style="object-fit: cover; width: 100%; aspect-ratio: 1;" /> <img src="<IMG SRC>" style="object-fit: cover; width: 100%; aspect-ratio: 1;" /> <img src="<IMG SRC>" style="object-fit: cover; width: 100%; aspect-ratio: 1;" /> <img src="<IMG SRC>" style="object-fit: cover; width: 100%; aspect-ratio: 1;" /> </div>
max-witdth: 500px is the maximum size of the grid. grid-template-columns: 150px is the minimum image size before breaking grid-gap: Sets column gap and row gap at the same time
box-shadow: The numbers represent horizontal offset, vertical offset, blur, spread, and the '.1' is opacity

Vertically Aligned Image and Text

<div style=" display: flex; align-items: center; justify-content: center; column-gap: 30px; row-gap: 30px; max-width: 1080px; margin: 0 auto; flex-wrap: wrap; padding: 0 40px; " > <img src="<IMG src goes here>" style="width: 100%; max-width: 400px; height: auto" /> <div style="flex: 1 0 min(300px, 100%); flex-grow: 500"> <p> Text goes here </p> </div> </div>

Incididunt mollit quis occaecat non eiusmod ad nisi esse ipsum nostrud pariatur excepteur irure consequat. Labore ipsum id id do culpa. Reprehenderit consequat proident ut veniam.

Full Width Img w/ Button

<style> .transparent-button-over-image{ padding: 8px; width: 100%; max-width: 8em; text-align: center; font-weight: bold; transition: .15s ease opacity, .15s ease transform; text-decoration: none; color: inherit; border-radius: 2px; opacity: .95; background-color: #ffffff; box-shadow: 0 6px 10px rgba(0,0,0,.3); font-size: 120%; } .transparent-button-over-image:hover{ opacity: 1; transform: translateY(-2px); } </style> <div style="position: relative; height: 400px; display: grid; place-items: center;"> <img src="<IMG SRC>" style="width: 100%; height: 100%; position: absolute; top: 0; left:0; object-fit: cover; z-index: -1;"/> <a class="transparent-button-over-image" href="<URL Goes Here>">Click Me!</a> </div>
Click Me!

Set Width Img w/ Button

<style> .transparent-button-over-image{ padding: 8px; width: 100%; max-width: 8em; text-align: center; font-weight: bold; transition: .15s ease opacity, .15s ease transform; text-decoration: none; color: inherit; border-radius: 2px; opacity: .95; background-color: #ffffff; box-shadow: 0 6px 10px rgba(0,0,0,.3); font-size: 120%; } .transparent-button-over-image:hover{ opacity: 1; transform: translateY(-2px); } </style> <div style=" height: 300px; max-width: 1080px; padding: 0 40px; position: relative; margin: 0 auto; display: grid; place-items: center; " > <img src="<IMG SRC>" style="width: 100%; height: 100%; position: absolute; top: 0; left:0; object-fit: cover; z-index: -1;"/> <a class="transparent-button-over-image" href="<URL Goes Here>">Click Me!</a> </div>
Click Me!

Double Img w/ Button

<style> .transparent-button-over-image{ padding: 8px; width: 100%; max-width: 8em; text-align: center; font-weight: bold; transition: .15s ease opacity, .15s ease transform; text-decoration: none; color: inherit; border-radius: 2px; opacity: .95; background-color: #ffffff; box-shadow: 0 6px 10px rgba(0,0,0,.3); font-size: 120%; } .transparent-button-over-image:hover{ opacity: 1; transform: translateY(-2px); } </style> <div style=" max-width: 1200px; display: grid; grid-template-columns: repeat( auto-fit, minmax(min(500px, 100%), 1fr) ); margin: 0 auto; " > <div style=" position: relative; height: 300px; width: 100%; display: grid; place-items: center; " > <img src="<IMG SRC goes here>" style=" width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; z-index: -1; " /> <a class="transparent-button-over-image" href="<URL goes here>" >Click Me!</a > </div> <div style=" position: relative; height: 300px; width: 100%; display: grid; place-items: center; " > <img src="<IMG SRC goes here>" style=" width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; z-index: -1; " /> <a class="transparent-button-over-image" href="<URL goes here>" >Click Me!</a > </div> </div>
Click Me!
Click Me!