index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Site perso Elgem</title>
    <link rel="stylesheet" href="./CSS/mainstyle.css">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
    <script src="https://kit.fontawesome.com/0f0aafe960.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <section class="panel presentation">
            <div class="description">
                <div class="hero">
                    <h1>Elgem </h1>
                    <div class="competences">
                        <div class="competence">C#</div>
                        <div class="competence">Java</div>
                        <div class="competence">JavaScript</div>
                    </div>
                </div>


                <p>
                    (Site en construction !)
                    Je suis un simple étudiant en informatique passionné par ce qu'il fait.
                    J'aime toucher à tout et ça peut sûrement se voir sur ce site !
                    Le design du site changera certainement au fil du temps, je suis encore en train de chercher ce qui me convient le mieux.
                    Bonne visite !
                </p>
            </div>
            <img src="/images/Logo.svg" alt="Logo de Elgem" class="logo">
            <div class="contact">
                <hr>
                <h2>Me contacter</h2>
                <div class="contact_infos">
                    <a class="button mail"><i class="fa-solid fa-envelope"></i>Mail</a>
                    <a class="button discord"><i class="fa-brands fa-discord"></i>Discord</a>
                    <a class="button github" href="https://github.com/Elgemp4" target="_blank"><i class="fa-brands fa-github"></i>Github</a>
                </div>
            </div>
        </section>
        <section class="panel programmation">
            <div class="title">
                <h1>Mes projets de programmation</h1>
            </div>
            <div class="projects">
                <div class="slider no_scroll_bar">
                    <button class="scroll_right"></button>
                    <div class="card"><img src="/images/Tetris.jpeg" alt="">
                        <div class="card_content">
                            <h2 class="back_blur">Tetris</h2>
                            <p class="back_blur">Un simple Tetris fait en Unity</p>
                        </div>
                    </div>
                    <div class="card"><img src="https://placehold.co/600x400" alt="">
                        <div class="card_content">
                            <h2 class="back_blur">Titre</h2>
                            <p class="back_blur">Description</p>
                        </div>
                    </div>
                    <div class="card"><img src="https://placehold.co/600x400" alt="">
                        <div class="card_content">
                            <h2 class="back_blur">Titre</h2>
                            <p class="back_blur">Description</p>
                        </div>
                    </div>
                    <div class="card"><img src="https://placehold.co/600x400" alt="">
                        <div class="card_content">
                            <h2 class="back_blur">Titre</h2>
                            <p class="back_blur">Description</p>
                        </div>
                    </div>
                </div>
            </div>

        </section>
        <section class="panel">
            <h1>Mes projets "éducatifs"</h1>
        </section>
        <section class="panel">
            <h1>Bric à brac</h1>
        </section>
    </div>

</body>
</html>