cursor
fd84c66fcd
Werbe-Onepager für @f12.rocks Fotografie mit Links zu Instagram und Blog. Co-authored-by: Cursor <cursoragent@cursor.com>
344 lines
9.1 KiB
HTML
344 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="f12.rocks — Fotografie mit Geschichten. Festivals, Football, Konzerte. Auf Instagram und im Blog.">
|
|
<title>f12.rocks — Fotografie mit Geschichten</title>
|
|
<style>
|
|
:root {
|
|
--bg: #0a0908;
|
|
--surface: #14110f;
|
|
--border: #2a221c;
|
|
--text: #f5efe8;
|
|
--muted: #a89888;
|
|
--amber: #e8a045;
|
|
--magenta: #c44b7a;
|
|
--rust: #8b3a2a;
|
|
--max: 44rem;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.65;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.hero {
|
|
position: relative;
|
|
padding: 3rem 1.5rem 2.75rem;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 160, 69, 0.18), transparent),
|
|
radial-gradient(ellipse 50% 40% at 85% 70%, rgba(196, 75, 122, 0.12), transparent),
|
|
var(--bg);
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero > * { position: relative; z-index: 1; }
|
|
|
|
.logo-mark {
|
|
display: inline-block;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--amber);
|
|
margin-bottom: 1.25rem;
|
|
padding: 0.35rem 0.75rem;
|
|
border: 1px solid rgba(232, 160, 69, 0.35);
|
|
border-radius: 2rem;
|
|
}
|
|
|
|
.hero-image {
|
|
display: block;
|
|
width: min(100%, 32rem);
|
|
margin: 0 auto 1.75rem;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid var(--border);
|
|
box-shadow:
|
|
0 20px 50px rgba(0, 0, 0, 0.55),
|
|
0 0 80px rgba(232, 160, 69, 0.08);
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(2.2rem, 6vw, 3.2rem);
|
|
font-weight: 800;
|
|
letter-spacing: -0.04em;
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.hero h1 span {
|
|
background: linear-gradient(135deg, var(--amber), var(--magenta));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.tagline {
|
|
color: var(--muted);
|
|
font-size: 1.15rem;
|
|
max-width: 28rem;
|
|
margin: 0 auto 1.75rem;
|
|
}
|
|
|
|
.cta-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
padding: 0.75rem 1.35rem;
|
|
border-radius: 0.5rem;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
text-decoration: none;
|
|
transition: transform 0.15s, box-shadow 0.15s;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--amber), #c47a2a);
|
|
color: #1a1208;
|
|
box-shadow: 0 4px 20px rgba(232, 160, 69, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
border-color: var(--magenta);
|
|
box-shadow: 0 4px 20px rgba(196, 75, 122, 0.15);
|
|
}
|
|
|
|
main {
|
|
max-width: var(--max);
|
|
margin: 0 auto;
|
|
padding: 0 1.5rem 4rem;
|
|
}
|
|
|
|
section { margin-bottom: 2.5rem; }
|
|
|
|
h2 {
|
|
font-size: 0.82rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--amber);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
p { margin-bottom: 1rem; }
|
|
|
|
.topics {
|
|
list-style: none;
|
|
display: grid;
|
|
gap: 0.7rem;
|
|
}
|
|
|
|
.topics li {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.65rem;
|
|
padding: 1rem 1.15rem;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 0.85rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.topics .icon {
|
|
font-size: 1.4rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.topics strong {
|
|
display: block;
|
|
color: var(--text);
|
|
margin-bottom: 0.15rem;
|
|
}
|
|
|
|
.topics span {
|
|
color: var(--muted);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.quote {
|
|
background: linear-gradient(135deg, rgba(139, 58, 42, 0.2), rgba(196, 75, 122, 0.08));
|
|
border: 1px solid var(--border);
|
|
border-left: 4px solid var(--magenta);
|
|
border-radius: 0.75rem;
|
|
padding: 1.35rem 1.5rem;
|
|
font-size: 1.1rem;
|
|
font-style: italic;
|
|
color: var(--text);
|
|
}
|
|
|
|
.quote cite {
|
|
display: block;
|
|
margin-top: 0.75rem;
|
|
font-style: normal;
|
|
font-size: 0.85rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.callout {
|
|
text-align: center;
|
|
padding: 2rem 1.5rem;
|
|
background:
|
|
radial-gradient(ellipse 60% 80% at 50% 100%, rgba(232, 160, 69, 0.1), transparent),
|
|
var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.callout h2 {
|
|
font-size: clamp(1.3rem, 4vw, 1.7rem);
|
|
text-transform: none;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.callout p {
|
|
color: var(--muted);
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
footer {
|
|
max-width: var(--max);
|
|
margin: 0 auto;
|
|
padding: 1.5rem;
|
|
border-top: 1px solid var(--border);
|
|
color: var(--muted);
|
|
font-size: 0.82rem;
|
|
text-align: center;
|
|
}
|
|
|
|
footer a { color: var(--amber); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="hero">
|
|
<p class="logo-mark">Fotografie · Blog · Insta</p>
|
|
<img
|
|
class="hero-image"
|
|
src="f12-rocks-hero.png"
|
|
alt="Konzertfotografie: Silhouetten in warmem Bühnenlicht, Blick aus dem Publikum"
|
|
width="512"
|
|
height="512"
|
|
>
|
|
<h1><span>f12.rocks</span></h1>
|
|
<p class="tagline">Geschichten hinter den Fotos — nicht nur Pixel, sondern was davor und danach passiert ist.</p>
|
|
<div class="cta-row">
|
|
<a class="btn btn-primary" href="https://www.instagram.com/f12.rocks" rel="noopener">@f12.rocks auf Instagram</a>
|
|
<a class="btn btn-secondary" href="https://f12.rocks" rel="noopener">Galerie & Blog</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<section>
|
|
<h2>Was ist das?</h2>
|
|
<p>
|
|
<strong>f12.rocks</strong> ist die Fotografie-Ecke von Frank Schwenk: Konzerte, Festivals,
|
|
Football an der Sideline, Bands in freier Wildbahn — und der Blog dazu,
|
|
der erklärt, <em>warum</em> ein Bild entstanden ist und was beim Shooting schiefging
|
|
(oder glorreich funktioniert hat).
|
|
</p>
|
|
<p>
|
|
Kein Stock-Foto-Universum. Kein „Lifestyle inspiriert"-Blabla.
|
|
Echte Orte, echtes Licht, echte Geschichten — von der Haustür bis zum Schlossplatz.
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Wo du f12.rocks triffst</h2>
|
|
<ul class="topics">
|
|
<li>
|
|
<span class="icon" aria-hidden="true">🎸</span>
|
|
<div>
|
|
<strong>Konzerte & Festivals</strong>
|
|
<span>Rock, Punk, schwäbisch-laut — von der Chapel bis zur Unterführung. Licht, das Fotografen lieben oder fluchen lassen.</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<span class="icon" aria-hidden="true">🏈</span>
|
|
<div>
|
|
<strong>Football an der Sideline</strong>
|
|
<span>Crusaders Game Days: GFL-Pflicht, zwei Kameras, Respekt vor der Geschwindigkeit auf dem Feld.</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<span class="icon" aria-hidden="true">📝</span>
|
|
<div>
|
|
<strong>Blog: Geschichten hinter den Fotos</strong>
|
|
<span>Autopilot für Faule — die Imagepipeline arbeitet, du liest, was dahintersteckt. darktable, Hitze, Panikmodus inklusive.</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<span class="icon" aria-hidden="true">📷</span>
|
|
<div>
|
|
<strong>Instagram @f12.rocks</strong>
|
|
<span>Neue Bilder, kurze Einblicke, Drag-to-scroll-Galerie auf der Website — alles aus einer Hand.</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<blockquote class="quote">
|
|
„350 Meter vom Wohnzimmer zum Schlossplatz — Konzert, alte Bekannte,
|
|
und ein Abend, der mehr Familientreffen als Fotoshooting war."
|
|
<cite>— aus dem f12.rocks Blog</cite>
|
|
</blockquote>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="callout">
|
|
<h2>Lust auf mehr als nur Likes?</h2>
|
|
<p>
|
|
Folge <strong>@f12.rocks</strong> für neue Bilder — oder tauch im Blog ein,
|
|
wenn du wissen willst, was hinter dem Auslöser passiert.
|
|
</p>
|
|
<div class="cta-row">
|
|
<a class="btn btn-primary" href="https://www.instagram.com/f12.rocks" rel="noopener">Instagram folgen</a>
|
|
<a class="btn btn-secondary" href="https://f12.rocks/blog/" rel="noopener">Zum Blog</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer>
|
|
Erstellt von @cursor · Gitea Issue #5 ·
|
|
<a href="https://gitea.schwenk.online/froxxxy/playground/issues/5">froxxxy/playground</a>
|
|
· Bild: KI-generiert (Cursor), lokal im Repo
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|