Style Guide

Developer
Keithbarney
Size
8,900 Kb
Views
8,096
  1. Style Guide Previews
  2. Style Guide HTML Codes
  3. Style Guide CSS Codes

How do I make an style guide?

What is a style guide? How do you make a style guide? This script and codes were developed by Keithbarney on 28 September 2022, Wednesday.

Style Guide Previews
IQ Test

Style Guide - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Style Guide</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="//use.typekit.net/qpt7nkl.js"></script>
<script>try{Typekit.load();}catch(e){}</script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section> <div class="global-width"> <!-- Buttons on dark background --> <div class="container"> <h2 class="margin-bottom">Links</h2> <p>Lure asperiores quis cumque <a href="#" class="blue underline">ornare quidem quas cupidatat odio anim</a>, ultrices recusandae? Fuga blanditiis. Praesent quisquam vivamus aperiam potenti condimentum, eu! Delectus quia turpis eaque reprehenderit alias accusamus, ac fuga officia minus voluptatibus facilisi sociis primis. Malesuada quod corporis. Curabitur! Facilisi ipsam magna metus sit! Penatibus consectetuer, metus, pede leo, officia, sint! Corrupti eros deleniti sociis. Tempus necessitatibus saepe. </p> </div> </div>
</section>
<section> <div class="global-width"> <!-- Buttons --> <div class="container overflow"> <h2 class="margin-bottom">Buttons</h2> <div class="col100 margin-bottom-double"> <!-- Orange Buttons --> <div class="col50"> <div class="margin-bottom"><a href="#" class="button small orange">This is a button</a></div> <div class="margin-bottom"><a href="#" class="button medium orange">This is a button</a></div> <a href="#" class="button large orange">This is a button</a> </div> <!-- Orange Outlined Buttons --> <div class="col50"> <div class="margin-bottom"><a href="#" class="button small orange outline">This is a button</a></div> <div class="margin-bottom"><a href="#" class="button medium orange outline">This is a button</a></div> <a href="#" class="button large orange outline">This is a button</a> </div> </div> <!-- Blue Buttons --> <div class="col50"> <div class="margin-bottom"><a href="#" class="button small blue">This is a button</a></div> <div class="margin-bottom"><a href="#" class="button medium blue">This is a button</a></div> <a href="#" class="button large blue">This is a button</a> </div> <!-- Blue Outlined Buttons --> <div class="col50"> <div class="margin-bottom"><a href="#" class="button small blue outline">This is a button</a></div> <div class="margin-bottom"><a href="#" class="button medium blue outline">This is a button</a></div> <a href="#" class="button large blue outline">This is a button</a> </div> </div> <!-- Buttons on dark background --> <div class="container dark overflow" style="background: url('https://www.realtymogul.com/sites/all/themes/realty_mogul/images/homepage2015/header__bg.jpg') center top no-repeat; background-size: cover;"> <h2 class="margin-bottom white">Buttons on dark background</h2> <div class="margin-bottom"><a href="#" class="button small white outline">This is a button</a></div> <div class="margin-bottom"><a href="#" class="button medium white outline">This is a button</a></div> <a href="#" class="button large white outline">This is a button</a> </div> </div>
</section>
<section> <div class="global-width"> <div class="container overflow"> <h2 class="margin-bottom">Form Elements</h2> <div class="col100 margin-bottom-double"> <!-- Solid Inputs --> <div class="col50"> <div class="margin-bottom"> <select href="#" class="small body-color"> <option>This is an option</option> <option>This is an option</option> </select> </div> <div class="margin-bottom"> <select href="#" class="medium body-color"> <option>This is an option</option> <option>This is an option</option> </select> </div> <select href="#" class="large body-color"> <option>This is an option</option> <option>This is an option</option> </select> </div> <!-- Outline Inputs --> <div class="col50"> <div class="margin-bottom"> <select href="#" class="small body-color outline"> <option>This is an option</option> <option>This is an option</option> </select> </div> <div class="margin-bottom"> <select href="#" class="medium body-color outline"> <option>This is an option</option> <option>This is an option</option> </select> </div> <select href="#" class="large body-color outline"> <option>This is an option</option> <option>This is an option</option> </select> </div> </div> <!-- Outline Inputs --> <div class="col100"> <div class="col50"> <div class="margin-bottom"><input placeholder="Placeholder" href="#" class="small body-color outline"></div> <div class="margin-bottom"><input placeholder="Placeholder" href="#" class="medium body-color outline"></div> <input placeholder="Placeholder" href="#" class="large body-color outline"> </div> </div> </div> <!-- Form Elements on dark background --> <div class="container dark overflow" style="background: url('https://www.realtymogul.com/sites/all/themes/realty_mogul/images/homepage2015/header__bg.jpg') center top no-repeat; background-size: cover;"> <h2 class="white margin-bottom">Form Elements on dark background</h2> <!-- Solid Inputs --> <div class="col50"> <div class="margin-bottom"> <select href="#" class="small white outline"> <option>This is an option</option> <option>This is an option</option> </select> </div> <div class="margin-bottom"> <select href="#" class="medium white outline"> <option>This is an option</option> <option>This is an option</option> </select> </div> <select href="#" class="large white outline"> <option>This is an option</option> <option>This is an option</option> </select> </div> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Style Guide - Script Codes CSS Codes

