Frontend Mentor - Order summary card solution

Esta es mi solución del reto Order summary card challenge on Frontend Mentor.

Tabla de contenidos

• Vista General
  • Acerca del reto
  • Screenshot
• Mi proceso
  • Hecho con
  • Lo que aprendi
  • Desarrollo continuo
  • Recursos utiles
• Autor
• Agradecimientos

Note: Delete this note and update the table of contents based on what sections you keep.

Vista general

Acerca del reto

El usuario deberia poder:

• Ver los estados de navegación de los elementos interactivos
• Recrear la pagina mostrada en el ejemplo con los elementos necesarios

Screenshot

Mi proceso

Hecho con:

• HTML
• CSS

Lo que aprendi

Use los conocimientos adquiridos de

Selectores

En este proyecto aplique los diferentes selectores que aprendi durante las clases

Selector por elemento

header img{
    width: 100%;
    height: auto;
    border-radius: 5rem 5rem 0rem 0rem;
}

Selector por clase

.card-summary {
    margin: auto;
    text-align: center;
    border: 3px solid hsl(225, 100%, 98%);
    border-radius: 5rem;
    width: 40%;
    box-shadow: 10px 5px 5px hsl(223, 47%, 23%);
}

Selecto por id

#cost {
    color: hsl(224, 23%, 55%);
}

Desarrollo Continuo

De este proyecto observe que no tengo practica y me faltan conocimientos acerca de CSS y manejo de las dimensiones, por lo que a futuro me gustaria mejorar en esos aspectos en este y otros proyectos que tenga

Recursos utiles

• W3C School - Este sitio tiene una explicación útil de como usar los elementos y los diferentes atributos que tienen

Autor

• Website - Iyari Maldonado Fiesco
• Frontend Mentor - @MaestroMiyagi
• Twitter - @corv_iyari
• Instagram - @paco_el_chatoo

Agradecimientos

Agradezco a los mentores de Kodemia, que me han enseñado bastantes cosas para poder empezar en el arduo camino, pero hermoso de diseño web