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