Codecademy Web development challenge project

index.html

<!--
	Author: AnOnYmOus001100
	Date: 06/09/2020

Build a Website Design System
Overview
This project is slightly different than others you have encountered thus far on Codecademy. Instead of a step-by-step tutorial, this project contains a series of open-ended requirements which describe the project you’ll be building. There are many possible ways to correctly fulfill all of these requirements, and you should expect to use the internet, Codecademy, and other resources when you encounter a problem that you cannot easily solve.

Project Goals
In this project, you’ll be building your own basic design system for a website. In essence, you’ll be building a website to help you build MORE websites in the future! On your site, you’ll collect all the colors, fonts, and some of the repeating styles.

Setup Instructions
If you choose to do this project on your computer instead of Codecademy, you can download what you’ll need by clicking the “Download” button below. If you need help setting up your computer, read our article about setting up a text editor for HTML/CSS development.

Tasks:

Prerequisites
1.
To complete this project, you should have completed the Codecademy lessons covering the CSS box model, display and positioning, colors, and typography. You can use more advanced CSS layout concepts like flexbox, CSS grid, or responsive design, but they won’t be required.

Project Requirements
2.
In this project, you’ll build a style guide/design system for your website. Developers and designers use design systems in order to organize the look and feel of a website or web application. Design systems help to document the visual vocabulary and reusable components of a large website.

As your websites grow larger and more complex, having a consistent set of styles will help them stay cohesive and enjoyable for users! It also helps as you start working with other developers, as you can have a consistent reference for how your website should be built.

Your style guide/design system will include at least a section on colors, fonts, and specific text styles, but it can be extended to as many other areas as you’d like. You can take a look at our basic example site for a taste of what you’ll be building (yours will be customized).

3.
Your style guide should include a labeled section outlining the colors to be used.

Each color should have:

A name (you can come up with this name yourself)
A box displaying the color itself.
The CSS value used to create the color (in hex, rgb(), rgba(), hsl(), or hsla()).
An optional description of how you intend to use the colors.
4.
Your style should include a labeled section of the fonts to be used (we recommend importing fonts from Google Fonts).

For each font, the goal is to to demonstrate the various styles that you intend to use (font weight, style, size, and text decorations). To do this, you should include the following for every font:

The font name
A series of styles that you intend to use (for example, styles could include: plain, bold and italic, underlined).
For each style, include a sentence or series of words to demonstrate the text style (our example site uses the quick brown fox…).
Make sure to display each of the sections in the proper font, size, and style.

5.
In addition to the list of possible fonts, your style guide should include a section for specific text styles for page elements. For example, you could set main heading (<h1>) guidelines about text size, fonts, font styles, font weight, and more.

Include at least 3 element styles, and ideally as many as you’d like to use in future sites.

For each page element, include:

A page element name (for example, “Subheading”).
All style rules (for example, font-weight: 700).
6.
Add any additional styles that you’d like to include to make your style guide/design system look great. This could include positioning, layout, additional colors, box model properties, and more.

If you’d like some inspiration, you can look to the following samples:

Salesforce’s Lightning Design System
Google’s Material Design
Twitter’s Bootstrap.
Solution and Extensions
7.
Great work! Visit our forums to compare your project to our sample solution code. You can also learn how to host your own solution on GitHub so you can share it with other learners! Your solution might look different from ours, and that’s okay! There are multiple ways to solve these projects, and you’ll learn more by seeing others’ code.

If you’d like to extend your site, consider:

Adding additional components (you could document the various buttons that you’d like to use).
Learning how and then implementing a responsive design so that your site looks great on all screen sizes.
Adding navigation and splitting up your site so that each section has its own HTML page.
-->

<!DOCTYPE html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,700;1,300&family=Cormorant+Garamond:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Sans:ital,wght@0,400;0,700;1,100&display=swap" rel="stylesheet">
    <title>Style Guide</title>
  </head>
  <body>
    <header>
      <h1>My Website Style Guide</h1>
    </header>
    <div class="container">
      <h2>Colors</h2>
      <div class="color-container">
        <div class="color-panel tomato">
          <p class="color-label">Tomato</p>
          <p class="hex">#FF6347</p>
          <p class="rgb">rgb(255,99,71)</p>
        </div>
        <div class="color-panel orange">
          <p class="color-label">Orange</p>
          <p class="hex">#FFA500</p>
          <p class="rgb">rgb(255,165,0)</p>
        </div>
        <div class="color-panel dodger-blue">
          <p class="color-label">Dodger Blue</p>
          <p class="hex">#1E90FF</p>
          <p class="rgb">rgb(30,144,255)</p>
        </div>
        <div class="color-panel medium-sea-green">
          <p class="color-label">Medium Sea Green</p>
          <p class="hex">#3CB371</p>
          <p class="rgb">rgb(60,179,113)</p>
        </div>
        <div class="color-panel violet">
          <p class="color-label">Violet</p>
          <p class="hex">#EE82EE</p>
          <p class="rgb">	rgb(238,130,238</p>
        </div>
        <div class="color-panel slate-blue">
          <p class="color-label">Slate Blue</p>
          <p class="hex">#6A5ACD</p>
          <p class="rgb">rgb(106,90,205)</p>
        </div>
      </div>
    </div>
    <div class="container">
      <h2>Fonts</h2>
      <div class="font-container">
        <div class="font-panel">
        <p class="font-label algreya-sans">Alegreya Sans</p>
        <p class="thin alegreya-sans">The quick brown fox jumps over the lazy dog.</p>
        <p class="light alegreya-sans">The quick brown fox jumps over the lazy dog.</p>
        <p class="bold alegreya-sans">The quick brown fox jumps over the lazy dog.</p>
        </div>
        <div class="font-panel">  
        <p class="font-label cormorant-garamond">Cormorant Garamond</p>
        <p class="regular cormorant-garamond">The quick brown fox jumps over the lazy dog.</p>
        <p class="italic cormorant-garamond">The quick brown fox jumps over the lazy dog.</p>
        <p class="bold cormorant-garamond">The quick brown fox jumps over the lazy dog.</p>
        </div>
        <div class="font-panel">
        <p class="font-label plex-sans">Plex Sans</p>
        <p class="thin plex-sans">The quick brown fox jumps over the lazy dog.</p>
        <p class="regular plex-sans">The quick brown fox jumps over the lazy dog.</p>
        <p class="bold plex-sans">The quick brown fox jumps over the lazy dog.</p>
        </div>
      </div>  
    </div>
    <div class="container">
      <h2>Text Styles</h2>
      <div class="text-container">
        <div class="text-panel">
          <h1>H1: Main page Heading</h1>
          <ul>
            <li>Font-weight: 700</li>
            <li>Font-size: 26px</li>
            <li>Font-family: Alegreya 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: Cormorant Garamond</li>
          </ul>
        </div>
        <div class="text-panel">
          <p>P: paragraph text</p>
           <ul>
            <li>Font-weight: 400</li>
            <li>Font-size: 14px</li>
            <li>Font-family: IBM Plex Sans</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

styles.css

body {
  font-family: 'Alegreya sans', sans-serif;
  margin: 0 10%;
}

.container {
  border: 1px solid 	#FFD700;
  padding: 10px;
  margin: 10px auto;
}

.color-container {
  width: 100%;
}

.color-panel {
  display: inline-block;
  width: 32%;
  text-align: center;
  margin: 20px auto;
  min-height: 100px;
}

.tomato {
  background-color: #FF6347;
  color: #000;
}

.orange {
  background-color: #FFA500;
}

.dodger-blue {
  background-color: #1E90FF;
}

.medium-sea-green {
  background-color: #3CB371;
}

.violet {
  background-color: #EE82EE;
}

.slate-blue {
  background-color: #6A5ACD;
}

.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;
}

.alegreya-sans {
  font-family: 'Alegreya Sans', sans-serif;
}

.cormorant-garamond {
  font-family: 'Cormorant Garamond', serif;
}

.plex-sans {
  font-family: 'IBM Plex Sans', sans-serif;
}

.text-panel h1 {
  font-weight: 700;
  font-size: 26px;
  font-family: 'Nunito Sans', sans-serif;
}

.text-panel h2 {
  font-weight: 500;
  font-size: 18px;
  font-family: 'Poppins', sans-serif;
}

.text-panel p {
  font-weight: 400;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
}