fix: refocus f12-rocks onepager on Instagram with real photos
Replace AI-generated hero with f12.rocks gallery images and shift copy from blog/website to @f12.rocks as primary destination. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
cursor
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB |
+144
-106
@@ -3,8 +3,8 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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.">
|
<meta name="description" content="@f12.rocks auf Instagram — Konzerte, Football, Festivals. Fotografie von Frank Schwenk.">
|
||||||
<title>f12.rocks — Fotografie mit Geschichten</title>
|
<title>@f12.rocks — Instagram</title>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--bg: #0a0908;
|
--bg: #0a0908;
|
||||||
@@ -12,9 +12,8 @@
|
|||||||
--border: #2a221c;
|
--border: #2a221c;
|
||||||
--text: #f5efe8;
|
--text: #f5efe8;
|
||||||
--muted: #a89888;
|
--muted: #a89888;
|
||||||
--amber: #e8a045;
|
--insta: #f12f12;
|
||||||
--magenta: #c44b7a;
|
--insta-soft: rgba(241, 47, 18, 0.15);
|
||||||
--rust: #8b3a2a;
|
|
||||||
--max: 44rem;
|
--max: 44rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -30,7 +29,7 @@
|
|||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 3rem 1.5rem 2.75rem;
|
padding: 2.5rem 1.5rem 2rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@@ -40,58 +39,85 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background:
|
background:
|
||||||
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 160, 69, 0.18), transparent),
|
radial-gradient(ellipse 70% 50% at 50% 0%, var(--insta-soft), transparent),
|
||||||
radial-gradient(ellipse 50% 40% at 85% 70%, rgba(196, 75, 122, 0.12), transparent),
|
|
||||||
var(--bg);
|
var(--bg);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero > * { position: relative; z-index: 1; }
|
.hero > * { position: relative; z-index: 1; }
|
||||||
|
|
||||||
.logo-mark {
|
.insta-badge {
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.22em;
|
letter-spacing: 0.14em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: var(--amber);
|
color: var(--insta);
|
||||||
margin-bottom: 1.25rem;
|
margin-bottom: 1rem;
|
||||||
padding: 0.35rem 0.75rem;
|
padding: 0.35rem 0.85rem;
|
||||||
border: 1px solid rgba(232, 160, 69, 0.35);
|
border: 1px solid rgba(241, 47, 18, 0.35);
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-image {
|
.insta-badge svg {
|
||||||
display: block;
|
width: 1rem;
|
||||||
width: min(100%, 32rem);
|
height: 1rem;
|
||||||
|
stroke: var(--insta);
|
||||||
|
fill: none;
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 0.35rem;
|
||||||
|
max-width: 28rem;
|
||||||
margin: 0 auto 1.75rem;
|
margin: 0 auto 1.75rem;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.65rem;
|
||||||
|
overflow: hidden;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
box-shadow:
|
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
|
||||||
0 20px 50px rgba(0, 0, 0, 0.55),
|
}
|
||||||
0 0 80px rgba(232, 160, 69, 0.08);
|
|
||||||
|
.photo-grid img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
object-fit: cover;
|
||||||
|
background: var(--surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-grid img:first-child {
|
||||||
|
grid-column: span 2;
|
||||||
|
grid-row: span 2;
|
||||||
|
aspect-ratio: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero h1 {
|
.hero h1 {
|
||||||
font-size: clamp(2.2rem, 6vw, 3.2rem);
|
font-size: clamp(2rem, 7vw, 3rem);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: -0.04em;
|
letter-spacing: -0.03em;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.4rem;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero h1 span {
|
.hero h1 span { color: var(--insta); }
|
||||||
background: linear-gradient(135deg, var(--amber), var(--magenta));
|
|
||||||
-webkit-background-clip: text;
|
.handle {
|
||||||
-webkit-text-fill-color: transparent;
|
color: var(--muted);
|
||||||
background-clip: text;
|
font-size: 1rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tagline {
|
.tagline {
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-size: 1.15rem;
|
font-size: 1.1rem;
|
||||||
max-width: 28rem;
|
max-width: 26rem;
|
||||||
margin: 0 auto 1.75rem;
|
margin: 0 auto 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-row {
|
.cta-row {
|
||||||
@@ -113,14 +139,12 @@
|
|||||||
transition: transform 0.15s, box-shadow 0.15s;
|
transition: transform 0.15s, box-shadow 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:hover {
|
.btn:hover { transform: translateY(-2px); }
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background: linear-gradient(135deg, var(--amber), #c47a2a);
|
background: var(--insta);
|
||||||
color: #1a1208;
|
color: #fff;
|
||||||
box-shadow: 0 4px 20px rgba(232, 160, 69, 0.3);
|
box-shadow: 0 4px 20px rgba(241, 47, 18, 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
@@ -130,8 +154,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary:hover {
|
.btn-secondary:hover {
|
||||||
border-color: var(--magenta);
|
border-color: var(--insta);
|
||||||
box-shadow: 0 4px 20px rgba(196, 75, 122, 0.15);
|
box-shadow: 0 4px 16px rgba(241, 47, 18, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
@@ -146,7 +170,7 @@
|
|||||||
font-size: 0.82rem;
|
font-size: 0.82rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.12em;
|
letter-spacing: 0.12em;
|
||||||
color: var(--amber);
|
color: var(--insta);
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -185,30 +209,11 @@
|
|||||||
font-size: 0.95rem;
|
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 {
|
.callout {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 2rem 1.5rem;
|
padding: 2rem 1.5rem;
|
||||||
background:
|
background:
|
||||||
radial-gradient(ellipse 60% 80% at 50% 100%, rgba(232, 160, 69, 0.1), transparent),
|
radial-gradient(ellipse 60% 80% at 50% 100%, var(--insta-soft), transparent),
|
||||||
var(--surface);
|
var(--surface);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
@@ -237,96 +242,129 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer a { color: var(--amber); }
|
footer a { color: var(--insta); }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header class="hero">
|
<header class="hero">
|
||||||
<p class="logo-mark">Fotografie · Blog · Insta</p>
|
<p class="insta-badge">
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<rect x="2" y="2" width="20" height="20" rx="5"/>
|
||||||
|
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
|
||||||
|
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
|
||||||
|
</svg>
|
||||||
|
Instagram
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="photo-grid" aria-label="Auswahl aus dem @f12.rocks Feed">
|
||||||
<img
|
<img
|
||||||
class="hero-image"
|
src="https://f12.rocks/images/20260703_Hellraisers_TheShape_Schlossplatz/640/20260704_0001.webp"
|
||||||
src="f12-rocks-hero.png"
|
alt="Konzertfoto: Hellraisers & The Shape am Schlossplatz"
|
||||||
alt="Konzertfotografie: Silhouetten in warmem Bühnenlicht, Blick aus dem Publikum"
|
width="640"
|
||||||
width="512"
|
height="958"
|
||||||
height="512"
|
loading="eager"
|
||||||
>
|
>
|
||||||
<h1><span>f12.rocks</span></h1>
|
<img
|
||||||
<p class="tagline">Geschichten hinter den Fotos — nicht nur Pixel, sondern was davor und danach passiert ist.</p>
|
src="https://f12.rocks/images/20260620_ALB_MFF/640/20260620_5045.webp"
|
||||||
|
alt="Football: Crusaders an der Sideline"
|
||||||
|
width="640"
|
||||||
|
height="427"
|
||||||
|
loading="lazy"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="https://f12.rocks/images/20260526_Baxxter_Shooting/640/20260525_0343.webp"
|
||||||
|
alt="Band-Shooting: Baxxter Boys"
|
||||||
|
width="640"
|
||||||
|
height="428"
|
||||||
|
loading="lazy"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="https://f12.rocks/images/20260516_Hischaboggl_MieV/640/20260517_1611.webp"
|
||||||
|
alt="Live-Konzert im MieV"
|
||||||
|
width="640"
|
||||||
|
height="427"
|
||||||
|
loading="lazy"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="https://f12.rocks/images/20260517_ALB_BIB/640/20260517_AHC-BIB_07_Schwenk.webp"
|
||||||
|
alt="American Football: Crusaders Game Day"
|
||||||
|
width="640"
|
||||||
|
height="427"
|
||||||
|
loading="lazy"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1>Folge <span>@f12.rocks</span></h1>
|
||||||
|
<p class="handle">instagram.com/f12.rocks</p>
|
||||||
|
<p class="tagline">
|
||||||
|
Konzerte, Football, Festivals — echte Fotos von Frank Schwenk,
|
||||||
|
direkt im Feed. Kein Stock, kein KI-Bildschirm: was du siehst, ist passiert.
|
||||||
|
</p>
|
||||||
<div class="cta-row">
|
<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-primary" href="https://www.instagram.com/f12.rocks" rel="noopener">Auf Instagram folgen</a>
|
||||||
<a class="btn btn-secondary" href="https://f12.rocks" rel="noopener">Galerie & Blog</a>
|
<a class="btn btn-secondary" href="https://f12.rocks" rel="noopener">Alle Fotos auf f12.rocks</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Was ist das?</h2>
|
<h2>Was im Feed landet</h2>
|
||||||
<p>
|
<p>
|
||||||
<strong>f12.rocks</strong> ist die Fotografie-Ecke von Frank Schwenk: Konzerte, Festivals,
|
<strong>@f12.rocks</strong> ist Frank Schwenks Instagram für Event-Fotografie:
|
||||||
Football an der Sideline, Bands in freier Wildbahn — und der Blog dazu,
|
Rock und Punk auf der Bühne, Crusaders an der Sideline, Festivals mit Licht,
|
||||||
der erklärt, <em>warum</em> ein Bild entstanden ist und was beim Shooting schiefging
|
das man liebt oder flucht — alles aus der ersten Reihe oder hinterm Zaun.
|
||||||
(oder glorreich funktioniert hat).
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Kein Stock-Foto-Universum. Kein „Lifestyle inspiriert"-Blabla.
|
Neue Bilder kommen regelmäßig rein. Wer folgt, bekommt die Momente,
|
||||||
Echte Orte, echtes Licht, echte Geschichten — von der Haustür bis zum Schlossplatz.
|
bevor sie in der Galerie oder im Archiv verschwinden.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Wo du f12.rocks triffst</h2>
|
<h2>Typische Motive</h2>
|
||||||
<ul class="topics">
|
<ul class="topics">
|
||||||
<li>
|
<li>
|
||||||
<span class="icon" aria-hidden="true">🎸</span>
|
<span class="icon" aria-hidden="true">🎸</span>
|
||||||
<div>
|
<div>
|
||||||
<strong>Konzerte & Festivals</strong>
|
<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>
|
<span>Chapel, Schlossplatz, MieV — Bands, Bühnenlicht, Publikum aus Fotografensicht.</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="icon" aria-hidden="true">🏈</span>
|
<span class="icon" aria-hidden="true">🏈</span>
|
||||||
<div>
|
<div>
|
||||||
<strong>Football an der Sideline</strong>
|
<strong>Football an der Sideline</strong>
|
||||||
<span>Crusaders Game Days: GFL-Pflicht, zwei Kameras, Respekt vor der Geschwindigkeit auf dem Feld.</span>
|
<span>Crusaders Game Days: Geschwindigkeit, Kontakt, zwei Kameras wenn's brennt.</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>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="icon" aria-hidden="true">📷</span>
|
<span class="icon" aria-hidden="true">📷</span>
|
||||||
<div>
|
<div>
|
||||||
<strong>Instagram @f12.rocks</strong>
|
<strong>Shootings & Making-of</strong>
|
||||||
<span>Neue Bilder, kurze Einblicke, Drag-to-scroll-Galerie auf der Website — alles aus einer Hand.</span>
|
<span>Bands in freier Wildbahn, Hitze, Unterführungen — der Feed zeigt auch das Drumherum.</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="icon" aria-hidden="true">✨</span>
|
||||||
|
<div>
|
||||||
|
<strong>Neue Posts, kein Algorithmus-Gefühl</strong>
|
||||||
|
<span>Ein Account, ein Fotograf — du siehst, woran er gerade hängt.</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</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>
|
<section>
|
||||||
<div class="callout">
|
<div class="callout">
|
||||||
<h2>Lust auf mehr als nur Likes?</h2>
|
<h2>Feed öffnen, folgen, fertig.</h2>
|
||||||
<p>
|
<p>
|
||||||
Folge <strong>@f12.rocks</strong> für neue Bilder — oder tauch im Blog ein,
|
Der schnellste Weg zu neuen Bildern: <strong>@f12.rocks</strong> auf Instagram.
|
||||||
wenn du wissen willst, was hinter dem Auslöser passiert.
|
Die Galerie auf f12.rocks ist das Archiv — der Feed ist der Live-Kanal.
|
||||||
</p>
|
</p>
|
||||||
<div class="cta-row">
|
<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-primary" href="https://www.instagram.com/f12.rocks" rel="noopener">@f12.rocks folgen</a>
|
||||||
<a class="btn btn-secondary" href="https://f12.rocks/blog/" rel="noopener">Zum Blog</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -336,7 +374,7 @@
|
|||||||
<footer>
|
<footer>
|
||||||
Erstellt von @cursor · Gitea Issue #5 ·
|
Erstellt von @cursor · Gitea Issue #5 ·
|
||||||
<a href="https://gitea.schwenk.online/froxxxy/playground/issues/5">froxxxy/playground</a>
|
<a href="https://gitea.schwenk.online/froxxxy/playground/issues/5">froxxxy/playground</a>
|
||||||
· Bild: KI-generiert (Cursor), lokal im Repo
|
· Fotos: <a href="https://f12.rocks">f12.rocks</a> / Frank Schwenk
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user