Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created September 27, 2020 12:16
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/7c146e2d12ec1dafd8cbdc93f70b2888 to your computer and use it in GitHub Desktop.
Save codecademydev/7c146e2d12ec1dafd8cbdc93f70b2888 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Design System</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital@1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=David+Libre:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<h1 class="h1">Colors</h1>
<div class="container">
<span class="lime color">
<p>Lime</p>
<p>#BFFF00</p>
<p>rgb(192, 255, 0)</p>
<p>hsl(75, 100%, 100%)</p>
</span>
<span class="amber color">
<p>Amber</p>
<p>#FFBF00</p>
<p>rgb(255, 191, 0)</p>
<p>hsl(45, 100%, 100%)</p>
</span>
<span class="magenta color">
<p>Magenta</p>
<p>#FF00FF</p>
<p>rgb(255, 0, 255)</p>
<p>hsl(300, 100%, 100%)</p>
</span>
</div>
<h1 class="h1">Fonts</h1>
<div class="container">
<h2>#Epilogue#</h2>
<p class="epilogue-regular-400">Almost before we knew it, we had left the ground.</p>
<p class="epilogue-regular-400i">Almost before we knew it, we had left the ground.</p>
<p class="epilogue-medium-500">Almost before we knew it, we had left the ground.</p>
<p class="epilogue-medium-500i">Almost before we knew it, we had left the ground.</p>
<p class="epilogue-bold-700">Almost before we knew it, we had left the ground.</p>
<p class="epilogue-bold-700i">Almost before we knew it, we had left the ground.</p>
<hr>
<h2>#David Libre#</h2>
<p class="david-regular-400">Almost before we knew it, we had left the ground.</p>
<p class="david-medium-500">Almost before we knew it, we had left the ground.</p>
<p class="david-bold-700">Almost before we knew it, we had left the ground.</p>
</div>
<h1 class="h1">Text Styles</h1>
<div class="container1">
<h1 id="h1">h1: Main Heading</h1>
<ul>
<li>display: block;</li>
<li>font-size: 2em;</li>
<li>margin-top: 0.67em;</li>
<li>margin-bottom: 0.67em;</li>
<li>margin-left: 0;</li>
<li>margin-right: 0;</li>
<li>font-weight: bold;</li>
<li>font-style: normal;</li>
<li>font-family: "Verdana";</li>
</ul>
<hr>
<h2 id="h2">h2: Sub Heading</h2>
<ul>
<li>display: block;</li>
<li>font-size: 1.5em;</li>
<li>margin-top: 0.83em;</li>
<li>margin-bottom: 0.83em;</li>
<li>margin-left: 0;</li>
<li>margin-right: 0;</li>
<li>font-weight: bold;</li>
<li>font-style: normal;</li>
<li>font-family: "Verdana";</li>
</ul>
<hr>
<p id="p">Paragraph</p>
<ul>
<li>display: block;</li>
<li>font-size: 1em;</li>
<li>margin-top: 1em;</li>
<li>margin-bottom: 1em;</li>
<li>margin-left: 0;</li>
<li>margin-right: 0;</li>
<li>font-weight: normal;</li>
<li>font-style: normal;</li>
<li>font-family: "Verdana";</li>
</ul>
</div>
<h1 class="h1">Box-Model</h1>
<div class="container">
<div>
<span class="rel">margin</span>
<div>
<span class="rel">border</span>
<div>
<span class="rel">padding</span>
<div>
<p>content</p>
<p>width=200px</p>
<p>height=200px</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
styles.css
.h1 {
text-align: center;
text-decoration: underline;
}
.container {
margin: 10px auto;
border: 2px solid gray;
padding: 10px;
width: 50%;
text-align: center;
}
.container1 {
margin: 10px auto;
border: 2px solid gray;
padding: 10px;
width: 50%;
}
.color {
padding: 10px;
margin: 5px;
text-align: center;
display: inline-block;
width: 150px;
height: 200px;
font-family: 'Merriweather', serif;
font-weight: 600;
}
.lime {
background-color: #BFFF00;
border: 1px solid #BFFF00;
}
.amber {
background-color: #FFBF00;
border: 1px solid #FFBF00;
}
.magenta {
background-color: #FF00FF;
border: 1px solid #FF00FF;
}
.epilogue-regular-400 {
font-family: 'Epilogue', sans-serif;
font-weight: 400;
font-size: 20px;
}
.epilogue-regular-400i {
font-family: 'Epilogue', sans-serif;
font-weight: 400;
font-size: 20px;
font-style: italic;
}
.epilogue-medium-500 {
font-family: 'Epilogue', sans-serif;
font-weight: 500;
font-size: 20px;
}
.epilogue-medium-500i {
font-family: 'Epilogue', sans-serif;
font-weight: 500;
font-size: 20px;
font-style: italic;
}
.epilogue-bold-700 {
font-family: 'Epilogue', sans-serif;
font-weight: 700;
font-size: 20px;
}
.epilogue-bold-700i {
font-family: 'Epilogue', sans-serif;
font-weight: 700;
font-size: 20px;
font-style: italic;
}
.david-regular-400 {
font-family: 'David Libre', serif;
font-weight: 400;
font-size: 20px;
}
.david-medium-500 {
font-family: 'David Libre', serif;
font-weight: 500;
font-size: 20px;
}
.david-bold-700 {
font-family: 'David Libre', serif;
font-weight: 700;
font-size: 20px;
}
#h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
font-style: normal;
font-family: "Verdana";
}
#h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
font-style: normal;
font-family: "Verdana";
}
#p {
display: block;
font-size: 1em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: normal;
font-style: 400;
font-family: "Verdana";
}
ul {
list-style: square;
}
.container div {
display: inline-block;
width: 500px;
height: 500px;
border: 1px solid black;
}
.container div div {
position: relative;
width: 400px;
height: 400px;
top: 50px;
background-color: #ffbf00;
border: 1px solid black;
}
.container div div div {
position: relative;
width: 300px;
height: 300px;
top: 50px;
background-color: #bfff00;
border: 1px solid black;
}
.container div div div div {
position: relative;
width: 200px;
height: 200px;
top: 50px;
background-color: black;
border: 1px solid white;
color: white;
}
.rel {
position: relative;
z-index: 1;
margin: 0;
padding: 0;
font-stretch: condensed;
right: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment