CSS

/*This is just my second website, I'm sorry for how messy it is.
I promise I'll use less classes in the future and get rid of all that useless stuff :)*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'rounded elegance', Arial, sans-serif;
}

@font-face {
    font-family: 'rounded elegance';
        src: url('rounded_elegance-webfont.woff') format('woff'),
             url('rounded_elegance-webfont.ttf') format('truetype'),
             url('rounded_elegance-webfont.woff2') format('woff2')
}

::selection {
    background: rgb(0, 0, 0); /* WebKit/Blink Browsers */
    color: white
}
::-moz-selection {
    background: rgb(0, 0, 0); /* Gecko Browsers */
    color: white
}

h1 {
    margin-left: 5rem;
    margin-top: 3rem;
    margin-bottom: -4rem;
    font-size: 4rem
}

h2 {
    font-size: 1.2rem;
    color: black;
    text-align: justify;
}

h3 {
    font-size: 4rem
}

nav {
    background: rgb(0, 0, 0);
    background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0.817) 61%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.817) 61%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.817) 61%, rgba(0, 0, 0, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#050059",endColorstr="#050059",GradientType=1);
    position: fixed;
    z-index: 99;
    width: 100%
}

nav img {
    z-index: 99;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 3.5rem;
    padding: 0.7rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

/*-----------------------------------------------*/

.face-hero img {
    width: 100%
}

.face-hero h3{
    color: white;
    font-weight: bold;
    vertical-align: middle;
    text-align: left;
    top: 1px;
}

.face-text, .face-bottom {
    line-height: 8vw;
    font-size: 9vw;
    padding: 10vw 6vw;
}
.face-bottom {
    margin-top: -3rem;
}
.hey-text {
    font-size: 4vw;
    margin: 55rem 70vw;
}

/*-----------------------------------------------*/

.intro-text {
    position: relative;
    color: white;
    font-weight: 200
}
.intro-title {
    margin-top: -20rem;
    color: white;
}

/*-----------------------------------------------*/

.web-ex-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    background-color: rgb(235, 235, 235);
}

.web-ex1 img {
    width: 100%;
    filter: brightness(70%)
}
.web-ex1 h3, h2 {
    padding: 5rem;
    color: white;
    font-weight: bold;
    position: absolute;
    text-align: left;
    white-space: normal;
}
.web-ex1 h3 {
    top: 0.5rem;
    margin-left: 0
}
.web-ex1 h2 {
    top: 16rem;
    z-index: 10;
    width: 50%;
}

.web-ex2 img {
    width: 100%;
    filter: brightness(70%)
}
.web-ex2 h3, h2 {
    padding: 5rem;
    color: white;
    font-weight: bold;
    position: absolute;
    text-align: left;
}
.web-ex2 h3 {
    top: 0.5rem;
    margin-left: 0
}
.web-ex2 h2 {
    top: 16rem;
}

/*-----------------------------------------------*/

.web-ex1-div img {
    transition: transform 0.15s;
    transition-timing-function: ease-in-out;
}

.web-ex1-div:hover img {
    filter: brightness(40%);
    transform: scale(0.97, 0.97)
}

.web-ex1-div:hover .web-ex1{
    cursor: pointer;
}

.web-ex2-div img{
    transition: transform 0.1s;
    transition-timing-function: ease-in-out
}

.web-ex2-div:hover img {
    filter: brightness(40%);
    transform: scale(0.97, 0.97)
}

.web-ex2-div:hover .web-ex2{
    cursor: pointer
}
/*-----------------------------------------------*/

.logo-showcase-top {
    margin-top: 5.5rem;
}

.logo-showcase-top h2 {
    position: relative;
    color: black;
    font-weight: 200;
    margin-bottom: -2rem
}

.logo-showcase-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    margin-bottom: -1rem;
    margin-right: 4rem
}

.logo-showcase-list img {
    width: 3.7rem;
    margin-bottom: 4rem;
    margin-left: 5rem;
    transition: transform 0.1s;
    transition-timing-function: ease-in-out;
    z-index: 5;
}

.logo-showcase-list div {
    display: none
}

.logo-showcase-big {
    background-color: rgb(235, 235, 235);
}

