Este es un proyecto de Frontend Mentor que consiste en construir un componente de resumen de orden. Para completar el proyecto, se utiliza HTML y Tailwindcss, construyendo componentes css personalizados dentro de Tailwindcss para adaptar el diseño al challenge.
El proyecto fue construido utilizando las siguientes tecnologías:
- HTML5
- Tailwindcss
- Propiedades personalizadas de CSS para Tailwindcss
- Flexbox
- Mobile first
El proyecto fue construido partiendo del concepto Mobile First y escalando el responsive a su versión de escritorio
El objetivo de este proyecto es construir un componente de resumen de orden de compra que pueda ser utilizado en cualquier sitio web. El componente muestra un resumen de orden donde permite cambiar el producto, proceder la compra o cancelarla.
El challenge se proporciona con un diseño que se debe replicar utilizando HTML y CSS, se puede utilizar librerías y frameworks a elección del usuario, en este caso opté por Tailwindcss. Para adaptar el diseño al challenge, se construyen componentes css personalizados dentro de Tailwindcss.
Para utilizar el proyecto, se debe clonar el repositorio en la máquina local y abrir el archivo index.html en un navegador web.
- bash
- Copy code
- git clone https://github.com/mfernandez0992/order-summary-component.git
- cd results-summary-component
El proyecto cuenta con los siguientes archivos:
- index.html: Se encuentra dentro de la carpeta dist, archivo HTML que contiene la estructura del componente.
- style.css: archivo CSS generado por Tailwindcss.
- tailwind.config.js: archivo de configuración de Tailwindcss que se utiliza para construir componentes css personalizados.
- README.md: archivo de documentación del proyecto.