Style-Guide/index.html at main · ajohnso2020/Style-Guide · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Style Guide</title>
    <link rel="stylesheet" href="index.css">
    <link href="https://fonts.googleapis.com/css?family=Catamaran:600|Merriweather+Sans:300" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Ubuntu:700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Catamaran&display=swap" rel="stylesheet">
</head>

<body>
    <header class="header">
        <h1>My Style Guide</h1>
        <ul class="nav">
            <li><a href="#my-colors">My Colors</a></li>
            <li><a href="#my-fonts">My Fonts</a></li>
            <li><a href="#my-text">My Text Styles</a></li>
        </ul>
    </header>
    <h2 id="my-colors">Colors</h2>
    <div class="colors">
        <section class="orange">
            <h4>Orange Sherbet</h4>
            <p>#FFAE50</p>
        </section>
        <section class="blue">
            <h4>Medium Blue</h4>
            <p>#6965FF</p>
        </section>
        <section class="lime">
            <h4>Lime Sherbet </h4>
            <p>#FFFDBF</p>
        </section>
        <section class="teal">
            <h4>Purplish Teal</h4>
            <p>#8DE4FE</p>
        </section>
    </div>
    <h2 id="my-fonts">Fonts</h2>
    <div class="fonts">
        <div class="cat">
            <h3>Catamaran Bold</h3>
            <p class="regular">Almost before we knew it, we had left the ground.</p>
            <p class="bold"><b>Almost before we knew it, we had left the ground.</b></p>
            <p class="italic">Almost before we knew it, we had left the ground.</p>
        </div>
        <div class="merri">
            <h3>Merriweather Sans Light</h3>
            <p class="regular">Almost before we knew it, we had left the ground.</p>
            <p class="bold">Almost before we knew it, we had left the ground.</p>
            <p class="italic">Almost before we knew it, we had left the ground.</p>
        </div>
        <div class="open">
            <h3>Open Sans Regular</h3>
            <p class="regular">Almost before we knew it, we had left the ground.</p>
            <p class="bold">Almost before we knew it, we had left the ground.</p>
            <p class="italic">Almost before we knew it, we had left the ground.</p>
        </div>
    </div>
    <h2 id="my-text">Text Styles</h2>
    <div class="text">
        <div class="h1">
            <h3>H1: Main Heading</h3>
            <ul>
                <li>Font-weight: 700 (bold)</li>
                <li>Font-size: 26px</li>
                <li>Font-family: Catamaran Bold</li>
            </ul>
        </div>
        <div class="h2">
            <h3>H2: Subheading</h3>
            <ul>
                <li>Font-weight: 500</li>
                <li>Font-size: 18px</li>
                <li>Font-family: Open Sans</li>
            </ul>
        </div>
        <div class="p">
            <h3>P: Paragraph Text</h3>
            <ul>
                <li>Font-weight: 400 (regular)</li>
                <li>Font-size: 14px</li>
                <li>Font-family: Open Sans</li>
            </ul>
        </div>
    </div>
    <footer>
        <div class="footer">
            <span class="copyright">© 2021 MacJohn, All Rights Reserved</span>
            <span class="locale">Designed in Houston, TX</span>
        </div>
    </footer>
</body>

</html>