Ejercicio: Pricing Table

En este ejemplo se pide crear una tabla de precios dividido en 3 planes, uno por columna. En nuestro caso, utilizaremos 3 planes: HTML, CSS y Javascript. Observa que cada plan tiene un precio, un eslogan, y una lista de 4 features de cada plan.

Mi recomendación de pasos a seguir son los siguientes:

• 1️⃣ Elige el mecanismo de layout que vas a usar: Flex o Grid. ¡Puedes hasta combinarlos!
• 2️⃣ Crea las 3 columnas iguales, del mismo tamaño y estilo.
• 3️⃣ Opcionalmente, guarda el tamaño de la columna en una variable CSS.
• 4️⃣ Añade el contenido de cada columna. Primero HTML, luego CSS.
• 5️⃣ El precio está centrado, pero añade /MO al final, sin descentrar. Sugiero usar ::after.
• 6️⃣ La lista de features debe crearse con <ul> y <li>.
• 7️⃣ NO uses scale o transform: scale() para aumentar la columna central. Es una solución sencilla pero puede ser dificil de alinear o puede perder calidad. En su lugar, readapta su tamaño.