Added icons to contact buttons

Elgemp4 · Elgemp4 · commit ff2621ff01ca · 2023-06-18T19:01:24.000+02:00
diff --git a/CSS/mainstyle.css b/CSS/mainstyle.css
@@ -266,6 +266,9 @@ a{
     transition: transform 0.2s, box-shadow 0.1s;
 }
 
+.button > i{
+    margin-right: 10px;
+}
 .button:hover{
     transform: scale(1.03) translateY(-3px) !important;
     box-shadow: #10f49c 0 3px 10px 0;
@@ -297,7 +300,4 @@ a{
 
 .banner img{
 	width: 80px;
-}
-
-
-
+}
diff --git a/index.html b/index.html
@@ -5,21 +5,9 @@
     <title>Site perso Elgem</title>
     <link rel="stylesheet" href="/CSS/reset.css">
     <link rel="stylesheet" href="/CSS/mainstyle.css">
+    <script src="https://kit.fontawesome.com/0f0aafe960.js" crossorigin="anonymous"></script>
 </head>
 <body>
-    <!--
-    <nav class="navigation_bar">
-        <p>Emilien Marquegnies</p>
-        <a href="index.html">Accueil</a>
-        <a href="projets.html">Projets</a>
-        <a class="button" href="contact.html">Me Contacter</a>
-    </nav>
-    <header>
-        <h1>Bienvenue</h1>
-        <p>
-            Vous vous trouvez ici sur mon site personnel. Celui-ci me sert de terrain de jeu et de portfolio, ainsi vous retrouverez de tout et n'importe quoi ici : du contenu pédagogique jusqu'à la description d'un de mes projets ou d'une page web d'entrainement.
-        </p>
-    </header> -->
     <div class="container">
         <section class="panel presentation">
             <div class="description">
@@ -43,17 +31,17 @@ <h1>Elgem </h1>
                 <hr>
                 <h2>Me contacter</h2>
                 <div class="contact_infos">
-                    <a class="button mail">M'envoyer un mail</a>
-                    <a class="button discord">Me contacter sur Discord</a>
-                    <a class="button github" href="https://github.com/Elgemp4" target="_blank">Me contacter sur Github</a>
+                    <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">
             <h1>Mes projets de programmation</h1>
             <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>
