Build a Website Style Guide Challenge Project (HTML, CSS)

Thank you so much! :slight_smile: That definitely does the trick, I ended up using line-height: 100px so both the name and the hex code are visible.

Glad to be of help :slight_smile:

Hello,
this is my website style guide, it’s a simple one.
You can check it out here: Style guide/design System

<!DOCTYPE html>
<html>
    <head>
        <title>Style guide/design System</title>
        <link href="./styles.css" rel="stylesheet">

    </head>
    <body>
        <header>
            <h1>A Style Guide/Design System</h1>
            <p class="paragraph">This is my website style guide. <br>
            I have a collor palette that i use for my websites. <br>
            I also have a list of my favorite fonts and text styles that i use.
            </p>
        </header>
        <main>
          <div class="colors">
            <h2>Colors</h2>
            <table>
              <tr>
              <td class="color1"><p>light grey</p>#d3d6db</td>
              <td class="color2"><p>grey</p>#3a4750</td>
              <td class="color3"><p>dark grey</p>#303841</td>
              <td class="color4"><p>red</p>#be3144</td>
              </tr>
              </table>
              <table>
             <tr>
              <td class="color5"><p>beetroot</p>#970747</td>
              <td class="color6"><p>crem</p>#fef4e8</td>
              <td class="color7"><p>petrol</p>#13445a</td>
              <td class="color8"><p>light petrol</p>#446878</td>
              </tr>
            </table>
            <table>
              <tr>
              <td class="color9"><p>mint green</p>#9bb899</td>
              <td class="color10"><p>skin</p>#fcceaa</td>
              <td class="color11"><p>flamenco</p>#f5827d</td>
              <td class="color12"><p>solomon</p>#ea4961</td>
              </tr>
              </table>
          </div>
          <div class="fonts">
            <h2>Text Fonts</h2>
            <h3>Web Safe Fonts</h3>

            <div class="font1">
              <h4>Times New Roman (serif)</h4>
              <p class="default">all work and no play makes jack a dull boy</p>
              <p class="italic">all work and no play makes jack a dull boy</p>
              <p class="bold">all work and no play makes jack a dull boy</p>
            </div>

            <div class="font2">
              <h4>Georgia (serif)</h4>
              <p class="default">all work and no play makes jack a dull boy</p>
              <p class="italic">all work and no play makes jack a dull boy</p>
              <p class="bold">all work and no play makes jack a dull boy</p>
            </div>

            <div class="font3">
              <h4>Garamond (serif)</h4>
              <p class="default">all work and no play makes jack a dull boy</p>
              <p class="italic">all work and no play makes jack a dull boy</p>
              <p class="bold">all work and no play makes jack a dull boy</p>
            </div>

            <div class="font4">
              <h4>Courier New (monospace serif)</h4>
              <p class="default">all work and no play makes jack a dull boy</p>
              <p class="italic">all work and no play makes jack a dull boy</p>
              <p class="bold">all work and no play makes jack a dull boy</p>
            </div>

          </div>
          <div class="text">
            <h2>Text Styles</h2>

            <div class="text1">
              <h4>Heading H1</h4>
              <ul>
                <li>text-align: center</li>
                <li>letter-spacing: 4px</li>
                <li>line-height: 80px</li>
                <li>word-spacing: 5px</li>
              </ul>
              <h4>Heading H4</h4>
               <ul>
                <li>text-align: center</li>
                <li>font-weight: lighter</li>
                <li>text-decoration-line: underline</li>
                <li>text-decoration-style: double</li>
              </ul>
              <h4>Heading H6</h4>
               <ul>
                <li>text-align: right</li>
                <li>font-weight: lighter</li>
                <li>margin-right: 50px</li>
              </ul>
              <h4>Paragraph p</h4>
               <ul>
                <li>text-align: justify</li>
                <li>word-spacing: 5px</li>
              </ul>
              <h4>Borders</h4>
              <p class="paragraph">I usually make my borders solid, with 1 px width and a light color. A good example is the border i use in this particular website:</p><br>
               <ul>
                <li>border: 1px solid</li>
              </ul>
              </div>
          </div>
        </main>

        <footer><h6>Created by Katerina Geroulakou</h6></footer>

    </body>
</html>

h1 {
    text-align: center;
    font-family: Georgia;
    color: #9bb899;
    background-color: #ea4961;
    letter-spacing: 3px;
    word-spacing: 5px;
    line-height: 80px;
  }
  h2 {
    text-align: center;
    font-family: Georgia;
    font-weight: lighter;
    color: #f5827d;
    text-decoration-line: underline;
    text-decoration-style: double;
    
  }
  h4 {
    text-align: center;
    margin: 5px auto;
  }
  
  h6 {
    text-align: right;
    font-weight: lighter;
    margin-right: 50px;
  }
  
  .paragraph {
    color: #9bb899;
    text-align: justify;
    word-spacing: 5px;
    margin: 0px 50px; 
  
  }
  
  table {
    margin: 0px 10px;
  }
  
  td {
    height:150px;
    width: 250px;
  padding:20px;
  text-align:center;
  font-weight: bold;
  font-family: courier;
  }
  
  td p{
  background-color: white;
  }
  
  ul {
    margin: 0px auto;
  }
  
  .colors, .fonts, .text {
    border: 1px solid #ea4961; 
    margin:50px;
  }
  
  .color1 {
    background-color:#d3d6db;
  }
  .color2 {
    background-color:#3a4750;
  }
  .color3 {
    background-color:#303841;
  }
  .color4 {
    background-color:#be3144;
  }
  .color5 {
    background-color:#970747;
  }
  .color6 {
    background-color:#fef4e8;
  }
  .color7 {
    background-color:#13445a;
  }
  .color8 {
    background-color:#446878;
  }
  .color9 {
    background-color:#9bb899;
  }
  .color10 {
    background-color:#fcceaa;
  }
  .color11 {
    background-color:#f5827d;
  }
  .color12 {
    background-color:#ea4961;
  }
  
  .font1 {
    font-family: 'Times New Roman';
    margin: 0px 10px;
  }
  .font2 {
    font-family: Georgia;
    margin: 0px 10px;
  }
  .font3 {
    font-family: Garamond;
    margin: 0px 10px;
  }
  .font4 {
    font-family: 'Courier New';
    margin: 0px 10px;
  }
  .italic {
    font-style: italic;
  }
  .bold {
    font-weight: bold;
  }
  

hello peers, this is my website style guide. As the cheatsheet project this one took me around 3.5 hours but all the practice is worth believe me. Take your time to experiment, that´s the only way to mastery.

You can see it live here → Website Style Guide (ricard0g.github.io)

I’m all ears to suggestions and improvements, keep grinding!

Hey! This is my Website Style Guide It is nothing complex but If you could check for any mistakes or recommendations that would be cool.

Thanks!

Code

Live

1 Like

Hello everyone,
Here is my Style Guide.

live: StyleGuide
code: Code: Ben-seb.github.io/Website-design-system at main · Ben-seb/Ben-seb.github.io · GitHub

Hey everyone!

I’ve just completed this project - it has taken me hours and hours to do and I’ve really struggled with the CSS on this one. I’m still figuring out the intricacies of display and position. I think it looks pretty OK on full size web browser, but as soon as the screen is made smaller everything is thrown out the window.

Would really appreciate some feedback on this :slight_smile: I try my best to never use

because I know it isn’t semantic, but I couldn’t really see a way around it for this project. Thanks :slight_smile:

Here is my Design System
It took me a while to make it responsive AND keep a good alignment, but I did it!

2 Likes

Hey guys.

Check out my first project, it took me a few hours to complete and I know it could get much better, but I wanted to move on to the next subject.

Any feedbacks will be much appreciated! :slightly_smiling_face:

Thanks!

Hi everyone!
Here is my project :slight_smile:

and you can check it live here my style guide

2 Likes

Hello Everyone,
Please find below my design system project.
Kindly take a look and tell we what you think and what I should improve on. I would appreciate your help very much.
Tnx.

Looks nice! I noticed the nav bar is just slightly off-centered; you can remove the default padding that’s on the ul (right now its padding-left is set it 40px; to fix this, set it to 0px).

Great work and good luck on the rest of your course! :slight_smile:

Hi everyone :blush: here’s my live site

Github

Any feedback is greatly appreciated!

1 Like

Hi! I had not noticed the default padding at all on the nav, it is fixed now.

Looked at yours and seems great! Nice touch adding the GitHub and LinkedIn profile to the footer, had not thought of that before.

Thanks for your feedback! Good luck for the rest of the course! :slightly_smiling_face:

1 Like

Thank you! :blush:

I checked out yours and it looks very nice and organized. I did notice that at the very top of your page, before your heading, there’s the word “fonts” (which I don’t believe you want there). I checked your HTML code and at the top you have fonts<!DOCTYPE html>

So just simply deleting “fonts” before declaring the doctype should fix that!

Great work and good luck with the rest of the course :slight_smile:

Hi! Thanks for the feedback! There is the word “font” at the top of the page which I guess was something you did not notice, it is in the index.html file at the top, you can just delete it and keep the .

I think it is well organised, maybe I would have put the title (Nayli’s Website Style Guide) and the anchor links (Color, fonts, text style) at the centre of the page or aligned with the box containers.

If you like that idea, you can “text-align: center;” the specific h1 and anchors for them to be centred, or if you want to align them to the box container simply use “margin: 0 20px”. (which means top and bottom margin 0px and left and right margin 20px).
Good luck to the rest of the course! :slightly_smiling_face: :call_me_hand:

Hi!!! here my Website Style Guide: https://github.com/kikabeur/Reference-Website

I’ll appreciate your comments.

Thnks!

LIVE: WEBSITE DESIGN SYSTEM

CODE:WEBSITE DESIGN SYSTEM · GitHub

My second work

Hi All, checkout my Website’s style Guide.
Gist URL: Codecademy export · GitHub