20240627_001

Author: juangralarg

Entregas/Entrega3/css/estilosCarrito.css

@@ -0,0 +1,48 @@
+:root{
+    --color-acento: rgb(124, 20, 16);
+    --color-link: red;
+    --color-text: rgb(26, 23, 56);
+    --color-acento-claro: rgb(18, 18, 236);
+}
+html{
+    font-family: 'Lucida Sans', 'Lucida Grande';
+}
+a{
+    text-decoration: none;
+    color: var(--color-text);
+}
+a:hover:not(carrito:hover){
+    color: var(--color-acento);
+    font-weight: bold;
+}
+header nav{
+    display: flex; /* Nodo al lado del otro */
+    justify-content: space-between;
+    margin: 0 30px;
+}
+header nav div{
+    display: flex; /* Nodo al lado del otro */
+    align-items: center;
+    gap: 30px;/*  Separa iconos NAV */
+    position: relative; /* Relatico al numerode items del carrito (numero-carrito) */
+}
+#numero-carrito{
+    background-color: var(--color-link);
+    border-radius: 100%; /* Redondea el fondo */
+    display:inline-block;
+    width: 20px;
+    line-height: 20px;
+    aspect-ratio: 1;
+    text-align: center;
+    position: absolute;
+    top:30%; /* Sube o baja en numero del carrito */
+    right: 26%; /* acomoda numero a la derecha del carrito */
+    transform: translate(-50%, -50%);
+    z-index: 1; /* Hace que el texto este encima de la imagen del carrito */
+}
+#logoHeader{
+    height: 50px;
+}
+header nav img{
+    height: 40px;
+}

Entregas/Entrega3/css/estilosMain.css

@@ -13,25 +13,143 @@ body {
     color: #a6d6ef;
     margin: 0;
     background-color: #0f4c75;
+    /* AJUSTE DE IMAGEN BACKGROUND*/
+    background-image: url("../img/1329.jpg") ;
+    background-size:cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-attachment: fixed;
 }
-#mensajeRegistro {
-    text-transform: uppercase;
-    font-family: 'Times New Roman';
-    color: greenyellow;
+#mensajeLogin {
+    
+    font-family: sans-serif;
+    color:burlywood;
+    margin: 0;
+    padding: 0; 
+    font-weight:lighter;
+    font-size:smaller;
+    font-size: smaller;
+    text-align: center;
+    -webkit-animation-duration: 2s;
+    animation-duration: 2s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+   
 }
 
+
 .formuser {
       display: none;
     }
 
 .btnLogin, .btnRegistro {
-    border: 5px solid #eeeff1; /*anchura, estilo y color borde*/
-    padding: 10px; /*espacio alrededor texto*/
-    background-color: #2e518b; /*color botón*/
-    color: #ffffff; /*color texto*/
+    /*border: 5px solid #eeeff1; /*anchura, estilo y color borde*/
+    /*padding: 2px; /*espacio alrededor texto*/
+    /*background-color: #2e518b; /*color botón*/
+    /*color: #ffffff; /*color texto*/
     text-decoration: none; /*decoración texto*/
     text-transform: uppercase; /*capitalización texto*/
     font-family: 'Helvetica', sans-serif; /*tipografía texto*/
-    border-radius: 50px; /*bordes redondos*/
+    /*border-radius: 50px; /*bordes redondos*/
     }
 
+/*
+*  FORMATEO DE CUADRO DE LOGUIN
+*/
+
+#formContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    min-width: 100vw;
+    min-height: 100vh;
+    width: 100%;
+    height: 100%;
+}
+#formlogin img {
+     
+    padding: 0;
+    margin: 0;
+    max-width: 80%; /* Asegura que la imagen no exceda el ancho del contenedor */
+    max-height: 80%; /* Asegura que la imagen no exceda la altura del contenedor */
+    display: block; /* Asegura que la imagen se comporte como bloque */
+    margin: auto; /* Centra la imagen dentro del contenedor */
+    border-radius: 10px 0px 10px 0px ; /*Redondea borde de la imagen*/
+}
+
+
+#contenido {
+    max-width: 320px;
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.formlogin {
+    font-size: 200%;
+    color:#bbe1fa;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+#formlogin {
+    width: 100%;
+    padding: 50px 30px;
+    background-color: #3282b8;    
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px ;
+    
+    box-sizing: border-box;
+}
+
+#formlogin input {
+    font-family: sans-serif;
+    font-size: 110%;
+    color: #1b262c;
+    
+    display: block;
+    width: 100%;
+    height: 40px;
+    
+    margin-bottom: 10px;
+    padding: 5px 5px 5px 10px;
+    
+    box-sizing: border-box;
+    
+    border: none;
+    border-radius: 3px 3px 3px 3px;
+    -moz-border-radius: 3px 3px 3px 3px;
+    -webkit-border-radius: 3px 3px 3px 3px;
+}
+
+#formlogin input::placeholder {
+    font-family: sans-serif;
+    color: #E4E4E4;
+}
+
+#formlogin button {
+    font-family: sans-serif;
+    font-size: 110%;
+    color:#1b262c;
+    width: 100%;
+    height: 40px;
+    border: none;
+    
+    border-radius: 3px 3px 3px 3px;
+    -moz-border-radius: 3px 3px 3px 3px;
+    -webkit-border-radius: 3px 3px 3px 3px;
+    
+    background-color: #bbe1fa;
+    
+    margin-top: 10px;
+}
+
+#formlogin button:hover {
+    background-color: #0f4c75;
+    color:#bbe1fa;
+}