corrijo imagen e iconos

andreacampog · Feb 3, 2024 · d3a0e5e · d3a0e5e
1 parent cbd6363
commit d3a0e5e
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 51 deletions.
diff --git a/app.js b/app.js
@@ -139,13 +139,14 @@ btnToogle.addEventListener("click",function(){
     let body = document.querySelector("body");
     if (body.classList.contains("dark-mode")){
         body.classList.remove("dark-mode");
-        img.setAttribute("src", "/icons/moon.png");
+        img.setAttribute("src", "./icons/moon.png");
     }else{
         body.classList.add("dark-mode");
-        img.setAttribute("src", "/icons/sun.png");
+        img.setAttribute("src", "./icons/sun.png");
     }});
-
+
+
 
 
 
-  
+
diff --git a/css/pc.css b/css/pc.css
@@ -1,6 +1,14 @@
+body{
+    max-width: 1680px;
+    margin: 0 auto;
+}
+
+
 main{
     display: flex;
     align-items: center;
+    padding-bottom: 3em;
+    margin-bottom: 1em;
 }
 
 .form__box{    
@@ -33,7 +41,7 @@ main{
 }
 .form__outbox--img{
     display: block;
-    background-image: url(/img/imagen_pc.jpg);
+    background-image: url(./icons/Loupe.png);
     margin-top: 2em;
 }
 
@@ -59,8 +67,11 @@ main{
 
 .hero__img{
     display: none;
+    margin-bottom: 1em;
 }
+
 footer section{
-    padding-top: 0;
     padding-bottom: 0;
+    padding-top: 0;
 }
+
diff --git a/icons/Loupe.png b/icons/Loupe.png
diff --git a/index.html b/index.html
@@ -4,15 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Encriptador</title>
-    <link rel="stylesheet" href="reset.css">
+
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
 
     <link rel="stylesheet" href="style.css"> 
     <link rel="stylesheet" href="/css/tablet.css" media="(min-width:768px)">
     <link rel="stylesheet" href="/css/pc.css" media="(min-width:1280px)">
-    <link rel="stylesheet" href="/css/pcmax.css" media="(min-width:1680px)">
 </head>
 
 <body class="light-mode">
@@ -65,7 +64,7 @@
         <section class="outbox-container" >
             <section class="form__outbox">
                 <div class="form__outbox--img" > 
-                    <img src="/img/imagen_pc.jpg" class="msg--img">
+                    <img src="./icons/Loupe.png" class="msg--img">
                 </div>
 
                 <section class="form__outbox--msg">

diff --git a/style.css b/style.css
@@ -1,24 +1,13 @@
 :root{
     --background-color:white;
-    --text-color:black; 
+    --text-color:#0A3871;
     --text-color-hover:red ; 
     --background-button: #052051;
     --text-color-button: white;
-
-
-
-    --dark-blue-500: #052051;
-    --dark-blue-400: #072B61;
-    --dark-blue-300:#0A3871;
-}
-
-@media(prefers-color-scheme: dark){
-    :root{
-        background-color:var(--fondo-oscuro);
-        color:var(--texto-claro);
-    }
-}
-
+    --box-shadow: 10px 14px 12px -10px rgba(0,0,0,0.33);
+    --box-shadow-header:  0px 20px 21px -17px rgba(0,0,0,1);
+}    
+
 *{  
     margin: 0;
     padding: 0;
@@ -33,30 +22,20 @@ html{
 
 body{
     color: var(--text-color);
-    background-color: var(--background-color); 
-
-}
-
-.dark-mode{
-    --background-color:black;
-    --text-color:white; 
-    --background-button:white;
-    --text-color-button:#0A3871;    
-    background-color:var(--background-color);
-    color:var(--texto-claro);
-
+    background-color: var(--background-color);     
 }
 
 header{
     width: 100%;
     min-width: 320px;
-    box-shadow: 10px 14px 12px -10px rgba(0,0,0,0.33);
+
 }
 nav{
     display: flex;  
     justify-content: space-around;
     align-items: center;   
     height: 80px;
+    box-shadow: var(--box-shadow-header);
 }
 
 .nav__menu{ 
@@ -71,6 +50,7 @@ nav{
     height: 30px;
     margin: 2em; 
     cursor: pointer;    
+    transition: 0.5s;
 }
 
 
@@ -84,20 +64,19 @@ nav{
     display: none;
     width: 200px;      
     top: 80px;
-    background:var(--fondo-blanco);     
+    background:var(--background-color);     
     border-radius: 0 0 20px 0;
+    box-shadow: var(--box-shadow)
 }  
 
 .menu--info-project--desplegado ul{
     visibility: hidden;
     display: flex;    
-    justify-content: space-between;    
-
+    justify-content: space-between;  
 }
 
 .menu--info-project--desplegado ul li{
-    margin: 0.5em;
-
+    margin: 0.5em;      
 }
 
 .menu--info-project--desplegado ul li a , .menu--info-proyect ul li a{ 
@@ -108,15 +87,13 @@ nav{
 
 .menu--info-project--desplegado ul li a:hover{    
     color:var(--text-color-hover);
-    border-radius: 5px;
-
+    border-radius: 5px;     
 }
 
 .menu--info-proyect ul li a:hover{    
     color:var(--text-color-hover);
 }
 
-
 .menu--info-proyect ul{
     display: flex;
     flex-direction: column;    
@@ -127,7 +104,7 @@ nav{
 
 .menu--info-proyect ul li{
     margin: 0.5em;
-    padding: 0.5em;
+    padding: 1em;
 }
 
 .menu-abierto{
@@ -149,12 +126,21 @@ nav{
 
 .nav__icons a{
     width: 80px;   
-    height: auto;       
+    height: auto;  
+
 }
 
 .nav__icons img{
     width: 70%;
-    margin: 0.5em auto;       
+    margin: 0.5em auto;         
+    transition: 0.5s;  
+    border-radius: 50px;
+
+}
+
+.nav__icons img:hover{
+    transform: scale(1.1);
+
 }
 
 main{
@@ -167,7 +153,6 @@ main{
     min-width: 320px;
     margin: 0 auto;
     text-align: center;  
-
 
 }
 
@@ -201,6 +186,7 @@ main{
 }
 
 .form__inbox p{    
+    max-width: 70%;
     padding-left: 3em;
     padding-top: 1em;
     font-size: 1.2rem;
@@ -220,7 +206,7 @@ main{
     cursor: pointer;
     border: var(--dark-blue-300) solid #000;
     transition: 1s background;
-    box-shadow: 16px 20px 18px -8px rgba(0,0,0,0.33);
+    box-shadow: var(--box-shadow)
 }
 
 .btn:hover{    
@@ -416,3 +402,12 @@ footer .left ul:first-child{
 .right a:hover{
     color:var(--text-color-hover);
 }
+
+.dark-mode{
+    --background-color:black;
+    --text-color:white; 
+    --background-button:white;
+    --text-color-button:#0A3871;    
+    --box-shadow: 12px 7px 5px 0px rgba(88,102,130,0.49);
+    --box-shadow-header:0px 20px 21px -17px rgba(255,255,255,0.5);       
+}