xenonpy.github.io/favoritecolors.html at main · XenonPy/xenonpy.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Design Palettes | XenonPy's Portfolio</title>
    <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=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
</head>
<body class="colorsbody">
    <div class="tool">
        <div class="toolheader">
            <h1>Design Palettes</h1>
        </div>
        <div class="toolcontent">
            <h1>Monotone</h1>
            <p>This colorless palette, great for use with monotone photographs, is professonal and artistic. However, you should combine it with a bright accent color specific to your design to highlight links. </p>
            <div class="palette">
                <div class="color" style="background-color: #000000;">
                    <p>#000000</p>
                </div>
                <div class="color" style="background-color: #424242;">
                    <p>#424242</p>
                </div>
                <div class="color black" style="background-color: #bababa;">
                    <p>#BABABA</p>
                </div>
                <div class="color black" style="background-color: #ffffff;">
                    <p>#FFFFFF</p>
                </div>
            </div>
            <h1>Blu Ocean</h1>
            <p>This palette, used on the Bluspace website, is a great pallete to use when you need to display images of unknown palettes, such as user posts. It looks good with the blue color taking up both most of the page or only a little.</p>
            <div class="palette">
                <div class="color" style="background-color: #000000;">
                    <p>#000000</p>
                </div>
                <div class="color" style="background-color: #002aff;">
                    <p>#002AFF</p>
                </div>
                <div class="color black" style="background-color: #808080;">
                    <p>#808080</p>
                </div>
                <div class="color black" style="background-color: #ffffff;">
                    <p>#FFFFFF</p>
                </div>
            </div>
            <h1>Flame</h1>
            <p>This is a versatile palette that can display many different types of media, while retaining it's elegant and modern look. It can be accesible and have good contrast ratios when the colors are layered correctly.</p>
            <div class="palette">
                <div class="color" style="background-color: #f15025;">
                    <p>#F15025</p>
                </div>
                <div class="color black" style="background-color: #ffffff;">
                    <p>#FFFFFF</p>
                </div>
                <div class="color black" style="background-color: #e6e8e6;">
                    <p>#E6E8E6</p>
                </div>
                <div class="color black" style="background-color: #ced0ce;">
                    <p>#CED0CE</p>
                </div>
                <div class="color" style="background-color: #191919;">
                    <p>#191919</p>
                </div>
            </div>
        </div>
        <footer class="footer">
            <p>© 2024 XenonPy</p>
            <p>Contact: <a href="mailto:xenonpy@wearehackerone.com">xenonpy@wearehackerone.com</a></p>
            <a href="index.html">Back to Home</a>
        </footer>
    </div>
</body>
</html>