Hallo zusammen, wir hatten in der Uni die Aufgabe bekommen diesen Wunschzettel hier zu programmieren. Für Kreativität gibt es extra Punkte, deshalb habe ich die weihnachtlichen Bilder, sowie die Schnee-Animation eingefügt. Allerdings funktionieren nun die Links aufgrund der Animation nicht.
Hier der HTML-Code:
Und der dazugehörige CSS-Code:
Ich würde mich freuen wenn mir jemand helfen könnte diesen Fehler zu beheben.
Danke im Voraus
Gruß
Hier der HTML-Code:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timmys Wunschzettel</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+NP+Hmong:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="wunschzettel_style.css">
</head>
<body>
<div class="image-container">
<img class="spiegeln" src="https://freesvg.org/img/sheikh_tuhin_Christmas.png" alt="Weihnachtskugeln">
<img class="bells" src="https://freesvg.org/img/1290794863.png" alt="Weihnachtsglocken">
<img class="image" src="https://freesvg.org/img/sheikh_tuhin_Christmas.png" alt="Weihnachtskugeln">
</div>
<div class="text-container">
<p><strong><u>Lieber Weihnachtsmann,</u></strong></p>
das ganze Jahr war ich ein <strong>braver Junge</strong>. Ich bin mir sicher du siehst das genauso
<br> und lieferst mir am <span style="background: red;">24.12.2022</span> bis <strong>spätestens 18:00 Uhr</strong> <u>folgende Geschenke:</u>
<ol>
<li class="black_marker">Eine <a href="https://de.wikipedia.org/wiki/PlayStation_5">Play<span class="dark-blue">Portal</span></a> mit den Spielen:
<ul>
<li> Big Little Planet 5</li>
<li>Olympia-Dopingmanager 2023 ©®</li>
</ul>
</li>
<li class="black_marker">Eine <a href="https://de.wikipedia.org/wiki/Parrot_AR.Drone">Drone</a>, entweder
<ul>
<li>Jumping Night Diesel oder</li>
<li>Airborne CARGO</li>
</ul>
</li>
<li>Ein Buch in dem relativ leicht die Formel <span class="container"><i> E = m⋅c<sup>2</sup></i> </span> erklärt wird!</li>
<li>Eine große Dose "<span class="large">BIG</span>Crunch-Cookies"</li>
<li>Einen <a href="https://www.der-postillon.com/2017/06/fidget-timmy.html">echten</a> Fidget-Spinner</li>
</ol>
<p>Hochachtungsvoll,</p>
<pre>
<b class="extra-large"><i>Timmy</i></b>
</pre>
</div>
<div class="image-container">
<img class="present" src="https://freesvg.org/img/secretlondon_red_present.png" alt="rotes Geschenk">
<img class="candy_cane" src="https://freesvg.org/img/Candy-Canes-Ribbon.png" alt="gekreuzte Zuckerstangen">
<img class="present" src="https://freesvg.org/img/secretlondon_red_present.png" alt="rotes Geschenk">
</div>
<div class="snow"></div>
</body>
</html>Und der dazugehörige CSS-Code:
CSS:
html{
border: red;
border-style: groove;
border-width: 10px;
}
body{
border-bottom: 0;
border-top: 0;
font-family: 'Noto Serif NP Hmong', serif;
font-size: larger;
color: cornsilk;
background-color: forestgreen;
}
.black_marker::marker{
color: black;
}
ol{
padding-left: 58px;
}
ol li{
padding-left: 10px;
}
li ul{
padding-left: 23px;
}
ul li{
padding-left: 6px;
list-style-type: disc;
}
.large{
font-size: larger;
}
.large{
font-size: x-large;
}
.extra-large{
font-size: xx-large;
font-weight: bold;
}
.dark-blue{
color: darkblue;
text-decoration:none;
}
.container{
border: 1px solid black;
}
.text-container{
display: block;
padding-left: 50px;
}
.image-container{
display: flex;
justify-content: space-between;
}
.image{
width: 200px;
height: 200px;
}
.bells{
width: 250px;
height: 250px;
}
.present{
width: 150px;
height: 150px;
}
.candy_cane{
width: 150px;
height: 150px;
}
.spiegeln{
width: 200px;
height: 200px;
transform: scaleX(-1) scaleY(1);
}
.snow, .snow:after, .snow:before{
content: "";
position: fixed;
top: -650px;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(4px 4px at 100px 50px, #fff, transparent),
radial-gradient(6px 6px at 200px 150px, #fff, transparent),
radial-gradient(3px 3px at 300px 250px, #fff, transparent),
radial-gradient(4px 4px at 400px 350px, #fff, transparent),
radial-gradient(6px 6px at 500px 100px, #fff, transparent),
radial-gradient(3px 3px at 50px 200px, #fff, transparent),
radial-gradient(4px 4px at 150px 300px, #fff, transparent),
radial-gradient(6px 6px at 250px 400px, #fff, transparent),
radial-gradient(3px 3px at 350px 500px, #fff, transparent);
background-size: 650px 650px;
animation: snowAnim 10s linear;
animation-iteration-count: infinite;
}
.snow:after{
margin-left: -250px;
opacity: 0.5;
animation-duration: 6s;
}
.snow:before{
margin-left: -350px;
opacity: 0.7;
animation-duration: 9s;
}
@keyframes snowAnim{
from{
transform: translateY(0);
}
to{
transform: translateY(650px);
}
}Ich würde mich freuen wenn mir jemand helfen könnte diesen Fehler zu beheben.
Danke im Voraus
Gruß
