Eleve tu negocio digital a otro nivel con un Front-end de calidad!
¡Hola! Soy Ana García, desarrolladora Front-end con especialización en React, HTML y CSS. Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?
GitHub
LinkedIn
Twitch
Desarrollado por Alura Latam
/* Personalizando el pie de página / .footer { background-color: #22D4FD; / Fondo azul claro / color: #000000; / Texto en negro / text-align: center; / Centrar texto / padding: 24px; / Espaciado interno / font-family: 'Montserrat', sans-serif; / Fuente Montserrat / font-size: 24px; / Tamaño de fuente / font-weight: 400; / Peso de fuente */ }
/* Ajustando el espaciado interno de la presentación / .presentacion { padding: 5%; / Ajuste con un valor en porcentaje */ }
/* Estilizando el encabezado y enlaces / .header { background-color: #333; / Fondo oscuro / padding: 16px 32px; / Espaciado alrededor del encabezado */ }
.navbar { display: flex; /* Alinear horizontalmente / justify-content: space-between; / Espacio entre los enlaces */ }
.nav-link { font-size: 18px; /* Tamaño de fuente / color: #ffffff; / Color de texto / text-decoration: none; / Quitar subrayado / padding: 8px 24px; / Ajuste en el padding para más espacio alrededor del texto / transition: color 0.3s; / Transición para el cambio de color */ }
.nav-link:hover { color: #22D4FD; /* Cambiar color al pasar el mouse */ }
/* Estilizando enlaces con íconos / .presentacion__enlaces { display: flex; flex-direction: column; / Colocar los elementos en columna / align-items: center; / Centrar los elementos / gap: 16px; / Espacio entre los elementos */ }
.presentacion__enlaces__link { display: flex; justify-content: center; align-items: center; gap: 16px; /* Espaciado entre ícono y texto */ font-size: 18px; color: #000000; text-decoration: none; padding: 12px 24px; border: 2px solid #22D4FD; border-radius: 8px; background-color: #F6F6F6; transition: all 0.3s ease; }
.presentacion__enlaces__link:hover { color: #FFFFFF; background-color: #272727; cursor: pointer; border-color: #0000FF; /* Efecto hover para el borde */ }
