Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

¡Domina el diseño de tu página web con HTML y CSS! Crea una sección de redes sociales profesional y personalizada.

Referente al curso HTML y CSS: header, footer y variables CSS, en el capítulo Preparando el layout del proyecto y actividad Haga lo que hicimos en aula

por Manuel Sandoval
| 28.2k xp | 514 posts

En esta lección, hemos transformado una simple sección de enlaces en una parte fundamental de nuestra página web. Hemos aprendido a:

Organizar elementos: Utilizando Flexbox, hemos alineado el subtítulo y los botones de forma vertical, creando una composición más limpia y atractiva. Personalizar estilos: Hemos creado una clase específica para el subtítulo y hemos aplicado estilos personalizados para destacarlo. Ajustar el diseño: Hemos modificado el tamaño, el color y la forma de los botones para que se adapten perfectamente a nuestro diseño. ¿Qué hemos hecho exactamente?

Agregamos un subtítulo: Hemos utilizado la etiqueta

para crear un subtítulo claro y conciso. Cambiamos la disposición: Hemos modificado la propiedad flex-direction a column para alinear los elementos verticalmente. Ajustamos la alineación y el espaciado: Hemos utilizado align-items: center y gap para centrar los elementos y agregar espacio entre ellos. Creamos una clase personalizada: Hemos creado una clase CSS específica para el subtítulo y hemos aplicado estilos únicos. Estilizamos los botones: Hemos modificado el color, el borde y el tamaño de los botones para mejorar su apariencia.

¡El resultado es una sección de redes sociales profesional y atractiva que complementa el diseño de nuestra página web!

#HTML #CSS #diseñoWeb #desarrolloWeb #webdesign #Flexbox #estilos #personalización #botones #subtítulo #aprendizaje #programación

1 respuesta
por César Fausto Córdova Aguirre
| 36.7k xp | 22 posts

primero comenzamos con la modificacion en el codigo html y se agrega el h2

                </p>
                <div class="presentacion__enlaces">
                    <h2 class="presentacion__enlaces__subtitulo">Accede a nuestras redes:</h2>
                    <a class="presentacion__enlaces__link" href="https://instagram.com/">Instagram</a>
                    <a class="presentacion__enlaces__link" href="https://github.com/">GitHub</a>
                </div>

luego ya siguen las estilizaciones en el CSS

.presentacion__contenido__titulo{
   font-size: 36px;
   font-family: 'Krona One', sans-serif;
}

.presentacion__contenido__texto{
   font-size: 24px;
   font-family: 'Montserrat', sans-serif;
}

.presentacion__enlaces{
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   align-items: center;
   gap: 32px;
}

.presentacion__enlaces__subtitulo{
   font-family: 'krona One', sans-serif;
   font-size: 24px;
   font-weight: 400;
}

.presentacion__enlaces__link{
   width: 280px;
   text-align: center;
   border-radius: 8px;
   font-size: 24px;
   font-weight: 600;
   padding: 21.5px 0;
   text-decoration: none;
   color: #F6F6F6;
   font-family: 'Montserrat', sans-serif;
   border: 2px solid #22D4FD;
}