Cómo Modificar el Texto, Imágenes y Otros Estilos Visuales
Esta guía está diseñada para usuarios sin experiencia en código, proporcionando instrucciones claras y ejemplos prácticos para modificar el diseño de la página a través del CSS personalizado.
1. Modificar el Tamaño del Texto
Ejemplo: Cambiar el tamaño del texto del temporizador en la barra de navegación
El texto del temporizador está configurado actualmente con:
.navbar .time {
font-size: 50px;
}
Si deseas aumentar el tamaño del texto, cambia el valor de font-size:
.navbar .time {
font-size: 70px;
}
Cuanto mayor sea el número, más grande será el texto. Puedes experimentar con valores como 30px, 100px, etc.
2. Ajustar el Tamaño de una Imagen
Ejemplo: Cambiar el tamaño de la imagen de perfil en la tarjeta
La imagen de perfil se define actualmente con:
.card2 img {
width: 500px;
height: auto;
}
- Para hacerla más grande, aumenta el valor de width:
.card2 img {
width: 700px;
}
- Si deseas controlar también la altura, puedes reemplazar height: auto con un valor fijo, como height: 400px.
3. Modificar Espaciado o Márgenes
Ejemplo: Cambiar la distancia entre la tarjeta y el borde superior
El margen superior de la tarjeta está configurado así:
.card {
margin-top: 50px;
}
Para aumentar el espacio, incrementa el valor:
.card {
margin-top: 100px;
}
Si prefieres reducir el espacio, disminuye el valor, como 20px o 0px.
4. Cambiar Colores
Ejemplo: Cambiar el color de fondo de la sección “Acerca de Cristian Ayala”
El color actual de fondo se establece con:
.about-us {
background-color: #f0e8d7;
}
Puedes reemplazar #f0e8d7 con cualquier otro color en formato hexadecimal, nombre de color, o rgb(). Por ejemplo:
.about-us {
background-color: #ffcccc; /* Un color rosado */
}
Para encontrar colores específicos, utiliza una herramienta de selección de colores online.
5. Efectos al Pasar el Ratón por Encima (Hover)
Ejemplo: Cambiar el efecto de hover de la imagen de perfil
El efecto de hover actual está configurado con:
.card2 img:hover {
transform: scale(1.03);
}
Si quieres un efecto más visible, incrementa el valor del scale:
.card2 img:hover {
transform: scale(1.1);
}
También puedes añadir otros efectos, como cambiar el color del borde:
.card2 img:hover {
border-color: red;
}
6. Ajustar Bordes y Sombras
Ejemplo: Modificar el borde y la sombra de la imagen de perfil
El borde y la sombra actuales están definidos así:
.card2 img {
border: 2px solid #ddd;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
- Para un borde más grueso, incrementa el valor de 2px:
.card2 img {
border: 5px solid #ddd;
}
- Para una sombra más pronunciada, ajusta los valores de box-shadow:
.card2 img {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
7. Poner el widget a pantalla completa
@media screen and (max-width: 768px) {
#data-widget-embed-google {
margin: auto;
transform: scale(1.65);
transform-origin: top center;
width: 100%;
height: 100vh;
overflow: hidden;
}
}
Notas Finales
- Guarda siempre tus cambios. Recuerda probar los ajustes en diferentes dispositivos para asegurarte de que el diseño se ve bien en todos los tamaños de pantalla.
- Consulta recursos adicionales. Si necesitas más ayuda con CSS, puedes visitar sitios como MDN Web Docs o W3Schools.
¡Diviértete personalizando tu página!