Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created May 2, 2020 19:52
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/ed7433f88875768ddb9567491fc38faa to your computer and use it in GitHub Desktop.
Save codecademydev/ed7433f88875768ddb9567491fc38faa to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website Design System</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<header>
<h1>My First Website Design Project</h1>
<nav class="navbar">
<ul>
<li><a href="#colors">Colors</a></li>
<li><a href="#fonts">Fonts</a></li>
<li><a href="#text-styles">Text Styles</a></li>
</ul>
</nav>
</header>
<div class="container">
<h2 id="colors">Colors</h2>
<div class="color-container">
<div class="box-blue">
<div class="color-name"><p>OceanBlue</p></div>
<div class="color-code"><p>#33cccc</p></div>
</div>
<div class="box-cassis">
<div class="color-name"><p>Cassis</p></div>
<div class="color-code"><p>#660066</p></div>
</div>
<div class="box-grey">
<div class="color-name"><p>DarkGrey</p></div>
<div class="color-code"><p>#404040</p></div>
</div>
<div class="box-black">
<div class="color-name"><p>Black</p></div>
<div class="color-code"><p>#000000</p></div>
</div>
<div class="box-more">
<div class="color-name"><p>Need More Colors</p></div>
<div class="color-code"><p><a href="https://www.w3schools.com/colors/colors_picker.asp?color=009E73" target="_blank">Find more</a></p></div>
</div>
</div>
</div>
<div class="container">
<h2 id="fonts">Fonts</h2>
<div class="font-container">
<div class="nunito">
<div class="font-name"><p>Nunito</p></div>
<div class="regular-font"><p>It's raining cats and dogs.</p></div>
<div class="italic-font"><p>It's raining cats and dogs.</p></div>
<div class="bold-font"><p>It's raining cats and dogs.</p></div>
</div>
<div class="dancing-script">
<div class="font-name"><p>Dancing Script</p></div>
<div class="regular-font"><p>It's raining cats and dogs</p></div>
<div class="italic-font"><p>It's raining cats and dogs</p></div>
<div class="bold-font"><p>It's raining cats and dogs</p></div>
</div>
<div class="teko">
<div class="font-name"><p>Teko</p></div>
<div class="regular-font"><p>It's raining cats and dogs</p></div>
<div class="italic-font"><p>It's raining cats and dogs</p></div>
<div class="bold-font"><p>It's raining cats and dogs</p></div>
</div>
</div>
</div>
<div class="container">
<h2 id="text-styles">Text Styles</h2>
<div class="text-container">
<div class="main-title-container">
<h1>H1 Main Title:</h1>
<ul>
<li class="font-weight">Font-weight: 700 (bold)</li>
<li class="font-size">Font-size: 26px</li>
<li class="font-family">Font-family: Nunito</li>
</ul>
</div>
<div class="second-title-container">
<h2>H2 Sub-Title:</h2>
<ul>
<li class="font-weight">Font-weight: 400</li>
<li class="font-size">Font-size: 18px</li>
<li class="font-family">Font-family: Dancing Script</li>
</ul>
</div>
<div class="paragraphe-container">
<p>p, paragraphe:</p>
<ul>
<li class="font-weight">Font-weight: 400 (regular)</li>
<li class="font-size">Font-size: 14px</li>
<li class="font-family">Font-family: Teko</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Raw
styles.css
@font-face {
font-family: 'Dancing Script';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/dancingscript/v14/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff) format('woff');
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: 'Dancing Script';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/dancingscript/v14/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7B1i03Sup6hNX6plRP.woff) format('woff');
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: 'Nunito';
font-style: italic;
font-weight: 400;
font-display: swap;
src: local('Nunito Italic'), local('Nunito-Italic'), url(https://fonts.gstatic.com/s/nunito/v12/XRXX3I6Li01BKofIMNaDRs7nczIH.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: 'Nunito';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofINeaBTMnFcQ.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: 'Nunito';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Nunito Bold'), local('Nunito-Bold'), url(https://fonts.gstatic.com/s/nunito/v12/XRXW3I6Li01BKofAjsOUYevIWzgPDA.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: 'Teko';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Teko Regular'), local('Teko-Regular'), url(https://fonts.gstatic.com/s/teko/v9/LYjNdG7kmE0gfaN9pQlCpVo.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: 'Teko';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Teko Bold'), local('Teko-Bold'), url(https://fonts.gstatic.com/s/teko/v9/LYjCdG7kmE0gdRhYsCRgqHAtXN8.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;
}
body {
margin: 10px;
padding: 0;
}
/* Typography */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
}
header h1 {
color: black;
background-color: grey;
text-align: center;
}
.container {
border: 2px solid #a2a2a6;
padding: 10px;
margin: 10px auto;
display: block;
}
.container > h2 {
color: black;
text-decoration: underline;
text-decoration-color: grey;
text-decoration-style: double;
font-weight: bold;
}
/* Nav bar */
.navbar {
list-style-type: none;
color: black;
font-size: 20px;
}
nav ul {
list-style-type: none;
text-align: center;
display: flex;
align-items: center;
justify-content: space-around;
background-color: black;
}
nav li a{
padding: 5px;
background-color: grey;
color: black;
}
nav a:link {
color: black;
text-decoration: none;
}
nav a:hover {
background-color: black;
color: grey;
text-decoration: underline;
}
/* Color Container*/
.color-container {
width: 100%;
display: inline-block;
}
.box-blue {
display: inline-block;
width: 32%;
text-align: center;
margin: 20px auto;
min-height: 100px;
background-color: #33cccc;
}
.box-cassis {
display: inline-block;
width: 32%;
text-align: center;
margin: 20px auto;
min-height: 100px;
background-color: #660066;
}
.box-grey {
display: inline-block;
width: 32%;
text-align: center;
margin: 20px auto;
min-height: 100px;
background-color: #404040;
}
.box-black {
display: inline-block;
width: 32%;
text-align: center;
margin: 20px auto;
min-height: 100px;
background-color: #000000;
color: white;
}
.box-more {
display: inline-block;
width: 32%;
text-align: center;
justify-content: space-around;
margin: 20px auto;
min-height: 100px;
border: 1px solid black;
}
.box-more {
display: inline-block;
width: 32%;
text-align: center;
margin: 20px auto;
min-height: 100px;
border: 1px solid black;
}
/* Font Container*/
.font-container {
width: 100%;
display: block;
align-content: space-around;
justify-content: center;
margin: 40px;
}
.font-name {
text-decoration: underline;
}
.regular-font {
font-style: normal;
}
.italic-font {
font-style: italic;
}
.bold-font {
font-weight: bold;
}
.nunito {
display: inline-block;
width: 32%;
text-align: left;
margin: 20px auto;
min-height: 100px;
font-family: 'Nunito';
}
.dancing-script {
display: inline-block;
width: 32%;
text-align: left;
margin: 20px auto;
min-height: 100px;
font-family: 'Dancing Script';
}
.teko {
display: inline-block;
width: 32%;
text-align: left;
margin: 20px auto;
min-height: 100px;
font-family: 'Teko';
}
/* Text-Style Container*/
.text-container {
display: grid;
width: 100%;
justify-items: center;
}
.main-title-container {
font-weight: bold;
font-size: 26px;
font-family: "Nunito";
float: inline-end;
}
.second-title-container {
font-weight: 400;
font-size: 18px;
font-family: "Dancing Script";
}
.paragraphe-container {
font-weight: 400;
font-size: 14px;
font-family: "Teko";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment