Skip to content

Instantly share code, notes, and snippets.

@Sweetcake610

Sweetcake610/index.html Secret

Last active November 25, 2022 16:37
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 Sweetcake610/f87d85e68a5879275cd594758fb8333a to your computer and use it in GitHub Desktop.
Save Sweetcake610/f87d85e68a5879275cd594758fb8333a to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy Build a Website Style Guide
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,500;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<title>Website Design System</title>
</head>
<body>
<header>
<h1>My Online Cookbook Style Guide</h1>
<p>Style Guide for project My Online Cookbook. Site to feature recipes created by myself.</p>
</header>
<main>
<div class="color section">
<h1>Colors</h1>
<div class="colors pink">
<p>Hex Code: #BF7F9D</p>
</div>
<div class="colors blue">
<p>Hex Code: #3679E3</p>
</div>
<div class="colors lightpink">
<p>Hex Code: #E889E0</p>
</div>
</div>
<div class="font section">
<h1>Fonts</h1>
<div class="fonts">
<h4 class="ubuntu">Ubuntu</h4>
<p class="italic-regular ubuntu">Come with me to the great beyond</p>
<p class="medium ubuntu">Come with me to the great beyond</p>
</div>
<div class="fonts">
<h4 class="lora">Lora</h4>
<p class="semibold lora">Come with me to the great beyond</p>
<p class="bold lora">Come with me to the great beyond</p>
</div>
</div>
<div class="text section">
<h1>Text</h1>
<div class="texts bold lora">
<h1>H1: Main Page Heading</h1>
<ul>
<li>Font-weight: 700(bold)</li>
<li>Font-size: 32px</li>
<li>Font-family: Lora</li>
</ul>
</div>
<div class="texts bold lora">
<h3>H3: Footer & Recipe Titles</h3>
<ul>
<li>Font-weight: 700(bold)</li>
<li>Font-size: 24px</li>
<li>Font-family: Lora</li>
</ul>
</div>
<div class="texts semibold lora">
<h5>H5: Main Page Card Title</h5>
<ul>
<li>Font-weight: 600(semibold)</li>
<li>Font-size: 20px</li>
<li>Font-family: Lora</li>
</ul>
</div>
<div class="texts medium ubuntu">
<p>P: Recipe Text</p>
<ul>
<li>Font-weight: regular & medium</li>
<li>Font-size: 16px</li>
<li>Font-family: Ubuntu</li>
</ul>
</div>
<div class="texts italic-regular ubuntu">
<p>P: Supported Recipe Text</p>
<ul>
<li>Font-weight: Italic Regular </li>
<li>Font-size: 16px</li>
<li>Font-family: Ubuntu</li>
</ul>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
Raw
styles.css
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCu6KVjbNBYlgoKej70l0k.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: 'Ubuntu';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCjC3jsGyN.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: 'Lora';
font-style: normal;
font-weight: 600, 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lora/v26/0QIvMX1D_JOuMwr7Iw.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;
}
header {
text-align: center;
padding-bottom: 20px;
}
header h1 {
font-size: 40px;
margin-bottom: 0;
}
header p {
font-size: 24px;
margin-top: 0;
}
.section {
border: 2px solid gray;
border-radius: 10px;
margin: 15px auto;
width: 60%;
padding: 10px;
}
/*Color Styling Section*/
.color {
overflow: auto;
}
.colors {
width: 30%;
float: left;
margin: 10px;
}
.colors p {
text-align: center;
font-family: 'Lora';
font-weight: 600;
font-size: 20px;
margin: 40% auto;
padding: 0 5px;
}
.pink {
background-color: #BF7F9D;
}
.blue {
background-color: #3679E3;
}
.lightpink {
background-color: #E889E0;
}
/*Font Styling Section*/
.ubuntu {
font-family: 'Ubuntu';
padding: 0 10px;
font-size: 20px;
}
.italic-regular {
font-style: italic;
font-weight: 400;
}
.medium {
font-style: normal;
font-weight: 500;
}
.lora {
font-family: 'lora';
padding: 0 10px;
font-size: 20px;
}
.semibold {
font-style: normal;
font-weight: 600;
}
.bold {
font-style: normal;
font-weight: 700;
}
.fonts {
border: 1px solid gray;
width: 80%;
height: 200px;
margin: 10px auto;
}
h4 {
text-decoration: underline;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment