Deine Aufgabe: Erstelle eine Webseite

Nutze deine Code-Skills und gestalte eine Webseite für Professor Bairstone. Verwende HTML-Tags und CSS-Formate und erstelle ein interessantes Design. Diese Dinge sollten auf deine Webseite zu sehen sein:

Eine Kopfzeile (header)
Ein Titel (title)
Text über den Mönchsdiamanten
Ein Bild vom Team
Ein Bild des Diamanten
Zettel mit Fakten über den Mönchsdiamanten

Wenn du nicht weiter kommst, kopiere diesen Quelltext in dein Textprogramm. Verändere das Design und Layout und mache so die Webseite zu deinem eigenen Werk. Beachte, dass dein Projektordner Coding auch die beiden Bilddateien diamond.jpg und team.jpg enthalten muss.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <title>Der Mönchsdiamant</title>
   <style>
     body {
       margin: 0px;
    }   
     .pad {
       padding: 25px;
    }   
     .header {
       background-color: lightblue;
       color: green;
       height: 100px;
       font-size: 36pt;
       text-align: center;
    }   
     .welcome {
       background-color: plum;
       color: white;
       font-size: 16pt;
       text-align: center;
       height: 40px;
       margin: 0px;
    }   
     .main-text {
       width: 60%;
       float: left;
       background-color: beige;
    }   
     .divs {
       margin: 5px;
       width: 25%;
       float: left;
       border: 4px solid lightblue;
    }   
   </style>

</head>
 <body>
   <div class="header pad">
     Mönchsdiamant gefunden
   </div>
   <div>
     <p class="welcome">
       Gestohlener Diamant in Alaska entdeckt!
     </p>
   </div>
   <div class="main-text pad">
     <p>
        Prof. Bairstone und Dr. Day machten einen sensationellen Fund.<br/>
        In einer entlegenen Höhle in Alaska fanden sie den Mönchsdiamanten.<br/>
        Ernesto, der Hund des Professors, hat ihn aufgespürt.
     </p>
     <p>
       Der Edelstein wurde dem Juwelier Volkov vor drei Jahren gestohlen.<br/>
       Die Hauptverdächtigen sind die Gebrüder Bond.<br/>
       Das Team nimmt an, dass der Diamant dort von den Dieben versteckt wurde.<br/>
       Dieses Foto haben sie vom Camp gesendet:
     </p>
     <img src="img/team.jpg" alt="Das Team" style="height: 150px;"/>  
   </div>
   <div class="divs pad">
     <img src="img/diamond.jpg" alt="Diamant" style="width: 150px;"/>
     <p style="text-align: center;">Der Mönchsdiamant</p>
   </div>
   <div class="divs pad" style="text-align: center;">
     Fakten<br/>
     Karat: 300<br/>
     Farbe: Grün<br/>
     Wert: über 10 Mio. €
   </div>
</body>
</html>

Beispiel ansehen

Zurück zur Mission