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

Hi all,

I kept my design simple like the example, but rather used it to practice using flex box and svg design.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, intial-scale=1">
        <title>My Website Style Guide</title>
        <link rel="stylesheet" type="text/css" href="resources/css/style.css">
        <link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Mali:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap" rel="stylesheet"> 
    </head>

    <body>
        <header>
            <h1>Website Style Guide</h1>
            <h1>'Bioberries'</h1>
        </header>

        <main>
            <section class="container">
                <div class="container-head">
                    <h2>Colors</h2>
                    <p>(Color themes found at <a href="https://color.adobe.com/mythemes" target="#">Adobe Color.)</a></p>
                </div>
                <div class="box">
                    <div class="color-panel" id="panel-1">
                        <p>Color</p>
                        <p>#BD3146</p>
                    </div>
                    <div class="color-panel" id="panel-2">
                        <p>Color</p>
                        <p>#DE6678</p>
                    </div>
                    <div class="color-panel" id="panel-3">
                        <p>Color</p>
                        <p>#E01231</p>
                    </div>
                    <div class="color-panel" id="panel-4">
                        <p>Color</p>
                        <p>#00941E</p>
                    </div>
                    <div class="color-panel" id="panel-5">
                        <p>Color</p>
                        <p>#22E048</p>
                    </div>
                </div>
            </section>

            <section class="container">
                <div class="container-head">
                    <h2>Fonts</h2>
                    <p>(Fonts found at <a href="https://fonts.google.com" target="#">Google Fonts.)</a></p>
                </div>
                <div class="box">
                    <div class="font-panel" id="font-1">
                        <h3>Alegreya Sans</h3>
                        <p>The quick brown fox jumps over the lazy dog.</p>
                        <p class="bold">The quick brown fox jumps over the lazy dog.</p>
                        <p class="italic">The quick brown fox jumps over the lazy dog.</p>
                    </div>
                    <div class="font-panel" id="font-2">
                        <h3>Ubuntu</h3>
                        <p>The quick brown fox jumps over the lazy dog.</p>
                        <p class="bold">The quick brown fox jumps over the lazy dog.</p>
                        <p class="italic">The quick brown fox jumps over the lazy dog.</p>
                    </div>
                    <div class="font-panel" id="font-3">
                        <h3>Mali</h3>
                        <p>The quick brown fox jumps over the lazy dog.</p>
                        <p class="bold">The quick brown fox jumps over the lazy dog.</p>
                        <p class="italic">The quick brown fox jumps over the lazy dog.</p>
                    </div>
                </div>
            </section>

            <section class="container">
                <div class="container-head">
                    <h2>Text Styles</h2>                 
                </div>
                <div class="box">
                    <div class="text-style-panel">
                        <h1>&lt;H1&gt; Main heading</h1>
                        <ul>
                            <li>Font-weight: 700 (bold)</li>
                            <li>Font-size: 26px</li>
                            <li>Font-family: Alegreya Sans</li>
                        </ul>
                    </div>
                    <div class="text-style-panel">
                        <h2>&lt;H2&gt; Subheadings</h2>
                        <ul>
                            <li>Font-weight: 500</li>
                            <li>Font-size: 18px</li>
                            <li>Font-family: Alegreya Sans</li>
                        </ul>
                    </div>
                    <div class="text-style-panel">
                        <h4>&lt;p&gt; Paragraphs</h4>
                        <ul>
                            <li>Font-weight: 400 (regular)</li>
                            <li>Font-size: 14px</li>
                            <li>Font-family: Ubuntu</li>
                        </ul>
                    </div>
                </div>
            </section>

            <section class="container">
                <div class="container-head">
                    <h2>Logos</h2>
                    <p>(Logos created using SVGs.)</p>
                </div>
                <div class="box">
                    <div class="logo-panel" id="logo-1">
                        <h3>Logo left</h3>
                        <p><img  src="resources/images/Logo left Alegreya Medium 80px site.png"></p>
                    </div>
                    <div class="logo-panel" id="logo-2">
                        <h3>Logo right</h3>
                        <p><img src="resources/images/Logo Right Alegreya Medium 80px site.png"></p>
                    </div>
                    <div class="logo-panel" id="logo-3">
                        <h3>Logo top</h3>
                        <p><img src="resources/images/Logo Small Top Alegreya Medium 80px site.png"></p>
                    </div>
                </div>
            </section>
        </main>

        <footer>
            <h4>Jack Wills 2020</h4>
        </footer>
    </body>
</html>
/* Universal Styles */

