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

Here is my Project:
Challenge Project

My basic Website style guide :slight_smile: https://github.com/Danny30081991/ColorsFontsStyles

Here is my project:

Hello all!

Here’s my web design guide. I also added some buttons! Hope you like it!

Here’s my minimal effort version. Any feedback is welcome ppl!
Thanks a lot!
edit: on the top of my css I started to experiment with something then ultimately forgot about it. We’ll never know :man_shrugging:

Wow! That’s a great design! Will make sure to bookmark it and try to re-create it later on :wink:
One thing you could improve though is to use rem instead of px for your text (and anything else you want to adapt to user preferences). This means that if the user changes his browser’s default font size, your website will adapt to these changes

Live: https://samyadel.github.io/design-system/
Code: https://www.github.com/samyadel/design-system

Thanks! I am using rem for fonts and most dimensions that aren’t tightly constrained by the viewport width, however, I was setting the base html font-size to 16px, thus overriding any user preferences. Thanks for pointing this out!

1 Like

hey,

this is my code:
https://github.com/MarcusBBB/build_your_own_cheat_sheet
I enjoyed making it. I didn’t figure out how i coud make an internal link that would negate the fixed nav bar that’s now over the start of the linked spot.

greetings,
Marcus

Here’s my version of the style guide project! Not responsive yet, but hope to come back to that soon.

Hi everyone! This is my attempt for this challenge!

** -------------------------------------------------------- HTML -------------------------------------------------**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Desing Layout</title>
    <link href ="./resources/css/index.css" type="text/css"  rel="stylesheet">
</head>

<body>
    <h1>Style Layout</h1>
    <div id = "color_secction">
        <h2>Color Palette</h2>

        <div class="color_card" id="oxford_blue"><p> 00072D<br>Oxford Blue </p></div>

        <div class="color_card" id="royal_blue"><p> 0A2472<br>Royal Blue Dark </p></div>

        <div class="color_card" id="saphire_blue"><p> 0E6BA8<br>Saphire Blue </p></div>

        <div class="color_card" id="viridian_green"><p> 00A39E<br>Viridian Green </p></div>

        <div class="color_card" id="mountain_meadow"><p> 09BC8A<br>Montain Meadow </p></div>
    </div>

    <div id = "font_secction">
        <h2>Fonts Options</h2>

        <div class="font_option" id="kumbh_sans">
            <h3>Kumbh Sans</h3>
            <p>I'm getting use to coding</p>
            <p class="bold">I'm getting use to coding</p>
            <p class="italic">I'm getting use to coding</p>
        </div>

        <div class="font_option" id="kadwa">
            <h3>Kadwa</h3>
            <p>I'm getting use to coding</p>
            <p class="bold">I'm getting use to coding</p>
            <p class="italic">I'm getting use to coding</p>
        </div>

        <div class="font_option" id="bebas_neue">
            <h3>Bebas Neue</h3>
            <p>I'm getting use to coding</p>
            <p class="bold">I'm getting use to coding</p>
            <p class="italic">I'm getting use to coding</p>
        </div>
    </div>


    <div id="text_style">
        <h2>Text Styles</h2>

        <p class= "txtStyle">H1: Main page heading</p>
        <ul class= "text_characteristics">
            <li>Font-Family: Kadwa</li>
            <li>Font-Size: 50px</li>
            <li>Font-Weight: 700</li>
            <li>Text-Aling: Center</li>
        </ul>
        <br>

        <p class= "txtStyle">H2: Sub-heading</p>
        <ul class= "text_characteristics">
            <li>Font-Family: Bebas Neue</li>
            <li>Font-Size: 27px</li>
            <li>Font-Weight: 400</li>
            <li>Text-Aling: Left</li>
        </ul>
        <br>
        
        <p class= "txtStyle">Paragraph Text</p>
        <ul class= "text_characteristics">
            <li>Font-Family: Kumbh Sans</li>
            <li>Font-Size: 18px</li>
            <li>Font-Weight: 400</li>
            <li>Text-Aling: Left</li>
        </ul>
    </div>
