Portfolio

====== LU01.L01 - Portfolio ====== ===== HTML =====





    
    
    Portfolio
    


    
        
           Kamil Demirci
        
        
            
                
                    Home
                
                
                    Über mich
                
                
                    Portfolio
                
                
                    News
                
                
                    Kontakt
                
            
        
    

    
        
            Hi! Mein Name ist Kamil Demirci. Schön, dass du auf meine Webseite gelandet bist. Hier findest du Informationen über mich und meine abgeschlossenen Projekte.
            
                Button 1 →
                Button 1 →
                Button 1 →
                Button 1 →
                Button 1 →
                Button 2 →
            
        
        
            
        
    

    
        
            Über mich
            Text
        
        
            HTML
            
                90%
            
            CSS
            
                80%
            
            PHP
            
                70%
            
            JS
            
                50%
            
        
    

    
        
            
                
                Marketing
                Text
            
        
        
            
                
                Marketing
                Text
            
        
        
            
                
                Marketing
                Text
            
        
        
            
                
                Marketing
                Text
            
        
        
            
                
                Marketing
                Text
            
        
        
            
                
                Marketing
                Text

===== 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;
}