body {
    font-family: 'Roboto Mono', monospace;
    background-color: white;
    color: black;
    font-weight: normal;
    margin: 0 10%;
    text-align: center;
}

h1 {
    font-size: 2.25rem;
}

h2 {
    font-size: 1.75rem;
    padding: 0.25rem;
    margin: 10px 20px;
}

h3 {
    margin: 10px 20px;
}

p {
    margin: 8px 20px;
}

a {
    text-decoration: none;
    color: black;
}

@media only screen and (max-width: 768px) {
    body {
        margin: 0 5%;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }
} 

@media only screen and (max-width: 480px) {
    body {
        margin: 0 1%;
    }

    header {
        border-bottom: 2px solid black;       
    }

    header h1 {
        margin: .25rem 0;
    }
}

/* Box Styles */

.container {
    border: 2px solid black;
    text-align: left;
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.container-head {
    display: flex;
    flex-direction: column;
    margin: 10px 0 0 0;
}

.container-head p {
    margin: 0 20px;
}

.box {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-content: center;
    margin: 20px .75rem;
}

@media only screen and (max-width: 480px) {
    .container {
        border-right: none;
        border-left: none;
        border-top: none;
        text-align: center;
    }
}

/* Color Section */

.color-panel {
    border: 1px solid black;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    margin: 1rem .75rem;
    min-width: 125px;
    min-height: 125px;
    max-width: 250px;
    max-height: 250px;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.25rem;
    flex-grow: 1;
}

#panel-1 {
    color: white;
    background-color: #BD3146;
}

#panel-2 {
    color: white;
    background-color: #DE6678;
}

#panel-3 {
    color: white;
    background-color: #E01231;
}

#panel-4 {
    color: white;
    background-color: #00941E;
}

#panel-5 {
    color: white;
    background-color: #22E048;
}

/* Font Section */

.font-panel {
    border: none;   
    display: flex;
    flex-direction: column;
    margin: 1rem .75rem;
    min-width: 300px;
    min-height: 150px;
    max-width: 450px;
    max-height: 300px;
    justify-content: center;
    align-items: left;
    font-weight: normal;
    font-size: 1.25rem;
    flex-grow: 1;
}

.font-panel h3 {
    text-decoration: underline;
}

#font-1 {
    font-family:  'Alegreya Sans', sans-serif;
}

#font-2 {
    font-family: 'Ubuntu', sans-serif;
}

#font-3 {
    font-family: 'Mali', cursive;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

/* Text styles */

.text-style-panel {
    border: none; 
    display: flex;
    flex-direction: column;
    margin: 1rem .75rem;
    min-width: 300px;
    min-height: 150px;
    max-width: 450px;
    max-height: 600px;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-weight: normal;
    font-size: 1.25rem;
    flex-grow: 1;
}

.text-style-panel h1  {
    text-align: center;
    margin: 10px;
}

.text-style-panel h2  {
    text-align: center;
    margin: 10px;
}

.text-style-panel h4  {
    text-align: center;
    margin: 10px;
}

/* Logo styles */

.logo-panel {
    border: none;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    margin: 1rem .75rem;
    width: 300px;
    height: 150px;   
    justify-content: center;
    align-items: center;
    font-weight: normal;
    font-size: 1.25rem;
    flex-grow: 1;
}

.logo-panel h3 {
    text-decoration: underline;
    text-align: center;
}

.logo-panel img {
    max-width: 270px;
    max-height: 100px;
}

/* Footer */

footer {
    text-align: right;
    margin: 2rem 0;
}

@media only screen and (max-width: 480px) {
    footer {
        text-align: center;
    }
}
1 Like

Looks great but I would add

target="#"

on your button links so they open in a new web page.

1 Like

You are right :grin: I forgot to add that. BTW Your project looks awesome :hugs:.

My Website Style Guide

Hi everyone, this is my design, actually my second ever on vscode, I beleive there is room to improve, but I am ready for any criticism:
https://fretagi.github.io/codecademy-projects-mydev/ live version
and the code is here:
https://github.com/fretagi/codecademy-projects-mydev

Check it out guys :slight_smile:
Nothing special, actually, but I did it. Hope i will have more free time and will make v2.0 of this challenge.

Take care

1 Like

My first take on the web design system.

Demo

Code

Any feedback is welcome.
Thanks! :slightly_smiling_face:

1 Like

Hello everybody!
My very basic not-flexible style guide (:
Live link: https://brododigitale.github.io/Website-styleguide-layout/
Code here: https://github.com/BrodoDigitale/Website-styleguide-layout

1 Like

My Website Design System Project
I used GitHub Pages :v:t2:
check it out !!!