Merge pull request #1 from natipral/dev

Optimización de estilos

Author: diana-delarosa

assets/css/styles.css

@@ -1,21 +1,22 @@
 /*===== GOOGLE FONTS =====*/
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
+
 /*===== VARIABLES CSS =====*/
 :root {
   --header-height: 3rem;
   --font-semi: 600;
   /*===== Colores =====*/
-  /*Purple 260 - Red 355 - Blue 224 - Pink 340*/
+  /* Purple 260 - Red 355 - Blue 224 - Pink 340 */
   /* HSL color mode */
   --hue-color: 6;
   --first-color: hsl(var(--hue-color), 100%, 85%);
   --second-color: hsl(var(--hue-color), 56%, 12%);
   /*===== Fuente y tipografia =====*/
-  --body-font: 'Poppins', sans-serif;
+  --body-font: "Poppins", sans-serif;
   --big-font-size: 2rem;
   --h2-font-size: 1.25rem;
-  --normal-font-size: .938rem;
-  --smaller-font-size: .75rem;
+  --normal-font-size: 0.938rem;
+  --smaller-font-size: 0.75rem;
   /*===== Margenes =====*/
   --mb-2: 1rem;
   --mb-4: 2rem;
@@ -31,12 +32,14 @@
     --big-font-size: 3.5rem;
     --h2-font-size: 2rem;
     --normal-font-size: 1rem;
-    --smaller-font-size: .875rem;
+    --smaller-font-size: 0.875rem;
   }
 }
 
 /*===== BASE =====*/
-*, ::before, ::after {
+*,
+::before,
+::after {
   box-sizing: border-box;
 }
 
@@ -51,7 +54,9 @@ body {
   color: var(--second-color);
 }
 
-h1, h2, p {
+h1,
+h2,
+p {
   margin: 0;
 }
 
@@ -83,7 +88,7 @@ img {
 
 .section-title::after {
   position: absolute;
-  content: '';
+  content: "";
   width: 64px;
   height: 0.18rem;
   left: 0;
@@ -106,7 +111,7 @@ img {
   margin-right: var(--mb-2);
 }
 
-.l-header {
+.header {
   width: 100%;
   position: fixed;
   top: 0;
@@ -134,7 +139,7 @@ img {
     height: 100%;
     padding: 2rem;
     background-color: var(--second-color);
-    transition: .5s;
+    transition: 0.5s;
   }
 }
 
@@ -153,7 +158,7 @@ img {
 
 .nav__link:hover::after {
   position: absolute;
-  content: '';
+  content: "";
   width: 100%;
   height: 0.18rem;
   left: 0;
@@ -171,10 +176,10 @@ img {
   cursor: pointer;
 }
 
-/*Active menu*/
+/* Active menu */
 .active::after {
   position: absolute;
-  content: '';
+  content: "";
   width: 100%;
   height: 0.18rem;
   left: 0;
@@ -238,15 +243,15 @@ img {
   width: 360px;
 }
 
-/*BUTTONS*/
+/* BUTTONS */
 .button {
   display: inline-block;
   background-color: var(--first-color);
   color: #fff;
-  padding: .75rem 2.5rem;
+  padding: 0.75rem 2.5rem;
   font-weight: var(--font-semi);
-  border-radius: .5rem;
-  transition: .3s;
+  border-radius: 0.5rem;
+  transition: 0.3s;
 }
 
 .button:hover {
@@ -269,7 +274,7 @@ img {
 
 .about__img img {
   width: 200px;
-  border-radius: .5rem;
+  border-radius: 0.5rem;
 }
 
 /* ===== SKILLS =====*/
@@ -292,9 +297,9 @@ img {
   align-items: center;
   position: relative;
   font-weight: var(--font-semi);
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
   margin-bottom: var(--mb-4);
-  border-radius: .5rem;
+  border-radius: 0.5rem;
   box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
 }
 
@@ -314,11 +319,12 @@ img {
   left: 0;
   bottom: 0;
   background-color: var(--first-color);
-  height: .25rem;
-  border-radius: .5rem;
+  height: 0.25rem;
+  border-radius: 0.5rem;
   z-index: var(--z-back);
 }
 
+/* MIS HABILIDADES */
 .skills__html {
   width: 95%;
 }
@@ -336,7 +342,7 @@ img {
 }
 
 .skills__img {
-  border-radius: .5rem;
+  border-radius: 0.5rem;
 }
 
 /* ===== WORK =====*/
@@ -346,7 +352,7 @@ img {
 
 .work__img {
   box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
-  border-radius: .5rem;
+  border-radius: 0.5rem;
   overflow: hidden;
 }
 
@@ -365,7 +371,7 @@ img {
   font-size: var(--normal-font-size);
   font-weight: var(--font-semi);
   padding: 1rem;
-  border-radius: .5rem;
+  border-radius: 0.5rem;
   border: 1.5px solid var(--second-color);
   outline: none;
   margin-bottom: var(--mb-4);
@@ -442,7 +448,7 @@ img {
     text-align: initial;
   }
   .skills__container {
-    grid-template-columns: .7fr;
+    grid-template-columns: 0.7fr;
     justify-content: center;
     column-gap: 1rem;
   }
@@ -451,13 +457,13 @@ img {
     column-gap: 2rem;
     padding-top: 2rem;
   }
+  .contact__container {
+    justify-items: center;
+  }
   .contact__form {
     width: 360px;
     padding-top: 2rem;
   }
-  .contact__container {
-    justify-items: center;
-  }
 }
 
 @media screen and (min-width: 768px) {

index.html

@@ -13,7 +13,7 @@
     </head>
     <body>
         <!--===== HEADER =====-->
-        <header class="l-header">
+        <header class="header">
             <nav class="nav bd-grid">
                 <div>
                     <a href="#" class="nav__logo">Andrea</a>
@@ -35,7 +35,7 @@
             </nav>
         </header>
 
-        <main class="l-main">
+        <main>
             <!--===== HOME =====-->
             <section class="home bd-grid" id="home">
                 <div class="home__data">
@@ -64,7 +64,7 @@ <h1 class="home__title">Hola,<br>Soy <span class="home__title-color">Andrea</spa
             </section>
 
             <!--===== ABOUT =====-->
-            <section class="about section " id="about">
+            <section class="about section" id="about">
                 <h2 class="section-title">Acerca de mi</h2>
 
                 <div class="about__container bd-grid">
@@ -81,7 +81,7 @@ <h2 class="about__subtitle">Soy Andrea</h2>
 
             <!--===== SKILLS =====-->
             <section class="skills section" id="skills">
-                <h2 class="section-title">Habilides</h2>
+                <h2 class="section-title">Habilidades</h2>
 
                 <div class="skills__container bd-grid">          
                     <div>