Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created January 4, 2021 18:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codecademydev/1d3881f72c64f92fb6bf666f7133b15f to your computer and use it in GitHub Desktop.
Save codecademydev/1d3881f72c64f92fb6bf666f7133b15f to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>My Website Style Guide</h1>
<div class="colorbox">
<h2>Colors</h2>
<div class="colors">
<p class="color1">Green Blue<br>#6092A6</p>
<p class="color2">Desert Brown<br>#BF785E</p>
<p class="color3">Beige<br>#F2CBBD</p>
<p class="color4">Dark Brown<br>#733934</p>
</div>
</div>
<div class="fontsbox">
<h2>Fonts</h2>
<div class="fonts">
<div class="font1">
<h3>Proza Libre</h3>
<p>The quick brown fox jumps over the lazy dog.</p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
</div>
<div class="font2">
<h3>Open Sans</h3>
<p>The quick brown fox jumps over the lazy dog.</p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
</div>
</div>
</div>
<div class="textbox">
<h2>Text Styles</h2>
<h1>H1: Main page heading</h1>
<ul>
<li>Font-weight: 700 (bold)</li>
<li>Font-size: 26px</li>
<li>Font-family: Proza Libre</li>
</ul>
<h2>H2: Subheading</h2>
<ul>
<li>Font-weight: 500</li>
<li>Font-size: 18px</li>
<li>Font-family: Open Sans</li>
</ul>
<p>P:Paragraph text</p>
<ul>
<li>Font-weight: 400 (regular)</li>
<li>Font-size: 14px</li>
<li>Font-family: Open Sans</li>
</ul>
</div>
</body>
</html>
Raw
styles.css
@font-face {
font-family: 'Proza Libre';
font-style: italic;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/prozalibre/v5/LYjZdGHgj0k1DIQRyUEyyEotTGPaSJOS8g.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Proza Libre';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/prozalibre/v5/LYjbdGHgj0k1DIQRyUEyyEL3UM_YeJE.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Proza Libre';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/prozalibre/v5/LYjbdGHgj0k1DIQRyUEyyEKTUc_YeJE.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Proza Libre';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/prozalibre/v5/LYjGdGHgj0k1DIQRyUEyyEoodNo.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Proza Libre';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/prozalibre/v5/LYjEdGHgj0k1DIQRyUEyyEotRNj_XQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* {
box-sizing: border-box;
}
.colors p {
display: inline-block;
}
div.colorbox, div.textbox, div.fontsbox {
border: 1px solid black;
padding: 10px;
margin: 5px;
}
p, li {
font-family: "Open Sans";
font-size: 14px;
font-weight: 400;
}
.font1 p {
font-family: "Proza Libre";
font-weight: 400;
}
/* Colors Section */
.colors p {
padding: 20px;
width: 10em;
text-align: center;
line-height: 1.5;
}
.color1 {
color: white;
background-color: #6092A6;
}
.color2 {
color: white;
background-color: #BF785E;
}
.color3 {
color: white;
background-color: #F2CBBD;
}
.color4 {
color: white;
background-color: #733934;
}
/* Fonts Section */
div.font1, div.font2 {
display: inline-block;
margin-right: 20px;
}
/* Text Styles Section */
h1 {
font-family: "Proza Libre";
font-size: 30px;
font-weight: bold;
}
h2 {
font-family: "Open Sans";
font-size: 22px;
font-weight: 600;
}
p {
font-family: "Open Sans";
font-size: 14px;
font-weight: 400;
}
h3 {
text-decoration: underline;
}
.font1 h3 {
font-family: "Proza Libre";
}
.font2 h3 {
font-family: "Open Sans";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment