jendoe0110.github.io/homework7.html at main · jendoe0110/jendoe0110.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
<!DOCTYPE html>
<html>
<head>
    <title>CNIT 133 Homework 7 - Object Model and Event Model</title>
    <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
    <style>
        body {
            background-color: grey;
            font-family: Arial, sans-serif;
            color: white;
        }

        a {
            display: inline-block;
            background-color: pink;
            color: black;
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        a:hover {
            background-color: #ff69b4; /* Lighter shade of pink for hover effect */
        }

        .description {
            display: none;
            margin-bottom: 10px;
        }

        h1 {
            color: white;
        }
    </style>
</head>
<body>
    <h1>CNIT 133 Homework 7 - Object Model and Event Model</h1>
    <a href="#" id="part1_7-link">PART 1</a>
    <div id="part1_7-description" class="description">
        Interactive Style Editor: This section allows you to experiment with different text styles and background colors.
        <a href="part1_7.html">Go to Part 1</a>
    </div>
    <a href="#" id="part2_7-link">PART 2</a>
    <div id="part2_7-description" class="description">
        Interactive Navigation Menu: Explore the dynamic navigation menu with dropdowns on hover.
        <a href="part2_7.html">Go to Part 2</a>
    </div>
    <br>
    <a href="https://jendoe0110.github.io/">Back to Main Course Page</a>

    <script>
        $(document).ready(function() {
            $('#part1_7-link').click(function() {
                $('#part1_7-description').toggle();
            });
            $('#part2_7-link').click(function() {
                $('#part2_7-description').toggle();
            });
        });
    </script>
</body>
</html>