100 lines
3.2 KiB
Plaintext
100 lines
3.2 KiB
Plaintext
<section class="popup-day popup-recipe">
|
||
|
||
<!-- TITEL -->
|
||
<div class="popup-header">
|
||
<h2><!-- TITEL HIER --></h2>
|
||
|
||
<!-- TOOLS: Schriftart & Schriftgröße -->
|
||
<div class="popup-tools">
|
||
<button id="btn-font-toggle" aria-label="Schriftart umschalten">Aa ↔ 𝒜</button>
|
||
<button id="btn-font-up" aria-label="Schrift vergrößern">A+</button>
|
||
<button id="btn-font-down" aria-label="Schrift verkleinern">A−</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ZWEI-SPALTEN-LAYOUT -->
|
||
<div class="popup-body">
|
||
|
||
<!-- =====================================
|
||
LINKE SPALTE – STORYTEXT
|
||
===================================== -->
|
||
<div class="story">
|
||
<!-- DEIN STORYTEXT -->
|
||
</div>
|
||
|
||
<!-- =====================================
|
||
RECHTE SPALTE – REZEPT
|
||
===================================== -->
|
||
<div class="addon popup-recipe-content">
|
||
|
||
<!-- Rezeptname -->
|
||
<h3 class="recipe-title"><!-- Rezeptname --></h3>
|
||
|
||
<!-- RESPONSIVES BILD -->
|
||
<picture class="recipe-image-wrapper">
|
||
|
||
<!-- AVIF -->
|
||
<source
|
||
type="image/avif"
|
||
srcset="
|
||
/2025/assets/images/480/avif/REZEPT.avif 480w,
|
||
/2025/assets/images/720/avif/REZEPT.avif 720w,
|
||
/2025/assets/images/1024/avif/REZEPT.avif 1024w,
|
||
/2025/assets/images/1366/avif/REZEPT.avif 1366w,
|
||
/2025/assets/images/1600/avif/REZEPT.avif 1600w,
|
||
/2025/assets/images/1920/avif/REZEPT.avif 1920w,
|
||
/2025/assets/images/2560/avif/REZEPT.avif 2560w,
|
||
/2025/assets/images/3840/avif/REZEPT.avif 3840w
|
||
"
|
||
>
|
||
|
||
<!-- WEBP -->
|
||
<source
|
||
type="image/webp"
|
||
srcset="
|
||
/2025/assets/images/480/webp/REZEPT.webp 480w,
|
||
/2025/assets/images/720/webp/REZEPT.webp 720w,
|
||
/2025/assets/images/1024/webp/REZEPT.webp 1024w,
|
||
/2025/assets/images/1366/webp/REZEPT.webp 1366w,
|
||
/2025/assets/images/1600/webp/REZEPT.webp 1600w,
|
||
/2025/assets/images/1920/webp/REZEPT.webp 1920w,
|
||
/2025/assets/images/2560/webp/REZEPT.webp 2560w,
|
||
/2025/assets/images/3840/webp/REZEPT.webp 3840w
|
||
"
|
||
>
|
||
|
||
<!-- JPEG -->
|
||
<img
|
||
src="/2025/assets/images/1024/jpeg/REZEPT.jpeg"
|
||
srcset="
|
||
/2025/assets/images/480/jpeg/REZEPT.jpeg 480w,
|
||
/2025/assets/images/720/jpeg/REZEPT.jpeg 720w,
|
||
/2025/assets/images/1024/jpeg/REZEPT.jpeg 1024w,
|
||
/2025/assets/images/1366/jpeg/REZEPT.jpeg 1366w,
|
||
/2025/assets/images/1600/jpeg/REZEPT.jpeg 1600w,
|
||
/2025/assets/images/1920/jpeg/REZEPT.jpeg 1920w,
|
||
/2025/assets/images/2560/jpeg/REZEPT.jpeg 2560w,
|
||
/2025/assets/images/3840/jpeg/REZEPT.jpeg 3840w
|
||
"
|
||
alt="Rezeptbild"
|
||
class="recipe-image"
|
||
decoding="async"
|
||
loading="lazy"
|
||
>
|
||
</picture>
|
||
|
||
<!-- Zutaten -->
|
||
<h4>Zutaten</h4>
|
||
<ul>
|
||
<!-- Zutatenliste -->
|
||
</ul>
|
||
|
||
<!-- Zubereitung -->
|
||
<h4>Zubereitung</h4>
|
||
<p>
|
||
<!-- Zubereitungstext -->
|
||
</p>
|
||
|
||
</div>
|
||
</div>
|
||
</section> |