did the thing

08 Sep, 2020

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>david brandes</title>

    <link rel="stylesheet" href="index.css">
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@600&display=swap" rel="stylesheet">

</head>
<body>
    <div id="middleContainer">
        <h2 class="text">briefing</h2>
        <p class="text">hello there! my name is <u>david brandes</u> and I create cool stuff, I mostly do coding but I also have some skills in video/photo editing. my favorite software for editing is the adobe package w/ photoshop, adobe premiere, after effects. programming skills that i bear are coming in java, python, PHP and javascript; I do understand the concepts and theories of computer science. since i was young i had a strong interest in coding and creating stuff, i want my career to go in the web development direction but i also want to do some software engineering. </p>

        <h2 class="text">self-evaluation</h2>
        <div id="self-evaluation">  
            <h3 class="text">language:</h3>
            <p class="text">english: fluent</p>
            <p class="text">german: native language</p>
            <h3 class="text">media skill:</h3>
            <p class="text">adobe premiere: still learning</p>
            <p class="text">photoshop: still learning</p>
            <h3 class="text">coding languages:</h3>
            <p class="text">java: good</p>
            <p class="text">python: good</p>
        </div>

        <h2 class="text">connection</h2>
        <a href="https://github.com/brandesdavid" target="_blank" class="text">github</a>
    </div>
</body>
</html>

index.css

body {
    background: #040F16;
}
h2 {
    border-color: #88498F;
    border-width: 4px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-style: solid;
}
h3 {
    text-decoration: underline;
}
.text {
    font-family: 'Inconsolata', monospace;
    color: #040F16;
}
#middleContainer{

    margin: 0;
    background: #EB9FEF;
    padding: 2%;

    /*Mit position:absolute kann man Elemente losgelöst vom Textfluss positionieren, an eine Stelle, die per left, right, top und bottom festgelegt wird*/
    position: absolute;

    top: 50%;
    left: 50%;
    margin-right: -50%;

    /*text soll sich transformieren basierend auf browser größe*/
    transform: translate(-50%, -50%);

    text-align: center;
    width: 40%;
    max-width: 40%;
    min-width: 20%;
    margin-left: auto;
    margin-right: auto;
}
#self-evaluation {
    line-height: 3px;
}