Das Quadrat aus dem HTML Code (links) soll 50 Pixel (px) breit, 50 Pixel hoch sein und die Hintergrundfarbe Rot haben. Wähle unten den richtigen CSS Code aus.

Quellcode:

HTML:


<div class="square">

</div>

Vorschau:

preview

Wähle eine Lösung aus, um die Preview zu erzeugen




Das Rechteck soll die Farbe orange haben, 200px hoch und 300px breit sein. Wähle den richtigen CSS Code aus.

Quellcode:

HTML:


<div class="rechteck">

</div>

Vorschau:

preview

Wähle eine Lösung aus, um die Preview zu erzeugen




Der Kreis soll wie hier gezeigt, die Farbe "blue" haben

Quellcode:

HTML:


<div class="circle">

</div>

Vorschau:


Warum funktionieren die Styles für das HTML-Element nicht?

Quellcode:

HTML


<div class="kreis">

</div>

CSS


.kreiß {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: orange;
}





Der Text soll die hexadezimale Schriftfarbe "#efb34b" haben.

Quellcode:

HTML:


<div class="text">
   Ich bin ein freundlicher Text.
</div>

Vorschau:

Ich bin ein freundlicher Text.

Der Text soll, wie im Beispiel, mit einem Abstand von 20 Pixeln um das "rocket-media"-Logo fließen.

Quellcode:

<div class="text">
Wer vom romantischen Dinkelsbühl aus die digitale Welt erobern will, muss schon einiges mitbringen. Erfahrung zum Beispiel – und Know-how. <img class="image" src="./images/logo.svg" width="200">

Und natürlich ein großartiges Team, das sich immer über Verstärkung freut. Mit rund 30 Web-, Software-, Onlinemarketing- und UX-Fachleuten betreuen wir seit über 20 Jahren international agierende, mittlere und große Unternehmen in ganz Deutschland.
</div>

Beispiel:

Wer vom romantischen Dinkelsbühl aus die digitale Welt erobern will, muss schon einiges mitbringen. Erfahrung zum Beispiel – und Know-how. Und natürlich ein großartiges Team, das sich immer über Verstärkung freut. Mit rund 30 Web-, Software-, Onlinemarketing- und UX-Fachleuten betreuen wir seit über 20 Jahren international agierende, mittlere und große Unternehmen in ganz Deutschland.

Vorschau:


preview

Wähle eine Lösung aus, um die Preview zu erzeugen

Um das Icon richtig anzeigen zu lassen, benötigen wir die richtigen CSS-Eigenschaften.
Wie musst du die Eigenschaften anpassen, um folgendes Ergebnis zu erhalten?


So soll das Icon im Text aussehen:

Willkommen bei
rocket-media!

Quellcode:

HTML:


Willkommen bei
<div class="imageWrapper">
<img class="image" src="./images/quiz/rocket.svg">
</div>
rocket-media!

Eigenschaften:

CSS:


    display:
    • block (Element wird über die gesamte Breite angezeigt)
    • inline (Element wird im Textfluss angezeigt)
    • none (Element wird nicht angezeigt)
    height:
    • so groß wie der Text (26 Pixel)
    width:
    • soll automatsich an die Höhe angepasst werden

Vorschau:


preview

Wähle eine Lösung aus, um die Preview zu erzeugen

Wir wollen einen schönen Text mit einem Hintergrundbild, als eine Art "Banner", wie unten gezeigt.


Dazu müssen wir folgende Werte anpassen:

  1. Textausrichtung (text-align)
    • Zentriert (center)
  2. Das Hintergrundbild (background-image)
    • url("./der/pfad/zum/bild.png)
  3. Die Innen-Abstände (padding)
    • top/bottom left/right
    • Beispiel:
      • Abstand oben und unten: 50 Pixeln
      • Abstand rechts und links: 20 Pixeln
        • z.B. padding: 50px 20px;
    • In unserem Fall wollen wir oben und unten ein Abstand von 200 Pixeln und von rechts und links 75 Pixel.
HTML
<div class="banner">
<h1>Arbeiten bei rocket-media in Dinkelsbühl. DinkelsWHAT?!</h1>
<p>
Mag sein, dass es angesagtere Orte auf der Welt gibt, wenn Du Websites,
Apps oder andere digitale Anwendungen innerhalb interessanter Projekte
entwickeln möchtest. Aber schönere sind ganz sicher schwer zu finden:
Willkommen in Deutschlands schönster historischer Altstadt.
</p>
</div>

Ohne CSS:

Arbeiten bei rocket-media in Dinkelsbühl. DinkelsWHAT?!

Mag sein, dass es angesagtere Orte auf der Welt gibt, wenn Du Websites, Apps oder andere digitale Anwendungen innerhalb interessanter Projekte entwickeln möchtest. Aber schönere sind ganz sicher schwer zu finden: Willkommen in Deutschlands schönster historischer Altstadt.

Mit CSS:

Ohne flex-wrap: