Compare commits
37 Commits
ermin-zoro
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 3b6f78c981 | |||
| 3c14d65b2c | |||
| 0a22fa7a20 | |||
|
fe7763b2f9 | ||
|
|
4a1e42baf8 | ||
| 8f6d4bf984 | |||
| 9504a5e03a | |||
| c9c3138440 | |||
|
|
d5ecd9dd82 | ||
| d4c9e87060 | |||
| 55f86ee4b6 | |||
|
|
17f7908c4a | ||
| a570e50794 | |||
|
|
04a4e3c881 | ||
| 23b3140e5e | |||
| 0cccc45026 | |||
| 8d02a7910f | |||
|
|
fe60e9220a | ||
| 7c5d3d638c | |||
| 5636032017 | |||
| 0c85490feb | |||
|
|
d9be5c3a39 | ||
| 70d50a5e3b | |||
|
|
52d92ec2b5 | ||
| 311323774a | |||
| fc4d68a29d | |||
| b9fc525288 | |||
| 96ec6f39b9 | |||
|
|
16ef6c5241 | ||
| 7ee180c688 | |||
|
|
29969be84f | ||
|
|
46f2d4d1b0 | ||
|
|
d70f4c7c03 | ||
| 402dabe2da | |||
| 4650f6389d | |||
|
|
3bde78cb8e | ||
| d84b586549 |
BIN
Nutella-Crepes-500x500.jpg
Normal file
BIN
Nutella-Crepes-500x500.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
@ -1,3 +1,4 @@
|
||||
# msc-uxd-fs26-test
|
||||
|
||||
Test-Repository für Unterrichtszwecke
|
||||
Test Marlo
|
||||
11
alisa-olsson.html
Normal file
11
alisa-olsson.html
Normal file
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Das ist meine erste Website</h1>
|
||||
</body>
|
||||
</html>
|
||||
1
alisa-olsson.txt
Normal file
1
alisa-olsson.txt
Normal file
@ -0,0 +1 @@
|
||||
Das ist meine persönliche Datei.
|
||||
11
anthony.html
Normal file
11
anthony.html
Normal file
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Feature - Anthony</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,509 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Atelier Nord — Digitale Markenauftritte mit Substanz</title>
|
||||
<meta name="description" content="Moderner Onepager für hochwertige Weblösungen, klare Markenauftritte und digitale Erlebnisse mit Fokus auf Design, Strategie und Conversion." />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="nav-shell">
|
||||
<a href="#top" class="brand" aria-label="Startseite">
|
||||
<span class="brand-mark" aria-hidden="true"></span>
|
||||
<span class="brand-text">
|
||||
<strong>Atelier Nord</strong>
|
||||
<span>Strategie, Design & digitale Auftritte</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<nav class="nav" aria-label="Hauptnavigation">
|
||||
<a href="#leistungen">Leistungen</a>
|
||||
<a href="#ueber-uns">Über uns</a>
|
||||
<a href="#vorteile">Vorteile</a>
|
||||
<a href="#prozess">Prozess</a>
|
||||
<a href="#stimmen">Stimmen</a>
|
||||
<a href="#faq">FAQ</a>
|
||||
</nav>
|
||||
|
||||
<a href="#kontakt" class="nav-cta">Projekt anfragen</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="top">
|
||||
<section class="hero section">
|
||||
<div class="container">
|
||||
<div class="hero-wrap">
|
||||
<div class="hero-copy">
|
||||
<div class="hero-kicker">Digitale Präsenz mit Haltung, Klarheit und Wirkung</div>
|
||||
<h1>Webseiten, die nicht nur gut aussehen, sondern auch überzeugen.</h1>
|
||||
<p class="lead">
|
||||
Wir gestalten moderne Markenauftritte für Unternehmen, Dienstleister und ambitionierte Teams, die
|
||||
professionell wahrgenommen werden möchten. Mit klarer Struktur, starker Typografie und präzisem Design
|
||||
entsteht ein Auftritt, der Vertrauen schafft und Anfragen fördert.
|
||||
</p>
|
||||
|
||||
<div class="hero-actions">
|
||||
<a href="#kontakt" class="button-primary">Unverbindlich anfragen</a>
|
||||
<a href="#leistungen" class="button-secondary">Leistungen entdecken</a>
|
||||
</div>
|
||||
|
||||
<div class="hero-meta">
|
||||
<div class="meta-card">
|
||||
<strong>+120</strong>
|
||||
<span>realisierte digitale Markenauftritte</span>
|
||||
</div>
|
||||
<div class="meta-card">
|
||||
<strong>98 %</strong>
|
||||
<span>Weiterempfehlungsquote aus laufenden Projekten</span>
|
||||
</div>
|
||||
<div class="meta-card">
|
||||
<strong>7 Tage</strong>
|
||||
<span>bis zu einem ersten klaren Designkonzept</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-panel">
|
||||
<div class="panel-card">
|
||||
<strong>Strategie trifft Design</strong>
|
||||
<p>
|
||||
Jede Seite wird entlang von Positionierung, Zielgruppe und gewünschter Wirkung aufgebaut. Das Ergebnis ist
|
||||
ein hochwertiger Onepager oder Webauftritt mit klarer Botschaft und sauberem Fokus.
|
||||
</p>
|
||||
<div class="score-line">
|
||||
<div class="score-bar" aria-hidden="true">
|
||||
<div class="score-fill"></div>
|
||||
</div>
|
||||
<span>Conversion-Fokus</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-grid">
|
||||
<div class="highlight-item">
|
||||
<strong>Premium-Look</strong>
|
||||
<p>Reduziertes, elegantes Interface mit hochwertigen Abständen, sauberen Flächen und klaren Kontrasten.</p>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<strong>Klare Inhalte</strong>
|
||||
<p>Texte, die Orientierung geben, Leistungen verständlich machen und Vertrauen aufbauen.</p>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<strong>Responsiv gedacht</strong>
|
||||
<p>Optimierte Darstellung auf Desktop, Tablet und Smartphone ohne gestalterische Kompromisse.</p>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<strong>Saubere Umsetzung</strong>
|
||||
<p>Klare Struktur, semantisches HTML und konsistentes visuelles System für nachhaltige Qualität.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trust-strip">
|
||||
<div class="trust-card">
|
||||
<strong>Klar positioniert</strong>
|
||||
<p>Wir verdichten komplexe Inhalte zu einer nachvollziehbaren, starken Markenbotschaft.</p>
|
||||
</div>
|
||||
<div class="trust-card">
|
||||
<strong>Visuell hochwertig</strong>
|
||||
<p>Ein ruhiger Premium-Look sorgt für Professionalität, Lesbarkeit und Wiedererkennbarkeit.</p>
|
||||
</div>
|
||||
<div class="trust-card">
|
||||
<strong>Messbar sinnvoll</strong>
|
||||
<p>Jede Sektion dient einem Zweck: Vertrauen aufbauen, Nutzen erklären, Kontakt erleichtern.</p>
|
||||
</div>
|
||||
<div class="trust-card">
|
||||
<strong>Verlässlich im Prozess</strong>
|
||||
<p>Transparente Schritte, klare Abstimmung und ein Ergebnis, das strategisch wie gestalterisch trägt.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="leistungen" class="section-alt">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<span class="eyebrow">Leistungen</span>
|
||||
<h2>Alles, was ein moderner digitaler Auftritt heute leisten muss.</h2>
|
||||
<p class="lead">
|
||||
Von der inhaltlichen Schärfung bis zur visuellen Ausarbeitung entwickeln wir Seiten, die professionell wirken,
|
||||
leicht verständlich sind und Ihre Zielgruppe präzise ansprechen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid-3">
|
||||
<article class="card feature-card">
|
||||
<h3>Positionierung & Struktur</h3>
|
||||
<p>
|
||||
Wir entwickeln eine klare Seitenlogik, definieren inhaltliche Prioritäten und schaffen eine starke
|
||||
Dramaturgie über den gesamten Onepager hinweg.
|
||||
</p>
|
||||
<p>
|
||||
So entsteht eine Seite, die nicht überfordert, sondern führt.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="card feature-card">
|
||||
<h3>UI-Design mit Premium-Anspruch</h3>
|
||||
<p>
|
||||
Typografie, Weißraum, Farbklima und Flächen werden zu einem ruhigen, eleganten Gesamtbild verdichtet, das
|
||||
modern wirkt und Vertrauen transportiert.
|
||||
</p>
|
||||
<p>
|
||||
Reduziert, präzise und hochwertig.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="card feature-card">
|
||||
<h3>Texte mit Klarheit und Wirkung</h3>
|
||||
<p>
|
||||
Wir formulieren Inhalte verständlich, glaubwürdig und zielgerichtet, damit Leistungen nicht nur genannt,
|
||||
sondern überzeugend vermittelt werden.
|
||||
</p>
|
||||
<p>
|
||||
Für bessere Orientierung und stärkere Resonanz.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="card feature-card">
|
||||
<h3>Responsive Umsetzung</h3>
|
||||
<p>
|
||||
Alle Layouts werden so konzipiert, dass sie auf mobilen Endgeräten ebenso ruhig, lesbar und professionell
|
||||
funktionieren wie auf großen Bildschirmen.
|
||||
</p>
|
||||
<p>
|
||||
Ohne visuelle Brüche.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="card feature-card">
|
||||
<h3>Conversion-orientierte Nutzerführung</h3>
|
||||
<p>
|
||||
Wir setzen klare Call-to-Actions, logische Informationsfolgen und überzeugende Vertrauenselemente ein, um
|
||||
den Weg zur Anfrage bewusst zu verkürzen.
|
||||
</p>
|
||||
<p>
|
||||
Weniger Reibung, mehr Relevanz.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="card feature-card">
|
||||
<h3>Markentaugliches Designsystem</h3>
|
||||
<p>
|
||||
Farben, Abstände, Buttons, Karten und Headlines folgen einem konsistenten System. Dadurch wirkt der gesamte
|
||||
Auftritt professionell, ruhig und aus einem Guss.
|
||||
</p>
|
||||
<p>
|
||||
Langfristig anschlussfähig und skalierbar.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="ueber-uns" class="section">
|
||||
<div class="container">
|
||||
<div class="about-wrap">
|
||||
<div class="about-main">
|
||||
<span class="eyebrow">Über uns</span>
|
||||
<h2>Wir gestalten digitale Auftritte mit Substanz statt bloßer Oberfläche.</h2>
|
||||
<p class="lead">
|
||||
Gute Webseiten entstehen nicht zufällig. Sie sind das Ergebnis aus klarer Strategie, präziser Gestaltung und
|
||||
einem feinen Gespür für Zielgruppen, Markenwirkung und digitale Nutzerführung.
|
||||
</p>
|
||||
<div class="divider"></div>
|
||||
<p>
|
||||
Atelier Nord begleitet Unternehmen, Selbstständige und wachsende Teams bei der Entwicklung moderner
|
||||
Webseiten, die professionell aussehen und gleichzeitig konkret funktionieren. Unser Ansatz verbindet
|
||||
inhaltliche Klarheit mit einer gestalterischen Sprache, die zeitgemäß, ruhig und hochwertig wirkt.
|
||||
</p>
|
||||
<ul class="check-list">
|
||||
<li>Klare Markenbotschaften statt austauschbarer Standardtexte</li>
|
||||
<li>Präzise Designentscheidungen mit Fokus auf Vertrauen und Wertigkeit</li>
|
||||
<li>Saubere Struktur für bessere Lesbarkeit und nachvollziehbare Nutzerwege</li>
|
||||
<li>Ein Ergebnis, das sowohl ästhetisch als auch geschäftlich sinnvoll ist</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="about-stats">
|
||||
<div class="stat-box">
|
||||
<strong>10+</strong>
|
||||
<p>Jahre Erfahrung in Webdesign, Markenkommunikation und digitaler Nutzerführung.</p>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<strong>360°</strong>
|
||||
<p>Denken über Design hinaus: Inhalte, Struktur, Wirkung, Conversion und Positionierung.</p>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<strong>1 Ziel</strong>
|
||||
<p>Eine Webseite zu schaffen, die professionell wirkt, leicht verständlich ist und echte Resonanz erzeugt.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="vorteile" class="section-alt">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<span class="eyebrow">Warum wir</span>
|
||||
<h2>Ein Onepager reicht nicht, wenn er nur schön ist. Er muss präzise wirken.</h2>
|
||||
<p class="lead">
|
||||
Unser Mehrwert liegt in der Kombination aus Designqualität, strategischer Klarheit und einem konsequenten Blick
|
||||
auf Wirkung, Lesbarkeit und Vertrauen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid-2">
|
||||
<article class="advantage-card">
|
||||
<h3>Reduktion mit Anspruch</h3>
|
||||
<p>
|
||||
Weniger visuelle Unruhe bedeutet mehr Aufmerksamkeit für das Wesentliche. Wir arbeiten mit präzisen Abständen,
|
||||
ruhigen Farbflächen und einer typografischen Hierarchie, die Inhalte aufwertet, statt sie zu überdecken.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="advantage-card">
|
||||
<h3>Design, das Positionierung unterstützt</h3>
|
||||
<p>
|
||||
Eine gute Webseite transportiert nicht nur Informationen, sondern Haltung. Deshalb wird jedes Layout entlang
|
||||
Ihres Angebots, Ihrer Tonalität und Ihrer Zielgruppe entwickelt.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="advantage-card">
|
||||
<h3>Vertrauen auf den ersten Blick</h3>
|
||||
<p>
|
||||
Hochwertige Gestaltung erhöht nicht nur die wahrgenommene Qualität, sondern reduziert auch Zweifel. Das ist
|
||||
besonders relevant bei erklärungsbedürftigen Leistungen und beratungsintensiven Angeboten.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="advantage-card">
|
||||
<h3>Effizienz im gesamten Projekt</h3>
|
||||
<p>
|
||||
Ein klarer Prozess, schnelle Abstimmung und fokussierte Entscheidungen sorgen dafür, dass Projekte zielgerichtet
|
||||
vorankommen und nicht in endlosen Schleifen hängen bleiben.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="prozess" class="section">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<span class="eyebrow">Prozess</span>
|
||||
<h2>So entsteht aus einer Idee ein moderner Auftritt mit klarer Wirkung.</h2>
|
||||
<p class="lead">
|
||||
Transparent, strukturiert und effizient. Jeder Schritt ist darauf ausgelegt, Komplexität zu reduzieren und die
|
||||
richtigen Entscheidungen sichtbar zu machen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="process">
|
||||
<article class="step">
|
||||
<h3>Analyse & Zielbild</h3>
|
||||
<p>
|
||||
Wir klären Zielgruppe, Angebotskern, Tonalität und inhaltliche Prioritäten. Daraus entsteht ein präzises
|
||||
Fundament für die spätere Gestaltung.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="step">
|
||||
<h3>Struktur & Wireflow</h3>
|
||||
<p>
|
||||
Anschließend entwickeln wir eine klare Seitenarchitektur mit sinnvoller Reihenfolge, starken Überschriften und
|
||||
nachvollziehbaren Übergängen zwischen den Inhalten.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="step">
|
||||
<h3>Design & Feinschliff</h3>
|
||||
<p>
|
||||
Jetzt wird die Richtung visuell greifbar: Typografie, Farbwelt, Karten, Flächen und Buttons formen einen
|
||||
hochwertigen, markentauglichen Gesamtauftritt.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="step">
|
||||
<h3>Launch & Optimierung</h3>
|
||||
<p>
|
||||
Nach finaler Abstimmung wird die Seite sauber umgesetzt. Auf Wunsch begleiten wir anschließend auch die
|
||||
Weiterentwicklung und inhaltliche Schärfung.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="stimmen" class="section-alt">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<span class="eyebrow">Kundenstimmen</span>
|
||||
<h2>Was unsere Zusammenarbeit für Kundinnen und Kunden spürbar verändert hat.</h2>
|
||||
<p class="lead">
|
||||
Gute Gestaltung wirkt nicht nur visuell, sondern auch im Gespräch, in der Wahrnehmung und in der Qualität der
|
||||
Anfragen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid-3">
|
||||
<article class="testimonial">
|
||||
<blockquote>
|
||||
„Unsere neue Seite wirkt deutlich professioneller, klarer und hochwertiger. Besonders beeindruckt hat uns,
|
||||
wie strukturiert Inhalte und Design zusammengeführt wurden. Seit dem Relaunch kommen die Anfragen gezielter
|
||||
und passender herein.“
|
||||
</blockquote>
|
||||
<footer>
|
||||
<strong>Laura M.</strong>
|
||||
<span>Geschäftsführerin, Beratungsunternehmen</span>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="testimonial">
|
||||
<blockquote>
|
||||
„Vorher hatten wir eine Webseite, die vieles sagte, aber wenig transportierte. Jetzt ist sofort erkennbar,
|
||||
wofür wir stehen. Das Design fühlt sich modern an, ohne laut zu sein, und genau das wollten wir erreichen.“
|
||||
</blockquote>
|
||||
<footer>
|
||||
<strong>Daniel R.</strong>
|
||||
<span>Gründer, Architektur- und Planungsbüro</span>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="testimonial">
|
||||
<blockquote>
|
||||
„Die Zusammenarbeit war klar, effizient und angenehm präzise. Wir hatten zu jedem Zeitpunkt das Gefühl,
|
||||
dass Gestaltung hier nicht dekorativ verstanden wird, sondern als strategisches Werkzeug.“
|
||||
</blockquote>
|
||||
<footer>
|
||||
<strong>Sophie M.</strong>
|
||||
<span>Leitung Marketing, B2B-Dienstleister</span>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="faq" class="section">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<span class="eyebrow">FAQ</span>
|
||||
<h2>Häufige Fragen vor dem Projektstart.</h2>
|
||||
<p class="lead">
|
||||
Klare Antworten schaffen Sicherheit. Hier finden Sie die wichtigsten Punkte rund um Zusammenarbeit, Ablauf und
|
||||
Umfang.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-list">
|
||||
<details class="faq-item">
|
||||
<summary>Für wen eignet sich ein Onepager besonders gut?</summary>
|
||||
<div class="faq-content">
|
||||
Ein Onepager eignet sich besonders für Dienstleister, Agenturen, Expertenmarken, Beratungen oder neue Angebote,
|
||||
die klar, fokussiert und ohne unnötige Komplexität präsentiert werden sollen. Wenn die Kernbotschaft präzise
|
||||
ist, kann ein Onepager äußerst wirkungsvoll sein.
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="faq-item">
|
||||
<summary>Unterstützen Sie auch bei Texten und Struktur?</summary>
|
||||
<div class="faq-content">
|
||||
Ja. In vielen Projekten liegt der größte Hebel nicht nur im visuellen Design, sondern in der sauberen Ordnung
|
||||
der Inhalte. Wir helfen bei Struktur, Headlines, Formulierungen und der gesamten erzählerischen Führung der
|
||||
Seite.
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="faq-item">
|
||||
<summary>Wie lange dauert ein Projekt in der Regel?</summary>
|
||||
<div class="faq-content">
|
||||
Das hängt von Umfang, Freigabeschleifen und Materiallage ab. Für einen fokussierten Onepager lässt sich jedoch
|
||||
meist innerhalb weniger Wochen ein hochwertiges, abgestimmtes Ergebnis realisieren.
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="faq-item">
|
||||
<summary>Kann die Seite später erweitert werden?</summary>
|
||||
<div class="faq-content">
|
||||
Ja. Wenn Struktur und Designsystem sauber angelegt sind, lässt sich ein Onepager jederzeit zu einer größeren
|
||||
Website ausbauen. Genau deshalb denken wir bereits am Anfang modular und konsistent.
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="faq-item">
|
||||
<summary>Ist auch eine Zusammenarbeit mit bestehenden Markenrichtlinien möglich?</summary>
|
||||
<div class="faq-content">
|
||||
Selbstverständlich. Bestehende Farben, Schriftwelten, Tonalitäten oder Designvorgaben können sinnvoll
|
||||
weiterentwickelt und in ein modernes, digitales System übersetzt werden, ohne die Marke zu verfremden.
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="kontakt" class="section">
|
||||
<div class="container">
|
||||
<div class="cta-panel">
|
||||
<div class="cta-grid">
|
||||
<div>
|
||||
<span class="eyebrow cta-eyebrow">Kontakt</span>
|
||||
<h2>Bereit für einen Auftritt, der Ihrer Qualität gerecht wird?</h2>
|
||||
<p class="lead">
|
||||
Wenn Ihre Webseite klarer, hochwertiger und überzeugender wirken soll, sprechen wir darüber. Gemeinsam
|
||||
entwickeln wir einen digitalen Auftritt, der ästhetisch überzeugt und geschäftlich sinnvoll arbeitet.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="cta-actions">
|
||||
<a href="mailto:hallo@ateliernord.de" class="button-primary">Jetzt Anfrage senden</a>
|
||||
<a href="tel:+490000000000" class="button-secondary">Erstgespräch vereinbaren</a>
|
||||
</div>
|
||||
|
||||
<div class="contact-boxes">
|
||||
<div class="contact-box">
|
||||
<strong>E-Mail</strong>
|
||||
<span>hallo@ateliernord.de</span>
|
||||
</div>
|
||||
<div class="contact-box">
|
||||
<strong>Telefon</strong>
|
||||
<span>+49 000 0000 0000</span>
|
||||
</div>
|
||||
<div class="contact-box">
|
||||
<strong>Standort</strong>
|
||||
<span>Berlin · Remote im DACH-Raum</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-shell">
|
||||
<small>© 2026 Atelier Nord. Alle Rechte vorbehalten.</small>
|
||||
<nav class="footer-nav" aria-label="Footer Navigation">
|
||||
<a href="#top">Start</a>
|
||||
<a href="#leistungen">Leistungen</a>
|
||||
<a href="#ueber-uns">Über uns</a>
|
||||
<a href="#faq">FAQ</a>
|
||||
<a href="#kontakt">Kontakt</a>
|
||||
<a href="#">Impressum</a>
|
||||
<a href="#">Datenschutz</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
2
lara-hofer.txt
Normal file
2
lara-hofer.txt
Normal file
@ -0,0 +1,2 @@
|
||||
Dies ist Laras persönliches File.
|
||||
Ich schreibe mal eine zweite Zeile.
|
||||
1
marc-iten.txt
Normal file
1
marc-iten.txt
Normal file
@ -0,0 +1 @@
|
||||
Das ist meine persönliche Datei.
|
||||
1
steffikottmann.txt
Normal file
1
steffikottmann.txt
Normal file
@ -0,0 +1 @@
|
||||
Das ist meine persönliche Datei.
|
||||
968
style.css
968
style.css
@ -1,968 +0,0 @@
|
||||
:root {
|
||||
--bg: #f5f7fb;
|
||||
--surface: rgba(255, 255, 255, 0.78);
|
||||
--surface-strong: #ffffff;
|
||||
--surface-soft: #eef2f8;
|
||||
--text: #0f1728;
|
||||
--muted: #5f6b7d;
|
||||
--line: rgba(15, 23, 40, 0.08);
|
||||
--primary: #315efb;
|
||||
--primary-dark: #2447c9;
|
||||
--accent: #7c5cff;
|
||||
--accent-soft: rgba(124, 92, 255, 0.12);
|
||||
--success-soft: rgba(49, 94, 251, 0.10);
|
||||
--shadow-lg: 0 24px 60px rgba(17, 24, 39, 0.10);
|
||||
--shadow-md: 0 16px 32px rgba(17, 24, 39, 0.08);
|
||||
--shadow-sm: 0 10px 20px rgba(17, 24, 39, 0.05);
|
||||
--radius-xl: 28px;
|
||||
--radius-lg: 20px;
|
||||
--radius-md: 16px;
|
||||
--radius-sm: 12px;
|
||||
--container: 1180px;
|
||||
--nav-h: 80px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at 12% 8%, rgba(124, 92, 255, 0.13), transparent 22%),
|
||||
radial-gradient(circle at 88% 12%, rgba(49, 94, 251, 0.14), transparent 24%),
|
||||
radial-gradient(circle at 50% 100%, rgba(124, 92, 255, 0.08), transparent 22%),
|
||||
linear-gradient(180deg, #f8faff 0%, #f5f7fb 32%, #f7f9fc 100%);
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(49, 94, 251, 0.18);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
font: inherit;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: min(100% - 2rem, var(--container));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 96px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-alt {
|
||||
padding: 96px 0;
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.90));
|
||||
border-top: 1px solid var(--line);
|
||||
border-bottom: 1px solid var(--line);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.section-head {
|
||||
max-width: 720px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.45rem 0.8rem;
|
||||
border: 1px solid rgba(49, 94, 251, 0.14);
|
||||
background: rgba(255, 255, 255, 0.74);
|
||||
color: var(--primary-dark);
|
||||
border-radius: 999px;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.eyebrow::before {
|
||||
content: "";
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||||
box-shadow: 0 0 0 6px rgba(49, 94, 251, 0.10);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(3rem, 6vw, 5.9rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(2rem, 4vw, 3.3rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(1.15rem, 2vw, 1.45rem);
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--muted);
|
||||
font-size: 1.02rem;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: clamp(1.04rem, 1.8vw, 1.22rem);
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.nav-shell {
|
||||
min-height: var(--nav-h);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 14px 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.55);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 14px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.25)),
|
||||
linear-gradient(135deg, var(--primary), var(--accent));
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 12px 22px rgba(49, 94, 251, 0.18);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.brand-mark::before,
|
||||
.brand-mark::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 8px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255,255,255,0.35);
|
||||
}
|
||||
|
||||
.brand-mark::after {
|
||||
inset: 14px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,0.18);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.brand-text strong {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.brand-text span {
|
||||
display: block;
|
||||
font-size: 0.84rem;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
padding: 0.72rem 0.95rem;
|
||||
border-radius: 999px;
|
||||
color: #1f2a3d;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
background: rgba(49, 94, 251, 0.08);
|
||||
color: var(--primary-dark);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.nav-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.92rem 1.2rem;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 16px 26px rgba(49, 94, 251, 0.22);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-cta:hover,
|
||||
.button-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 20px 34px rgba(49, 94, 251, 0.24);
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 36px 0 56px;
|
||||
}
|
||||
|
||||
.hero-wrap {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1.12fr 0.88fr;
|
||||
gap: 28px;
|
||||
align-items: stretch;
|
||||
padding: 52px;
|
||||
border-radius: 40px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.70)),
|
||||
linear-gradient(135deg, rgba(49,94,251,0.08), rgba(124,92,255,0.06));
|
||||
border: 1px solid rgba(255,255,255,0.8);
|
||||
box-shadow: var(--shadow-lg);
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.hero-wrap::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto -120px -160px auto;
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(124, 92, 255, 0.22), transparent 62%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-wrap::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -140px auto auto -90px;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(49, 94, 251, 0.16), transparent 62%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
max-width: 680px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
margin: 28px 0 30px;
|
||||
}
|
||||
|
||||
.button-primary,
|
||||
.button-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 54px;
|
||||
padding: 0 1.35rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||||
box-shadow: 0 16px 26px rgba(49, 94, 251, 0.22);
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
color: var(--text);
|
||||
background: rgba(255,255,255,0.85);
|
||||
border: 1px solid rgba(15, 23, 40, 0.08);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.button-secondary:hover {
|
||||
transform: translateY(-2px);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.meta-card {
|
||||
padding: 18px 18px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255,255,255,0.72);
|
||||
border: 1px solid rgba(15, 23, 40, 0.06);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.meta-card strong {
|
||||
display: block;
|
||||
font-size: 1.35rem;
|
||||
line-height: 1;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.meta-card span {
|
||||
font-size: 0.92rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.panel-card {
|
||||
position: relative;
|
||||
padding: 22px;
|
||||
border-radius: 24px;
|
||||
background: rgba(255,255,255,0.82);
|
||||
border: 1px solid rgba(15, 23, 40, 0.06);
|
||||
box-shadow: var(--shadow-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-card strong {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.panel-card p {
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.score-line {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-top: 18px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--line);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.score-bar {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: #e8edf7;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.score-fill {
|
||||
height: 100%;
|
||||
width: 84%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, var(--primary), var(--accent));
|
||||
}
|
||||
|
||||
.highlight-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.highlight-item {
|
||||
padding: 20px;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.72));
|
||||
border: 1px solid rgba(15, 23, 40, 0.06);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.highlight-item strong {
|
||||
display: block;
|
||||
font-size: 1.05rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.trust-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.trust-card {
|
||||
padding: 24px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(255,255,255,0.78);
|
||||
border: 1px solid rgba(15, 23, 40, 0.06);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.trust-card strong {
|
||||
display: block;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.grid-3,
|
||||
.grid-2,
|
||||
.grid-4 {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
padding: 28px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(255,255,255,0.82);
|
||||
border: 1px solid rgba(15, 23, 40, 0.06);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.card p + p {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.feature-card::before {
|
||||
content: "";
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, rgba(49,94,251,0.14), rgba(124,92,255,0.16));
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
.about-wrap {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
gap: 24px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.about-main {
|
||||
padding: 34px;
|
||||
border-radius: 30px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.74)),
|
||||
linear-gradient(135deg, rgba(49,94,251,0.06), rgba(124,92,255,0.07));
|
||||
border: 1px solid rgba(15, 23, 40, 0.06);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.about-stats {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-box {
|
||||
padding: 26px;
|
||||
border-radius: 26px;
|
||||
background: rgba(255,255,255,0.84);
|
||||
border: 1px solid rgba(15, 23, 40, 0.06);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.stat-box strong {
|
||||
display: block;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.check-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.check-list li {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
grid-template-columns: 22px 1fr;
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.check-list li::before {
|
||||
content: "";
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
margin-top: 2px;
|
||||
background:
|
||||
radial-gradient(circle at 50% 50%, #fff 0 27%, transparent 29%),
|
||||
linear-gradient(135deg, var(--primary), var(--accent));
|
||||
box-shadow: 0 8px 18px rgba(49, 94, 251, 0.18);
|
||||
}
|
||||
|
||||
.advantage-card {
|
||||
padding: 30px;
|
||||
border-radius: 26px;
|
||||
background: rgba(255,255,255,0.84);
|
||||
border: 1px solid rgba(15, 23, 40, 0.06);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.process {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
counter-reset: step;
|
||||
}
|
||||
|
||||
.step {
|
||||
position: relative;
|
||||
padding: 28px 24px;
|
||||
border-radius: 24px;
|
||||
background: rgba(255,255,255,0.84);
|
||||
border: 1px solid rgba(15, 23, 40, 0.06);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.step::before {
|
||||
counter-increment: step;
|
||||
content: "0" counter(step);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 18px;
|
||||
margin-bottom: 20px;
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||||
box-shadow: 0 14px 24px rgba(49, 94, 251, 0.20);
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
padding: 30px;
|
||||
border-radius: 26px;
|
||||
background: rgba(255,255,255,0.88);
|
||||
border: 1px solid rgba(15, 23, 40, 0.06);
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.testimonial blockquote {
|
||||
font-size: 1.04rem;
|
||||
color: #243044;
|
||||
}
|
||||
|
||||
.testimonial footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
color: var(--muted);
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
border-radius: 22px;
|
||||
border: 1px solid rgba(15, 23, 40, 0.06);
|
||||
background: rgba(255,255,255,0.84);
|
||||
box-shadow: var(--shadow-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.faq-item summary {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
padding: 22px 24px;
|
||||
font-weight: 700;
|
||||
font-size: 1.02rem;
|
||||
color: var(--text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.faq-item summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.faq-item summary::after {
|
||||
content: "+";
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--surface-soft);
|
||||
color: var(--primary-dark);
|
||||
font-size: 1.4rem;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.faq-item[open] summary::after {
|
||||
content: "−";
|
||||
}
|
||||
|
||||
.faq-content {
|
||||
padding: 0 24px 22px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.cta-panel {
|
||||
position: relative;
|
||||
padding: 44px;
|
||||
border-radius: 34px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(49,94,251,0.94), rgba(124,92,255,0.92));
|
||||
color: #fff;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.cta-panel::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -100px;
|
||||
top: -120px;
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 64%);
|
||||
}
|
||||
|
||||
.cta-panel::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -80px;
|
||||
bottom: -120px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 68%);
|
||||
}
|
||||
|
||||
.cta-grid {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cta-panel p {
|
||||
color: rgba(255,255,255,0.86);
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.cta-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.cta-actions .button-primary {
|
||||
background: #fff;
|
||||
color: var(--primary-dark);
|
||||
box-shadow: 0 16px 28px rgba(9, 18, 45, 0.18);
|
||||
}
|
||||
|
||||
.cta-actions .button-secondary {
|
||||
background: rgba(255,255,255,0.14);
|
||||
color: #fff;
|
||||
border-color: rgba(255,255,255,0.26);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.contact-boxes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.contact-box {
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255,255,255,0.14);
|
||||
border: 1px solid rgba(255,255,255,0.18);
|
||||
}
|
||||
|
||||
.contact-box strong {
|
||||
display: block;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.contact-box span {
|
||||
color: rgba(255,255,255,0.82);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 34px 0 44px;
|
||||
}
|
||||
|
||||
.footer-shell {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
padding-top: 22px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.footer small {
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.hero-kicker {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-dark);
|
||||
margin-bottom: 18px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(15, 23, 40, 0.12), transparent);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.cta-eyebrow {
|
||||
background: rgba(255,255,255,0.14);
|
||||
color: #fff;
|
||||
border-color: rgba(255,255,255,0.18);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.hero-wrap,
|
||||
.about-wrap,
|
||||
.cta-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid-4,
|
||||
.trust-strip,
|
||||
.process,
|
||||
.contact-boxes {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.header {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.nav-shell {
|
||||
min-height: auto;
|
||||
border-radius: 28px;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.brand {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.nav-cta {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.hero-wrap {
|
||||
padding: 28px;
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
.hero-meta,
|
||||
.grid-3,
|
||||
.grid-2,
|
||||
.trust-strip,
|
||||
.grid-4,
|
||||
.process,
|
||||
.contact-boxes,
|
||||
.hero-panel,
|
||||
.highlight-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.section,
|
||||
.section-alt {
|
||||
padding: 72px 0;
|
||||
}
|
||||
|
||||
.cta-panel {
|
||||
padding: 32px 24px;
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
.footer-shell {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.container {
|
||||
width: min(100% - 1rem, var(--container));
|
||||
}
|
||||
|
||||
.hero-wrap,
|
||||
.about-main,
|
||||
.card,
|
||||
.advantage-card,
|
||||
.step,
|
||||
.testimonial,
|
||||
.trust-card,
|
||||
.panel-card,
|
||||
.stat-box {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.button-primary,
|
||||
.button-secondary {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-actions,
|
||||
.cta-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
1
valerie-bachmann.txt
Normal file
1
valerie-bachmann.txt
Normal file
@ -0,0 +1 @@
|
||||
Hallo
|
||||
1
valerie-schneider.txt
Normal file
1
valerie-schneider.txt
Normal file
@ -0,0 +1 @@
|
||||
Das ist Valéries Datei!!!
|
||||
71
yssa-item.html
Normal file
71
yssa-item.html
Normal file
@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Die Leidenschaft für Crêpes</title>
|
||||
<link rel="stylesheet" href="yssa-style.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="main-nav">
|
||||
<ul>
|
||||
<li><a href="#leidenschaft">Leidenschaft</a></li>
|
||||
<li><a href="#handwerk">Handwerk</a></li>
|
||||
<li><a href="#franzosisch">Paris</a></li>
|
||||
<li><a href="#rezept">Rezept</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<header>
|
||||
<h1>Crêpes: Leidenschaft, Handwerk und Tradition</h1>
|
||||
<p>Eine Hommage an die französische Küche im Frühling</p>
|
||||
</header>
|
||||
<section class="hero-image">
|
||||
<img src="Nutella-Crepes-500x500.jpg" alt="Frisch gebackene französische Crêpes">
|
||||
</section>
|
||||
<section id="leidenschaft">
|
||||
<h2>Die Leidenschaft für Crêpes</h2>
|
||||
<p>Crêpes sind mehr als nur ein Dessert – sie sind ein Ausdruck von Leidenschaft. In Paris, wo die Straßen nach frisch gebackenen Crêpes duften, wird diese Leidenschaft von Generation zu Generation weitergegeben. Der Moment, wenn der Teig in der Pfanne zischt und der Duft von Butter und Zucker die Luft erfüllt, ist pure Magie.</p>
|
||||
</section>
|
||||
|
||||
<section id="handwerk">
|
||||
<h2>Handwerk und Tradition</h2>
|
||||
<p>Das Handwerk der Crêpes-Herstellung ist eine Kunst, die Präzision und Geduld erfordert. Traditionell werden Crêpes in Frankreich mit einfachen Zutaten zubereitet: Mehl, Eier, Milch und Butter. Die Technik des Schwungs, um den Teig dünn zu verteilen, erfordert Übung und Liebe zum Detail. Diese Tradition verbindet uns mit der französischen Kultur und dem Geist von Paris.</p>
|
||||
</section>
|
||||
|
||||
<section id="franzosisch">
|
||||
<h2>Paris und die französische Seele</h2>
|
||||
<p>Paris im Frühling ist der perfekte Rahmen für Crêpes. Die Stadt erwacht mit blühenden Blumen und milden Temperaturen. Crêpes-Verkäufer säumen die Seine, und der Eiffelturm im Hintergrund symbolisiert die Eleganz Frankreichs. Crêpes sind ein Stück dieser modern-traditionellen Kultur – zeitlos und doch immer frisch.</p>
|
||||
</section>
|
||||
|
||||
<section id="rezept">
|
||||
<h2>Ein einfaches Crêpes-Rezept zum Nachkochen</h2>
|
||||
<h3>Zutaten (für ca. 8 Crêpes):</h3>
|
||||
<ul>
|
||||
<li>200g Mehl</li>
|
||||
<li>2 Eier</li>
|
||||
<li>500ml Milch</li>
|
||||
<li>50g Butter (geschmolzen)</li>
|
||||
<li>1 Prise Salz</li>
|
||||
<li>1 EL Zucker</li>
|
||||
</ul>
|
||||
<h3>Zubereitung:</h3>
|
||||
<ol>
|
||||
<li>Mehl, Salz und Zucker in einer Schüssel vermischen.</li>
|
||||
<li>Eier hinzufügen und verrühren.</li>
|
||||
<li>Langsam die Milch zugießen und rühren, bis ein glatter Teig entsteht.</li>
|
||||
<li>Geschmolzene Butter unterrühren.</li>
|
||||
<li>Teig 30 Minuten ruhen lassen.</li>
|
||||
<li>Eine Pfanne erhitzen, etwas Butter darin schmelzen.</li>
|
||||
<li>Eine Schöpfkelle Teig in die Pfanne geben und schwenken, um einen dünnen Teigfilm zu bilden.</li>
|
||||
<li>1-2 Minuten backen, wenden und weitere Minute backen.</li>
|
||||
<li>Mit Lieblingsbelägen servieren – z.B. Nutella, Obst oder Ahornsirup.</li>
|
||||
</ol>
|
||||
<p>Bon appétit! Genießen Sie Ihre Crêpes im Frühlingssonnenschein.</p>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 Crêpes Leidenschaft. Inspiriert von Paris.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
150
yssa-style.css
Normal file
150
yssa-style.css
Normal file
@ -0,0 +1,150 @@
|
||||
/* Grundlayout */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #fff7f9;
|
||||
color: #4a3f3f;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
header {
|
||||
background: linear-gradient(135deg, #ffd6e0, #ffeef3);
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 2.8rem;
|
||||
margin-bottom: 10px;
|
||||
color: #c94f7c;
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 1.2rem;
|
||||
color: #7a5a65;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
|
||||
section {
|
||||
max-width: 800px;
|
||||
margin: 40px auto;
|
||||
padding: 30px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 15px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* Section Titel */
|
||||
|
||||
section h2 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
color: #d45c8c;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
section h3 {
|
||||
margin-top: 25px;
|
||||
color: #b94b76;
|
||||
}
|
||||
|
||||
/* Listen */
|
||||
|
||||
ul, ol {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Rezeptbereich */
|
||||
|
||||
#rezept {
|
||||
background: #fff0f5;
|
||||
border-left: 6px solid #f6a5c0;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
margin-top: 40px;
|
||||
background-color: #ffd6e0;
|
||||
color: #6b4a53;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Hover Effekt für moderne Note */
|
||||
|
||||
section:hover {
|
||||
transform: translateY(-3px);
|
||||
transition: 0.3s ease;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
section {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 60px auto;
|
||||
}
|
||||
|
||||
.hero-image img {
|
||||
width: 100%;
|
||||
max-width: 650px;
|
||||
height: auto;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 12px 30px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.hero-image img:hover {
|
||||
transform: scale(1.02);
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
|
||||
.main-nav {
|
||||
background: white;
|
||||
padding: 15px 0;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.main-nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main-nav a {
|
||||
text-decoration: none;
|
||||
font-family: 'Playfair Display', serif;
|
||||
color: #c94f7c;
|
||||
font-size: 1.1rem;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.main-nav a:hover {
|
||||
color: #ff7aa8;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user