LU01.L01 - Portfolio

Dies ist eine alte Version des Dokuments!

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <header class="header">
        <div class="header-brand">
           Kamil Demirci
        </div>
        <nav class="header-nav">
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Über mich</a>
                </li>
                <li>
                    <a href="#">Portfolio</a>
                </li>
                <li>
                    <a href="#">News</a>
                </li>
                <li>
                    <a href="#">Kontakt</a>
                </li>
            </ul>
        </nav>
    </header>
 
    <section class="hero">
        <div class="hero-left">
            <p class="lead"><b>Hi!</b> Mein Name ist <b>Kamil Demirci</b>. Schön, dass du auf meine Webseite gelandet bist. Hier findest du Informationen über mich und meine abgeschlossenen Projekte.</p>
            <div class="button-group">
                <a class="button" href="#">Button 1 →</a>
                <a class="button" href="#">Button 2 →</a>
            </div>
        </div>
        <div class="hero-right">
            <img src="https://placehold.it/600">
        </div>
    </section>
</body>
</html>

* {
    box-sizing: border-box;
}
 
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid lightgray;
}
.header-brand {
    padding: 0 30px;
    font-weight: 700;
    font-size: 20px;
}
.header-nav ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
.header-nav ul li a {
    padding: 20px 30px;
    display: block;
    border-left: 1px solid lightgray;
    text-decoration: none;
    color: black;
    text-transform: uppercase;
}
.hero {
    padding: 20px 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid lightgray;
}
.hero-left, .hero-right { width: 50%; }
.hero-left { padding-right: 30px; }
.hero-right img {
    width: 100%;
    height: auto;
}
.lead { font-size: 36px; }
.button-group { display: flex; }
.button {
    display: block;
    padding: 15px 20px;
    border: 2px solid black;
    text-decoration: none;
    color: black;
    text-transform: uppercase;
    margin-right: 15px;
    box-shadow: 4px 4px 0 lightgray;
}

LU01.L01 - Portfolio

HTML

CSS

BZZ - Modulwiki