Menu
Coddy logo textTech
ZACZNIJ NAUKĘ
flag Pl iconPolskidown icon

Chmura I

Lekcja 4 z 18 w kursie Poruszające się chmury — projekt HTML/CSS/JS w Coddy.

challenge icon

Wyzwanie

Łatwy

W pliku HTML utwórz element div wewnątrz #container z nazwą klasy "cloud".

 

W pliku CSS wybierz nowy element div chmury i ustaw:

  1. width na 200px
  2. height na 80px
  3. wybrany kolor tła (pamiętaj, to chmura!)
  4. zaokrąglenie rogów na 40px
  5. position na absolute (ponieważ chcemy swobodnie zmieniać położenie chmury)

Ustaw też margin na 100px lub więcej, aby chmura była w pełni widoczna podczas kolejnych lekcji (później usuniemy ten margines).

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Wpisz tutaj kod HTML -->
        <script src="script.js"></script>
    </body>
</html>

Wszystkie lekcje w sekcji Poruszające się chmury — projekt HTML/CSS/JS

1Wprowadzenie

Wprowadzenie

4Zabawa z JS

Pobieranie chmurkiLekcja projektowaLosowa pozycjaLekcja projektowaLosowy rozmiarLekcja projektowa

2Kontener

TreśćKontenerLekcja projektowa

5Poruszanie chmurą

Stałe wartościLekcja projektowaRuch w prawoLekcja projektowaNaprzemienne kierunkiLekcja projektowaNatychmiastowy startLekcja projektowaLosuj wszystkoLekcja projektowa

3Chmura

Chmura ILekcja projektowaChmura IILekcja projektowaChmura IIILekcja projektowa

6Wiele chmur

Wstawianie HTML za pomocą JSLekcja projektowaWstawianie chmurLekcja projektowaPętla po wszystkichLekcja projektowaOstatnie poprawkiLekcja projektowa

Poćwicz samodzielnie: Edytor online Web