Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Pricing Component With Toggle (HTML | CSS | JS Vanilla -> animejs lib)

Cheosphere 1,040

@Cheosphere

Desktop design screenshot for the Pricing component with toggle coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


...made with a lot of love 🤘🏻🙂

Community feedback

@Abiekatkam

Posted

Man Fabulous! Big Fan of yours designing skills. Bruh! How can you get the exact design solution with the output. Can you suggest me something to get better performing in CSS.

1

Cheosphere 1,040

@Cheosphere

Posted

@Abiekatkam Hello Abhishek, a pleasure to greet you and thank you very much for your comment. I have this personal obsession and I always try to make my solution as similar as possible to the original design, and I must confess that on this occasion the screenshot favored my solution, because when comparing here on my computer, I can see some very slight differences. What I basically do is open the original design from photoshop, and I measure the sizes and spaces of each element at the pixel level, it is a very tortuous task that generates, on the one hand, great entertainment, but on the other hand, terrible stress hahaha!, but I insist that it is just a personal obsession, in fact other users have confessed to me that it even bothers them to see how I complicate my life (especially with my CSS) delving into so much unnecessary detail 😅. But well, as they say out there, each crazy person with his own theme, besides, I've only been learning web development for a short time, I still have a lot to learn, and the challenges provided by this platform help me a lot to practice every day, and thus be able to mix my skills of graphic design in web development.

It is a pleasure to share these words from a distance my dear Abhishek, I send you a huge greeting and let's continue coding!

5

@Abiekatkam

Posted

@Cheosphere Great Effort! Big fan Sir, Wish to be as perfectionist as your design.

1
Gastón 100

@Tripineta

Posted

Maaaaaan what?! 🤩 The design and the solution are identical. Amazing job. Congratulations!

1

Cheosphere 1,040

@Cheosphere

Posted

@Tripineta Hola Gastón, ya que somos vecinos me daré el lujo de escribirte en nuestro idioma natal jaja, además que mi nivel de inglés es básico y utilizo el traductor 😅. Muchas gracias por tu comentario, y la verdad es que soy un absoluto desquiciado y me obsesiono con tratar de dejar lo más similar posible mi solución comparada con el diseño original que proporcionan en los archivos del proyecto, pero sabes que en esta ocasión creo que la captura de pantalla me favoreció, ya que al parecer omitió algunos pequeños detalles que cuando yo comparo acá en mi equipo si logro notar, pero como te decía más arriba es una obsesión personal que me genera de forma simultanea, por un lado una gran entretención el sumergirme en poder igualar detalles muy finos, pero por otro lado también un gran estrés jajaja, ya que voy midiendo a nivel de pixeles los espacios y tamaños, y eso también hace que mi código se haga más extenso y tortuoso, pero todo esto lo tomo como una especie de entrenamiento e insisto con que es una obsesión personal, incluso algunos usuarios me han comentado que les molesta ver el cómo me complico la vida (en especial con mi css), metiéndome en ajustes, por ejemplo, del espacio entre las letras de un texto 😅, y me comentan que eso hace complejo el mantener proyectos web y otras cosas. En fin, yo igual no llevo tanto tiempo en esto del desarrollo web y sólo trato de aprender cada día algo nuevo, y estar constantemente ejercitándome, y esta plataforma con sus desafíos me ha venido como anillo al dedo, y le he sacado mucho provecho y la disfruto enormemente.

Un gusto poder compartir a la distancia un poco de charla por medio de esta plataforma mi hermano y vecino, y como dicen por ahí Let's keep coding.

Un abrazo Gastón!!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord