diff --git a/css/style.css b/css/style.css
index d35a856..26a9ddc 100644
--- a/css/style.css
+++ b/css/style.css
@@ -30,9 +30,10 @@ header {
.nav-links {
list-style: none;
display: flex;
- gap: 20px;
+ gap: 35px;
margin: 0;
padding: 0;
+ font-size: 19px;
}
.nav-links li {
@@ -40,19 +41,19 @@ header {
}
.nav-links a {
- color: hsl(38, 100%, 50%);
+ color: hsl(168, 98%, 51%);
text-decoration: none;
font-weight: bold;
}
.nav-links a:hover {
- color: #67f3c9;
+ color: #f19f11;
}
/* Home Section */
#home {
- color: rgb(2, 136, 133); /* Texto de contraste */
+ color: hsl(168, 98%, 51%); /* Texto de contraste */
padding: 40px 20px;
text-align: center; /* Centra el texto */
}
@@ -128,7 +129,7 @@ header {
#tecno .tecno1 p {
font-size: 1.5rem;
color: #f3a805;
- margin-bottom: 20px;
+ margin-bottom: 50px;
}
#tecno .tecno2 {
@@ -149,6 +150,27 @@ header {
transform: scale(1.1); /* Efecto de agrandamiento al pasar el cursor sobre las imágenes */
}
+.tecno2 {
+ box-shadow: 0 2px 8px rgba(255, 230, 0, 0.98);
+ background-color: rgba(255, 255, 255, 0.61);/* Fondo blanco con 70% de opacidad */
+ padding: 10px; /* Espaciado interno */
+ border-radius: 10px; /* Bordes redondeados */
+ width: 88%; /* Ajusta el ancho del recuadro (80% del ancho de la pantalla) */
+ max-width: 1100px; /* Ancho máximo para evitar que se expanda demasiado */
+ margin: 0 auto; /* Centra el recuadro horizontalmente */
+ display: flex; /* Para alinear las imágenes */
+ gap: 5px; /* Espacio entre las imágenes */
+ justify-content: center; /* Centrar las imágenes horizontalmente */
+ flex-wrap: wrap; /* Permite que las imágenes pasen a la siguiente línea si es necesario */
+}
+
+.tecno2 img {
+ width: 70px; /* Ajusta el tamaño de las imágenes */
+ height: auto;
+ margin: 15px;
+}
+
+
#services {
padding: 50px 20px;
background-color: transparent; /* Fondo transparente para ver la imagen de fondo de la página */
@@ -157,7 +179,7 @@ header {
#services h2 {
font-size: 2.5em;
- margin-bottom: 20px;
+ margin-bottom: 50px;
color: #f3a805;
}
@@ -262,31 +284,67 @@ header {
margin-bottom: 20px;
}
+#contactos {
+ margin: auto;
+ width: 88%;
+ margin-top: 5%;
+ text-align: center;
+ padding: 5px 10px;
+ background-color: rgba(255, 255, 255, 0.61); /* Fondo claro */
+ border-radius: 200px;
+ box-shadow: 0 2px 8px rgba(255, 230, 0, 0.98);/* Sombra sutil */
+}
+
+#contactos h2 {
+ font-size: 28px;
+ font-weight: bold;
+ color: #2c018e;
+ margin-bottom: 20px;
+}
+
.social-links {
display: flex;
- justify-content:space-between;
- flex-wrap: wrap;
- padding: 10px;
- margin-left: 18%;
- margin-right: 18%;
+ justify-content: center;
+ gap: 20px;
+ flex-wrap: wrap; /* Para que los íconos se ajusten en pantallas pequeñas */
}
.social-links a {
display: inline-block;
- width: 55px;
- height: 70px;
- transition: transform 0.3s ease; /* Animación suave en hover */
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.social-links a:hover {
+ transform: scale(1.1); /* Agranda el ícono al pasar el ratón */
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Efecto de sombra al hacer hover */
}
-.social-links a img {
- width: 100%;
- height: 100%;
- border-radius: 20%; /* Redondear los íconos */
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
- transition: box-shadow 0.3s ease, transform 0.3s ease;
+.social-links img {
+ width: 40px; /* Tamaño de los íconos */
+ height: 40px;
+ border-radius: 50%;
+}
+
+footer {
+ background-color: #33333300; /* Fondo oscuro */
+ color: #fff; /* Texto claro para contraste */
+ text-align: center; /* Centrar el texto */
+ padding: 50px 0; /* Espaciado superior e inferior */
+ font-size: 14px;
+ box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Sombra ligera en la parte superior */
+}
+
+footer p {
+ margin: 0; /* Eliminar márgenes por defecto */
+ font-family: 'Arial', sans-serif; /* Tipografía simple y legible */
+}
+
+footer a {
+ color: #fff; /* Color de los enlaces en blanco */
+ text-decoration: none; /* Eliminar subrayado en enlaces */
+ font-weight: bold;
}
-.social-links a:hover img {
- transform: scale(1.1); /* Agrandar ligeramente al hacer hover */
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Aumentar la sombra en hover */
+footer a:hover {
+ text-decoration: underline; /* Subrayar enlaces al pasar el ratón */
}
diff --git a/image/logo-es-web.png b/image/logo-es-web.png
new file mode 100644
index 0000000..5704ee9
Binary files /dev/null and b/image/logo-es-web.png differ
diff --git a/index.html b/index.html
index 34e8183..b7e59d3 100644
--- a/index.html
+++ b/index.html
@@ -14,11 +14,11 @@
@@ -145,25 +145,22 @@ Contáctanos en redes sociales
-
+
-
+
-
- 
-