Skip to content

Commit dcfb346

Browse files
KernellsKernells
authored
Revamp index.html with new layout and styles
Updated the HTML structure and styles for a new design.
1 parent 41e15a4 commit dcfb346

1 file changed

Lines changed: 221 additions & 8 deletions

File tree

‎index.html‎

Lines changed: 221 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,223 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>My GitHub Website</title>
5-
</head>
6-
<body>
7-
<h1>Hello world</h1>
8-
<p>This is my site.</p>
9-
</body>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Kernels</title>
7+
8+
<style>
9+
:root {
10+
--bg: #0b0d10;
11+
--accent: #5eead4;
12+
--text: #e5e7eb;
13+
--muted: #9ca3af;
14+
}
15+
16+
* {
17+
box-sizing: border-box;
18+
margin: 0;
19+
padding: 0;
20+
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
21+
}
22+
23+
body {
24+
background: radial-gradient(circle at top, #111827, var(--bg));
25+
color: var(--text);
26+
min-height: 100vh;
27+
overflow-x: hidden;
28+
}
29+
30+
header {
31+
padding: 1.5rem 2rem;
32+
display: flex;
33+
justify-content: space-between;
34+
align-items: center;
35+
}
36+
37+
header h1 {
38+
font-size: 1.2rem;
39+
letter-spacing: 0.1em;
40+
color: var(--accent);
41+
}
42+
43+
header nav a {
44+
color: var(--muted);
45+
text-decoration: none;
46+
margin-left: 1.5rem;
47+
transition: color 0.2s;
48+
}
49+
50+
header nav a:hover {
51+
color: var(--accent);
52+
}
53+
54+
.hero {
55+
height: 80vh;
56+
display: flex;
57+
flex-direction: column;
58+
justify-content: center;
59+
align-items: center;
60+
text-align: center;
61+
padding: 2rem;
62+
}
63+
64+
.hero h2 {
65+
font-size: clamp(2.5rem, 6vw, 4rem);
66+
margin-bottom: 1rem;
67+
}
68+
69+
.hero p {
70+
max-width: 600px;
71+
color: var(--muted);
72+
margin-bottom: 2rem;
73+
}
74+
75+
.buttons {
76+
display: flex;
77+
gap: 1rem;
78+
}
79+
80+
.btn {
81+
padding: 0.75rem 1.5rem;
82+
border-radius: 8px;
83+
border: 1px solid var(--accent);
84+
background: transparent;
85+
color: var(--accent);
86+
cursor: pointer;
87+
transition: all 0.2s;
88+
}
89+
90+
.btn.primary {
91+
background: var(--accent);
92+
color: #020617;
93+
}
94+
95+
.btn:hover {
96+
transform: translateY(-2px);
97+
box-shadow: 0 10px 30px rgba(94,234,212,0.15);
98+
}
99+
100+
section {
101+
padding: 4rem 2rem;
102+
max-width: 1000px;
103+
margin: auto;
104+
}
105+
106+
.grid {
107+
display: grid;
108+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
109+
gap: 1.5rem;
110+
}
111+
112+
.card {
113+
background: rgba(255,255,255,0.03);
114+
border: 1px solid rgba(255,255,255,0.06);
115+
padding: 1.5rem;
116+
border-radius: 12px;
117+
transition: transform 0.2s, border 0.2s;
118+
}
119+
120+
.card:hover {
121+
transform: translateY(-4px);
122+
border-color: var(--accent);
123+
}
124+
125+
footer {
126+
padding: 2rem;
127+
text-align: center;
128+
color: var(--muted);
129+
font-size: 0.9rem;
130+
}
131+
132+
/* floating particles */
133+
.particle {
134+
position: fixed;
135+
width: 4px;
136+
height: 4px;
137+
background: var(--accent);
138+
opacity: 0.15;
139+
border-radius: 50%;
140+
animation: float linear infinite;
141+
}
142+
143+
@keyframes float {
144+
from { transform: translateY(110vh); }
145+
to { transform: translateY(-10vh); }
146+
}
147+
</style>
148+
</head>
149+
<body>
150+
151+
<header>
152+
<h1>KERNELS</h1>
153+
<nav>
154+
<a href="#features">Features</a>
155+
<a href="#about">About</a>
156+
<a href="#contact">Contact</a>
157+
</nav>
158+
</header>
159+
160+
<div class="hero">
161+
<h2>Build. Break. Learn.</h2>
162+
<p>
163+
A personal space for experiments, tools, and ideas.
164+
Fast, minimal, and fully open.
165+
</p>
166+
<div class="buttons">
167+
<button class="btn primary" onclick="scrollToSection('features')">Explore</button>
168+
<button class="btn">GitHub</button>
169+
</div>
170+
</div>
171+
172+
<section id="features">
173+
<h2 style="margin-bottom:1.5rem;">Features</h2>
174+
<div class="grid">
175+
<div class="card">
176+
<h3>⚡ Fast</h3>
177+
<p>No frameworks, no builds, just raw HTML/CSS/JS.</p>
178+
</div>
179+
<div class="card">
180+
<h3>🧠 Experimental</h3>
181+
<p>Perfect for testing ideas, visuals, and logic.</p>
182+
</div>
183+
<div class="card">
184+
<h3>🔒 Static</h3>
185+
<p>Runs entirely on GitHub Pages.</p>
186+
</div>
187+
</div>
188+
</section>
189+
190+
<section id="about">
191+
<h2 style="margin-bottom:1rem;">About</h2>
192+
<p style="color:var(--muted); max-width:700px;">
193+
This site is a sandbox. You can add scripts, animations,
194+
tools, or entire mini-projects without any backend.
195+
</p>
196+
</section>
197+
198+
<footer id="contact">
199+
© <span id="year"></span> kernels.github.io
200+
</footer>
201+
202+
<script>
203+
// smooth scroll
204+
function scrollToSection(id) {
205+
document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
206+
}
207+
208+
// footer year
209+
document.getElementById('year').textContent = new Date().getFullYear();
210+
211+
// particles
212+
for (let i = 0; i < 40; i++) {
213+
const p = document.createElement('div');
214+
p.className = 'particle';
215+
p.style.left = Math.random() * 100 + 'vw';
216+
p.style.animationDuration = 10 + Math.random() * 20 + 's';
217+
p.style.animationDelay = Math.random() * 10 + 's';
218+
document.body.appendChild(p);
219+
}
220+
</script>
221+
222+
</body>
10223
</html>

0 commit comments

Comments
 (0)