Build a Website Design System

Hello
I am stuck this project. Could you advise how can I split the Colors section with other colour boxes? I don’t remember how to do it anymore. It is inside the big box and I want to put Colors at the top and then a little space and then color boxes. Please have a look my coded photo and sample photo . Thanks

<!DOCTYPE html>
<html>
  <head>
    <title>My Website Style Guide</title>
    <link href="styles.css" type="text/css" rel="stylesheet">
    </head>
<body>
  <header>
    <h1 id="Style-Guide">My Website Style Guide</h1>
    </header>
  <!--section colors -->
  <section id="sectioncolor">
  <h2 class="box">Colors</h2>
  <div class="color-box Cl">
    <h4>Cool Blue</h4>
    <p>#2d5dcc</p>
  </div>
  <div class="color-box Pink">
    <h4>Pink</h4>
    <p>#d957d9p</p>
  </div>
  <div class="color-box MG">
    <h4>Mint Green</h4>
    <p>#4fe0b0</p>
  </div>
  <div class="color-box Beige">
    <h4>Beige</h4>
    <p>#efd9ca</p>
  </div>
  </section>
  </body>
</html>
body {
  padding: 10px;
  margin: 20px;
}

#Style-Guide {
  margin-bottom: 20px;
}

h1 {
  font-family: Arial,sans-serif;
  font-size: 28px;
  font-weight: 400px;
}

h2 {
  position: fixed;
}

.box {
  border: 2px solid black;
  padding: 10px 10px 30px 10px;
  margin: 10px auto;
  width: 1400px;
  height: 550px;
  }

.color-box { 
  width: 330px;
  height: 120px;
  display: inline-block;
  margin: 10px 10px;
  text-align: center;
  
  
}

.Cl {
  background-color: #00ffff;
  
}
.Pink{
  background-color: #ffb6c1;
  
}
.MG {
  background-color:#c0c0c0;
  
}
.Beige{
  background-color: #e6e6fa;
  
}


Hello! The following advice yields this result:

Since the <h2> is part of the <section> with the colours, it is very hard to manipulate them separately. What happens if you disassociate the <h2> with the <section>? This would mean the <h2> is outside of the <section>:

<h2></h2>
<section class="box">

Now, margin-top comes in handy here. Think about which class to apply it to…


I’m trying to only hint at the answer, but if you want more help, just ask!

1 Like

Thank you very much , now the first color section is ok. I am trying to do font section and i cannot put font boxes together in one big box. I cannot find any clue until one hour where I wrote wrong or how to do. Why my paraboxes are far each other and not fit in the big box ? Could you advise some hint?

ty<!DOCTYPE html>
<html>
  <head>
    <title>My Website Style Guide</title>
    <link href="styles.css" type="text/css" rel="stylesheet">
    </head>
<body>
  <header>
    <h1 id="Style-Guide">My Website Style Guide</h1>
    </header>
  <!--section colors -->
  <section id="sectioncolor" class="box">
  <h2>Colors</h2>
  <div class="color-box Cl">
    <h4>Cool Blue</h4>
    <p>#2d5dcc</p>
  </div>
  <div class="color-box Pink">
    <h4>Pink</h4>
    <p>#d957d9p</p>
  </div>
  <div class="color-box MG">
    <h4>Mint Green</h4>
    <p>#4fe0b0</p>
  </div>
  <div class="color-box Beige">
    <h4>Beige</h4>
    <p>#efd9ca</p>
  </div>
  </section>

  <!--section Fonts -->
  <section id="sectionfonts" class="box">
    <h2>Fonts</h2>
<div class="font-area">
<h3 class="textbox">Source Code Pro</h3>
<p class="parabox">The quick brown fox jumps over the lazy dog.</p>
<p class="parabox"><strong>The quick brown fox jumps over the lazy dog.</strong></p>
<p class="parabox">The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="font-area">
<h3 class="textbox">Nunito Sans</h3>
<p class="parabox">The quick brown fox jumps over the lazy dog.</p>
<p class="parabox"><strong>The quick brown fox jumps over the lazy dog.</strong></p>
<p class="parabox">The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="font-area">
<h3 class="textbox">Poppins </h3>
<p class="parabox">The quick brown fox jumps over the lazy dog.</p>
<p class="parabox"><strong>The quick brown fox jumps over the lazy dog.</strong></p>
<p class="parabox">The quick brown fox jumps over the lazy dog.</p>
</div>
    </section>
  
  </body>
</html>
body {
  padding: 10px;
  margin: 20px;
}

#Style-Guide {
  margin-bottom: 20px;
}

h1 {
  font-family: Arial,sans-serif;
  font-size: 28px;
  font-weight: 400px;
}

h2 {
  position: absolute;
  font-family: Arial,sans-serif;
  font-size: 25px;
  font-weight: 300px;
  }
.box {
  border: 2px solid black;
  padding: 10px 10px 30px 10px;
  margin: 10% auto;
  width: 1400px;
  height: 400px;
  }

.color-box { 
  width: 330px;
  height: 120px;
  display: inline-block;
  margin-top: 10%;
  text-align: center;
  
  }

.Cl {
  background-color: #2d5dcc;
  
}
.Pink{
  background-color: #d957d9;
  
}
.MG {
  background-color:#4fe0b0;
  
}
.Beige{
  background-color: #efd9ca;
  
}

.textbox {
  border: 1px solid;
  width: 330px;
  height: 120px;
  display: inline-block;
  margin-top: 10%;
  line-height: 20px;
  padding: 5px;
  text-align: left;
  position: relative;
  }
 h3 {
  font-family: "Noto Serif", sans-serif;
  font-size: 20px;
  text-decoration: underline;
  font-weight: 200px; 
  
}

.parabox {
  font-family: "Noto Serif", serif;
  font-size: 14px;
  font-weight: 100px; 
  position: relative;
top: -120px; left: 10px;
display: fixed;

  
}

![Screenshot 2021-04-13 at 12.37.47|690x343](upload://hWpv476UbPCQMlJjhSg7Fqr4Rki.png) 


  

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.