Created
May 15, 2022 15:54
-
-
Save detkno90/88fa431a0a61d14f67ea0cb029fd23c8 to your computer and use it in GitHub Desktop.
cheatsheetv2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Website Design System</title> | |
<link href="styles.css" rel="stylesheet" type="text/css"> | |
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap" rel="stylesheet"> | |
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,700&display=swap" rel="stylesheet"> | |
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,700&display=swap" rel="stylesheet"> | |
<link href="https://fonts.googleapis.com/css?family=Tomorrow:400,400i,700&display=swap" rel="stylesheet"> | |
</head> | |
<body> | |
<header> | |
<h1>My Website Style Guide V1</h1> | |
<nav> | |
<ul> | |
<li><a href="#target-colors">Colors</a></li> | |
<li><a href="#target-fonts">Fonts</a></li> | |
<li><a href="#target-text-styles">Text Styles</a></li> | |
<li><a href="#target-buttons">Buttons</a></li> | |
</ul> | |
</nav> | |
</header> | |
<a class="anchor" name="target-colors"></a> | |
<section id="colors"> | |
<h1 class="title">Colors</h1> | |
<div class="flexbox-center"> | |
<div class="colorbox" id="cool-blue"> | |
<p class="color-label">Cool Blue</p> | |
<p class="color-hex">#2d5dcc</p> | |
</div> | |
<div class="colorbox" id="pink"> | |
<p class="color-label">Pink</p> | |
<p class="color-hex">#d957d9</p> | |
</div> | |
<div class="colorbox" id="mint-green"> | |
<p class="color-label">Mint Green</p> | |
<p class="color-hex">#4fe0b0</p> | |
</div> | |
<div class="colorbox" id="beige"> | |
<p class="color-label">Beige</p> | |
<p class="color-hex">#efd9ca</p> | |
</div> | |
<div class="colorbox" id="wsw-blue"> | |
<p class="color-label">WSW Blue</p> | |
<p class="color-hex">#003d77</p> | |
</div> | |
<div class="colorbox" id="redf"> | |
<p class="color-label">Red</p> | |
<p class="color-hex">#da072c</p> | |
</div> | |
<div class="colorbox" id="candy"> | |
<p class="color-label">Candy Apple Red</p> | |
<p class="color-hex">#ff0800</p> | |
</div> | |
<div class="colorbox" id="purpur"> | |
<p class="color-label">Purpur</p> | |
<p class="color-hex">#9648ab</p> | |
</div> | |
</div> | |
</section> | |
<a class="anchor" name="target-fonts"></a> | |
<section class="section"> | |
<h1 class="title">Fonts</h1> | |
<div class="flexbox-left"> | |
<div class="fontbox"> | |
<p class="font-label source-code-pro">Source Code Pro</p> | |
<p class="regular source-code-pro">The quick brown fox jumps over the lazy dog.</p> | |
<p class="bold source-code-pro">The quick brown fox jumps over the lazy dog.</p> | |
<p class="italic source-code-pro">The quick brown fox jumps over the lazy dog.</p> | |
</div> | |
<div class="fontbox"> | |
<p class="font-label nunito-sans">Nunito Sans</p> | |
<p class="regular nunito-sans">The quick brown fox jumps over the lazy dog.</p> | |
<p class="bold nunito-sans">The quick brown fox jumps over the lazy dog.</p> | |
<p class="italic nunito-sans">The quick brown fox jumps over the lazy dog.</p> | |
</div> | |
<div class="fontbox"> | |
<p class="font-label poppins">Poppins</p> | |
<p class="regular poppins">The quick brown fox jumps over the lazy dog.</p> | |
<p class="bold poppins">The quick brown fox jumps over the lazy dog.</p> | |
<p class="italic poppins">The quick brown fox jumps over the lazy dog.</p> | |
</div> | |
<div class="fontbox"> | |
<p class="font-label tomorrow">Tomorrow</p> | |
<p class="regular tomorrow">The quick brown fox jumps over the lazy dog.</p> | |
<p class="bold tomorrow">The quick brown fox jumps over the lazy dog.</p> | |
<p class="italic tomorrow">The quick brown fox jumps over the lazy dog.</p> | |
</div> | |
<div class="fontbox"> | |
<p class="font-label times">Times New Roman</p> | |
<p class="regular times">The quick brown fox jumps over the lazy dog.</p> | |
<p class="bold times">The quick brown fox jumps over the lazy dog.</p> | |
<p class="italic times">The quick brown fox jumps over the lazy dog.</p> | |
</div> | |
<div class="fontbox"> | |
<p class="font-label franklin">Franklin Gothic Medium</p> | |
<p class="regular franklin">The quick brown fox jumps over the lazy dog.</p> | |
<p class="bold franklin">The quick brown fox jumps over the lazy dog.</p> | |
<p class="italic franklin">The quick brown fox jumps over the lazy dog.</p> | |
</div> | |
</div> | |
</section> | |
<a class="anchor" name="target-text-styles"></a> | |
<section class="section"> | |
<h1 class="title">Text Styles</h1> | |
<div class="flexbox-left"> | |
<div class="text-panel"> | |
<h1>H1: Main page heading</h1> | |
<ul> | |
<li>Font-weight: 700 (bold)</li> | |
<li>Font-size: 26px</li> | |
<li>Font-family: Nunito Sans</li> | |
</ul> | |
<h2>H2: Subheading</h2> | |
<ul> | |
<li>Font-weight: 500</li> | |
<li>Font-size: 18px</li> | |
<li>Font-family: Poppins</li> | |
</ul> | |
<p>P: Paragraph text</p> | |
<ul> | |
<li>Font-weight: 400 (regular)</li> | |
<li>Font-size: 14px</li> | |
<li>Font-family: Times-New-Roman</li> | |
</ul> | |
</div> | |
<div class="text-panel"> | |
<h1>H1: Main page heading</h1> | |
<ul> | |
<li>Font-weight: 700 (bold)</li> | |
<li>Font-size: 26px</li> | |
<li>Font-family: Nunito Sans</li> | |
</ul> | |
<h2>H2: Subheading</h2> | |
<ul> | |
<li>Font-weight: 500</li> | |
<li>Font-size: 18px</li> | |
<li>Font-family: Poppins</li> | |
</ul> | |
<p>P: Paragraph text</p> | |
<ul> | |
<li>Font-weight: 400 (regular)</li> | |
<li>Font-size: 14px</li> | |
<li>Font-family: Times-New-Roman</li> | |
</ul> | |
</div> | |
</div> | |
</section> | |
<a class="anchor" name="target-buttons"></a> | |
<section class="section"> | |
<h1 class="title">Buttons</h1> | |
<div class="flexbox-center"> | |
<div class="button"><a href="" class="border">Button</a></div> | |
<div class="button"><a href="" class="border hover">Button</a></div> | |
<div class="button"><a href="" class="text-color border hover no-deco">Button</a></div> | |
<div class="button"><a href="" class="text-color border hover no-deco no-visited">Button</a></div> | |
<div class="button"><a href="" class="red hover no-deco no-visited">Button</a></div> | |
<div class="button"><a href="" class="red hover no-deco no-visited round">Button</a></div> | |
<div class="button"><a href="" class="text-color border transition hover no-deco no-visited">Button</a></div> | |
<div class="button"><a href="" class="text-color border transition hover no-deco no-visited shadow">Button</a></div> | |
<div class="button"><a href="" class="text-color opacity transition hover no-deco shadow">Button</a></div> | |
</div> | |
</section> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body{ | |
margin: 0; | |
font-family: 'Arial', sans-serif; | |
background-color: #f8f8f8; | |
} | |
header { | |
position: fixed; | |
top: 0; | |
z-index: 2; | |
height: 80px; | |
border-bottom: 1px solid black; | |
width: 100%; | |
background-color: #78c9dd; | |
color: #f8f8f8; | |
} | |
header h1 { | |
margin: auto; | |
padding: 20px 20px; | |
display: inline-block; | |
} | |
header ul { | |
margin: auto; | |
padding: 25px 20px; | |
display: inline-block; | |
} | |
header li { | |
font-size: 1.5em; | |
display: inline-block; | |
margin: 0px 50px; | |
} | |
@media only screen and (max-width: 1200px){ | |
header { | |
font-size: 15px; | |
} | |
header li { | |
font-size: 1.5em; | |
display: inline-block; | |
margin: 0px 10px; | |
} | |
} | |
@media only screen and (max-width: 900px){ | |
header { | |
font-size: 12px; | |
} | |
header li { | |
font-size: 1.5em; | |
display: inline-block; | |
margin: 5px 10px; | |
} | |
header h1, header ul { | |
margin: auto; | |
padding: 5px; | |
display: inline-block; | |
} | |
} | |
nav { | |
float: right; | |
} | |
nav a { | |
text-decoration: none; | |
color: #f8f8f8; | |
} | |
.flexbox-center { | |
display: flex; | |
flex-wrap: wrap; | |
flex-direction: row; | |
justify-content: center; | |
} | |
.flexbox-left { | |
display: flex; | |
flex-wrap: wrap; | |
flex-direction: row; | |
justify-content:left; | |
} | |
.colorbox { | |
margin: 20px; | |
min-height: 100px; | |
width: 20%; | |
border: 1px solid black; | |
text-align: center; | |
} | |
.fontbox { | |
padding-left: 7px; | |
margin: 20px 20px 20px 20px; | |
min-height: 100px; | |
min-width: 20%; | |
background-color: white; | |
font-size: 17px; | |
border-left: 2px solid black; | |
} | |
#cool-blue { | |
background-color: #2d5dcc; | |
color: #fff; | |
} | |
#pink { | |
background-color: #d957d9; | |
color: #000; | |
} | |
#mint-green { | |
background-color: #4fe0b0; | |
} | |
#beige { | |
background-color: #efd9ca; | |
} | |
#wsw-blue { | |
background-color: #003d77; | |
color: #fff; | |
} | |
#redf { | |
background-color: #da072c; | |
color: #fff; | |
} | |
#candy { | |
background-color: #ff0800; | |
} | |
#purpur { | |
background-color: #9648ab; | |
} | |
#colors { | |
margin: 95px auto 50px auto; | |
width: 90%; | |
border: 1px solid black; | |
background-color: white; | |
} | |
.section { | |
margin: 50px auto 50px auto; | |
width: 90%; | |
border: 1px solid black; | |
background-color: white; | |
} | |
.title { | |
width: 100%; | |
border-bottom: 1px dotted black; | |
padding:20px 0px; | |
margin: 0px; | |
text-align: center; | |
text-decoration: underline; | |
} | |
.anchor { | |
position: relative; | |
left: 0px; | |
top: -80px; | |
} | |
.font-label { | |
font-size: 1.5rem; | |
} | |
.regular { | |
font-style: normal; | |
} | |
.italic { | |
font-style: italic; | |
} | |
.bold { | |
font-weight: 700; | |
} | |
.nunito-sans { | |
font-family: 'Nunito Sans', sans-serif; | |
} | |
.source-code-pro { | |
font-family: 'Source Code Pro', monospace; | |
} | |
.poppins { | |
font-family: 'Poppins', sans-serif; | |
} | |
.tomorrow { | |
font-family: 'Tomorrow', sans-serif; | |
} | |
.times { | |
font-family: 'Times New Roman', Times, serif; | |
} | |
.franklin { | |
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; | |
} | |
.text-panel h1 { | |
font-weight: 700; | |
font-size: 32px; | |
font-family: 'Nunito Sans', sans-serif; | |
} | |
.text-panel h2 { | |
font-weight: 500; | |
font-size: 18px; | |
font-family: 'Poppins', sans-serif; | |
} | |
.text-panel p { | |
font-weight: 400; | |
font-size: 14px; | |
font-family: 'Times-New-Roman', sans-serif; | |
} | |
.text-container { | |
margin-left: 50px; | |
} | |
.text-panel { | |
margin: 20px; | |
} | |
.border{ | |
padding:20px; | |
border: 2px solid #008cba; | |
border-radius: 3px; | |
} | |
.text-color{ | |
color: #008cba; | |
} | |
.hover:hover { | |
background-color: #008cba; | |
color:white !important; | |
} | |
.button{ | |
margin: 60px 30px; | |
} | |
.no-deco{ | |
text-decoration: none; | |
} | |
.no-visited:visited{ | |
color: #008cba; | |
} | |
.red { | |
background-color: #f44336; | |
color:white !important; | |
border: 2px solid black; | |
padding:20px; | |
border-radius: 3px; | |
} | |
.round { | |
border-radius: 100%; | |
} | |
.transition { | |
transition-duration: 0.4s; | |
} | |
.shadow:hover { | |
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); | |
} | |
.opacity{ | |
background-color: #008cba; | |
padding:20px; | |
border: 2px solid #008cba; | |
border-radius: 3px; | |
opacity: 0.6; | |
color:white; | |
text-align: center; | |
font-size: 16px; | |
} | |
.opacity:hover { | |
opacity: 1; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment