commit 2e61b6810d7d00318fa98b564a8353d20fc6ff4d Author: Mara Date: Wed May 6 22:05:16 2026 +0000 initialer commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..85433ce --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +*.save +*.swp +*~ +.DS_Store diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..4ead280 --- /dev/null +++ b/css/style.css @@ -0,0 +1,54 @@ + *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + :root { + --royal: #003f8a; + --royal-light: #0057c2; + --royal-dark: #001f44; + --white: #f5f8ff; + --muted: rgba(255,255,255,0.45); + } + body { background: var(--royal-dark); color: var(--white); font-family: 'Barlow', sans-serif; min-height: 100vh; } + + nav { + display: flex; justify-content: space-between; align-items: center; + padding: 1.2rem 2.5rem; + background: rgba(0,20,60,0.88); backdrop-filter: blur(12px); + border-bottom: 1px solid rgba(255,255,255,0.07); + position: sticky; top: 0; z-index: 100; + } + nav .logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; letter-spacing: 0.12em; color: #fff; } + nav ul { list-style: none; display: flex; gap: 2rem; } + nav ul a { color: var(--muted); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s; } + nav ul a:hover, nav ul a.active { color: #fff; } + + .hero { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; background: linear-gradient(rgba(0,15,40,0.52), rgba(0,15,40,0.52)), url('../img/Hintergrund.jpg') center/cover no-repeat; } + canvas#bg { display: none; } + .hero-content { position: relative; z-index: 2; padding: 0 3rem; max-width: 820px; animation: fadeUp 0.9s ease both; } + @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } + + .hero-tag { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 1.2rem; } + .hero h1 { + font-family: 'Bebas Neue', sans-serif; font-size: clamp(3.5rem, 9vw, 7rem); + line-height: 0.95; letter-spacing: 0.03em; color: #fff; + text-shadow: 0 4px 40px rgba(0,80,200,0.7); margin-bottom: 1.6rem; + } + .hero h1 span { color: #7ab3ff; } + .hero p { font-size: 1.05rem; font-weight: 300; color: rgba(255,255,255,0.6); line-height: 1.8; max-width: 480px; margin-bottom: 2.5rem; } + .btn { + display: inline-block; padding: 0.8rem 2.4rem; + background: #fff; color: var(--royal-dark); + font-family: 'Barlow', sans-serif; font-size: 0.82rem; font-weight: 500; + letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; + transition: background 0.2s, color 0.2s, transform 0.15s; + } + .btn:hover { background: var(--royal-light); color: #fff; transform: translateY(-2px); } + + .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1px; background: rgba(255,255,255,0.06); } + .card { background: var(--royal-dark); padding: 2.5rem 2rem; transition: background 0.3s; } + .card:hover { background: var(--royal); } + .card .num { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; color: rgba(255,255,255,0.07); line-height: 1; margin-bottom: 0.8rem; } + .card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 0.05em; margin-bottom: 0.5rem; } + .card p { font-size: 0.88rem; color: rgba(255,255,255,0.5); line-height: 1.65; font-weight: 300; } + + footer { text-align: center; padding: 2rem; font-size: 0.78rem; color: rgba(255,255,255,0.22); border-top: 1px solid rgba(255,255,255,0.07); } + footer a { color: rgba(255,255,255,0.22); text-decoration: none; margin: 0 0.5rem; } + footer a:hover { color: #fff; } diff --git a/eis_projekt.html b/eis_projekt.html new file mode 100644 index 0000000..e249c60 --- /dev/null +++ b/eis_projekt.html @@ -0,0 +1,40 @@ + + + + + + Glück Auf Projekt + + + + + + + +
+

Glück Auf Projekt

+

Mein Projekt.

+

Hier findest du Informationen zu meinem Glück Auf-Lernprojekt.

+ +
+ +
+
+ + + + + + diff --git a/img/Hintergrund.jpg b/img/Hintergrund.jpg new file mode 100644 index 0000000..4db59d6 Binary files /dev/null and b/img/Hintergrund.jpg differ diff --git a/impressum.html b/impressum.html new file mode 100644 index 0000000..79cb154 --- /dev/null +++ b/impressum.html @@ -0,0 +1,56 @@ + + + + + + Impressum + + + + + + + +
+

Rechtliches

+

Impressum

+ +
+

Angaben gemäß § 5 TMG

+
Vorname Nachname
Musterstraße 1
12345 Musterstadt
Deutschland
+
+
+

Kontakt

+

E-Mail: info@beispiel.de

+
+
+

Haftung für Inhalte

+

Als Diensteanbieter sind wir gemäß § 7 Abs. 1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen.

+
+
+

Haftung für Links

+

Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber verantwortlich.

+
+
+

Urheberrecht

+

Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Vervielfältigung und Verbreitung bedürfen der schriftlichen Zustimmung des jeweiligen Autors.

+
+
+ + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..191373e --- /dev/null +++ b/index.html @@ -0,0 +1,45 @@ + + + + + + Startseite + + + + + + +
+ +
+

Willkommen auf meiner Website

+

Meine
persön­liche
Seite

+

Hier findest du Informationen über mich, meine Projekte und wie du mich erreichen kannst.

+ Mehr über mich +
+
+ +
+
01

Über mich

Lerne mich und meinen Werdegang kennen.

+
02

Projekte

Ein Überblick über meine bisherigen Arbeiten.

+
03

Kontakt

Schreib mir – ich freue mich über Nachrichten.

+
+ + + + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..6a4a432 --- /dev/null +++ b/js/script.js @@ -0,0 +1,43 @@ +console.log("Meine Seite läuft!"); + + const canvas = document.getElementById('bg'); + const ctx = canvas.getContext('2d'); + let W, H, particles = []; + function resize() { W = canvas.width = canvas.offsetWidth; H = canvas.height = canvas.offsetHeight; } + function createParticles() { + particles = []; + const count = Math.floor(W * H / 6500); + for (let i = 0; i < count; i++) { + particles.push({ x: Math.random()*W, y: Math.random()*H, r: Math.random()*1.8+0.4, + dx: (Math.random()-0.5)*0.3, dy: (Math.random()-0.5)*0.3, alpha: Math.random()*0.5+0.1 }); + } + } + function drawBg() { + const g = ctx.createRadialGradient(W*0.3, H*0.4, 0, W*0.3, H*0.4, W*0.85); + g.addColorStop(0, '#0057c2'); g.addColorStop(0.5, '#001f44'); g.addColorStop(1, '#000d22'); + ctx.fillStyle = g; ctx.fillRect(0,0,W,H); + const g2 = ctx.createRadialGradient(W*0.82, H*0.72, 0, W*0.82, H*0.72, W*0.5); + g2.addColorStop(0, 'rgba(0,55,150,0.45)'); g2.addColorStop(1, 'transparent'); + ctx.fillStyle = g2; ctx.fillRect(0,0,W,H); + } + function animate() { + ctx.clearRect(0,0,W,H); drawBg(); + ctx.lineWidth = 1; + for (let i = 0; i < particles.length; i++) { + for (let j = i+1; j < particles.length; j++) { + const dx = particles[i].x-particles[j].x, dy = particles[i].y-particles[j].y; + const d = Math.sqrt(dx*dx+dy*dy); + if (d < 120) { ctx.globalAlpha = (1-d/120)*0.12; ctx.strokeStyle='#fff'; ctx.beginPath(); ctx.moveTo(particles[i].x,particles[i].y); ctx.lineTo(particles[j].x,particles[j].y); ctx.stroke(); } + } + } + ctx.globalAlpha = 1; + particles.forEach(p => { + p.x+=p.dx; p.y+=p.dy; + if(p.x<0||p.x>W) p.dx*=-1; if(p.y<0||p.y>H) p.dy*=-1; + ctx.beginPath(); ctx.arc(p.x,p.y,p.r,0,Math.PI*2); + ctx.fillStyle=`rgba(255,255,255,${p.alpha})`; ctx.fill(); + }); + requestAnimationFrame(animate); + } + window.addEventListener('resize', ()=>{ resize(); createParticles(); }); + resize(); createParticles(); animate(); \ No newline at end of file diff --git a/kontakt.html b/kontakt.html new file mode 100644 index 0000000..7c1e394 --- /dev/null +++ b/kontakt.html @@ -0,0 +1,41 @@ + + + + + + Kontakt + + + + + + + +
+

Kontakt

+

Schreib mir.

+

Ich freue mich über jede Nachricht – egal ob Frage, Zusammenarbeit oder einfach Hallo.

+ +
+
+
+ +
+ + + + + + diff --git a/ueber_mich.html b/ueber_mich.html new file mode 100644 index 0000000..8622820 --- /dev/null +++ b/ueber_mich.html @@ -0,0 +1,43 @@ + + + + + + Über mich + + + + + + +
+

Über mich

+

Hallo, ich bin Mara.

+

Ich weiß noch nicht, was ich preisgeben will.

+

Gib mir bitte noch etwas Zeit!

+
+

Kenntnisse

+
+ HTML + CSS + JavaScript + Webdesign + Linux +
+
+ + + +