Challenge Project: Build a Website Design System

Could someone help me with placing the “Text Styles” samples into an inline block format I cannot seem to get the headings and the text samples to sync side by side.

Would appreciate any advice!

Hi there!

Could you share the HTML and CSS for your project?

Just be sure to place them within a three-backtick block. :slight_smile:

```
Code here
```

Here it is!

HTML

<!DOCTYPE html>
<html>

    <head>
        <title>
            Stlye Guide Web Template
        </title>
        <link href="./Resources/styles.css" type="text/css" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    </head>

    <body>

        <header>
            <article class="Text">
                <h1 class="texta">H1 header</h1>
                    <ul class="breadcrumb">
                        <li class="Top 1"><strong>Font-weight:</strong> 700 (bold)</li>
                        <li class="Top 1"><strong>Font-size:</strong> 26px</li>
                        <li class="Top 1"><strong>Font-family:</strong> Nunito Sans</li>
                    </ul>
                <h2 class="textb">H2 Subheader</h2>
                    <ul class="breadcrumb">
                        <li class="Top 2"><strong>Font-weight:</strong> 500</li>
                        <li class="Top 2"><strong>Font-size:</strong> 18px</li>
                        <li class="Top 2"><strong>Font-family:</strong> Poppins</li>
                    </ul>
                <p class="textc">Paragraph</p>
                    <ul class="breadcrumb">
                        <li class="Top 3"><strong>Font-weight:</strong> 400 (regular)</li>
                        <li class="Top 3"><strong>Font-size:</strong> 14px</li>
                        <li class="Top 3"><strong>Font-family:</strong> Poppins</li>
                    </ul>
            </article>
            <nav class="icon">
                <div class="bar"></div>
                <div class="bar"></div>
                <div class="bar"></div>
            </nav>
        </header>
        
        <main>
            <article class="Colors">
                <h2>Colours</h2>
                    <div class="blocka">
                        <div class="name">Aqua Green</div>
                        <div class="rgb">rgb(5, 222, 143)</div>
                    </div>
                    <div class="blockb">
                        <div class="name">Violet</div>
                        <div class="rgb">rgb(144, 97, 187)</div>
                    </div>
                    <div class="blockc">
                        <div class="name">Peach</div>
                        <div class="rgb">rgb(229, 190, 130)</div>
                    </div>
                    <div class="blockd">
                        <div class="name">Maroon</div>
                        <div class="rgb">rgb(78, 1, 1)</div>
                </div>
            </article>
            <article class="Fonts">
            <h2>Font Styles</h2>
                <h3 class="fonta">Arial</h3>
                    <p class="fontatxta">The quick brown fox jumped over the lazy dog</p>
                    <p class="fontatxtb">The quick brown fox jumped over the lazy dog</p>
                    <p class="fontatxtc">The quick brown fox jumped over the lazy dog</p>
                <h3 class="fontb">Serif</h3>
                    <p class="fontbtxta">The quick brown fox jumped over the lazy dog</p>
                    <p class="fontbtxtb">The quick brown fox jumped over the lazy dog</p>
                    <p class="fontbtxtc">The quick brown fox jumped over the lazy dog</p>
                <h3 class="fontc">Nunito Sans</h3>
                    <p class="fontctxta">The quick brown fox jumped over the lazy dog</p>
                    <p class="fontctxtb">The quick brown fox jumped over the lazy dog</p>
                    <p class="fontctxtc">The quick brown fox jumped over the lazy dog</p>
                <h3 class="fontd">Poppins</h3>
                    <p class="fontdtxta">The quick brown fox jumped over the lazy dog</p>
                    <p class="fontdtxtb">The quick brown fox jumped over the lazy dog</p>
                    <p class="fontdtxtc">The quick brown fox jumped over the lazy dog</p>
            </article>
        </main>

        <footer>

        </footer>
        
    </body>

</html>

CSS

.bar {
    width: auto;
    height: 5px;
    background-color: rgb(85, 55, 55);
    margin: 6px 0;
    border-radius: 5px;
  }
.blocka, .blockb, .blockc, .blockd {
    display: inline-block;
}
.blocka {
    background-color: rgb(5, 222, 143);
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    width: 300px;
    padding: 20px;
    margin: 5px;
}
.blockb {
    background-color: rgb(144, 97, 187);
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    width: 300px;
    padding: 20px;
    margin: 5px;
}
.blockc {
    background-color: rgb(229, 190, 130);
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    width: 300px;
    padding: 20px;
    margin: 5px;
}
.blockd {
    background-color: rgb(78, 1, 1);
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    width: 300px;
    padding: 20px;
    margin: 5px;
}
.fonta {
    font-family: Arial;
    font-weight: 400;
    text-decoration: underline;
}
.fontatxta {
    font-family: Arial;
    font: normal small-caps 20px/15px Arial;
}
.fontatxtb {
    font: bold small-caps 20px/15px Arial;
}
.fontatxtc {
    font: italic small-caps 20px/15px Arial;
}
.fontb {
    font-family: serif;
    font-weight: 400;
    text-decoration: underline;
}
.fontbtxta {
    font-family: serif;
    font: italic small-caps 20px/15px serif;
}
.fontbtxtb {
    font: bold small-caps 20px/15px serif;
}
.fontbtxtc {
    font: italic small-caps 20px/15px serif;
}
.fontc {
    font-family: "Nunito Sans";
    font-weight: 400;
    text-decoration: underline;
}
.fontctxta {
    font-family: "Nunito Sans";
    font: normal small-caps 20px/15px "Nunito Sans";
}
.fontctxtb {
    font: bold small-caps 20px/15px "Nunito Sans";
}
.fontctxtc {
    font: italic small-caps 20px/15px "Nunito Sans";
}
.fontd {
    font-family: "Poppins";
    font-weight: 400;
    text-decoration: underline;
}
.fontdtxta {
    font-family: "Poppins";
    font: normal small-caps 20px/15px "Poppins";
}
.fontdtxtb {
    font: bold small-caps 20px/15px "Poppins";
}
.fontdtxtc {
    font: italic small-caps 20px/15px "Poppins";
}

Thanks for the help

Thank you for sharing your HTML and CSS. :slight_smile:

When you say, “text styles” samples, do you mean the top with the h1, h2, and paragraph examples?

image

If so, you need to do what you did with the colours—have each entity wrapped in its own div. This is also a great time to think about using utility classes! (Utility classes are used to apply the same, specific style to different elements) So instead of having something like this:

.blocka, .blockb, .blockc, .blockd {
    display: inline-block;
}

You could do:

.inline-block {
    display: inline-block;
}

And apply the inline-block class to each element that would need that utility. This can be helpful in the future when it comes to having larger CSS files and you don’t have to type out a giant block of classes for just one style application. :wink:

If not, could you provide more information about what you are trying to accomplish? Thank you!

2 Likes

That’s exactly it! Thanks again for the help :slight_smile:

2 Likes