.logo-showcase-list img:hover {
    cursor: pointer;
    transform: scale(1.3, 1.3);
}

.logo-showcase-big img {
    width: 100%
}

.logo-showcase-big :not(.showthat) {
    display: none;
}

/*-----------------------------------------------*/

.games-showcase-intro h2 {
    position: relative;
    color: black;
    font-weight: 200
}

.games-showcase-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: rgb(235, 235, 235)
}

.games-showcase-list img {
    position: relative;
    height: 100%;
    transition: transform 0.15s;
    transition-timing-function: ease-in-out;
    filter: brightness(60%);
    overflow: visible;
    width: 100%
}

.games-showcase-list h2, h3 {
    position: absolute;
    color: white;
    z-index: 2;
    margin: 4rem;
}

.games-showcase-list h3 {
    font-size: 3rem;
    padding-bottom: 2rem;
    font-weight: bold;
}

.games-showcase-list h2 {
    margin-left: -1rem;
    width: 50%
}

.games-showcase-list a {
    cursor: pointer;
}

.game1:hover img {
    filter: brightness(40%);
    transform: scale(0.97, 0.97);
}
.game2:hover img {
    filter: brightness(40%);
    transform: scale(0.97, 0.97);
}
.game3:hover img {
    filter: brightness(40%);
    transform: scale(0.97, 0.97);
}
.game4:hover img {
    filter: brightness(40%);
    transform: scale(0.97, 0.97);
}

/*-----------------------------------------------*/

.footer {
    display: grid;
    background-color: rgb(0, 0, 0);
    height: 3rem;
    grid-template-areas: "aa cc bb";
    grid-template-columns: 1fr 1fr 1fr;
    position: relative;
    filter: brightness(50%);
}

.footer img {
    height: 1.5rem;
    margin: auto;
    grid-area: cc;
    cursor: pointer;
    transition: transform 0.1s;
    transition-timing-function: ease-in-out;
}

.footer img:hover {
    transform: translateY(-0.3rem);
}

.footer h2 {
    padding: 0.8rem;
    font-size: 0.85rem;
}

.aa {
    grid-area: aa;
    cursor: pointer;
    margin-left: 1rem;
}
.bb {
    margin-left:auto;
    grid-area: bb;
    margin-right: 8rem;
}

/*-----------------------------------------------*/

.conclusion {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height: 23rem;
}

.conclusion img {
    height: 10rem;
    filter: invert();
    margin-top: 6rem;
}

.phone {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.phone:hover {
    background-color: black;
    cursor: pointer;
}
.phone:hover img {
    filter: none
}
.mail {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.mail:hover {
    background-color: black;
    cursor: pointer;
}
.mail:hover img {
    filter: none
}
.smile {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.smile:hover {
    background-color: black;
    cursor: pointer;
}
.smile:hover img {
    filter: none
}
/*-----------------------------------------------*/

@media screen and (max-width: 1070px) {
    h1 {
        font-size: 4rem;
        margin-top: 3.2rem;
        margin-bottom: -3rem
    }

    h2 {
        font-size: 1.5rem;
        margin-bottom: 2.5vh
    }
    h3 {
        font-size: 8rem
    }
    nav img {
        height: 7rem;
        padding: 2rem
    }
/*----------------------------*/
    .face-hero {
        height: 100%
    }
    .face-text {
        padding-top: 12rem;
        padding-left: 1.5rem;
        line-height: 4.5rem;
    }
    .face-bottom {
        padding-top: 4rem;
        margin-top: 4rem;
        padding-left: 1.5rem
    }
    .intro-title {
        margin-top: -20rem;
        transform: translateY(-7rem);
    }
    .intro-text {
        transform: translateY(-7rem);
    }
/*----------------------------*/
    .web-ex1 h3 {
        margin-top: 3rem
    }
    .web-ex1 h2 {
        width: 100%;
        margin-top: -8rem
    }
    .web-ex2 h3 {
        margin-top: 44rem
    }
    .web-ex2 h2 {
        margin-top: 32.4rem
    }
    .web-ex-container {
        grid-template-columns: 1fr
    }
/*----------------------------*/
    .logo-showcase-list {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        margin-right:0 ;
    }

    .logo-showcase-top h2 {
        margin-bottom: 2.5rem
    }


    .logo-showcase-top {
        margin-top: -6rem;
    }

    .logo-showcase-list img {
        width: 8rem;
        margin-top: -4rem;
        padding: 1rem;
        margin-left: 2rem
    }

    .logo-showcase-list div {
        display: inline-block
    }
/*----------------------------*/
    .games-showcase-list {
        grid-template-columns: 1fr
    }
    .games-showcase-list img {
        transform: translateY(0.5rem);
    }
    .games-showcase-list h2 {
        width: 100%;
        margin-top: 8rem
    }
    .games-showcase-list h3 {
        font-size: 4rem;
        margin-top: 7rem
    }
/*-----------------------------------------------*/
    .footer {
        height: 6rem;
    }
    .footer h2 {
        font-size: 1.5rem;
        margin-left: 4rem;
        margin-top: 2rem;
        margin-bottom: 0rem;
        padding: 0
    }
    .footer img {
        height: 2.5rem;
    }
    .bb {
        margin-right: 17.5rem
    }
}
/*----------------------TODO; change host for N on top of page, make smile page -------------------------*/

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Nathan Francois' resume</title>
        <link href="main.css" rel="stylesheet" type="text/css">
        <link rel="icon" href="noirextreme.ico" type="image/x-icon">
        <meta charset="utf-8">
    </head>
    <body>
        <nav>
            <img src="https://i.postimg.cc/qM9ZVtL0/9f-EPm0d-62x.png" onclick='location.href="index.html"' title="home">
        </nav>
        <div class="face-hero">
            <div>
                <img src="herobanner_pretty.png">
                <h3 class="face-text">NATHAN<br/> FRANÇOIS</h3>
                <h3 style="display: none" class="hey-text">hey</h3>
            </div>
        </div>
        <div class="intro-container">
            <h1 class="intro-title">ABOUT</h1>
            <h2 class="intro-text">
                I'm 18 from Wavre, I study graphic design at IPES (6th grade of humanités). <br/>
                I love all things design, I already have a year and a half of training behind me, more about that below.<br/>
                I'm looking for an internship in something design related, web, paper, anything really, I mainly want to learn new stuff.<br/>
            </h1>
        </div>
<!--    <div class="web-ex-container">
            <div class="web-ex1-div" onclick='location.href="https://www.noirextreme.com/irsl_static"'>
                <div class="web-ex1">
                    <img src="Screenshot_2019-09-15 IRSL Racing.jpg">
                    <h3>IRSL Racing</h3>
                    <h2>
                        IRSL is a made up company for a game I'm playing called starbase, I organize and livestream space races. <br/>
                        The website is used to display news about races, eg. placements and upcoming competitions as well as a betting platform using in-game credits.<br/>
                        (It's just a static placeholder while I figure out how to use Drupal.)<br/>
                    </h2>
                </div>
            </div>
            <div class="web-ex2-div" onclick='location.href="https://www.noirextreme.com/soon"'>
                <div class="web-ex2">
                    <img src="Screenshot_2019-09-15 IRSL Racing.jpg">
                    <h3>Attrap</h3>
                    <h2>
                        Attrap is another made up company, this one is based on one of my sister's ideas to make a VR controller which would limit the user's grip when they grab an object in-game.<br/>
                        The store section is obviously placeholder, but if the project evolves further it might end up being functional.<br/>
                        (Also placeholder)
                    </h2>
                </div>
            </div>
        </div>
-->
        <div class="logo-showcase">
            <div class="logo-showcase-top">
                <h1>DESIGN</h1>
                <h2>
                    Here's a selections logos I've made so far! <br/>
                    I've used Adobe Illustrator, Xd and GIMP to make these, but for other projects I've also used InDesign and Photoshop.
                </h2>
                <div class="logo-showcase-list">
                    <div></div>
                    <img onclick="logo_show('1')" src="FFFichier 88@2x-8.png">
                    <div></div>
                    <img onclick="logo_show('2')" src="VVVFichier 84@2x-8.png">
                    <div></div>
                    <img onclick="logo_show('3')" src="amicaleFichier 83@2x-8.png">
                    <div></div>
                    <img onclick="logo_show('4')" src="EAT OUT.png">
                    <div></div>
                    <div></div>
                    <div></div>
                    <img onclick="logo_show('5')" src="schools.png">
                    <div></div>
                    <img onclick="logo_show('6')" src="donut.png">
                    <div></div>
                    <img onclick="logo_show('7')" src="pilar.png">
                    <div></div>
                    <img onclick="logo_show('8')" src="IRSL_small.png">
                    <div></div>
                </div>
                <div id='0' class="logo-showcase-big">
                    <img id="1" src="FF bigg.png">
                    <img id="2" class="showthat" src="VVVFichier 1@2x-8.png">
                    <img id="3" src="amicaleFichier 1@2x-8.png" style="padding: 2vw">
                    <img id="4" src="eat outFichier 4@2x-8.png">
                    <img id="5" src="JBFichier 1@2x-8.png" style="padding: 2vw">
                    <img id="6" src="donut big.png" style="padding: 2vw">
                    <img id="7" src="Pilar bigg.png">
                    <img id="8" src="IRSL_big.png">
                </div>
            </div>
        </div>
        <div class="games-showcase">
            <div class="games-showcase-intro">
                <h1>GAMES</h1>
                <h2>I've played around with gamedev quite a bit, take a look.</h2>
            </div>
            <div class="games-showcase-list">
                <a class="game1" href="https://www.youtube.com/watch?v=UqlHen4KJqk" target="_blank" rel="noopener noreferrer">
                    <h3>Angels Fall Flat</h3>
                    <h2>This game is a space dogfighting game I'm making, so far I have movement down, next up is hitboxes and shooting.</h2>
                    <img src="MmXwlVP_4x.png">
                </a>
                <a class="game2" href="https://www.noirextreme.com/soon" target="_blank" rel="noopener noreferrer">
                    <h3>Evangelion game</h3>
                    <h2>A physics based robot fighting game I have yet to work on, you can look at the art I've already made though.</h2>
                    <img src="PHMoT8m_2x.png">
                </a>
                <a class="game3" href="https://www.lexaloffle.com/bbs/?tid=34806" target="_blank" rel="noopener noreferrer">
                    <h3>De-TTD</h3>
                    <h2>This game is a small demake (remaking a game from scratch often with a twist or limitation, in this case its the pico8 engine) of Transport Tycoon, ironically there is currently no form of transportation included.</h2>
                    <img src="Screenshot_20190928_001014.png">
                </a>
                <a class="game4" href="https://www.tt-forums.net/viewtopic.php?f=26&t=76964" target="_blank" rel="noopener noreferrer">
                    <h3>The Belgian Trainset</h3>
                    <h2>A mod (game modification) for the game OpenTTD featuring belgian trains of my making. It has been completed with the help of another modder going by "Neko". As of writing this it's been downloaded over 23.5k times.</h2>
                    <img src="Screenshot from 2018-11-20 21-25-33.png">
                </a>
            </div>
        </div>
        <div class="conclusion">
            <a class="phone" href="https://www.noirextreme.com/contact" target="_blank" rel="noopener noreferrer">
                <img id="8" src="phone.png">
            </a>
            <a class="mail" href="https://www.noirextreme.com/contact" target="_blank" rel="noopener noreferrer">
                <img id="8" src="mail.png">
            </a>
            <a class="smile" href="https://www.noirextreme.com/soon" target="_blank" rel="noopener noreferrer">
                <img id="8" src="smile.png">
            </a>
        </div>
        <div class="footer">
            <div class="aa">
                <h2 onclick='location.href="https://www.noirextreme.com/soon"'>source code</h2>
            </div>
            <img class="cc" src="QeTMX7b_71x.png" onclick="topFunction()" title="back to top" draggable="false">
            <div class="bb">
                <h2>by me, 2019</h2>
            </div>
        </div>
    </body>
</html>

<script>
    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
        }
</script>
<script>
function logo_show(id) {
    var nodes = document.getElementById('0').children;
for(var i=0; i<nodes.length; i++) {
    if (nodes[i].nodeName.toLowerCase() == 'img') {
         nodes[i].style.display = "none";
     }
}
    document.getElementById(id).style.display = "block";
}
</script>