LU01.L01 - Portfolio [BZZ

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== LU01.L01 - Portfolio ======

===== HTML =====
<code html>
<!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 1 →</a>
                <a class="button" href="#">Button 1 →</a>
                <a class="button" href="#">Button 1 →</a>
                <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>

    <section class="about-me">
        <div class="about-me-left">
            <h2>Über mich</h2>
            <p>Text</p>
        </div>
        <div class="about-me-right">
            <p>HTML</p>
            <div class="skill-wrapper">
                <div class="skill-inner html">90%</div>
            </div>
            <p>CSS</p>
            <div class="skill-wrapper">
                <div class="skill-inner css">80%</div>
            </div>
            <p>PHP</p>
            <div class="skill-wrapper">
                <div class="skill-inner php">70%</div>
            </div>
            <p>JS</p>
            <div class="skill-wrapper">
                <div class="skill-inner js">50%</div>
            </div>
        </div>
    </section>

    <section class="services">
        <div class="services-item">
            <div class="services-item-inner">
                <img src="https://placehold.it/80">
                <h3>Marketing</h3>
                <p>Text</p>
            </div>
        </div>
        <div class="services-item">
            <div class="services-item-inner">
                <img src="https://placehold.it/80">
                <h3>Marketing</h3>
                <p>Text</p>
            </div>
        </div>
        <div class="services-item">
            <div class="services-item-inner">
                <img src="https://placehold.it/80">
                <h3>Marketing</h3>
                <p>Text</p>
            </div>
        </div>
        <div class="services-item">
            <div class="services-item-inner">
                <img src="https://placehold.it/80">
                <h3>Marketing</h3>
                <p>Text</p>
            </div>
        </div>
        <div class="services-item">
            <div class="services-item-inner">
                <img src="https://placehold.it/80">
                <h3>Marketing</h3>
                <p>Text</p>
            </div>
        </div>
        <div class="services-item">
            <div class="services-item-inner">
                <img src="https://placehold.it/80">
                <h3>Marketing</h3>
                <p>Text</p>
            </div>
        </div>

    </section>

    <section class="services">
        <div class="services-item">
            <div class="services-item-inner">
                <img src="https://placehold.it/600">
            </div>
        </div>
        <div class="services-item">
            <div class="services-item-inner">
                <img src="https://placehold.it/600">
            </div>
        </div>
        <div class="services-item">
            <div class="services-item-inner">
                <img src="https://placehold.it/600">
            </div>
        </div>
        <div class="services-item">
            <div class="services-item-inner">
                <img src="https://placehold.it/600">
            </div>
        </div>
        <div class="services-item">
            <div class="services-item-inner">
                <img src="https://placehold.it/600">
            </div>
        </div>
        <div class="services-item">
            <div class="services-item-inner">
                <img src="https://placehold.it/600">
            </div>
        </div>
    </section>

</body>
</html>
</code>

===== CSS =====

<code css>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

.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; flex-wrap: wrap }
.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;
}

.button:hover {
    background-color: red;
}

.button:active {
    background-color: blue;
}

.button:focus {
    background-color: yellow;
}

.button:last-child {
    border: 5px solid green;
}

.button:nth-child(even) {
    border: 5px solid yellow;
}

.button:nth-child(odd) {
    border: 5px solid blue;
}

.about-me {
    display: flex;
    padding: 30px 50px;
    border-bottom: 1px solid lightgray;
}

.about-me-left, .about-me-right {
    width: 50%;
}

.skill-wrapper {
    border: 2px solid black;
    box-shadow: 4px 4px 0 lightgray;
}

.skill-inner {
    padding: 15px;
    text-align: right;
    color: white;
}

.html {
    width: 90%;
    background-color: green;
}

.css {
    width: 80%;
    background-color: blue;
}

.php {
    width: 70%;
    background-color: red;
}

.js {
    width: 50%;
    background-color: brown;
}

.services {
    display: flex;
    padding: 30px 50px;
    border-bottom: 1px solid lightgray;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.services-item {
    width: 33.33%;
    padding: 15px;
}

.services-item-inner {
    padding: 15px;
    border: 2px solid black;
}
</code>