Revision-Plaza/angles.html at main · Coding331/Revision-Plaza · 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angles - Geometry Study Guide</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-color: #f4f4f9;
            color: #333;
            opacity: 0;
            animation: fadeIn 1s forwards;
        }
        header {
            background: #2d6e7f;
            color: white;
            padding: 20px;
            text-align: center;
            border-bottom: 5px solid #1e4f5b;
        }
        nav {
            background: #1e4f5b;
            padding: 10px;
            text-align: center;
        }
        nav a {
            color: white;
            margin: 0 15px;
            text-decoration: none;
            font-size: 16px;
            transition: color 0.3s;
        }
        nav a:hover {
            color: #f4f4f9;
        }
        .container {
            flex: 1;
            padding: 40px;
            max-width: 900px;
            margin: auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        h2 {
            font-size: 2.2em;
            margin-bottom: 15px;
            color: #2d6e7f;
            text-align: center;
        }
        h3 {
            margin-top: 20px;
            font-size: 1.6em;
            color: #1e4f5b;
        }
        p, ul, pre {
            line-height: 1.6;
            font-size: 1.1em;
            margin-bottom: 20px;
        }
        .step {
            display: flex;
            align-items: center;
            background: #E3F2FD;
            border: 1px solid #1e4f5b;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .step i {
            font-size: 30px;
            margin-right: 20px;
            color: #1e4f5b;
        }
        .step h4 {
            font-size: 1.4em;
            color: #1e4f5b;
        }
        .example-box {
            background: #fff;
            border-left: 5px solid #1e4f5b;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            border-radius: 5px;
        }
        footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 15px;
            margin-top: 20px;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <header>
        <h1>Angles</h1>
    </header>
    <nav>
        <a href="geometry.html">Back to Geometry</a>
        <a href="index.html">Back to Study Guide</a>
    </nav>
    <div class="container">
        <h2>Types of Angles and Their Properties</h2>

        <div class="step">
            <i class="fas fa-angle-right"></i>
            <div>
                <h4>Acute Angle</h4>
                <p>An angle that is less than 90°.</p>
            </div>
        </div>
        <div class="step">
            <i class="fas fa-angle-right"></i>
            <div>
                <h4>Right Angle</h4>
                <p>An angle that measures exactly 90°.</p>
            </div>
        </div>
        <div class="step">
            <i class="fas fa-angle-right"></i>
            <div>
                <h4>Obtuse Angle</h4>
                <p>An angle that is greater than 90° but less than 180°.</p>
            </div>
        </div>
        <div class="step">
            <i class="fas fa-angle-right"></i>
            <div>
                <h4>Straight Angle</h4>
                <p>An angle that measures exactly 180°.</p>
            </div>
        </div>
        <div class="step">
            <i class="fas fa-angle-right"></i>
            <div>
                <h4>Reflex Angle</h4>
                <p>An angle that is greater than 180° but less than 360°.</p>
            </div>
        </div>

        <h3>Example: Identifying Angles</h3>
        <div class="example-box">
            <p><strong>Example 1:</strong> The angle between the hands of a clock at 10:10 is about 35° (Acute Angle).</p>
        </div>

        <h3>Try Identifying the Angles:</h3>
        <p>Identify the type of angle from the following:</p>
        <pre>Angle 1: 120°, Angle 2: 85°, Angle 3: 180°</pre>
    </div>
    <footer>
        <p>&copy; 2025 Study Hub. All rights reserved.</p>
    </footer>
</body>
</html>