Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created April 13, 2020 17:49
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/ec2f1af616a8ceb3dcebb1daa50b3b6e to your computer and use it in GitHub Desktop.
Save codecademydev/ec2f1af616a8ceb3dcebb1daa50b3b6e to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Guide</title>
<link rel="stylesheet" href="styles.css" type = "text/css">
<link
href="https://fonts.googleapis.com/css?family=Catamaran:400,500,700|Crimson+Text:400,400i,700|Karla:400,400i,700|Libre+Baskerville:400,400i,700|Merriweather:400,400i,700|Roboto+Mono:400,400i,700|Satisfy&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<h1>Guvercin Guide</h1>
<nav class ="header">
<ul>
<li><a href="#colors">Colors</a></li>
<li><a href="#fonts">Fonts</a></li>
<li><a href="#styles">Text Styles</a></li>
</ul>
</nav>
</header>
<main>
<section class="colors" id="colors">
<h2>Colors</h2>
<div class = "colors-flex">
<div class="tomato">Tomato <br>rgb(255, 99, 71) <br>#ff6347</div>
<div class="dodger">DodgerBlue <br>rgb(30,144,255) <br>#1E90FF</div>
<div class="azure">Azure <br>rgb(240, 255, 255) <br>#F0FFFF</div>
<div class="slate">SlateGray <br>rgb(112, 128, 144) <br>#708090</div>
<div class="teal">Teal <br>rgb(0, 128, 128) <br>#008080</div>
<div class="maroon">Maroon <br>rgb(128, 0, 0) <br>#800000</div>
</div>
</section>
<section class="fonts" id ="fonts">
<h2>Fonts</h2>
<div class = "fonts-flex">
<div class="crimson font">
<h3 class="fonts-header">Crimson Text</h3>
<p class="regular">The quick brown fox jumps over the lazy dog.</p>
<p class="bold">The quick brown fox jumps over the lazy dog.</p>
<p class="italic">The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="karla font">
<h3 class="fonts-header">Karla</h3>
<p class="regular">The quick brown fox jumps over the lazy dog.</p>
<p class="bold">The quick brown fox jumps over the lazy dog.</p>
<p class="italic">The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="libre font">
<h3 class="fonts-header">Libre Baskerville</h3>
<p class="regular">The quick brown fox jumps over the lazy dog.</p>
<p class="bold">The quick brown fox jumps over the lazy dog.</p>
<p class="italic">The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="merriweather font">
<h3 class="fonts-header">Merriweather</h3>
<p class="regular">The quick brown fox jumps over the lazy dog.</p>
<p class="bold">The quick brown fox jumps over the lazy dog.</p>
<p class="italic">The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="arial font">
<h3 class="fonts-header">Arial</h3>
<p class="regular">The quick brown fox jumps over the lazy dog.</p>
<p class="bold">The quick brown fox jumps over the lazy dog.</p>
<p class="italic">The quick brown fox jumps over the lazy dog.</p>
</div><div class="robotomono font">
<h3 class="fonts-header">Roboto Mono</h3>
<p class="regular">The quick brown fox jumps over the lazy dog.</p>
<p class="bold">The quick brown fox jumps over the lazy dog.</p>
<p class="italic">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
</section>
<section class="styles" id="styles">
<h2>Text Styles</h2>
<div class="styles-flex">
<div class="styles-div">
<h1>H1: Main page heading</h1>
<ul>
<li>Font-weight: 700 (bold)</li>
<li>Font-size: 26px</li>
<li>Font-family: Crimson Text</li>
</ul>
</div>
<div class="styles-div">
<h2>H2: Subheading</h2>
<ul>
<li>Font-weight: 500</li>
<li>Font-size: 18px</li>
<li>Font-family: Karla</li>
</ul>
</div>
<div class="styles-div">
<p>P: Paragraph text</p>
<ul>
<li>Font-weight: 400 (regular)</li>
<li>Font-size: 14px</li>
<li>Font-family: Libre Baskerville</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>
Raw
styles.css
* {
box-sizing: border-box;
}
body {
font-family: "Catamaran", sans-serif;
background-color: blanchedalmond;
}
/*header*/
header {
display: inline-block;
position: fixed;
top: 0;
width: 100%;
background-color: #3f3f3f;
height: 80px;
}
h1 {
display: inline-block;
font-family: 'Satisfy',cursive;
text-transform: lowercase;
font-size: 26px;
font-weight: 500;
margin: 27px 10px;
color: aliceblue;
justify-content: left;
}
.header {
float: right;
margin: 5px 20px;
}
.header ul{
display: inline-block;
}
.header ul li{
display: inline-block;
margin-left: 10px;
}
.header ul li a {
text-decoration: none;
font-family: "Catamaran", sans-serif;
font-size: 24px;
color: bisque;
line-height: 48px;
}
.header ul li a:hover {
color: crimson;
}
/*main*/
/*Color Section*/
.colors {
margin: 95px auto 30px auto;
border: 2px solid darkslategray;
border-radius: 1%;
width: 80%;
min-height: 200px;
min-width: 200px;
}
h2 {
display: block;
font-size: 24px;
font-weight: 700;
margin: 10px;
}
/*using flexbox*/
.colors-flex {
font-family: 'Merriweather', serif;
color: rgb(49, 49, 48);
font-size: 18px;
width: 100%;
height: 90%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 20px auto 20px auto;
}
.tomato {
background-color: tomato;
min-width: 200px;
display: inline-flex;
justify-content: center;
width: 16%;
margin: 5px;
border: 1px solid black;
border-radius: 2%;
color: whitesmoke;
text-align: center;
}
.dodger {
background-color: dodgerblue;
min-width: 200px;
display: inline-flex;
justify-content: center;
width: 16%;
margin: 5px;
border: 1px solid black;
border-radius: 2%;
color: whitesmoke;
text-align: center;
}
.azure {
background-color: azure;
min-width: 200px;
display: inline-flex;
justify-content: center;
width: 16%;
margin: 5px;
border: 1px solid black;
border-radius: 2%;
text-align: center;
}
.maroon {
background-color: maroon;
min-width: 200px;
display: inline-flex;
justify-content: center;
color: whitesmoke;
width: 16%;
margin: 5px;
border: 1px solid black;
border-radius: 2%;
text-align: center;
}
.slate {
background-color: slategray;
min-width: 200px;
display: inline-flex;
align-content: center;
justify-content: center;
width: 16%;
margin: 5px;
border: 1px solid black;
border-radius: 2%;
color: whitesmoke;
text-align: center;
}
.teal {
background-color: teal;
min-width: 200px;
display: inline-flex;
justify-content: center;
text-align: center;
width: 16%;
margin: 5px;
border: 1px solid black;
border-radius: 2%;
color: whitesmoke;
}
/*fonts section*/
.fonts {
margin: 30px auto;
border: 2px solid darkslategray;
border-radius: 1%;
width: 80%;
min-height: 200px;
min-width: 200px;
}
.font-flex {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: left;
align-items: center;
width: 100%;
}
.crimson {
font-family: 'Crimson Text', serif;
}
.karla {
font-family: 'Karla', sans-serif;
}
.libre {
font-family: 'Libre Baskerville', serif;
}
.robotomono {
font-family: 'Roboto Mono', monospace;
}
.merriweather {
font-family: 'Merriweather', serif
}
.arial {
font-family: Arial, sans-serif;
}
h3 {
font-style: oblique;
}
.regular {
font-weight: normal;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.font {
display: inline-flex;
flex-direction: column;
justify-content: left;
align-items: center;
border-left: 1px solid #3f3f3f;
margin:10px 10px;
padding-left: 10px;
font-size: 16px;
line-height: 1.4em;
min-width: 30%;
}
/*text styles*/
.styles {
margin: 30px auto;
border: 2px solid darkslategray;
border-radius: 1%;
width: 80%;
min-height: 200px;
min-width: 200px;
}
.styles-flex h1 {
font-family: "Crimson Text", serif;
font-weight: 700;
font-size: 26px;
text-transform: none;
color: #3f3f3f;
}
.styles-flex h2 {
font-family: "Catamaran", sans-serif;
font-size: 18px;
font-weight: 500;
}
.styles-flex p {
font-family: "Libre Baskerville", serif;
font-size: 14px;
font-weight: 400;
}
.styles-flex {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: left;
width: 100%;
margin-left: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment