TimV00.github.io/Content.html at main · TimV00/TimV00.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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Tim's Funny Website</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
</head>

<div class="options-container">
    <button class="option-button button1" style="background-color: #0b2a4d;"
        onclick="navigateToPage('./Index.html')">Home</button>
    <button class="option-button button2" style="background-color: #83337c;"
        onclick="navigateToPage('./TypingTest.html')">Typing Test</button>
    <button class="option-button button3" style="background-color: #2a4d0e"
        onclick="navigateToPage('./ColorPicker.html')">Color Picker</button>
    <button class="option-button button4" style="background-color: #bf76ce;"
        onclick="navigateToPage('./Anniversary2024/Anniversary.html')">❤️❤️Anniversary 2024❤️❤️</button>
    <button class="option-button button5" style="background-color: #b8343a;"
        onclick="navigateToPage('./Info.html')">Info</button>
</div>
<script src="Website.js"></script>
<script>
    // Function to navigate to the selected page
    function navigateToPage(url) {
        window.location.href = url;
    }
</script>

<style>
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: white;
        font-family: 'Montserrat', sans-serif;
    }

    .options-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        /* Space between buttons */
    }

    .option-button {
        padding: 10px 20px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        /*background-color: #007BFF;
        */
        color: white;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    /*
    .option-button:hover {
        background-color: #0056b3;
    }

    .button1 {
        background-color: #0b2a4d;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .button2 {
        background-color: #83337c;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .button3 {
        background-color: #2a4d0e;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .button4 {
        background-color: #bf76ce;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .button5 {
        background-color: #b8343a;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s;
    }
        */
</style>

</html>