Skip to content

Commit 2899c69

Browse files
khalidrahmanhanifykhalidrahmanhanify
committed
updated files
1 parent 255cf4c commit 2899c69

2 files changed

Lines changed: 134 additions & 0 deletions

File tree

Section1/Notes.html renamed to Section1/index.html

File renamed without changes.

‎index.html‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>JavaScript Jonas Course Notes</title>
7+
<style>
8+
/* CSS Variables for light/dark mode */
9+
:root {
10+
--bg-color: #ffffff;
11+
--text-color: #222222;
12+
--link-color: #1a73e8;
13+
--card-bg: #f9f9f9;
14+
--card-shadow: rgba(0, 0, 0, 0.1);
15+
--header-bg: #e0e0e0;
16+
}
17+
@media (prefers-color-scheme: dark) {
18+
:root {
19+
--bg-color: #121212;
20+
--text-color: #eee;
21+
--link-color: #8ab4f8;
22+
--card-bg: #1e1e1e;
23+
--card-shadow: rgba(255, 255, 255, 0.1);
24+
--header-bg: #222222;
25+
}
26+
}
27+
28+
/* Reset & base */
29+
* {
30+
box-sizing: border-box;
31+
}
32+
body {
33+
margin: 0;
34+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
35+
background-color: var(--bg-color);
36+
color: var(--text-color);
37+
min-height: 100vh;
38+
display: flex;
39+
flex-direction: column;
40+
}
41+
42+
header {
43+
background-color: var(--header-bg);
44+
padding: 1rem 2rem;
45+
text-align: center;
46+
box-shadow: 0 2px 4px var(--card-shadow);
47+
}
48+
header h1 {
49+
margin: 0;
50+
font-weight: 700;
51+
font-size: 1.8rem;
52+
letter-spacing: 1px;
53+
}
54+
55+
main {
56+
flex-grow: 1;
57+
max-width: 960px;
58+
margin: 2rem auto;
59+
padding: 0 1rem;
60+
width: 100%;
61+
}
62+
63+
.section-list {
64+
display: grid;
65+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
66+
gap: 1.5rem;
67+
list-style: none;
68+
padding: 0;
69+
margin: 0;
70+
}
71+
72+
.section-list li {
73+
background-color: var(--card-bg);
74+
border-radius: 8px;
75+
box-shadow: 0 2px 6px var(--card-shadow);
76+
transition: transform 0.2s ease, box-shadow 0.2s ease;
77+
}
78+
.section-list li:hover {
79+
transform: translateY(-4px);
80+
box-shadow: 0 6px 12px var(--card-shadow);
81+
}
82+
83+
.section-link {
84+
display: block;
85+
padding: 1.25rem 1rem;
86+
color: var(--text-color);
87+
text-decoration: none;
88+
font-weight: 600;
89+
font-size: 1.1rem;
90+
text-align: center;
91+
user-select: none;
92+
}
93+
.section-link:hover,
94+
.section-link:focus {
95+
color: var(--link-color);
96+
outline: none;
97+
}
98+
99+
footer {
100+
text-align: center;
101+
padding: 1rem;
102+
font-size: 0.9rem;
103+
color: var(--text-color);
104+
background-color: var(--header-bg);
105+
box-shadow: inset 0 1px 0 var(--card-shadow);
106+
}
107+
108+
@media (max-width: 400px) {
109+
header h1 {
110+
font-size: 1.4rem;
111+
}
112+
.section-link {
113+
font-size: 1rem;
114+
padding: 1rem 0.8rem;
115+
}
116+
}
117+
</style>
118+
</head>
119+
<body>
120+
<header>
121+
<h1>JavaScript Jonas Course Notes</h1>
122+
</header>
123+
<main>
124+
<ul class="section-list">
125+
<li>
126+
<a href="./Section1/index.html" class="section-link">Section 1</a>
127+
</li>
128+
</ul>
129+
</main>
130+
<footer>
131+
&copy; 2025 Khalid Rahman Hanify - Notes for Jonas JavaScript Course
132+
</footer>
133+
</body>
134+
</html>

0 commit comments

Comments
 (0)