@charset "UTF-8";
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 0;
}
html, body { height: 100%; width: 100%;
}
body { background-color: #eef1f7; text-align: center;
}
body { color: #96a0ad; font-family: "source-sans-pro", arial, sans-serif; font-size: 15px; line-height: 1.5; text-rendering: optimizeLegibility;
}
h1, h2, h3, p { line-height: 1.5; color: #96a0ad;
}
h1, h2, h3 { color: #434a54; font-weight: 200;
}
h1 { font-size: 68px;
}
@media only screen and (max-width: 700px) { h1 { font-size: 50px; }
}
@media only screen and (max-width: 380px) { h1 { font-size: 30px; }
}
h2 { font-size: 40px;
}
@media only screen and (max-width: 700px) { h2 { font-size: 30px; }
}
@media only screen and (max-width: 380px) { h2 { font-size: 20px; }
}
h3 { font-size: 30px;
}
p { font-size: 15px;
}
b { font-weight: 700;
}
.white { color: white;
}
.orange { color: #e9573e;
}
.blue { color: #4b89dc;
}
.body-color { color: #96a0ad;
}
section { padding: 120px 0; /* border-bottom: 2px solid $body-color */ overflow: auto;
}
@media only screen and (max-width: 700px) { section { padding: 60px 0; }
}
.global-width { max-width: 1280px; padding: 0 30px; margin: auto;
}
.global-width.column-3 { padding: 0 15px;
}
@media only screen and (max-width: 380px) { .global-width { padding: 0 15px; }
}
.relative { position: relative;
}
.col25 { width: 25%;
}
.col33 { width: 33.33%;
}
.col50 { width: 50%;
}
.col100 { width: 100%; overflow: auto;
}
.col25, .col33, .col50 { float: left;
}
@media only screen and (max-width: 700px) { .col25, .col33, .col50 { float: initial; width: 100%; margin-bottom: 30px; } .col25:last-child, .col33:last-child, .col50:last-child { margin-bottom: 0; }
}
.container { padding: 30px; background-color: white; text-align: left; overflow: auto;
}
.container.dark { background-color: black;
}
.margin-top-double { margin-top: 60px;
}
@media only screen and (max-width: 380px) { .margin-top-double { margin-top: 30px; }
}
.margin-top { margin-top: 30px;
}
.margin-top-half { margin-top: 15px;
}
@media only screen and (max-width: 380px) { .margin-top-half { margin-top: 7.5px; }
}
.margin-bottom-double { margin-bottom: 60px;
}
@media only screen and (max-width: 380px) { .margin-bottom-double { margin-bottom: 30px; }
}
.margin-bottom { margin-bottom: 30px;
}
.margin-bottom-half { margin-bottom: 15px;
}
@media only screen and (max-width: 380px) { .margin-bottom-half { margin-bottom: 7.5px; }
}
.padding-left { padding-left: 15px;
}
@media only screen and (max-width: 1000px) { .padding-left { padding-left: 7.5px !important; }
}
@media only screen and (max-width: 380px) { .padding-left { padding-left: 0; }
}
.padding-left-half { padding-left: 7.5px;
}
@media only screen and (max-width: 380px) { .padding-left-half { padding-left: 0; }
}
.padding-right { padding-right: 15px;
}
@media only screen and (max-width: 1000px) { .padding-right { padding-right: 7.5px !important; }
}
@media only screen and (max-width: 380px) { .padding-right { padding-right: 0; }
}
.padding-right-half { padding-right: 7.5px;
}
@media only screen and (max-width: 380px) { .padding-right-half { padding-right: 0; }
}
.width-100 { width: 100% !important;
}
.clear { display: inline-block; width: 100%; clear: both;
}
input[type=text], input[type=email], input[type=url], input[type=password], textarea, input[type=checkbox], input[type=submit], option, input[type=button], input[type=file], input[type=search], input[type=radio], select, button[type=button], button[type=submit], button[type=reset] { appearance: none; -webkit-appearance: none; -moz-appearance: none; outline: none; text-rendering: optimizeLegibility;
}
input::-webkit-input-placeholder { color: #96a0ad; opacity: 1; transition: all 0.1s ease;
}
input::-moz-placeholder { color: #96a0ad; opacity: 1; transition: all 0.1s ease;
}
input::-ms-input-placeholder { color: #96a0ad; opacity: 1; transition: all 0.1s ease;
}
input, select { font-family: "source-sans-pro", arial, sans-serif; position: relative; z-index: 10; color: white; -webkit-appearance: none; transition: all 0.1s ease; border: 0; border-radius: 0;
}
input:hover, select:hover { background-color: #aab3be;
}
input.small, select.small { font-size: 12px;
}
input.medium, select.medium { font-size: 15px;
}
input.large, select.large { font-size: 20px;
}
@media only screen and (max-width: 700px) { input.medium, input.large, select.medium, select.large { font-size: 15px; }
}
input.body-color, select.body-color { color: white;
}
input.body-color:hover, select.body-color:hover { background-color: #aab3be;
}
input.outline, select.outline { color: #96a0ad; border: 2px solid rgba(150, 160, 173, 0.3);
}
input.outline:hover, select.outline:hover { border: 2px solid #96a0ad; background-color: transparent;
}
input.white:hover, select.white:hover { background-color: transparent;
}
input.white.outline, select.white.outline { color: white; border: 2px solid rgba(255, 255, 255, 0.3); background-color: transparent;
}
input.white.outline:hover, select.white.outline:hover { border: 2px solid white; background-color: transparent;
}
input { background-color: white;
}
input.body-color.small { padding: 9px 15px;
}
input.body-color.medium { padding: 11px 15px;
}
input.body-color.large { padding: 16px 15px;
}
input.outline { background-color: transparent;
}
input.outline.small { padding: 7px 15px;
}
input.outline.medium { padding: 9px 15px;
}
input.outline.large { padding: 14px 15px;
}
select { cursor: pointer; background-color: #96a0ad;
}
select.body-color { background: #96a0ad url("http://keithbarney.me/images/select-arrow.svg") no-repeat right;
}
select.body-color.small { padding: 9px 35px 9px 15px;
}
select.body-color.medium { padding: 11px 45px 12px 15px;
}
select.body-color.large { padding: 16px 55px 16px 15px;
}
select.outline { background: transparent url("http://keithbarney.me/images/select-arrow-gray.svg") no-repeat right;
}
select.outline.small { padding: 7px 35px 7px 15px;
}
select.outline.medium { padding: 9px 45px 10px 15px;
}
select.outline.large { padding: 14px 55px 14px 15px;
}
select.white { background: transparent url("http://keithbarney.me/images/select-arrow.svg") no-repeat right;
}
a { text-decoration: none;
}
a:hover { text-decoration: underline;
}
a.underline { text-decoration: underline;
}
a.orange { color: #e9573e;
}
a.orange:hover { color: #fb6e52;
}
a.blue { color: #4b89dc;
}
a.blue:hover { color: #5d9cec;
}
a.body-color { color: #96a0ad;
}
a.body-color:hover { color: #aab3be;
}
.button { background-color: transparent; display: inline-block; text-decoration: none !important; text-align: center; transition: all 0.1s ease; font-weight: 700; /* text-transform: capitalize */ color: white; padding: 0 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
}
@media only screen and (max-width: 700px) { .button { width: initial; width: 100% !important; }
}
.button.small { font-size: 12px; height: 35px; line-height: 35px; width: 150px;
}
.button.medium { font-size: 15px; height: 45px; line-height: 45px; width: 200px;
}
.button.large { font-size: 20px; height: 60px; line-height: 60px; width: 300px;
}
@media only screen and (max-width: 700px) { .button.medium, .button.large { font-size: 15px; height: 45px; line-height: 45px; width: 200px; }
}
.button.orange { color: white !important; background-color: #e9573e;
}
.button.orange:hover { background-color: #fb6e52;
}
.button.orange.outline { color: #e9573e !important; border: 2px solid rgba(233, 87, 62, 0.3); background-color: transparent;
}
.button.orange.outline:hover { border: 2px solid #e9573e; background-color: transparent;
}
.button.blue { color: white !important; background-color: #4b89dc;
}
.button.blue:hover { background-color: #5d9cec;
}
.button.blue.outline { color: #4b89dc !important; border: 2px solid rgba(75, 137, 220, 0.3); background-color: transparent;
}
.button.blue.outline:hover { border: 2px solid #4b89dc; background-color: transparent;
}
.button.white.outline { color: white !important; border: 2px solid rgba(255, 255, 255, 0.3); background-color: transparent;
}
.button.white.outline:hover { border: 2px solid white; background-color: transparent;
}
header { z-index: 10; width: 100%; height: 80px; position: absolute; top: 0; border-top: 4px solid #e9573e;
}
header .left, header .right { position: relative;
}
header .right { height: 80px; width: 500px; display: inline-block; float: right;
}
@media only screen and (max-width: 700px) { header .right { width: initial; }
}
header .right .icon-menu { transition: all 0.1s ease; display: inline-block; width: 40px; height: 40px; /* background-color: blue */ line-height: 36px; position: absolute; top: 20px; right: 0; cursor: pointer; border: 2px solid rgba(255, 255, 255, 0.3); display: none;
}
header .right .icon-menu:hover { border: 2px solid white;
}
@media only screen and (max-width: 1000px) { header .right .icon-menu { display: inline; }
}
header .right .icon-menu:before { content: ""; font-size: 30px; color: white;
}
header .logo { position: absolute; top: 0; left: 0; width: 200px; height: 80px; padding-top: 18px; display: inline-block;
}
@media only screen and (max-width: 1000px) { header .logo { width: 160px; padding-top: 23px; left: 15px; }
}
header .logo img { width: 100%;
}
header .phone { position: absolute; top: 0; left: 230px; height: 80px; line-height: 80px; display: inline-block; font-size: 16px; color: white;
}
header ol.nav { position: absolute; top: 0; right: 155px; height: 80px; line-height: 80px;
}
header ol.nav li { display: inline-block;
}
header ol.nav li a { font-size: 16px; color: white;
}
header ol.nav li + li { margin-left: 15px;
}
header .cta { position: absolute; top: 20px; right: 0; height: 40px; line-height: 36px; padding: 0 30px; width: auto !important;
}
@media only screen and (max-width: 700px) { header .cta, header .phone, header ol.nav { display: none; }
}
@media only screen and (max-width: 1000px) { header .cta, header ol.nav, header .phone { display: none; }
}
.splash { z-index: 1; border: 0; /* height: 800px */ background: url("https://www.realtymogul.com/sites/all/themes/realty_mogul/images/homepage2015/header__bg.jpg") center top no-repeat; background-size: cover; padding: 180px 0; overflow: hidden;
}
@media only screen and (max-width: 700px) { .splash { padding: 120px 0 60px 0; }
}
@media only screen and (max-width: 380px) { .splash { padding: 120px 0 60px 0; }
}
.splash h1 { font-weight: 200;
}
.splash .form { width: 100%; padding: 30px; overflow: hidden; background-color: rgba(67, 74, 84, 0.5); text-align: left;
}
@media only screen and (max-width: 700px) { .splash .form { padding: 15px; }
}
.splash .form-headline { color: white; font-size: 30px; font-weight: 300; line-height: 1.5; display: block; margin-bottom: 30px;
}
@media only screen and (max-width: 380px) { .splash .form-headline { font-size: 20px; margin-bottom: 15px; }
}
.splash input::-webkit-input-placeholder { color: white; opacity: 1; transition: all 0.1s ease;
}
.splash input::-moz-placeholder { color: white; opacity: 1; transition: all 0.1s ease;
}
.splash input::-ms-input-placeholder { color: white; opacity: 1; transition: all 0.1s ease;
}
@media only screen and (max-width: 700px) { .splash .col25 { margin-bottom: 15px; } .splash .col25:last-child { margin-bottom: 0; }
}
.product, .transaction { position: relative; background-color: white; text-align: center; border-bottom: 2px solid #e9573e; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2); transition: all 0.1s ease;
}
.product:hover, .transaction:hover { border-bottom: 10px solid #e9573e;
}
@media only screen and (max-width: 1000px) { .product:hover, .transaction:hover { border-bottom: 2px solid #e9573e; }
}
.product { height: 530px;
}
@media only screen and (max-width: 1000px) { .product { height: auto; }
}
.product .button { position: absolute; bottom: 30px; margin: auto; left: 0; right: 0;
}
@media only screen and (max-width: 1000px) { .product .button { width: 100%; position: initial; }
}
.transaction { height: 501px;
}
@media only screen and (max-width: 1000px) { .transaction { height: auto; }
}
.transaction .transaction-top img { width: 100%;
}
.transaction .transaction-bottom { padding: 30px; line-height: 1.5;
}
.transaction .transaction-bottom .transaction-headline { font-size: 40px; color: #e9573e; line-height: 1; margin-bottom: 15px;
}
@media only screen and (max-width: 380px) { .transaction .transaction-bottom .transaction-headline { font-size: 20px; }
}
.product-top { padding: 30px; text-align: center; background: #4b89dc url("https://www.realtymogul.com/sites/all/themes/realty_mogul/images/homepage2015/box-gamma.jpg") center top no-repeat; background-size: cover;
}
@media only screen and (max-width: 700px) { .product-top { padding: 15px; }
}
.product-top .product-title { font-size: 30px; font-weight: 300;
}
@media only screen and (max-width: 380px) { .product-top .product-title { font-size: 20px; }
}
.product-top .product-sub-title { font-size: 18px; font-weight: 700;
}
@media only screen and (max-width: 700px) { .product-top .product-sub-title { font-size: 15px; }
}
.product-bottom { padding: 30px;
}
@media only screen and (max-width: 380px) { .product-bottom { padding: 15px; }
}
.product-bottom ul li { font-size: 18px; line-height: 1.5; margin-bottom: 15px;
}
@media only screen and (max-width: 380px) { .product-bottom ul li { font-size: 15px; margin-bottom: 7.5px; }
}
.investor-breaker { width: 100%; padding: 0 30px; height: 120px; background-color: white;
}
@media only screen and (max-width: 1000px) { .investor-breaker { padding: 15px; height: auto; }
}
.investor-breaker .button { position: relative; top: 20px;
}
@media only screen and (max-width: 1000px) { .investor-breaker .button { position: initial; }
}
.investor-breaker .investor-breaker-wrapper { display: inline-block;
}
.investor-breaker-headline { font-size: 30px; margin-right: 30px; display: inline-block; line-height: 120px; font-weight: 200;
}
@media only screen and (max-width: 1000px) { .investor-breaker-headline { display: block; margin-bottom: 15px; line-height: 1.5; margin-right: initial; }
}
@media only screen and (max-width: 700px) { .investor-breaker-headline { font-size: 20px; }
}
.skyline { padding: 120px 15px; background: #4b89dc url("https://www.realtymogul.com/sites/all/themes/realty_mogul/images/homepage2015/box-gamma.jpg") center top no-repeat; background-size: cover;
}
@media only screen and (max-width: 700px) { .skyline { padding: 30px 15px; }
}
.skyline-headline { font-size: 68px; line-height: 1.5; font-weight: 200;
}
.skyline-headline b { font-weight: 700;
}
@media only screen and (max-width: 700px) { .skyline-headline { font-size: 50px; }
}
@media only screen and (max-width: 380px) { .skyline-headline { font-size: 30px; }
}
.featured-articles { background: #4b89dc url("https://www.realtymogul.com/sites/all/themes/realty_mogul/images/homepage2015/featured_articles__bg.jpg") center top no-repeat; background-size: cover;
}
a.featured-article-link { transition: all 0.1s ease; position: relative; padding: 30px 100px 30px 45px; background-color: rgba(255, 255, 255, 0.1); font-size: 20px; width: 100%; display: block; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 5px; color: #96a0ad;
}
a.featured-article-link .icon-keyboard-arrow-right { position: absolute; right: 15px; top: 0; height: 90px; color: #96a0ad; display: inline-block;
}
a.featured-article-link .icon-keyboard-arrow-right:before { content: ""; font-size: 60px; line-height: 90px;
}
a.featured-article-link .headline { color: white;
}
a.featured-article-link .body { color: #96a0ad; font-style: italic;
}
@media only screen and (max-width: 700px) { a.featured-article-link { font-size: 15px; padding: 12px; }
}
a.featured-article-link:hover { text-decoration: none; background-color: rgba(75, 137, 220, 0.3);
}
a.featured-article-link:hover .icon-keyboard-arrow-right { color: white;
}
.featured-article-link { border-left: 0px solid #4b89dc;
}
.featured-article-link:hover { border-left: 10px solid #4b89dc;
}
.footer { background-color: #4b89dc; padding: 60px 0;
}
@media only screen and (max-width: 700px) { .footer { padding: 30px 0; }
}
.footer ol.footer-1 li, .footer ol.footer-2 li { display: inline-block;
}
.footer ol.footer-1 li a, .footer ol.footer-2 li a { font-size: 20px;
}
@media only screen and (max-width: 380px) { .footer ol.footer-1 li a, .footer ol.footer-2 li a { font-size: 12px; }
}
.footer ol.footer-1 li + li, .footer ol.footer-2 li + li { margin-left: 30px;
}
@media only screen and (max-width: 380px) { .footer ol.footer-1 li + li, .footer ol.footer-2 li + li { margin-left: 15px; }
}
.footer ol.footer-2 li a { font-size: 15px; color: rgba(255, 255, 255, 0.5);
}
@media only screen and (max-width: 380px) { .footer ol.footer-2 li a { font-size: 12px; }
}
.footer p { text-align: left; margin-bottom: 15px; color: rgba(255, 255, 255, 0.5); font-size: 12px;
}
@media only screen and (max-width: 380px) { .footer p { font-size: 10px; line-height: 1.3; }
}
Style Guide - Script Codes
Style Guide - Script Codes
Home Page Home
Developer Keithbarney
Username keithbarney
Uploaded September 28, 2022
Rating 3
Size 8,900 Kb
Views 8,096
Do you need developer help for Style Guide?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Keithbarney (keithbarney) Script Codes
Name
Equity Capital
Sticky Footer
A Pen by keithbarney
Home Page - Products
CI - Home Page
Residential Loans
Commercial Loans
CI calendar
Homepage features
Ci-icons
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!