</body>
</html>

** ------------------------------------------------------ CSS ----------------------------------------------------**

/*RESETING THE BOX MODEL AND MARGIN AND PADDINGS*/
* { 
    box-sizing: border-box; 
}

* { 
    margin: 0; 
    padding: 0; 
}

/*FONTS EMBEDED FROM https://fonts.google.com*/
@font-face {
  font-family: 'Kumbh Sans';
  src: local('Kumbh Sans Light'), local('KumbhSans-Light'), url(https://fonts.gstatic.com/s/kumbhsans/v1/c4mm1n92AsfhuCq6tVsagit_7KWfXA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Kadwa';
    src: local('Kadwa'), local('Kadwa-Regular'), url(https://fonts.gstatic.com/s/kadwa/v4/rnCm-x5V0g7ipiTAT8Y.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Bebas Neue';
    src: local('Bebas Neue Regular'), local('BebasNeue-Regular'), url(https://fonts.gstatic.com/s/bebasneue/v2/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*GENERAL DECLARATIONS FOR body, h1 AND h2*/
body{
    color: white;
    background-color: darkslategrey ;
}


h1{
    text-align: center;
    margin: 30px;
    font-family: "Kadwa";
    font-weight: 700;
    font-size: 50px;
}

h2{
    font-family: 'Bebas Neue';
    font-weight: 400;
    font-size: 27px;
    text-align: left;
    margin: 20px 0;
}

/* --->>> COLOR SECCTION <<<--- */

#color_secction{/*div's declarations*/ 
    width: 800px;
    margin: 50px auto;
}

.color_card{/*cards format*/
    height: 300px;
    width: 150px;
    border-radius: 25px;
    display: inline-block;
    margin: 3px;
}

.color_card p{/*cards text format*/
    color: whitesmoke;
    text-align: center; 
    margin-top: 240px;
    font-family: "Kumbh Sans";
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

/*COLORS OF THE CARD'S BACKGROUND*/
#oxford_blue{
    background-color: #00072D;
}

#royal_blue{
    background-color: #0A2472;
}

#saphire_blue{
    background-color: #0E6BA8;
}

#viridian_green{
    background-color: #00A39E;
}

#mountain_meadow{
    background-color: #09BC8A;
}




/* --->>> FONTS SECCTION <<<--- */

#font_secction{/*div's declarations*/
    width: 800px;
    margin: 50px auto;
}

.font_option{ /*font options format for all three options*/
    position: relative;
    left:35px;
    width: 230px;
    height: 135px;
    text-align: center;
    line-height: 1.75;
    font-size: 18px;
    display: inline-block;
    margin-left: 30px;
    color: black;
    background-color: blanchedalmond;
    border-radius: 10px;
}


/*FONTS FAMILT ASSIGNATION*/
#kumbh_sans{
    font-family: "Kumbh Sans";
}

#kadwa{
    font-family: "Kadwa";
}

#bebas_neue{
    font-family: 'Bebas Neue';
}

.bold{
    font-weight: bold;
}

.italic{
    font-style: italic;
}


/* --->>> TEXT STYLE SECCTION <<<--- */
#text_style{/*div's declarations*/
    width: 800px;
    margin: 50px auto;
}

.txtStyle{ /*Just the subtitles of the Text Style div*/
    font-family: "Kumbh Sans";
    font-weight: bold;
    font-size: 18px;
    text-align: left;
    margin: 10px 0px;
}

.text_characteristics{ /*Unordered list format*/
    position: relative;
    left: 40px;
    font-family: "Kumbh Sans";
    font-size: 18;
    line-height: 1.5;
    height: 100px;
    width: 300px;
    padding-left: 30px;
    border-radius: 10px;
    background-color: blanchedalmond;
    color: black;
}

Here is my project;

Second project! Any advice/recommendation is always more than welcomed.

here is the link to my solution: I did some different colour codes and fonts

Heres my website!

WEBSITE

My project https://github.com/DIMANVAZ/StudentProject_-_Website_Style_Guide