Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created February 17, 2020 07:53
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 14 You must be signed in to fork a gist
  • Save codecademydev/60a655f5f511417d2f920c75f128ed34 to your computer and use it in GitHub Desktop.
Save codecademydev/60a655f5f511417d2f920c75f128ed34 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!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</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>
Raw
styles.css
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: #929292;
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