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

HI! This is my Project: Build a Website Design System.

Site: My Website Design System

Explore my solution to the project by clicking the link below:
https://anjumises.github.io/#

My Website Style Guide. With this one, I used display and positioning elements so I could get a better grasp on how each property work with the others. Definitely have a better understanding.

still struggling with displaying and positioning but will practice in my own time, moderately happy with how this turned out. might tweak it in the future! any feedback or some tips on how to understand display/position better, lmk!

live
github repo

1 Like

Hi! Here’s how my result looks like: take me there

Here’s mine. I pulled the colors and fonts from my actual webpage for this projects.

https://nimure.github.io/Website-Design-System/
https://github.com/Nimure/Website-Design-System

Hello everyone. Here is my attempt at the Build a Website Design System Challenge Project.
Live: https://iscal-mar.github.io/

I struggled figuring out how to center text vertically for a p element held within a div element. Best solution I could find is by setting the line height equal to half the height of the p element. If anyone has a better solution, please let me know. Thanks!

<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My style guide</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,[email protected],300;0,400;1,300&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="resources/css/style.css">
  </head>
  <body>
    <div class="card text-bg-light mb-3m w-75 p-3 mx-auto mt-n1">
        <div class="card-header">Colors</div>
        <div class="card-body">
          <div class="color-one">
            <h2>#33c2cc</h2>  
           </div> 
           <div class="color-two">
            <h2>#4fe0b0</h2>  
           </div>
           <div class="color-three">
            <h2>#00ffea</h2>  
           </div>
        </div>
      </div>
      <div class="card text-bg-light mb-3m w-75 p-3 mx-auto mt-n1" >
        <div class="card-header ">Fonts</div>
        <div class="card-body">
          <ul class="list-group list-group-flush">
            <li class="list-group-item" style="font-family:'Roboto', sans-serif;">Roboto Ligt 300</li>
            <li class="list-group-item" style="font-family:'Roboto', sans-serif; font-style:italic; ">Roboto italic 300</li>
            <li class="list-group-item" style="font-family:'Roboto', sans-serif; font-weight:bold; ">Roboto bold 300</li>
          </ul>
        </div>
      </div>
    </body>
</html>

--CSS

.mt-n1 {
    margin-top: 1rem !important;
  }
.card-body .color-one{
    background-color:#33c2cc;
    height: 6em;
    width: 15em;
    text-align: center;
    color: white;
    margin: 5px;
    float: left;
}
.card-body .color-two{
    background-color:#4fe0b0;
    height: 6em;
    width: 15em;
    text-align: center;
    color: black;
    margin: 5px;
    float: left;
}
.card-body .color-three{
    background-color: #00ffea;
    height: 6em;
    width: 15em;
    text-align: center;
    color: black;
    margin: 5px;
    float: left;
}

Couldn’t be happier to see such impressive work. It looks like a publishable website despite it is called very basic. Thank you for the inspiration!

Howdy folks!

I have my design system website here. It was a struggle to get the colors section positioned properly. I still don’t think I did it right. I based my design system off of starlink.com so that I could map everything properly. I’ve included the website and an image of what it looks like (to me at least).

https://angelalcantar.github.io/WebsiteDesignSystem/index.html

1 Like

Hey all! Happy to be here!
Just looking for general feedback and pointers on my project before I add other things like buttons, etc.

I feel like I did what the tasked asked, but not sure if I did it as efficiently as possible.

Thanks for checking it out! :slight_smile:

Looks great!

If I had to give a suggestion, it’d be to change the H1, H3 and P titles under text styles into their respective font family, weight, and size. (Looks like size is taken care of already.)

Looks really good! Great job :slight_smile:

Hi there! This is my web styles guide without grid or flexbox, but with buttons and adaptive size (you can watch my site from you phone).
Web site for watch
Github with code