Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created November 29, 2019 16:00
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/c44a16c6cae82c0fff3cc81fd84cde04 to your computer and use it in GitHub Desktop.
Save codecademydev/c44a16c6cae82c0fff3cc81fd84cde04 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Website Styling Page</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!--Header-->
<nav class="header">
<ul>
<li><a href="#">Colour Scheme</a></li>
<li><a href="#">Font Combination</a></li>
<li><a href="#">Text Styling</a></li>
</ul>
</nav>
<!--Banner-->
<div class="banner">
<div class="banner-text">
<span>My Website Styling Sheet</span>
</div>
</div>
<!--Colour Scheme-->
<div class="container">
<div class="container-header">
<h2>Colour Scheme</h2>
</div>
<div class="container-text">
<div class ="colour-box-black">
<div class ="colour-box-text">
<h2>Black</h2>
<div class="colour-box-information">
<h2>#070707</h2>
</div>
</div>
</div>
<div class ="colour-box-blue">
<div class ="colour-box-text">
<h2>Blue</h2>
<div class="colour-box-information">
<h2>#0A2239</h2>
</div>
</div>
</div>
<div class ="colour-box-lightblue">
<div class ="colour-box-text">
<h2>Light Blue</h2>
<div class="colour-box-information">
<h2>#ACBDBA</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Font Combination-->
<div class="container">
<div class="container-header">
<h2>Font Combination</h2>
</div>
<div class="container-text">
<!--Cuprum Font-->
<div class ="font-name-cuprum">
<span class= "cuprum-heading">Cuprum</span>
<div class ="cuprum-text">
<div class ="normal">
<h2>The quick brown fox jumps over the lazy dog.</h2>
</div>
<div class ="bold">
<h2>The quick brown fox jumps over the lazy dog.</h2>
</div>
<div class ="italics">
<h2>The quick brown fox jumps over the lazy dog.</h2>
</div>
</div>
</div>
<!--Quicksand Font-->
<div class ="font-name-quicksand">
<span class= "quicksand-heading">Quicksand </span>
<div class ="quicksand-text">
<div class ="normal">
<h2>The quick brown fox jumps over the lazy dog.</h2>
</div>
<div class ="bold">
<h2>The quick brown fox jumps over the lazy dog.</h2>
</div>
<div class ="italics">
<h2>The quick brown fox jumps over the lazy dog.</h2>
</div>
</div>
</div>
</div>
</div>
<!--Text Syles-->
<div class="container">
<div class="container-header">
<h2 class="tex">Text Styling</h2>
</div>
<div class="container-text">
<!--Main Heading-->
<div class ="text-style-mainheading">
<span class= "mainheading-heading">Main Heading </span>
<div class ="maintext">
<ul>
<li>Font family: Quicksand </li>
<li>Font size: 50px </li>
<li>Font weight: bold (700)</li>
</ul>
</div>
</div>
<!--Subheading-->
<div class ="text-style-subheading">
<span class= "subheading-heading">Subheading </span>
<div class ="maintext">
<ul>
<li>Font family: Cuprum </li>
<li>Font size: 30px </li>
<li>Font weight: 500</li>
</ul>
</div>
</div>
<!--Paragraph-->
<div class ="text-style-paragraph">
<span class= "paragraph-heading">Paragraph </span>
<div class ="maintext">
<ul>
<li>Font family: Cuprum </li>
<li>Font size: 20px </li>
<li>Font weight: 400</li>
</ul>
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
Raw
styles.css
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 400,600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/quicksand/v19/6xKtdSZaM9iE8KbpRA_hK1QN.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: 'Cuprum';
font-style: normal;
font-weight: 400;
src: local('Cuprum Regular'), local('Cuprum-Regular'), url(https://fonts.gstatic.com/s/cuprum/v11/dg4k_pLmvrkcOkBNJutC.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;
}
html{
margin: ;
padding: 0px auto;
background: url("http://getwallpapers.com/wallpaper/full/6/a/8/354048.jpg") no-repeat;
}
/*Header*/
.header {
background-color: white;
width: 100%;
text-align: center;
}
.header li {
display: inline-block;
padding: 0px 5px;
font-family: "Quicksand",sans-serif;
font-size: 15px;
font-weight: bold;
border: 2px solid white;
margin: 10px
}
.header li a{
color: #4a4a4a;
text-decoration: none;
}
/*Banner*/
.banner-text span{
font-family:"Cuprum",sans-serif;
text-align: center;
justify-content: center;
font-size: 50px;
color: white;
}
/*Container*/
.container {
font-family: "Quicksand",sans-serif;
font-size: 10px;
border: 2px solid white;
margin: 20px 0px;
display: block;
justify-content: center;
background: white;
border-radius: 25px;
}
.container-header h2{
font-size: 30px;
font-weight: bold;
margin: 20px;
}
.container-text{
margin: 20px
}
.container-text h2{
font-size: 20px;
}
.colour-box-black{
text-align: center;
background: #070707;
color: white;
display: inline-block;
border-radius: 25px;
margin-bottom: 10px;
}
.colour-box-blue{
text-align: center;
background: #0A2239;
color: white;
display: inline-block;
border-radius: 25px;
}
.colour-box-lightblue{
text-align: center;
background: #ACBDBA;
color: white;
display: inline-block;
border-radius: 25px;
}
.colour-box-text {
height: 100px;
width: 250px;
justify-content: center;
}
/*Font Combination*/
.font-name-cuprum{
font-family: "Cuprum" ;
display: inline-block;
margin-right: 20px
}
.cuprum-heading{
font-size: 30px;
text-decoration: underline;
}
.cuprum-text h2 {
font-size: 20px;
}
.font-name-quicksand{
font-family: "Quicksand" ;
display: inline-block;
}
.quicksand-heading{
font-size: 30px;
text-decoration: underline;
}
.quicksand-text h2 {
font-size: 20px;
}
.normal h2{
font-weight: normal;
}
.bold h2{
font-weight: bold;
}
.italics {
font-style: italic;
}
/*Text Styling*/
.text-style-mainheading .mainheading-heading {
font-family: "Quicksand";
font-size: 50px;
font-weight: 700;
}
.text-style-subheading .subheading-heading {
font-family: "Cuprum";
font-size: 30px;
font-weight: 500;
}
.text-style-paragraph .paragraph-heading {
font-family: "Cuprum";
font-size: 20px;
font-weight: 400;
}
.maintext {
font-size: 15px;
}
footer {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment