br0tkasten/test.somachtstefaniedas.de
1
0
Fork 0
Code

2. recipes und share, muss noch bild ersetzen

Browse Source
This commit is contained in:
matt 2025-02-28 19:28:58 +01:00
parent 272de2493c
commit 3a1e13fb70
23 changed files with 371 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

265
Johannesbeeressig/index.html Normal file
View File

@ -0,0 +1,265 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rezept-Seite</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
width: 90%;
max-width: 900px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
h1, h2 {
color: #333;
}
.cl-checkbox {
display: flex;
align-items: center;
justify-content: flex-start;
}
.cl-checkbox input {
margin-right: 10px;
}
.card {
width: 100%;
max-width: 500px;
background: white;
padding: 20px;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
text-align: left;
}
ul, ol {
padding-left: 20px;
}
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: white;
width: 100%;
position: relative;
margin-top: 20px;
}
@media (max-width: 600px) {
.card {
width: 100%;
}
}
.button {
cursor: pointer;
padding: 1em;
font-size: 1em;
width: 7em;
aspect-ratio: 1/0.25;
color: white;
background: #212121;
background-size: cover;
background-blend-mode: overlay;
border-radius: 0.5em;
outline: 0.1em solid #353535;
border: 0;
box-shadow: 0 0 1em 1em rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
position: relative;
}
.button:hover {
transform: scale(1.1);
box-shadow: 0 0 1em 0.45em rgba(0, 0, 0, 0.1);
background: linear-gradient(45deg, #212121, #252525);
background: radial-gradient(circle at bottom, rgba(50, 100, 180, 0.5) 10%, #212121 70%);
outline: 0;
}
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 400px;
text-align: center;
border-radius: 10px;
}
.social-icons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.social-icons a img {
width: 60px;
height: 60px;
transition: transform 0.2s;
}
.social-icons a img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="card">
<img src="/johannesbeeressig.png" alt="Johannesbeeressig">
<h2>Zutaten:</h2>
<ul>
<li><label class="cl-checkbox"><input type="checkbox"><span>500g Tomaten</span></label></li>
<li><label class="cl-checkbox"><input type="checkbox"><span>200g Nudeln</span></label></li>
<li><label class="cl-checkbox"><input type="checkbox"><span>100g Parmesan</span></label></li>
<li><label class="cl-checkbox"><input type="checkbox"><span>2 Esslöffel Olivenöl</span></label></li>
<li><label class="cl-checkbox"><input type="checkbox"><span>Salz und Pfeffer nach Geschmack</span></label></li>
</ul>
<h2>Zubereitung:</h2>
<ol>
<li><label class="cl-checkbox"><input type="checkbox"><span>Die Nudeln in einem großen Topf mit Salzwasser kochen.</span></label></li>
<li><label class="cl-checkbox"><input type="checkbox"><span>Während die Nudeln kochen, die Tomaten klein schneiden und in einer Pfanne mit Olivenöl anbraten.</span></label></li>
<li><label class="cl-checkbox"><input type="checkbox"><span>Mit Salz und Pfeffer abschmecken.</span></label></li>
<li><label class="cl-checkbox"><input type="checkbox"><span>Die fertigen Nudeln in die Pfanne mit den Tomaten geben und gut vermengen.</span></label></li>
<li><label class="cl-checkbox"><input type="checkbox"><span>Mit frisch geriebenem Parmesan bestreuen und servieren.</span></label></li>
</ol>
</div>
<br>
<br>
<!-- Neuer Share-Button mit den alten Funktionen -->
<button class="button" onclick="openSharePopup()">
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M307 34.8c-11.5 5.1-19 16.6-19 29.2v64H176C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96h96v64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z"></path>
</svg>
Share
</button>
<!-- Modal für Sharing-Optionen -->
<div id="shareModal" class="modal">
<div class="modal-content">
<h2>Teilen</h2>
<!--
<button onclick="shareViaWhatsApp()">WhatsApp</button>
<button onclick="shareViaTelegram()">Telegram</button>
<button onclick="shareViaPinterest()">Pinterest</button>
<button onclick="shareViaEmail()">E-Mail</button>
<button onclick="copyToClipboard()">Link kopieren</button>
<button onclick="closeSharePopup()">Schließen</button>
-->
<div class="social-icons">
<a href="#" onclick="shareViaWhatsApp()">
<img src="/icons/whatsapp.svg" alt="WhatsApp" />
</a>
<a href="#" onclick="shareViaPinterest()">
<img src="/icons/pinterest.svg" />
</a>
<a href="#" onclick="shareViaTelegram()">
<img src="/icons/telegram.svg" alt="Telegram" />
</a>
<a href="#" onclick="shareViaEmail()">
<img src="/icons/email.svg" alt="E-Mail" />
</a>
<!-- Kopieren -->
<a href="#" onclick="copyToClipboard()">
<img src="/icons/copy.svg" />
</a>
</div>
</div>
</div>
<script>
function openSharePopup() {
document.getElementById("shareModal").style.display = "block";
}
function closeSharePopup() {
document.getElementById("shareModal").style.display = "none";
}
function shareViaWhatsApp() {
const text = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/Johannesbeeressig/');
const url = 'https://api.whatsapp.com/send?text=' + text;
window.open(url, '_blank');
}
function shareViaTelegram() {
const text = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/Johannesbeeressig/');
const url = 'https://t.me/share/url?url=' + text;
window.open(url, '_blank');
}
function shareViaPinterest() {
const media = encodeURIComponent('URL_ZU_DEINEM_BILD');
const text = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/Johannesbeeressig/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media;
window.open(url, '_blank');
}
function shareViaEmail() {
const subject = encodeURIComponent('Klick the Witch');
const body = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/Johannesbeeressig/');
window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
}
function copyToClipboard() {
const text = 'Check out this fantastic recipe! https://test.somachtstefaniedas.de/Johannesbeeressig/';
navigator.clipboard.writeText(text).then(function() {
alert('Text wurde in die Zwischenablage kopiert!');
}, function(err) {
alert('Fehler beim Kopieren in die Zwischenablage: ', err);
});
}
window.onclick = function(event) {
const modal = document.getElementById('shareModal');
if (event.target == modal) {
closeSharePopup();
}
}
</script>
<br>
<br>
</body>
</html>

BIN
breakfast.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

BIN
breakfast.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 MiB

0
früchte teller.png → früchteteller.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 MiB

After

Width:  |  Height:  |  Size: 4.0 MiB

BIN
icons/Controller.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 MiB

1
icons/Link.svg Normal file
View File

@ -0,0 +1 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="283" height="337.81532" viewBox="0,0,283,337.81532"><g transform="translate(-98.5,-11.09234)"><g data-paper-data="{&quot;isPaintingLayer&quot;:true}" fill-rule="nonzero" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal"><g><g><g><path d="M98.5,180.63739c0,-11.26462 9.13178,-20.3964 20.3964,-20.3964c11.26462,0 20.3964,9.13178 20.3964,20.3964c0,11.26462 -9.13178,20.3964 -20.3964,20.3964c-11.26462,0 -20.3964,-9.13178 -20.3964,-20.3964z" fill="#000000" stroke="none" stroke-width="1" stroke-linecap="butt"/><g fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round"><path d="M360.1391,32.83909l-240.27819,147.24468"/><path d="M119.8609,180.71295l240.27819,147.24468" data-paper-data="{&quot;index&quot;:null}"/></g></g><path d="M340.70721,328.51126c0,-11.26462 9.13178,-20.3964 20.3964,-20.3964c11.26462,0 20.3964,9.13178 20.3964,20.3964c0,11.26462 -9.13178,20.3964 -20.3964,20.3964c-11.26462,0 -20.3964,-9.13178 -20.3964,-20.3964z" fill="#000000" stroke="none" stroke-width="1" stroke-linecap="butt"/></g><path d="M340.70721,31.48874c0,-11.26462 9.13178,-20.3964 20.3964,-20.3964c11.26462,0 20.3964,9.13178 20.3964,20.3964c0,11.26462 -9.13178,20.3964 -20.3964,20.3964c-11.26462,0 -20.3964,-9.13178 -20.3964,-20.3964z" fill="#000000" stroke="none" stroke-width="1" stroke-linecap="butt"/></g></g></g></svg><!--rotationCenter:141.50000000000006:168.90765765765772-->
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
icons/copy-clipboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

1
icons/copy.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M384 336l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l140.1 0L400 115.9 400 320c0 8.8-7.2 16-16 16zM192 384l192 0c35.3 0 64-28.7 64-64l0-204.1c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1L192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-32-48 0 0 32c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l32 0 0-48-32 0z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 683 B

BIN
icons/email-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

1
icons/email.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 112c-8.8 0-16 7.2-16 16l0 22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1l0-22.1c0-8.8-7.2-16-16-16L64 112zM48 212.2L48 384c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-171.8L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 576 B

1
icons/instagram.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
icons/link.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
icons/link1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

1
icons/link1.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M280 64h40c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128C0 92.7 28.7 64 64 64h40 9.6C121 27.5 153.3 0 192 0s71 27.5 78.4 64H280zM64 112c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H304v24c0 13.3-10.7 24-24 24H192 104c-13.3 0-24-10.7-24-24V112H64zm128-8a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 591 B

BIN
icons/meine-spiele.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

1
icons/pinterest.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 726 B

BIN
icons/playbutton.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
icons/schuessel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 MiB

BIN
icons/spiele.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 962 KiB

BIN
icons/spielen-button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

1
icons/telegram.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 748 B

1
icons/whatsapp.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

182
index.html
View File

@ -4,12 +4,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Tauche ein in die wunderbare Welt der Kulinarik und entdecke köstliche Rezepte."> <meta name="description" content="Tauche ein in die wunderbare Welt der Kulinarik und entdecke köstliche Rezepte.">
<link href="/fa/css/fontawesome.css" rel="stylesheet" /> <link href="/fa/css/fontawesome.css" rel="stylesheet">
<link href="/fa/css/brands.css" rel="stylesheet" /> <link href="/fa/css/brands.css" rel="stylesheet">
<title>so.mach.ich.das</title> <title>so.mach.ich.das</title>
<style> <style>
/* Grundlegendes Styling */
body { body {
font-family: Arial, sans-serif; font-family: system-ui, sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
@ -18,36 +19,45 @@
text-align: center; text-align: center;
background-color: white; background-color: white;
} }
/* Header */
header { header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
width: 100%; width: 100%;
padding: 20px; padding: 20px;
align-items: center;
max-width: 1200px; max-width: 1200px;
flex-wrap: wrap;
} }
.left, .right {
nav {
display: flex; display: flex;
gap: 20px; gap: 20px;
} }
h1 { h1 {
flex-grow: 1;
margin: 0; margin: 0;
font-size: 1.8em;
} }
a { a {
text-decoration: none; text-decoration: none;
color: black; color: black;
} }
/* Social Links (links positioniert) */
.social-links { .social-links {
display: flex; display: flex;
gap: 10px; gap: 10px;
position: absolute; align-items: center;
top: 20px;
left: 20px;
} }
.social-links a { .social-links a {
font-size: 1.5em; /* Default size for larger screens */ font-size: 1.5em;
} }
/* Ladebildschirm */
.loading-overlay { .loading-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
@ -59,10 +69,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 9999; z-index: 9999;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease-in-out;
} }
.spinner { .spinner {
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -71,40 +79,45 @@
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); } 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
} }
/* Inhalt */
.content { .content {
display: flex; display: flex;
flex-direction: row; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: left; text-align: center;
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
} }
.text {
.text, .image {
flex: 1; flex: 1;
margin-right: 20px; width: 100%;
} text-align: center;
.image {
flex: 1;
text-align: right;
} }
.image img { .image img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-radius: 8px; /* Optional: Für abgerundete Ecken */ border-radius: 8px;
} }
.divider { .divider {
width: 100%; width: 100%;
height: 2px; height: 2px;
background-color: black; background-color: black;
margin: 20px 0; margin: 20px 0;
} }
/* Karte */
.card { .card {
max-width: 300px; max-width: 300px;
background: white; background: white;
@ -117,112 +130,113 @@
display: inline-block; display: inline-block;
margin: 10px; margin: 10px;
} }
.card:hover { .card:hover {
transform: translate(-2px, -4px); transform: translate(-2px, -4px);
box-shadow: 16px 16px 0 rgba(32,33,37,.06); box-shadow: 16px 16px 0 rgba(32,33,37,.06);
} }
.card img {
max-width: 100%;
height: auto;
}
.card .title { .card .title {
font-weight: bold; font-weight: bold;
margin-top: 1.5em; margin-top: 1.5em;
} }
.card .description { .card .description {
line-height: 1.5em; line-height: 1.5em;
} }
.card a { .card a {
color: #1967d2; color: #1967d2;
font-size: .8em; font-size: .8em;
font-weight: 600; font-weight: 600;
} }
.description-title {
font-size: 1.5em;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 10px;
}
/* Media Query für responsives Design */ /* Responsives Design */
@media (max-width: 600px) { @media (max-width: 768px) {
header {
flex-direction: column;
align-items: center;
text-align: center;
}
.social-links {
width: 100%;
justify-content: center;
margin-top: 10px;
}
.content { .content {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.text, .image { .text, .image {
flex: none;
width: 100%; width: 100%;
text-align: center;
margin-right: 0;
} }
.card { .card {
max-width: 90%; max-width: 90%;
margin: 10px 0; margin: 10px 0;
} }
.social-links a {
font-size: 1.2em; /* Kleinere Icons auf mobilen Geräten */
}
} }
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<div class="left">
<a href="index.html">HOME</a>
<a href="recipes.html">RECIPES</a>
</div>
<h1>so.mach.ich.das</h1>
<div class="right">
<a href="contact.html">CONTACT</a>
<a href="about.html">ABOUT</a>
</div>
<div class="social-links"> <div class="social-links">
<a href="https://www.instagram.com/so.mach.ich.das/" target="_blank" rel="noopener noreferrer"> <a href="https://www.instagram.com/so.mach.ich.das/" target="_blank">
<i class="fa-brands fa-instagram"></i> <i class="fa-brands fa-instagram"></i>
</a> </a>
<a href="https://youtube.com/@somachtstefaniedasstefanie435?feature=shared" target="_blank" rel="noopener noreferrer"> <a href="https://youtube.com/@somachtstefaniedasstefanie435?feature=shared" target="_blank">
<i class="fa-brands fa-youtube"></i> <i class="fa-brands fa-youtube"></i>
</a> </a>
</div> </div>
<nav>
<a href="index.html">HOME</a>
<a href="recipes.html">RECIPES</a>
</nav>
<h1>so.mach.ich.das</h1>
<nav>
<a href="contact.html">CONTACT</a>
<a href="about.html">ABOUT</a>
</nav>
</header> </header>
<div class="loading-overlay"> <div class="loading-overlay">
<div class="spinner"></div> <div class="spinner"></div>
</div> </div>
<div class="content">
<div class="text"> <main>
<div class="description-title">Beschreibung</div> <section class="content">
<p>Tauche ein in die wunderbare Welt der Kulinarik und entdecke eine Vielzahl <div class="text">
von köstlichen Rezepten, die ich persönlich kuratiert habe.<br> <p>Tauche ein in die wunderbare Welt der Kulinarik und entdecke eine Vielzahl
Egal, ob du ein Anfänger in der Küche bist oder ein erfahrener Gourmet – von köstlichen Rezepten, die ich persönlich kuratiert habe.</p>
hier findest du Inspiration und Anleitungen für jede Gelegenheit.</p> </div>
</div> <div class="image">
<div class="image"> <img src="obstteller.png" alt="Breakfast Image">
<img src="obstteller1.png" alt="Obstteller mit frischen Früchten"> </div>
</div> </section>
</div>
<div class="divider"></div> <div class="divider"></div>
<div class="card">
<img src="johannesbeeressig.png" width="100%" alt="Johannesbeeressig"> <article class="card">
<div class="title">Johannesbeeressig</div> <img src="johannesbeeressig.png" width="100%" alt="Johannesbeeressig">
<p class="description">Verleihe deinem Salat eine außergewöhnliche <h3 class="title">Johannesbeeressig</h3>
Note mit selbstgemachtem Johannisbeeressig.<br> <p class="description">Verleihe deinem Salat eine außergewöhnliche Note mit selbstgemachtem Johannisbeeressig.</p>
Der fruchtige Geschmack der Johannisbeeren harmoniert perfekt <a href="/Johannesbeeressig/" class="link">See the recipe</a>
mit der feinen Säure des Essigs und verleiht jedem Salat ein besonderes Aroma.</p> </article>
<a href="#" class="link">See the recipe</a> </main>
</div>
<script> <script>
function showLoading() { // Funktion, die die Ladeanimation nach dem Laden der Seite ausblendet
const overlay = document.querySelector('.loading-overlay'); window.onload = function() {
overlay.style.visibility = 'visible'; document.querySelector('.loading-overlay').style.display = 'none';
overlay.style.opacity = '1'; };
}
function hideLoading() {
const overlay = document.querySelector('.loading-overlay');
overlay.style.opacity = '0';
setTimeout(() => {
overlay.style.visibility = 'hidden';
}, 300);
}
document.addEventListener('DOMContentLoaded', function() {
hideLoading();
});
</script> </script>
</body> </body>
</html> </html>