Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/color.html Secret

Created May 12, 2021 13:35
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/5d27086ca3b8b2b307e2c6928c3eab17 to your computer and use it in GitHub Desktop.
Save codecademydev/5d27086ca3b8b2b307e2c6928c3eab17 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
color.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,900;1,200&family=Open+Sans:ital,wght@0,400;0,800;1,300&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,100&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster+Two:wght@400;700&family=Oleo+Script:wght@400;700&family=Sacramento&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<title>Website Style</title>
</head>
<body>
<h1 class="pgtitle">My Website Style Guide</h1>
<header>
<ul class="nav">
<li class="nav-item">
<a class="btn btn-dark" aria-current="page" href="#" role="button">Colors</a>
</li>
<li class="nav-item">
<a class="btn btn-outline-primary" aria-current="page" href="#" role="button">Fonts</a>
</li>
<li class="nav-item">
<a class="btn btn-danger" aria-current="page" href="#" role="button">Text Styles</a> </li>
</ul>
</header>
<div class="colorsection">
<h2>Color Guide</h2>
<p>Here at StyleGuide, we take color seriously. In the following sections, we'll explore our base colors for the webpage.</p>
</div>
<div class="container">
<h2>Colors</h2>
<div class="color-container">
<div class="color-panel pale-red">
<p class="color-label">Pale Red</p>
<p class="color-hex">#FFCDD2</p>
</div>
<div class="color-panel pink">
<p class="color-label">Pale Pink</p>
<p class="color-hex">#F8BBD0</p>
</div>
<div class="color-panel light-purple">
<p class="color-label">Light Purple</p>
<p class="color-hex">#E1BEE7</p>
</div>
<div class="color-panel deep-purple">
<p class="color-label">Deep Purple</p>
<p class="color-hex">#D1C4E9</p>
</div>
<div class="color-panel indigo">
<p class="color-label">indigo</p>
<p class="color-hex">#C5CAEE9</p>
</div>
<div class="color-panel pale-blue">
<p class="color-label">Pale Blue</p>
<p class="color-hex">#BBDEFB</p>
</div>
<div class="color-panel light-blue">
<p class="color-label">Light Blue</p>
<p class="color-hex">#B3E5FC</p>
</div>
<div class="color-panel cyan">
<p class="color-label">Cyan</p>
<p class="color-hex">#B2EBF2</p>
</div>
<div class="color-panel teal">
<p class="color-label">Teal</p>
<p class="color-hex">#C8E6C9</p>
</div>
<div class="color-panel light-green">
<p class="color-label">Light Green</p>
<p class="color-hex">#DCEDC8</p>
</div>
<div class="color-panel lime">
<p class="color-label">Lime</p>
<p class="color-hex">#F0F4C3</p>
</div>
<div class="color-panel yellow">
<p class="color-label">Yellow</p>
<p class="color-hex">#FFF9C4</p>
</div>
<div class="color-panel amber">
<p class="color-label">Amber</p>
<p class="color-hex">#FFECB3</p>
</div>
<div class="color-panel orange">
<p class="color-label">Orange</p>
<p class="color-hex">#FFE0B2</p>
</div>
<div class="color-panel deep-orange">
<p class="color-label">Deep Orange</p>
<p class="color-hex">#FFCCBC</p>
</div>
<div class="color-panel brown">
<p class="color-label">Brown</p>
<p class="color-hex">#D7CCC8</p>
</div>
<div class="color-panel gray">
<p class="color-label">Gray</p>
<p class="color-hex">#F5F5F5</p>
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-dark">Select Color</button>
</div>
</div>
</body>
</html>
Raw
fontbox.html
<div class="font-panel">
<p class="font-label pacifico">Pacifico</p>
<p class="regular pacifico">The quick brown fox jumps over the lazy dog.</p>
<div class="font-panel">
<p class="font-label roboto">Roboto</p>
<p class="regular roboto">The quick brown fox jumps over the lazy dog.</p>
<p class="bold roboto">The quick brown fox jumps over the lazy dog.</p>
<p class="italic roboto">The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="font-panel">
<p class="font-label open-sans">Open Sans</p>
<p class="regular open-sans">The quick brown fox jumps over the lazy dog.</p>
<p class="bold open-sans">The quick brown fox jumps over the lazy dog.</p>
<p class="italic open-sans">The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="font-panel">
<p class="font-label montserrat">Montserrat</p>
<p class="regular montserrat">The quick brown fox jumps over the lazy dog.</p>
<p class="bold montserrat">The quick brown fox jumps over the lazy dog.</p>
<p class="italic montserrat">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
Raw
fonts.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,900;1,200&family=Open+Sans:ital,wght@0,400;0,800;1,300&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,100&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster+Two:wght@400;700&family=Oleo+Script:wght@400;700&family=Sacramento&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<title>Website Style</title>
</head>
<body>
<div class="fontsection">
<h2>Font Guide</h2>
<p>Here at StyleGuide, we take fonts seriously. In the following sections, we'll explore our font choices for the webpage.</p>
</div>
<div class="font-container">
<h2>Font Style</h2>
<div class="table-responsive">
<table class="table align-middle table-bordered border-#a2a2a6">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Pacifico</th>
<th scope="col">Roboto</th>
<th scope="col">Open Sans</th>
<th scope="col">Montserrat</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Regular</th>
<td class="regular pacifico">The quick brown fox jumps over the lazy dog.</td>
<td class="regular roboto">The quick brown fox jumps over the lazy dog.</td>
<td class="regular open-sans">The quick brown fox jumps over the lazy dog.</td>
<td class="regular montserrat">The quick brown fox jumps over the lazy dog.</td>
</tr>
<tr>
<th scope="row">Bold</th>
<td></td>
<td class="bold roboto">The quick brown fox jumps over the lazy dog.</td>
<td class="bold open-sans">The quick brown fox jumps over the lazy dog.</td>
<td class="bold montserrat">The quick brown fox jumps over the lazy dog.</td>
</tr>
<tr>
<th scope="row">Italic</th>
<td> </td>
<td class="italic roboto">The quick brown fox jumps over the lazy dog.</td>
<td class="italic open-sans">The quick brown fox jumps over the lazy dog.</td>
<td class="italic montserrat">The quick brown fox jumps over the lazy dog.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,900;1,200&family=Open+Sans:ital,wght@0,400;0,800;1,300&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,100&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster+Two:wght@400;700&family=Oleo+Script:wght@400;700&family=Sacramento&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<title>Website Style</title>
</head>
<body>
<h1 class="pgtitle">My Website Style Guide</h1>
<header>
<ul class="nav">
<li class="nav-item">
<a class="btn btn-dark" aria-current="page" href="#" role="button">Colors</a>
</li>
<li class="nav-item">
<a class="btn btn-outline-primary" aria-current="page" href="#" role="button">Fonts</a>
</li>
<li class="nav-item">
<a class="btn btn-danger" aria-current="page" href="#" role="button">Text Styles</a> </li>
</ul>
</header>
<div class="colorsection">
<h2>Color Guide</h2>
<p>Here at StyleGuide, we take color seriously. In the following sections, we'll explore our base colors for the webpage.</p>
</div>
<div class="container">
<h2>Colors</h2>
<div class="color-container">
<div class="color-panel pale-red">
<p class="color-label">Pale Red</p>
<p class="color-hex">#FFCDD2</p>
</div>
<div class="color-panel pink">
<p class="color-label">Pale Pink</p>
<p class="color-hex">#F8BBD0</p>
</div>
<div class="color-panel light-purple">
<p class="color-label">Light Purple</p>
<p class="color-hex">#E1BEE7</p>
</div>
<div class="color-panel deep-purple">
<p class="color-label">Deep Purple</p>
<p class="color-hex">#D1C4E9</p>
</div>
<div class="color-panel indigo">
<p class="color-label">indigo</p>
<p class="color-hex">#C5CAEE9</p>
</div>
<div class="color-panel pale-blue">
<p class="color-label">Pale Blue</p>
<p class="color-hex">#BBDEFB</p>
</div>
<div class="color-panel light-blue">
<p class="color-label">Light Blue</p>
<p class="color-hex">#B3E5FC</p>
</div>
<div class="color-panel cyan">
<p class="color-label">Cyan</p>
<p class="color-hex">#B2EBF2</p>
</div>
<div class="color-panel teal">
<p class="color-label">Teal</p>
<p class="color-hex">#C8E6C9</p>
</div>
<div class="color-panel light-green">
<p class="color-label">Light Green</p>
<p class="color-hex">#DCEDC8</p>
</div>
<div class="color-panel lime">
<p class="color-label">Lime</p>
<p class="color-hex">#F0F4C3</p>
</div>
<div class="color-panel yellow">
<p class="color-label">Yellow</p>
<p class="color-hex">#FFF9C4</p>
</div>
<div class="color-panel amber">
<p class="color-label">Amber</p>
<p class="color-hex">#FFECB3</p>
</div>
<div class="color-panel orange">
<p class="color-label">Orange</p>
<p class="color-hex">#FFE0B2</p>
</div>
<div class="color-panel deep-orange">
<p class="color-label">Deep Orange</p>
<p class="color-hex">#FFCCBC</p>
</div>
<div class="color-panel brown">
<p class="color-label">Brown</p>
<p class="color-hex">#D7CCC8</p>
</div>
<div class="color-panel gray">
<p class="color-label">Gray</p>
<p class="color-hex">#F5F5F5</p>
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-dark">Select Color</button>
</div>
</div>
<div class="fontsection">
<h2>Font Guide</h2>
<p>Here at StyleGuide, we take fonts seriously. In the following sections, we'll explore our font choices for the webpage.</p>
</div>
<div class="font-container">
<h2>Font Style</h2>
<div class="table-responsive">
<table class="table align-middle table-bordered border-#a2a2a6">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Pacifico</th>
<th scope="col">Roboto</th>
<th scope="col">Open Sans</th>
<th scope="col">Montserrat</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Regular</th>
<td class="regular pacifico">The quick brown fox jumps over the lazy dog.</td>
<td class="regular roboto">The quick brown fox jumps over the lazy dog.</td>
<td class="regular open-sans">The quick brown fox jumps over the lazy dog.</td>
<td class="regular montserrat">The quick brown fox jumps over the lazy dog.</td>
</tr>
<tr>
<th scope="row">Bold</th>
<td></td>
<td class="bold roboto">The quick brown fox jumps over the lazy dog.</td>
<td class="bold open-sans">The quick brown fox jumps over the lazy dog.</td>
<td class="bold montserrat">The quick brown fox jumps over the lazy dog.</td>
</tr>
<tr>
<th scope="row">Italic</th>
<td> </td>
<td class="italic roboto">The quick brown fox jumps over the lazy dog.</td>
<td class="italic open-sans">The quick brown fox jumps over the lazy dog.</td>
<td class="italic montserrat">The quick brown fox jumps over the lazy dog.</td>
</tr>
</tbody>
</table>
</div>
<div class="text-center">
<button type="button" class="btn btn-dark">Select Font</button>
</div>
</div>
<div class="text-style">
<h2>Text Style Guide</h2>
<p>Here at StyleGuide, we take styling seriously. In the following sections, we'll explore different styles for the most visual impact for the webpage.</p>
</div>
<div class="text-container">
<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>
</div>
<div class="text-panel">
<h2>H2: Subheading</h2>
<ul>
<li>Font-weight: 500</li>
<li>Font-size: 18px</li>
<li>Font-family: Poppins</li>
</ul>
</div>
<div class="text-panel">
<p>P: Paragraph text</p>
<ul>
<li>Font-weight: 400 (regular)</li>
<li>Font-size: 14px</li>
<li>Font-family: Poppins</li>
</ul>
</div>
<div class="text-center">
<button type="button" class="btn btn-dark">Select Text Style</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
<footer>
<p>Copyright Minal Berrio 2021</p>
</footer>
</html>
Raw
styles.css
body {
font-family: 'Roboto', sans-serif;
margin: 0 10%;
}
h1 {
font-family: 'Pacifico', cursive;
padding: 20px
}
h2 {
font-family: 'Montserrat', sans-serif;
}
p {
font-family: 'Roboto', sans-serif;
}
.pgtitle {
background-color: #FFCDD2;
}
.nav {
background-color: #F8BBD0;
}
.nav-item{
padding:5px;
}
.colorsection{
background-color: #D1C4E9;
margin: auto;
padding: 20px;
}
.container {
border: 5px solid #a2a2a6;
padding: 0px;
margin: 10px auto;
background-color: #FFF;
}
.color-container {
width: 100%;
}
.color-panel {
display: inline-block;
width: 32%;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin: 20px auto;
min-height: 100px;
}
.pale-red {
background-color: #FFCDD2;
color: #fff;
}
.pink {
background-color: #F8BBD0;
color: #000;
}
.light-purple {
background-color: #E1BEE7;
}
.deep-purple {
background-color: #D1C4E9;
}
.indigo {
background-color: #C5CAE9;
}
.pale-blue {
background-color: #BBDEFB;
}
.light-blue {
background-color: #B3E5FC;
}
.cyan {
background-color: #B2EBF2;
}
.teal {
background-color: #C8E6C9;
}
.light-green {
background-color: #DCEDC8;
}
.lime {
background-color: #F0F4C3;
}
.yellow {
background-color: #FFF9C4;
}
.amber {
background-color: #FFECB3;
}
.orange {
background-color: #FFE0B2;
}
.deep-orange {
background-color: #FFCCBC;
}
.brown {
background-color: #D7CCC8;
}
.gray {
background-color: #F5F5F5;
}
.fontsection{
background-color: #B2EBF2;
}
.font-container {
border: 2px solid #a2a2a6;
padding: 10px;
margin: 10px auto;
background-color: #C8E6C9;
}
.font-panel {
width: 45%;
display: inline-block;
}
.font-label {
font-size: 20px;
text-decoration: underline;
}
.regular {
font-style: normal;
}
.italic {
font-style: italic;
}
.bold {
font-weight: 700;
}
.pacifico {
font-family: 'Pacifico', cursive;
}
.roboto {
font-family: 'Roboto', sans-serif;
}
.open-sans {
font-family: 'Open Sans', sans-serif;
}
.montserrat {
font-family: 'Montserrat', sans-serif;
}
.text-style{
background-color: #F0F4C3;
}
.text-container {
border: 2px solid #a2a2a6;
padding: 10px;
margin: 10px auto;
background-color: #FFF9C4;
}
.text-panel h1 {
font-weight: 700;
font-size: 32px;
font-family: 'Pacifico', cursive;
}
.text-panel h2 {
font-weight: 500;
font-size: 18px;
font-family: 'Montserrat', sans-serif;
}
.text-panel p {
font-weight: 400;
font-size: 14px;
font-family: 'Roboto', sans-serif;
}
footer {
background-color: #D7CCC8;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment