Cloud III

Lektion 6 von 18 im Kurs Ziehende Wolken – HTML/CSS/JS-Projekt von Coddy.

Aufgabe

Einfach

Erstelle in der HTML-Datei ein div innerhalb des Cloud-Divs (.cloud, noch eines!) mit dem Klassennamen "cloudBubble2".

Sprich in der CSS-Datei das neue Div an und setze:

width auf 60px
height auf 60px
Hintergrundfarbe auf dieselbe wie im Cloud-Div
Border-Radius von 30px
position auf absolute
top auf -30px
right auf 30px

Entferne am Ende den margin aus dem .cloud-Div.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

Alle Lektionen in Ziehende Wolken – HTML/CSS/JS-Projekt

1Einführung

4Spielen mit JS

2Container

5Die Wolke bewegen

Richtungen abwechseln

Sofort starten

Alles zufällig festlegen

3Die Cloud

Cloud I

Cloud II

Cloud III

6Viele Wolken