Webseiten Schnellstart / Webseite Schnellstart – Modul 3 – Crashkurs in CSS (Styling/Design)
0%
In Bearbeitung

Webseite Schnellstart – Projekt 3

Wie funktioniert diese Challenge?

  1. Diese Coding-Challenge besteht aus 5 verschiedenen Aufgaben.
  2. Jede Aufgabe wird einzeln gelöst und in den untenstehenden Code-Editor eingegeben.

Probleme? Wenn du eine Aufgabe nicht lösen kannst, klicke auf die jeweilige Code-Lösung unter der Aufgabe. Den Code dieser fertigen Lösung kannst du dann kopieren und in den Code-Editor einfügen.

Aber bitte nicht schummeln. Versuche zunächst die Aufgaben selbständig zu lösen 😉

In dieser Challenge werden wir das Rezept aus dem letzten Projekt mit CSS stylen.
Starten wir mit der ersten Aufgabe:

1. Überschrift stylen

Erstelle ein style-Element im head.
Style alle h1-Elemente: Farbe schwarz, Hintergrund-farbe mit rgba: 200,200,200, 0.6 und einem Innenabstand von 25 Pixeln:

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

<style>
h1 {
color: black;
background-color: rgba(200,200,200, 0.6);
padding: 25px;

}</style>

[/lp_spoiler]

2. Absätze stylen

Style alle p-Elemente in Farbe Schwarz und einem Abstand von 25 Pixeln.
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

      p {
        color: black;
        margin: 25px;
      }

[/lp_spoiler]

3. Box stylen

Gib den Zutaten und der Zubereitung eine Klasse "box". Style diese Klasse:
Rand: durchgehend, 2 Pixel, schwarz
Hintergrund-farbe mit rgba: 200,200,200, 0.6
Abstand mit 25 Pixeln und Innenabstand von 10 Pixeln

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

      .box {
        border: solid 2px black;
        background-color: rgba(200,200,200, 0.6);
        margin: 25px;
        padding: 10px;
      }

[/lp_spoiler]

4. Bild stylen

Nun setze das Bild auf display block und margin auto.
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

      img {
        display: block;
        margin: auto;
      }

[/lp_spoiler]

5. Body

Ändere die Schriftart auf normal, 20 Pixel und sans-serif.
Ändere die Hintergrundfarbe auf firebrick.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

      body {
        font : normal 20px sans-serif;
        background-color: firebrick;
      }

[/lp_spoiler]

Komplettlösung:
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <style>
      body {
        font : normal 20px sans-serif;
        background-color: firebrick;
      }
    
      h1 {
        color: black;
        background-color: rgba(200,200,200, 0.6);
        padding: 25px;
      }

      p {
        color: black;
        margin: 25px;
      }
      
      .box {
        border: solid 2px black;
        background-color: rgba(200,200,200, 0.6);
        margin: 25px;
        padding: 10px;
      }
      
      img {
        display: block;
        margin: auto;
      }
    </style>
  </head>
  <body>
      <div>
          <div>
             <div >
               <h1>Meine Lieblingspizza</h1>
               <p>Nach Toni's uralten Rezept</p>
             </div>
           </div>
           <div>
               <div class="box">
                   <h2>Benötigte Zutaten:</h2>
                   <ul>
                     <li>Pizza-Teig</li>
                     <li>Tomatensoße</li>
                     <li>Käse</li>
                     <li>Salami</li>
                     <li>Schinken</li>
                     <li>Pilze</li>
                   </ul>
                   <p>15 Minuten Vorbereitung - 80 Minuten Gesamtzeit</p>
                 </div>
                 <div >
                     <img src="/assets/img/pizza.jpg">
                 </div>
           </div>
           <div>
             <div class="box">
               <h2>Zubereitung</h2>
               <p>Ofen vorheizen auf 180 Grad.</p>
               <p>Pizza-Teig ausrollen und Tomatensoße verteilen.</p>
               <p>Pizza belegen mit Salami, Schinken und Pilzen.</p>
               <p>Zum Schluss reichlich Käse auf die Pizza legen.</p>
               <p>Für 65 Minuten im Ofen überbacken. Danach heiß servieren, Guten Appetit.</p>
             </div>
           </div>
      </div>

  </body>
</html>

[/lp_spoiler]