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

neu

Browse Source
This commit is contained in:
matt 2025-02-24 20:11:21 +01:00
parent f2ba0aabdf
commit 272de2493c
1 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
index.html
View File

@ -21,9 +21,10 @@
header { header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 80%; width: 100%;
padding: 20px; padding: 20px;
align-items: center; align-items: center;
max-width: 1200px;
} }
.left, .right { .left, .right {
display: flex; display: flex;
@ -44,6 +45,9 @@
top: 20px; top: 20px;
left: 20px; left: 20px;
} }
.social-links a {
font-size: 1.5em; /* Default size for larger screens */
}
.loading-overlay { .loading-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
@ -77,15 +81,24 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: left; text-align: left;
width: 80%; width: 100%;
max-width: 1200px;
padding: 20px;
box-sizing: border-box;
} }
.text { .text {
flex: 1; flex: 1;
margin-right: 20px;
} }
.image { .image {
flex: 1; flex: 1;
text-align: right; text-align: right;
} }
.image img {
max-width: 100%;
height: auto;
border-radius: 8px; /* Optional: Für abgerundete Ecken */
}
.divider { .divider {
width: 100%; width: 100%;
height: 2px; height: 2px;
@ -102,6 +115,7 @@
transition: box-shadow .5s, transform .5s; transition: box-shadow .5s, transform .5s;
border-radius: 8px; border-radius: 8px;
display: inline-block; display: inline-block;
margin: 10px;
} }
.card:hover { .card:hover {
transform: translate(-2px, -4px); transform: translate(-2px, -4px);
@ -130,11 +144,20 @@
@media (max-width: 600px) { @media (max-width: 600px) {
.content { .content {
flex-direction: column; flex-direction: column;
align-items: center;
} }
.text, .image { .text, .image {
flex: none; flex: none;
width: 100%; width: 100%;
text-align: center; text-align: center;
margin-right: 0;
}
.card {
max-width: 90%;
margin: 10px 0;
}
.social-links a {
font-size: 1.2em; /* Kleinere Icons auf mobilen Geräten */
} }
} }
</style> </style>
@ -152,10 +175,10 @@
</div> </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" rel="noopener noreferrer">
<i class="fa-brands fa-instagram" style="font-size: 2em;"></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" rel="noopener noreferrer">
<i class="fa-brands fa-youtube" style="font-size: 2em;"></i> <i class="fa-brands fa-youtube"></i>
</a> </a>
</div> </div>
</header> </header>
@ -171,12 +194,12 @@
hier findest du Inspiration und Anleitungen für jede Gelegenheit.</p> hier findest du Inspiration und Anleitungen für jede Gelegenheit.</p>
</div> </div>
<div class="image"> <div class="image">
<img src="/obstteller1.png" alt="Bild" width="400"> <img src="obstteller1.png" alt="Obstteller mit frischen Früchten">
</div> </div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div class="card"> <div class="card">
<img src="/johannesbeeressig.png" width="100%" alt="Johannesbeeressig"> <img src="johannesbeeressig.png" width="100%" alt="Johannesbeeressig">
<div class="title">Johannesbeeressig</div> <div class="title">Johannesbeeressig</div>
<p class="description">Verleihe deinem Salat eine außergewöhnliche <p class="description">Verleihe deinem Salat eine außergewöhnliche
Note mit selbstgemachtem Johannisbeeressig.<br> Note mit selbstgemachtem Johannisbeeressig.<br>