Anpassungen an der Website und Bereinigung
This commit is contained in:
dionyschus
parent
2671658b31
commit
40e09a2e8b
@ -1,9 +1,148 @@
|
|||||||
body {
|
/* Grundeinstellungen */
|
||||||
background-color: #824ce5;
|
* {
|
||||||
font-family: sans-serif;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
html {
|
||||||
color: #2c3e50;
|
scroll-behavior: smooth;
|
||||||
text-align: center;
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #1d1d1f;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 80px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation - Apple Glass Look */
|
||||||
|
.navbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 44px;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
z-index: 1000;
|
||||||
|
border-bottom: 0.5px solid rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-content {
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a, .logo {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #1d1d1f;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
opacity: 0.8;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.hero {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #fbfbfd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text h1 {
|
||||||
|
font-size: 56px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: -0.015em;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text p {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #86868b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About Section */
|
||||||
|
.about-section {
|
||||||
|
text-align: center;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-section h2 {
|
||||||
|
font-size: 40px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-section p {
|
||||||
|
font-size: 21px;
|
||||||
|
color: #515154;
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Gallery - Bento Grid Style */
|
||||||
|
.gallery-section {
|
||||||
|
background-color: #fbfbfd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
grid-auto-rows: 200px;
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
border-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wide { grid-column: span 2; }
|
||||||
|
.tall { grid-row: span 2; }
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer {
|
||||||
|
padding: 40px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #86868b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Optimierung */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.hero-text h1 { font-size: 40px; }
|
||||||
|
.wide { grid-column: span 1; }
|
||||||
}
|
}
|
||||||
@ -1,13 +1,53 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Document</title>
|
<title>Joel Jonischus | Portfolio</title>
|
||||||
<link rel="stylesheet" href="joel-jonischus.css">
|
<link rel="stylesheet" href="joel-jonischus.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
</h1>Was geht denn so?</h1>
|
|
||||||
<p>Das ist ein einfacher Absatz, über den ich nicht weiter sprechen will.</p>
|
<nav class="navbar">
|
||||||
|
<div class="nav-content">
|
||||||
|
<a href="#home" class="logo">Joel</a>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#home">Home</a></li>
|
||||||
|
<li><a href="#about">About me</a></li>
|
||||||
|
<li><a href="#gallery">Gallery</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section id="home" class="hero">
|
||||||
|
<div class="hero-text">
|
||||||
|
<h1>Design. Innovation. Joel.</h1>
|
||||||
|
<p>Einfachheit ist die höchste Stufe der Vollendung.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="about" class="about-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Über mich</h2>
|
||||||
|
<p>Ich bin ein kreativer Kopf mit einer Leidenschaft für digitale Ästhetik. Mein Ziel ist es, Technologie nicht nur funktional, sondern emotional erlebbar zu machen. Wenn ich nicht gerade an neuen Interfaces feile, finde ich Inspiration in der Architektur und der Stille der Natur.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="gallery" class="gallery-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Gallery</h2>
|
||||||
|
<div class="bento-grid">
|
||||||
|
<div class="grid-item tall" style="background-color: #f2f2f2;"><span>Konzept 01</span></div>
|
||||||
|
<div class="grid-item" style="background-color: #e5e5e5;"><span>Minimalismus</span></div>
|
||||||
|
<div class="grid-item" style="background-color: #d1d1d1;"><span>Struktur</span></div>
|
||||||
|
<div class="grid-item wide" style="background-color: #000; color: #fff;"><span>Night Mode</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>© 2024 Joel Jonischus. Designed with precision.</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user