ADV CMS

Homepage-Template

HTML-Template für die Blog-Startseite. Leer lassen für die Standard-Artikelliste.
Verfügbare Variablen: {{blog_name}} {{blog_logo}} {{articles_list}} {{articles_json}} {{custom_css}} {{year}}
{{articles_list}} = gerenderte HTML-Artikel (jeweils <article class="article-item">).
{{articles_json}} = JSON-Array [{slug, title, date}] für eigenes JS-Rendering.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GoodLifeJournal — Das Wohlfühl-Magazin für Frauen</title>
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Nunito+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
  --rose: #C4727F;
  --rose-light: #E8A0AA;
  --rose-pale: #FDF2F4;
  --blush: #F9E8EB;
  --cream: #FFF9F5;
  --warm-bg: #FFFBF8;
  --sand: #F5EDE6;
  --sand-dark: #D4C5B9;
  --brown: #6B4F43;
  --brown-dark: #4A3630;
  --brown-deep: #3A2824;
  --text-dark: #2E1F1A;
  --text-body: #5C4A42;
  --text-light: #9B8A82;
  --white: #FFFFFF;
  --border: rgba(107, 79, 67, 0.1);
  --shadow-sm: 0 2px 12px rgba(107, 79, 67, 0.08);
  --shadow-md: 0 8px 32px rgba(107, 79, 67, 0.1);
  --shadow-lg: 0 16px 48px rgba(107, 79, 67, 0.12);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito Sans', sans-serif;
  background: var(--warm-bg);
  color: var(--text-body);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
h1, h2, h3, h4 { font-family: 'Lora', serif; color: var(--text-dark); line-height: 1.25; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, #E8C4A0 0%, #D4A07A 20%, #C4927A 40%, #B8A090 60%, #D4C4B0 80%, #E8D8C8 100%);
  z-index: 0;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(58,40,36,0.15) 0%, rgba(58,40,36,0.45) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  animation: fadeUp 1s ease-out both;
}
.hero-badge {
  display: inline-block;
  font-family: 'Lora', serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
  margin-bottom: 1.25rem;
}
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--white);
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.15;
}
.hero h1 em {
  font-style: italic;
  font-weight: 500;
  display: block;
}
.hero-desc {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.8;
  max-width: 560px;
  margin: 0 auto;
}

/* ── SECTION HEADERS ── */
.section-title {
  font-family: 'Lora', serif;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  text-align: center;
  margin-bottom: 2.5rem;
  color: var(--text-dark);
}

/* ── ARTICLE CARDS — "Lass dich inspirieren" ── */
.inspiration {
  padding: 5rem 0 3rem;
}
.inspiration-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}
.article-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  flex-direction: column;
}
.article-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.article-card-img {
  aspect-ratio: 3/2;
  overflow: hidden;
}
.article-card-img-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.article-card:hover .article-card-img-inner { transform: scale(1.06); }
.ac-img-1 { background: linear-gradient(135deg, #C4927A 0%, #A0705C 40%, #806050 100%); }
.ac-img-2 { background: linear-gradient(135deg, #E8D0B8 0%, #D4A890 40%, #C08878 100%); }
.ac-img-3 { background: linear-gradient(135deg, #A8C4A0 0%, #80A080 40%, #5C8060 100%); }

.article-card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.article-card h4 {
  font-family: 'Lora', serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: var(--text-dark);
  transition: color 0.3s;
}
.article-card:hover h4 { color: var(--rose); }
.article-card p {
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1rem;
}
.card-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rose);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.3s;
}
.article-card:hover .card-link { gap: 0.7rem; }

.all-articles-btn {
  display: block;
  text-align: center;
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--rose);
  text-decoration: none;
  padding: 1rem 2.5rem;
  border: 2px solid var(--rose-light);
  border-radius: 60px;
  margin: 0 auto;
  width: fit-content;
  transition: all 0.3s;
}
.all-articles-btn:hover {
  background: var(--rose);
  color: var(--white);
  border-color: var(--rose);
}

/* ── HIGHLIGHT SECTION ── */
.highlight {
  padding: 4rem 0;
}
.highlight-inner {
  background: var(--blush);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: 440px;
}
.highlight-img {
  background: linear-gradient(145deg, #E8B8A0 0%, #D09878 40%, #B88070 100%);
  min-height: 300px;
  position: relative;
}
.highlight-img::after {
  content: '';
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.highlight-body {
  padding: 3rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.highlight-badge {
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}
.highlight-body h4 {
  font-family: 'Lora', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 1rem;
  line-height: 1.35;
}
.highlight-body p {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.75;
  margin-bottom: 1.75rem;
}
.highlight-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  background: var(--rose);
  color: var(--white);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 60px;
  width: fit-content;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
}
.highlight-btn:hover {
  background: var(--brown-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(74, 54, 48, 0.2);
}

/* ── TESTIMONIAL ── */
.testimonial {
  padding: 4rem 0;
  text-align: center;
}
.testimonial-inner {
  max-width: 750px;
  margin: 0 auto;
}
.testimonial blockquote {
  font-family: 'Lora', serif;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-style: italic;
  color: var(--text-dark);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.testimonial cite {
  font-style: normal;
  font-size: 0.9rem;
  color: var(--text-light);
  font-weight: 500;
}

/* ── TOPIC CARDS ── */
.topics {
  padding: 3rem 0 4rem;
}
.topics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
}
.topic-card {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.topic-card:hover { transform: translateY(-4px); }
.topic-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 0;
}
.topic-card:hover .topic-bg { transform: scale(1.05); }
.tc-bg-1 { background: linear-gradient(145deg, #F5E6D8 0%, #D4B8A0 50%, #B89880 100%); }
.tc-bg-2 { background: linear-gradient(145deg, #D4C8B8 0%, #A89888 50%, #887868 100%); }
.tc-bg-3 { background: linear-gradient(145deg, #C8D4C0 0%, #A0B498 50%, #80947C 100%); }
.topic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(46, 31, 26, 0.75) 0%, transparent 60%);
  z-index: 1;
}
.topic-body {
  position: relative;
  z-index: 2;
  padding: 1.75rem;
}
.topic-body h3 {
  font-family: 'Lora', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.topic-body p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
}

/* ── IMAGE GALLERY / CAROUSEL ── */
.gallery {
  padding: 3rem 0;
  overflow: hidden;
}
.gallery-track {
  display: flex;
  gap: 1rem;
  animation: scrollGallery 25s linear infinite;
}
@keyframes scrollGallery {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.gallery-item {
  flex: 0 0 240px;
  height: 300px;
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery-item-inner {
  width: 100%;
  height: 100%;
}
.gi-1 { background: linear-gradient(135deg, #E0C8B0 0%, #C8A888 100%); }
.gi-2 { background: linear-gradient(135deg, #C8D8C0 0%, #A0B890 100%); }
.gi-3 { background: linear-gradient(135deg, #D8C0C8 0%, #C0A0A8 100%); }
.gi-4 { background: linear-gradient(135deg, #B8C8D8 0%, #90A8C0 100%); }
.gi-5 { background: linear-gradient(135deg, #E0D0C0 0%, #C8B098 100%); }
.gi-6 { background: linear-gradient(135deg, #D0C0D8 0%, #B0A0B8 100%); }
.gi-7 { background: linear-gradient(135deg, #C0D8D0 0%, #98C0B8 100%); }
.gi-8 { background: linear-gradient(135deg, #E0C0B0 0%, #C8A090 100%); }
.gi-9 { background: linear-gradient(135deg, #D8D0C0 0%, #C0B898 100%); }
.gi-10 { background: linear-gradient(135deg, #C8C0D8 0%, #A8A0B8 100%); }

/* ── TRENDS ── */
.trends {
  padding: 4rem 0;
}
.trends-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.trend-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.trend-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.trend-card-top {
  padding: 1.5rem 1.5rem 1rem;
}
.trend-card-top h4 {
  font-family: 'Lora', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.35;
  margin-bottom: 0.75rem;
  transition: color 0.3s;
}
.trend-card:hover h4 { color: var(--rose); }
.trend-card-img {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.trend-card-img-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.trend-card:hover .trend-card-img-inner { transform: scale(1.05); }
.tr-img-1 { background: linear-gradient(135deg, #E8D0A8 0%, #D0B080 50%, #B89060 100%); }
.tr-img-2 { background: linear-gradient(135deg, #E8E0D0 0%, #D0C8B0 50%, #B8B098 100%); }
.tr-img-3 { background: linear-gradient(135deg, #C8D8D0 0%, #A0B8A8 50%, #80A090 100%); }
.trend-card-bottom {
  padding: 0 1.5rem 1.25rem;
}
.trend-read-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rose);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.3s;
}
.trend-card:hover .trend-read-link { gap: 0.7rem; }

/* ── FAQ ── */
.faq {
  padding: 4rem 0 5rem;
}
.faq-list {
  max-width: 720px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  text-align: left;
  transition: color 0.3s;
}
.faq-question:hover { color: var(--rose); }
.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rose-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s;
  font-size: 1.1rem;
  color: var(--rose);
}
.faq-item.active .faq-icon {
  background: var(--rose);
  color: var(--white);
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.23, 1, 0.32, 1), padding 0.4s;
}
.faq-item.active .faq-answer {
  max-height: 200px;
  padding-bottom: 1.25rem;
}
.faq-answer p {
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.7;
}

/* ── FOOTER ── */
.footer {
  background: var(--sand);
  padding: 2.5rem 0;
  text-align: center;
}
.footer-logo {
  font-family: 'Lora', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--brown-dark);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 0.75rem;
}
.footer-logo span { color: var(--rose); }
.footer-copy {
  font-size: 0.8rem;
  color: var(--text-light);
  margin-bottom: 0.75rem;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.8rem;
}
.footer-links a {
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-links a:hover { color: var(--rose); }
.footer-links span { color: var(--sand-dark); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .highlight-inner { grid-template-columns: 1fr; }
  .highlight-img { min-height: 280px; }
}
@media (max-width: 768px) {
  .inspiration-grid { grid-template-columns: 1fr; }
  .topics-grid { grid-template-columns: 1fr; }
  .trends-grid { grid-template-columns: 1fr; }
  .highlight-body { padding: 2rem; }
  .hero { min-height: 70vh; }
}
</style>
</head>
<body>

<!-- HERO -->
<section class="hero">
  <div class="hero-bg"></div>
  <div class="hero-content">
    <div class="hero-badge">GoodLifeJournal</div>
    <h1>Das Wohlfühl-Magazin <em>für Frauen</em></h1>
    <p class="hero-desc">
      GoodLifeJournal ist der Moment für dich, im Alltag kurz zur Ruhe zu kommen und DIR etwas Gutes zu tun. Lies Impulse, Erfahrungsberichte anderer starker Frauen und finde neue Ideen für einen noch schöneren Alltag.
    </p>
  </div>
</section>

<!-- LASS DICH INSPIRIEREN -->
<section class="inspiration">
  <div class="container">
    <h2 class="section-title reveal">Lass dich inspirieren …</h2>
    <div class="inspiration-grid">

      <a href="#" class="article-card reveal">
        <div class="article-card-img">
          <div class="article-card-img-inner ac-img-1"></div>
        </div>
        <div class="article-card-body">
          <h4>Haar-Psychologie</h4>
          <p>Haarausfall durch Stress? Hier erfährst du alles zur Psychologie der Haare und was du tun kannst, um deine zu schützen.</p>
          <span class="card-link">Jetzt weiterlesen <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
        </div>
      </a>

      <a href="#" class="article-card reveal">
        <div class="article-card-img">
          <div class="article-card-img-inner ac-img-2"></div>
        </div>
        <div class="article-card-body">
          <h4>Cycle Syncing</h4>
          <p>Was dein Menstruationszyklus mit deinem Hautbild zu tun hat — und wie du ihn als Beauty-Coach nutzen kannst.</p>
          <span class="card-link">Jetzt weiterlesen <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
        </div>
      </a>

      <a href="#" class="article-card reveal">
        <div class="article-card-img">
          <div class="article-card-img-inner ac-img-3"></div>
        </div>
        <div class="article-card-body">
          <h4>Emotional Eating</h4>
          <p>Isst du aus Stress, Frust oder Langeweile? Erfahre, was hinter Emotional Eating steckt und wie du den Kreislauf durchbrichst.</p>
          <span class="card-link">Jetzt weiterlesen <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
        </div>
      </a>

    </div>
    <a href="#" class="all-articles-btn reveal">Entdecke jetzt alle Artikel ❤️</a>
  </div>
</section>

<!-- GOODLIFE-HIGHLIGHT -->
<section class="highlight">
  <div class="container">
    <h2 class="section-title reveal">✨ GoodLife-Highlight ✨</h2>
    <div class="highlight-inner reveal">
      <div class="highlight-img"></div>
      <div class="highlight-body">
        <div class="highlight-badge">🔥 Trending</div>
        <h4>Hype? Wir haben uns die Trend-Salbe gegen Gelenkschmerzen angesehen</h4>
        <p>Schluss mit Schmerztabletten? Entdecke die Hyaluron-Revolution für deine Gelenke. Erfahre, warum diese neue Salbe gerade das Internet erobert und wie sie ganz ohne Chemie für mehr Beweglichkeit und Leichtigkeit im Alltag sorgt.</p>
        <a href="#" class="highlight-btn">
          Jetzt weiterlesen
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
        </a>
      </div>
    </div>
  </div>
</section>

<!-- TESTIMONIAL -->
<section class="testimonial">
  <div class="container">
    <div class="testimonial-inner reveal">
      <blockquote>
        „GoodLifeJournal gibt jede Woche so tolle Impulse, dass es zu einem festen Bestandteil meines Alltags geworden ist!"
      </blockquote>
      <cite>Jana Sobeike, 38</cite>
    </div>
  </div>
</section>

<!-- TOPIC CARDS -->
<section class="topics">
  <div class="container">
    <div class="topics-grid">
      <a href="#" class="topic-card reveal">
        <div class="topic-bg tc-bg-1"></div>
        <div class="topic-overlay"></div>
        <div class="topic-body">
          <h3>Manifestation & Journaling</h3>
          <p>Leerer Trend oder echtes Power-Tool? Wir haben es uns genauer angesehen.</p>
        </div>
      </a>
      <a href="#" class="topic-card reveal">
        <div class="topic-bg tc-bg-2"></div>
        <div class="topic-overlay"></div>
        <div class="topic-body">
          <h3>Interior-Psychologie</h3>
          <p>Wie Farben in deiner Wohnung deine Stimmung steuern (sogar dein Stresslevel!).</p>
        </div>
      </a>
      <a href="#" class="topic-card reveal">
        <div class="topic-bg tc-bg-3"></div>
        <div class="topic-overlay"></div>
        <div class="topic-body">
          <h3>Homeoffice-Hacks</h3>
          <p>So schaffst du dir zuhause einen Arbeitsplatz, der dich inspiriert statt stresst.</p>
        </div>
      </a>
    </div>
  </div>
</section>

<!-- GALLERY CAROUSEL -->
<section class="gallery">
  <div class="gallery-track">
    <div class="gallery-item"><div class="gallery-item-inner gi-1"></div></div>
    <div class="gallery-item"><div class="gallery-item-inner gi-2"></div></div>
    <div class="gallery-item"><div class="gallery-item-inner gi-3"></div></div>
    <div class="gallery-item"><div class="gallery-item-inner gi-4"></div></div>
    <div class="gallery-item"><div class="gallery-item-inner gi-5"></div></div>
    <!-- duplicate for seamless loop -->
    <div class="gallery-item"><div class="gallery-item-inner gi-6"></div></div>
    <div class="gallery-item"><div class="gallery-item-inner gi-7"></div></div>
    <div class="gallery-item"><div class="gallery-item-inner gi-8"></div></div>
    <div class="gallery-item"><div class="gallery-item-inner gi-9"></div></div>
    <div class="gallery-item"><div class="gallery-item-inner gi-10"></div></div>
  </div>
</section>

<!-- TRENDS -->
<section class="trends">
  <div class="container">
    <h2 class="section-title reveal">Entdecke die neuesten Trends</h2>
    <div class="trends-grid">

      <a href="#" class="trend-card reveal">
        <div class="trend-card-top">
          <h4>Abnehmen? Blutzucker-Hack!</h4>
        </div>
        <div class="trend-card-img">
          <div class="trend-card-img-inner tr-img-1"></div>
        </div>
        <div class="trend-card-bottom">
          <span class="trend-read-link">Jetzt lesen <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
        </div>
      </a>

      <a href="#" class="trend-card reveal">
        <div class="trend-card-top">
          <h4>Minimalismus für Anfänger (super leicht)</h4>
        </div>
        <div class="trend-card-img">
          <div class="trend-card-img-inner tr-img-2"></div>
        </div>
        <div class="trend-card-bottom">
          <span class="trend-read-link">Jetzt lesen <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
        </div>
      </a>

      <a href="#" class="trend-card reveal">
        <div class="trend-card-top">
          <h4>Alleine verreisen?! MUSST du probieren!</h4>
        </div>
        <div class="trend-card-img">
          <div class="trend-card-img-inner tr-img-3"></div>
        </div>
        <div class="trend-card-bottom">
          <span class="trend-read-link">Jetzt lesen <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
        </div>
      </a>

    </div>
  </div>
</section>

<!-- FAQ -->
<section class="faq">
  <div class="container">
    <h2 class="section-title reveal">Frequently Asked Questions</h2>
    <div class="faq-list reveal">
      <div class="faq-item">
        <button class="faq-question">
          Was ist das GoodLifeJournal?
          <span class="faq-icon">+</span>
        </button>
        <div class="faq-answer">
          <p>GoodLifeJournal ist ein Online-Magazin für Frauen, das wöchentlich neue Impulse zu Wohlbefinden, Beauty, Interior und Lifestyle bietet — für einen bewussteren und schöneren Alltag.</p>
        </div>
      </div>
      <div class="faq-item">
        <button class="faq-question">
          Wie oft erscheinen neue Artikel?
          <span class="faq-icon">+</span>
        </button>
        <div class="faq-answer">
          <p>Wir veröffentlichen wöchentlich neue Beiträge zu verschiedenen Themenbereichen. Folge uns, um keine Ausgabe zu verpassen.</p>
        </div>
      </div>
      <div class="faq-item">
        <button class="faq-question">
          Kann ich Themen vorschlagen?
          <span class="faq-icon">+</span>
        </button>
        <div class="faq-answer">
          <p>Selbstverständlich! Wir freuen uns über Themenwünsche und Ideen unserer Leserinnen. Schreib uns einfach eine Nachricht über das Kontaktformular.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer class="footer">
  <div class="container">
    <a href="#" class="footer-logo">GoodLife<span>Journal</span></a>
    <p class="footer-copy">© 2026 GoodLifeJournal – das Wohlfühl-Magazin für Frauen ❤️</p>
    <div class="footer-links">
      <a href="#">Impressum</a>
      <span>–</span>
      <a href="#">Datenschutzerklärung</a>
      <span>–</span>
      <a href="#">Redaktions-Richtlinien</a>
      <span>–</span>
      <a href="#">Affiliate-Hinweis</a>
    </div>
  </div>
</footer>

<script>
// Scroll reveal
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry, i) => {
    if (entry.isIntersecting) {
      setTimeout(() => entry.target.classList.add('visible'), i * 60);
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.1, rootMargin: '0px 0px -30px 0px' });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// FAQ accordion
document.querySelectorAll('.faq-question').forEach(btn => {
  btn.addEventListener('click', () => {
    const item = btn.parentElement;
    const wasActive = item.classList.contains('active');
    document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('active'));
    if (!wasActive) item.classList.add('active');
  });
});
</script>

</body>
</html>
Blog bearbeiten: Good Life Journal

Artikel-Template

Homepage-Template

Custom CSS
