SIGO DANDO FORMA PREVIO A EMPEZAR CON SASS

css/style.css

@@ -30,29 +30,30 @@ header {
 .nav-links {
   list-style: none;
   display: flex;
-  gap: 20px;
+  gap: 35px;
   margin: 0;
   padding: 0;
+  font-size: 19px;
 }
 
 .nav-links li {
   display: inline;
 }
 
 .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 */
 }

index.html

@@ -14,11 +14,11 @@
     <!-- Header -->
     <header>
         <nav class="navbar">
-            <img class="logo-img" src="image/logo.jpg" alt="Logo de la Empresa" ">
+            <img class="logo-img" src="image/logo-es-web.png" alt="Logo de la Empresa" ">
             <ul class="nav-links">
                 <li><a href="#home">Nosotros</a></li>
                 <li><a href="#services">Servicios</a></li>
-                <li><a href="#contact">Contacto</a></li>
+                <li><a href="#contactos">Contacto</a></li>
             </ul>
         </nav>
     </header>
@@ -145,25 +145,22 @@ <h2>Contáctanos en redes sociales</h2>
         <a href="https://www.instagram.com/esweb.programacion/" target="_blank">
             <img src="image/icons8-instagram-logo-94.png" alt="Instagram">
         </a>
-        <a href="https://www.twitter.com/tu-perfil" target="_blank">
+        <a href="https://x.com/ES_Web_Prog" target="_blank">
             <img src="image/icon8-x.png" alt="X (Twitter)">
         </a>
-        <a href="https://t.me/tu-perfil" target="_blank">
+        <a href="https://t.me/@Emi1712" target="_blank">
             <img src="image/icons8-telegram-logo-94.png" alt="Telegram">
         </a>
         <a href="https://wa.me/3413916033" target="_blank">
             <img src="image/icons8-whatsapp-logo-94.png" alt="WhatsApp">
         </a>
-        <a href="mailto:[email protected]" target="_blank">
-            <img src="image/icons8-gmail-logo-94.png" alt="Gmail">
-        </a>
     </div>
   </section>
 
 
     <!-- Footer -->
     <footer>
-        <p>© 2024 [Nombre de tu Sitio]. Todos los derechos reservados.</p>
+        <p>© 2024 ES-Web programacion. Todos los derechos reservados.</p>
     </footer>
 
     <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>