<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>A Basic HTML5 Template by Simplicity</title> <meta name="description" content="A simple HTML5 Template for new projects."> <meta name="author" content="Simplicity"> <meta property="og:title" content="A Basic HTML5 Template"> <meta property="og:type" content="website"> <meta property="og:url" content=""> <meta property="og:description" content="A simple HTML5 Template for new projects."> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="body_wrap">
</div> </body> </html>

#main_head

#main_content
#gridRow-1
#gridCol-1





#Welcome

#How to build a website in five minutes with Simplicity.
#What makes Simplicity different.
#Working with content.
#Adding css-classes.
#Adding menus and other libary classes.
#Working with xPaths; the real power of Simplicity.

#COLORS

Backgrounds

Page Background
Header
Left Column
Main Content
Right Column

HEADLINES

H1
H2
H3
H4
H5
H6

PARAGRAPHS

P

LINKS

A
Navigational links

LISTS

LI

STANDARD BUTTONS

Background color
Color

ACTION BUTTONS

Background color
Color

GO-TO BUTTONS

Background color
Color

SUBMIT BUTTONS

Background color
Color

FORMS

Background color
Border color
Labels
Input BG
Input Color
Input border color

#Grid

Body width

Header
Aside left
Main Content
Aside right
Footer

Select Grid-template

  • Grid 1
  • Grid 4
  • Grid 5
  • Grid 2
  • Grid 3

#TYPOGRAPHY

SELECT FONTS

— Choose from Googles repository or standard fonts. —

  • — LINE-HEIGHT —

#Rows
& Columns

ID: gridRow-1

GRIDCOL-1

#Content

#Add Element

X

CSS

#Load CSS
#Download CSS
Add CSS
index Type Category Name ID Image Comment DataId Path Properties
{{index}} {{json.cssType}} {{json.cssCategory}} {{json.className}} {{json.catalog_id}} {{json.catalog_img}} {{json.catalog_comment}} {{json.catalog_elementDataId}} {{json.catalog_elementPath}} {{json.cssProps}}
Sort
Category: text-colors
text-color_neutral-1
  • color: var(--col_neutrals_1);
    }
Category: text-colors
text-color_neutral-2
  • color: var(--col_neutrals_2);
    }
Category: text-colors
text-color_neutral-3
  • color: var(--col_neutrals_3);
    }
Category: text-colors
text-color_neutral-4
  • color: var(--col_neutrals_4);
    }
Category: text-colors
text-color_neutral-5
  • color: var(--col_neutrals_5);
    }
Category: text-colors
text-color_neutral-6
  • color: var(--col_neutrals_6);
    }
Category: text-colors
text-color_neutral-7
  • color: var(--col_neutrals_7);
    }
Category: text-colors
text-color_neutral-8
  • color: var(--col_neutrals_8);
    }
Category: text-colors
text-color_neutral-9
  • color: var(--col_neutrals_9);
    }
Category: text-colors
text-color_neutral-10
  • color: var(--col_neutrals_10);
    }
Category: text-colors
text-color_primary-1
  • color: var(--col_primaries_1);
    }
Category: text-colors
text-color_primary-2
  • color: var(--col_primaries_2);
    }
Category: text-colors
text-color_primary-3
  • color: var(--col_primaries_3);
    }
Category: text-colors
text-color_primary-4
  • color: var(--col_primaries_4);
    }
Category: text-colors
text-color_secondaries-1
  • color: var(--col_secondaries_1);
    }
Category: text-colors
text-color_secondaries-2
  • color: var(--col_secondaries_2);
    }
Category: text-colors
text-color_secondaries-3
  • color: var(--col_secondaries_3);
    }
Category: text-colors
text-color_secondaries-4
  • color: var(--col_secondaries_4);
    }
Category: text-colors
text-color_secondaries-5
  • color: var(--col_secondaries_5);
    }
Category: text-colors
text-color_accents-1
  • color: var(--col_accents_1);
    }
Category: text-colors
text-color_accents-2
  • color: var(--col_accents_2);
    }
Category: text-colors
text-color_accents-3
  • color: var(--col_accents_3);
    }
Category: text-colors
text-color_accents-4
  • color: var(--col_accents_4);
    }
Category: text-colors
text-color_accents-5
  • color: var(--col_accents_5);
    }
Category: text-colors
text-color_spots-1
  • color: var(--col_spots_1);
    }
Category: text-colors
text-color_spots-2
  • color: var(--col_spots_2);
    }
Category: text-colors
text-color_spots-3
  • color: var(--col_spots_3);
    }
Category: text-colors
text-color_spots-4
  • color: var(--col_spots_4);
    }
Category: text-colors
text-color_spots-5
  • color: var(--col_spots_5);
    }
Category: background-colors
background-color_neutral-1
  • background-color: var(--col_neutrals_1);
    }
Category: background-colors
background-color_neutral-2
  • background-color: var(--col_neutrals_2);
    }
Category: background-colors
background-color_neutral-3
  • background-color: var(--col_neutrals_3);
    }
Category: background-colors
background-color_neutral-4
  • background-color: var(--col_neutrals_4);
    }
Category: background-colors
background-color_neutral-5
  • background-color: var(--col_neutrals_5);
    }
Category: background-colors
background-color_neutral-6
  • background-color: var(--col_neutrals_6);
    }
Category: background-colors
background-color_neutral-7
  • background-color: var(--col_neutrals_7);
    }
Category: background-colors
background-color_neutral-8
  • background-color: var(--col_neutrals_8);
    }
Category: background-colors
background-color_neutral-9
  • background-color: var(--col_neutrals_9);
    }
Category: background-colors
background-color_neutral-10
  • background-color: var(--col_neutrals_10);
    }
Category: background-colors
background-color_primary-1
  • background-color: var(--col_primaries_1);
    }
Category: background-colors
background-color_primary-2
  • background-color: var(--col_primaries_2);
    }
Category: background-colors
background-color_primary-3
  • background-color: var(--col_primaries_3);
    }
Category: background-colors
background-color_primary-4
  • background-color: var(--col_primaries_4);
    }
Category: background-colors
background-color_secondaries-1
  • background-color: var(--col_secondaries_1);
    }
Category: background-colors
background-color_secondaries-2
  • background-color: var(--col_secondaries_2);
    }
Category: background-colors
background-color_secondaries-3
  • background-color: var(--col_secondaries_3);
    }
Category: background-colors
background-color_secondaries-4
  • background-color: var(--col_secondaries_4);
    }
Category: background-colors
background-color_secondaries-5
  • background-color: var(--col_secondaries_5);
    }
Category: background-colors
background-color_accents-1
  • background-color: var(--col_accents_1);
    }
Category: background-colors
background-color_accents-2
  • background-color: var(--col_accents_2);
    }
Category: background-colors
background-color_accents-3
  • background-color: var(--col_accents_3);
    }
Category: background-colors
background-color_accents-4
  • background-color: var(--col_accents_4);
    }
Category: background-colors
background-color_accents-5
  • background-color: var(--col_accents_5);
    }
Category: background-colors
background-color_spots-1
  • background-color: var(--col_spots_1);
    }
Category: background-colors
background-color_spots-2
  • background-color: var(--col_spots_2);
    }
Category: background-colors
background-color_spots-3
  • background-color: var(--col_spots_3);
    }
Category: background-colors
background-color_spots-4
  • background-color: var(--col_spots_4);
    }
Category: background-colors
background-color_spots-5
  • background-color: var(--col_spots_5);
    }
Category: Buttons
button-1
display: flex; align-items: center; font-family: inherit; font-weight: 500; font-size: 16px; padding: 0.7em 1.4em 0.7em 1.1em; color: white; background: #ad5389; background: linear-gradient(0deg, rgba(20,167,62,1) 0%, rgba(102,247,113,1) 100%); border: none; box-shadow: 0 0.7em 1.5em -0.5em #14a73e98; letter-spacing: 0.05em; border-radius: 20em; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-1:hover { box-shadow: 0 0.5em 1.5em -0.5em #14a73e98; } .button-1:active { box-shadow: 0 0.3em 1em -0.5em #14a73e98; }
Category: Buttons
button-2
align-items: center; background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB); border: 0; border-radius: 8px; box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px; box-sizing: border-box; color: #FFFFFF; display: flex; font-family: Phantomsans, sans-serif; font-size: 20px; justify-content: center; line-height: 1em; max-width: 90%; min-width: 140px; padding: 19px 24px; text-decoration: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; white-space: nowrap; cursor: pointer; } #body_wrap .button-2:hover {opacity: .6;}
Category: Buttons
button-3
align-items: center; background-color: #fff; border: 2px solid #000; box-sizing: border-box; color: #000; cursor: pointer; display: inline-flex; fill: #000; font-family: Inter,sans-serif; font-size: 16px; font-weight: 600; height: 48px; justify-content: center; letter-spacing: -.8px; line-height: 24px; min-width: 140px; outline: 0; padding: 0 17px; text-align: center; text-decoration: none; transition: all .3s; user-select: none; -webkit-user-select: none; touch-action: manipulation; } #body_wrap .button-3:focus {color: #171e29;} #body_wrap .button-3:hover {border-color: #06f; color: #06f; fill: #06f;} #body_wrap .button-3:active { border-color: #06f; color: #06f; fill: #06f;}
Category: Buttons
button-4
align-items: center; background-color: #fee6e3; border: 2px solid #111; border-radius: 8px; box-sizing: border-box; color: #111; cursor: pointer; display: flex; font-family: Inter,sans-serif; font-size: 16px; height: 48px; justify-content: center; line-height: 24px; max-width: 90%; width: 150px padding: 0 25px; position: relative; text-align: center; text-decoration: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; } #body_wrap .button-4:after { background-color: #111; border-radius: 8px; content: ""; display: block; height: 48px; left: 0; width: 100%; position: absolute; top: -2px; transform: translate(8px, 8px); transition: transform .2s ease-out; z-index: -1; } #body_wrap .button-4:hover::after {transform: translate(0, 0);} #body_wrap .button-4:active {background-color: #ffdeda;outline: 0;} #body_wrap .button-4:hover {outline: 0;}
Category: Buttons
button-5
border: none; outline: none; max-width: 90%; width: 195px; height: 40px; color: rgb(255, 255, 255); background: #111; cursor: pointer; position: relative; z-index: 0; border-radius: 10px; user-select: none; -webkit-user-select: none; touch-action: manipulation; padding-top: 0; margin-top: 8px; margin-left: 10px; } #body_wrap .button-5:before { content: ""; background: linear-gradient( 45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000 ); position: absolute; top: -2px; left: -2px; background-size: 400%; z-index: -1; filter: blur(5px); -webkit-filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing-button-85 20s linear infinite; transition: opacity 0.3s ease-in-out; border-radius: 10px; } @keyframes glowing-button-85 { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } #body_wrap .button-5:after { z-index: -1; content: ""; position: absolute; width: 100%; height: 100%; background: #222; left: 0; top: 0; border-radius: 10px; }