• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML - Links funktionieren aufgrund von Animation nicht

md28

Neues Mitglied
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:

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 &#169;&#174;</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> &nbsp;E = m&sdot;c<sup>2</sup></i>&nbsp;</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ß
 
Werbung:
Verpasse der Class .snow mal einen z-index von -1

Ansonsten lädst du google-Fonts, das sollte man wegen DSGVO nicht mehr machen, sondern die Font-Dateien downloaden und selber hosten.
 
Vielen Dank, das hat funktioniert. Aber was genau bewirkt der z-index denn?

Und ich hätte noch eine weitere kleine Frage:

Bei dem vorgegeben Entwurf (siehe Bild) ist das Wort Play unterstrichen, Portal allerdings nicht. Ich habe versucht in der Class dark-blue die text-decoration zu entfernen, dies hat allerdings keinen Einfluss.

Screenshot (16).png
 
Werbung:
Zurück
Oben