Die Homepage (Startseite)

Die Homepage (index.html) ist die wichtigste Seite deiner Website, denn diese sieht der User zuerst. Verwende diesen Quellcode als Vorlage für deine eigene Homepage. Überarbeite den Quellcode und mache ihn zu deinem eigenen Produkt. Ändere die Hintergrundfarben und schreibe deinen eigenen Text. Nachdem du die Seite fertig programmiert hast, speichere die HTML-Seite im Ordner Coding. Nenne die Datei index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>Home</title>
  <style>
        body {
            margin: 0px;
            padding: 0px;
            border: 0px;
            background-color: #08E8FF;
            color: white;
        }

        a {
            color: white;
        }

        .header {
            height: 65px;
            margin-top: 25px;
            text-align: center;
            font-size: 24px;
        }

        .banner {
            background: url(img/DiamondLarge.jpg);
            background-size: cover;
            width: auto;
            height: 200px;
            text-align: center;
            font-size: 52px;
            padding-top: 75px;
            color: white;
        }

        .content {
            min-height: 200px;
            padding: 50px;
            font-size: 18px;
            background-color: white;
            color: black;
        }

        .footer {
            width: 100%;
            height: 120px;
            padding: 50px;
            text-align: center;
            font-size: 20px;
            color: #1806E8;
        }

        .button {
            text-align: center;
            background-color: #10FF7F;
            color: white;
            margin-left: 23%;
            margin-right: 23%;
            padding: 25px;
        }
    </style>
</head>
<body>
    <div class="banner">
        Der Mönchsdiamant <br/>
        <div style="font-size: 32px;">Eine außergewöhnliche Ausstellung</div>
    </div>


    <div class="header">
        <a href="index.html">Home</a>/ <a href="diamond.html">Der Diamant</a> / <a href="discovery.html">Fund</a> / 
        <a href="exhibition.html">Ausstellung</a> / <a href="volkov.html">Juwelier Volkov</a>
    </div>
    <div class="content">
       <p>Der Mönchsdiamant gehört zu den seltensten und wertvollsten Diamanten Europas. 
         Er hat eine faszinierende Geschichte. Er gehörte einem russischen Adligen, wurde von 
         berüchtigten Gangstern gestohlen und dann in abgelegenen Bergen wieder entdeckt – 
         einer der sensationellsten Funde des Jahrhunderts. Mehr über den Mönchsdiamanten auf 
         dieser Website. Zu besichtigen beim Juwelier Volkov in Berlin.
       </p>

     <p style="padding-top: 50px;">
        <a href="volkov.html" class="button">Besuchen Sie das Juwelierhaus Volkov</a>
    </p>
    </div>
    <div class="footer">
        Kontakt Professor Bairstone: profbairstone@furchtloseforscher.de
    </div>
</body>
</html>

Beispiel ansehen

Zurück zur Mission