1
0
Files
test.somachtstefaniedas.de/index.html
2025-05-30 22:18:56 +02:00

263 lines
7.7 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<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.">
<link href="/fa/css/fontawesome.css" rel="stylesheet">
<link href="/fa/css/brands.css" rel="stylesheet">
<title>so.mach.ich.das | Homepage</title>
<style>
/* Grundlegendes Styling */
body {
font-family: system-ui, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background-color: white;
}
/* Header */
header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 20px;
max-width: 1200px;
flex-wrap: wrap;
}
nav {
display: flex;
gap: 20px;
}
h1 {
margin: 0;
font-size: 1.8em;
}
a {
text-decoration: none;
color: black;
}
/* Social Links (links positioniert) */
.social-links {
display: flex;
gap: 10px;
align-items: center;
}
.social-links a {
font-size: 1.5em;
}
/* Ladebildschirm */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.spinner {
width: 50px;
height: 50px;
border: 5px solid rgba(0, 0, 0, 0.1);
border-top: 5px solid black;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Inhalt */
.content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
max-width: 1200px;
padding: 20px;
box-sizing: border-box;
}
.text, .image {
flex: 1;
width: 100%;
text-align: center;
}
.image img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.divider {
width: 100%;
height: 2px;
background-color: black;
margin: 20px 0;
}
/* Karte */
.card {
max-width: 300px;
background: white;
color: black;
border: 1px solid #dbdce0;
padding: 25px;
box-shadow: 8px 8px 0 rgba(32,33,37,.1);
transition: box-shadow .5s, transform .5s;
border-radius: 8px;
display: inline-block;
margin: 10px;
}
.card:hover {
transform: translate(-2px, -4px);
box-shadow: 16px 16px 0 rgba(32,33,37,.06);
}
.card img {
max-width: 100%;
height: auto;
}
.card .title {
font-weight: bold;
margin-top: 1.5em;
}
.card .description {
line-height: 1.5em;
}
.card a {
color: #1967d2;
font-size: .8em;
font-weight: 600;
}
/* Responsives Design */
@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 {
flex-direction: column;
align-items: center;
}
.text, .image {
width: 100%;
}
.card {
max-width: 90%;
margin: 10px 0;
}
}
</style>
</head>
<body>
<header>
<div class="social-links">
<a href="https://www.instagram.com/so.mach.ich.das/" target="_blank">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="https://youtube.com/@somachtstefaniedasstefanie435?feature=shared" target="_blank">
<i class="fa-brands fa-youtube"></i>
</a>
</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="bio.html">BIO</a>
</nav>
</header>
<div class="loading-overlay">
<div class="spinner"></div>
</div>
<main>
<section class="content">
<div class="text">
<p>Tauche ein in die wunderbare Welt der Kulinarik und entdecke eine Vielzahl
von köstlichen Rezepten, die ich persönlich kuratiert habe.</p>
</div>
<div class="image">
<img src="breakfast.png" alt="Breakfast Image">
<span style="font-size: 8px; color: grey; text-align: right">Designed by <a href="https://www.freepik.com">Freepik</a></span>
</div>
</section>
</main>
<div class="divider"></div>
<main>
<article class="card">
<img src="Johannesbeeressig/johannesbeeressig.png" width="100%" alt="Johannesbeeressig">
<h3 class="title">Johannesbeeressig</h3>
<p class="description">Verleihe deinem Salat eine außergewöhnliche Note mit selbstgemachtem Johannesbeeressig.</p>
<a href="/Johannesbeeressig/" class="link">Klicke für mehr</a>
</article>
<article class="card">
<img src="hefe-teilchen/hefeteilchen.jpeg" width="100%" alt="Hefe Teilchen">
<h3 class="title">Hefe Teilchen</h3>
<p class="description">Locker-leichte Hefeteilchen, gefüllt mit Schokocreme oder Marmelade perfekt zum Kaffee oder Frühstück.</p>
<a href="/hefe-teilchen" class="link">Klicke für mehr</a>
</article>
<article class="card">
<img src="lachszwiebeldip/lachsdip.jpeg" width="100%" alt="Lachs-Zwiebel-Dip">
<h3 class="title">Lachs-Zwiebel-Dip</h3>
<p class="description">Herzhafter Lachs-Zwiebel-Dip mit Frischkäse und Kresse perfekt als Brotaufstrich oder Dip für Gäste.</p>
<a href="/lachszwiebeldip" class="link">Klicke für mehr</a>
</article>
</article>
<article class="card">
<img src="fluffigkrossejoghurtbroteohnegehzeit/brot.jpeg" width="100%" alt="fluffig krosse Johgurtbrote ohne Gehzeit">
<h3 class="title">Fluffig Krosse Johgurtbrote ohne Gehzeit</h3>
<p class="description">Locker und knusprig Joghurtbrote ganz ohne Gehzeit.</p>
<a href="/fluffigkrossejoghurtbroteohnegehzeit" class="link">Klicke für mehr</a>
</article>
</main>
<script>
// Funktion, die die Ladeanimation nach dem Laden der Seite ausblendet
window.onload = function() {
document.querySelector('.loading-overlay').style.display = 'none';
};
</script>
</body>
</html>