ajout de texte descriptif sous les icônes

ludon89 · May 6, 2024 · ebfe5c5 · ebfe5c5
1 parent 2a5df25
commit ebfe5c5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -89,32 +89,40 @@ <h3 class="about_profession">Développeur web junior</h3>
         <h2 class="skills_h2">Mes Compétences</h2>
         <div class="skills_gridcontainer skills_gridcontainer_resp">
           <div title="HTML" class="skills_icons">
-            <i class="fa-brands fa-html5 fa-fw"></i>
+            <div><i class="fa-brands fa-html5 fa-fw"></i></div>
+            <p class="skills_description">HTML</p>
           </div>
           <div title="CSS" class="skills_icons">
-            <i class="fa-brands fa-css3-alt fa-fw"></i>
+            <div><i class="fa-brands fa-css3-alt fa-fw"></i></div>
+            <p class="skills_description">CSS</p>
           </div>
           <div title="JavaScript" class="skills_icons">
-            <i class="fa-brands fa-square-js fa-fw"></i>
+            <div><i class="fa-brands fa-square-js fa-fw"></i></div>
+            <p class="skills_description">JavaScript</p>
           </div>
           <div title="PHP" class="skills_icons">
-            <i class="fa-brands fa-php fa-fw"></i>
+            <div><i class="fa-brands fa-php fa-fw"></i></div>
+            <p class="skills_description">PHP</p>
           </div>
           <div title="SQL" class="skills_icons">
-            <i class="fa-solid fa-database fa-fw"></i>
+            <div><i class="fa-solid fa-database fa-fw"></i></div>
+            <p class="skills_description">SQL</p>
           </div>
           <div title="Wordpress" class="skills_icons">
-            <i class="fa-brands fa-wordpress fa-fw"></i>
+            <div><i class="fa-brands fa-wordpress fa-fw"></i></div>
+            <p class="skills_description">WordPress</p>
           </div>
           <div title="React" class="skills_icons">
-            <a href="https://react.dev/" target="_blank">
-              <i class="fa-brands fa-react fa-fw"></i>
-            </a>
+            <div><i class="fa-brands fa-react fa-fw"></i></div>
+            <p class="skills_description">
+              <a href="https://react.dev/">React</a>
+            </p>
           </div>
           <div title="Laravel" class="skills_icons">
-            <a href="https://laravel.com/" target="_blank">
-              <i class="fa-brands fa-laravel fa-fw"></i>
-            </a>
+            <div><i class="fa-brands fa-laravel fa-fw"></i></div>
+            <p class="skills_description">
+              <a href="https://laravel.com/">Laravel</a>
+            </p>
           </div>
         </div>
       </section>

diff --git a/styles/index.css b/styles/index.css
@@ -220,12 +220,13 @@ a:visited {
 
 .skills_icons {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   text-align: center;
   font-size: 5rem;
   width: auto;
   max-width: 100%;
-  height: 100px;
+  height: 120px;
 }
 
 .skills_gridcontainer {
@@ -242,9 +243,10 @@ a:visited {
   }
 }
 
-.skills_comingsoon {
+.skills_description {
   text-align: center;
-  font-size: x-small;
+  font-size: small;
+  margin: 0;
 }
 
 /* ===================================PROJETS=================================== */