Eigenes Projekt · Station 4 von 10

Boxclub-Website

Meine erste eigene Website: die Startseite eines erfundenen Boxclubs mit Titelbereich, Logo und Navigation.

Ziel

Eine Seite bauen, die aussieht wie die eines echten Vereins.

Umsetzung

Ein großes Titelbild mit Überschrift und Leitspruch darüber.
Logo und Navigation oben, darunter ein Textblock mit Farbverlauf.
Alles von Hand in HTML und CSS geschrieben, ohne Baukasten.
Im Bild hier sind das ursprüngliche Foto und das Logo durch Farbflächen ersetzt.

Code

Titelbild, Navigation und Überschrift übereinander

style.css

.header-image {
    height: 75vh;
    width: 100%;
    object-fit: cover;
}

.container {
    position: absolute;
    right: 32px;
    left: 32px;
    top: 10px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }

.menu-link {
    color:white;
    text-decoration: none;
}

.menu-link:hover {
    text-decoration: underline;
}

.logo {
    width: 110px;
}

.headline {
    position: absolute;
    top: 180px;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 30px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-shadow: 3px 2px rgba(0, 0, 0, 0.807);
}

Mit absoluter Positionierung liegen Logo, Menü und Text über dem Bild.

Was ich gelernt habe

Wie Positionierung, Ebenen und Schatten zusammenspielen, und dass Pfade zu Bildern relativ sein sollten.