Responsive v1.2

AmbrizAlberto · Apr 2, 2024 · ba45038 · ba45038
1 parent 772f539
commit ba45038
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 37 deletions.
diff --git a/app/css/main.css b/app/css/main.css
@@ -20,7 +20,6 @@ html{
 /* DATOS PERSONALES */
 
 .personaldata {
-    transition: opacity 1s ease-in-out;
     margin-top: 7%;
     display: flex;
     width: 100%;

diff --git a/app/css/mainrespons.css b/app/css/mainrespons.css
@@ -70,65 +70,60 @@
   @media screen and (max-width: 480px) {
     /* Estilos para teléfonos celulares */
     html{
-        background-image: linear-gradient(to bottom, #ff7e5f 5%, #ff7f5f 10%, #31405fe7 20%, #31405f 97%, #7bccff 100%);
-    }
-    .main{
-        margin: 0%;
-        margin-left: 2%;
+        background-image: linear-gradient(to bottom, #ff7e5f 5%, #ff7f5f 28%, #31405fe7 40%, #31405f 97%, #7bccff 100%);
     }
     .personaldata{
-        margin-left: -5%;
-        width: 110%;
-        margin-top: 2%;
+        margin-top: 18%;
+        flex-wrap: wrap;
+        text-align: left;
     }
-    .aboutme{
-        font-size: 60%;
+    .datos1{
+        margin-left: -15%;
+        width: 100%;
+        font-size: 200%;
     }
-    .nombre{
-        font-size: 150%;
+    .datos2{
+        margin-top: 10%;
+        margin-left: 5%;
+        width: 100%;
+        font-size: 200%;
+    }
+    .lenguajes{
+        margin-top: 40%;
     }
     .lenguajes h2{
-        margin: auto;
-        margin-left: 20%;
-        font-size: 100%;
-        margin-bottom: 10%;
+        margin-top: 10%;
+        font-size: 200%;
     }
-    .lenguajes ul {
-        margin-left: -10%;
-        display: flex;
-        font-size: 30%;
+    .lenguajes ul{
+        flex-wrap: wrap;
     }
     .lenguajes li{
-        margin: 0 7px;
+        margin: 20px 10px; /* Añade un margen entre los elementos de la lista */
+        font-size: 200%;
     }
-
     .lenguajes li img{
-        width: 30px;
-        height: 30px;
+        width: 100px;
+        height: 100px;
+        margin: auto;
     }
-    .lenguajes li img:hover {
-        margin-top: -2px;
-        width: 35px;
-        height: 35px;
+    .projects{
+        font-size: 200%;
     }
     .projects h2{
-        margin-left: 10%;
+        margin-left: 5%;
         font-size: 150%;
     }
     .grid-containerprj{
-        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Establece columnas con un mínimo de 200px y se ajustan automáticamente */
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Establece columnas con un mínimo de 200px y se ajustan automáticamente */
     }
     .container-project{
         margin-top: -5%;
         margin-bottom: -5%;
         font-size: 50%;
     }
     .container-project .nameprj{
-        font-size: 200%;
-    }
-    .container-project .github{
-        display:inline;
-        color: rgb(0, 0, 0);
-        transition: 1000ms;
+        font-size: 150%;
     }
+
   }