@VictorENZ
What specific areas of your project would you like help with?
¿Hay una forma(proceso/método y/o guía) de averiguar las medidas correctas? yo me guie a través del párrafo según su medida (14px) así es como esta hecho esta solución
Latest solutions
Todo app
#react#tailwind-css#viteSubmitted 11 months agoAny help is welcome. Thank you for looking into it, and have an excellent day.
URL shortening API landing page
#react#tailwind-css#fetchSubmitted about 1 year agoI'd appreciate assistance with optimizing the performance of my landing page, particularly in terms of loading times and responsiveness. Additionally, guidance on improving the user experience and enhancing the visual design would be valuable.
Latest comments
- @Emazs
👋 ¡Hola Víctor! Espero que te encuentres bien.
Sí, existe una extensión de Chrome que te permite comparar tu página con una imagen y así conocer el tamaño exacto de los elementos. Te la dejo por aquí:
🔗 PerfectPixel: PerfectPixel by WellDoneCode
Puedes buscarla en el navegador o usar el link como prefieras. ¡Espero que te sirva!
- @mahataWhat are you most proud of, and what would you do differently next time?
_
What challenges did you encounter, and how did you overcome them?_
What specific areas of your project would you like help with?I feel the font looks a little bit different from what's available in Figma. I "THINK" I'm specifying the same properties, such as
font-family,font-weight,etc.,as in Figma, so I'm wondering where the difference comes from.@EmazsHi yasunori, I hope you are well, good design, I liked it, I would only say that you should add two little things:
-
In the body you could add
height: 100vh;andalign-items: center;, to center the card and depending on the height of the screen this is centered. -
align-items: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
-
unit of
vh: https://www.w3schools.com/cssref/css_units.php
Now about the title font, it seems to me that it is the same font, what you could do is to increase the weight to 800 and decrease the font size.
Marked as helpful -
- @davidmoreau2What are you most proud of, and what would you do differently next time?
making the page look close to the figma files in the notes
What challenges did you encounter, and how did you overcome them?how to make the gradients and the positioning of everything. looked it all up on google
What specific areas of your project would you like help with?getting the grid to be the right size in tablet size
@EmazsHi David, I hope you are well, I liked the final result of the page and to help you with the issue of the size of the grids could help you with a chrome extension called pixel perfect, I leave the link to the extension and a video of how you can use them.
-
Link extension: https://chromewebstore.google.com/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=es
-
Link video youtube: https://www.youtube.com/watch?v=mz1A9lWbGX4
I hope you can help David, have a great day.
-
- @let-sampaioWhat are you most proud of, and what would you do differently next time?
de ter conseguido usar js
What challenges did you encounter, and how did you overcome them?de poder fazer a imagem de plus e minus mudar, eu consegui fazer depois com outra alternativa que era fazer com textContent.
@EmazsHello Letícia, I hope you are well. I liked how you made the page. I noticed a few things that would be good to consider:
- The page design is not responsive, meaning it won't display correctly on mobile devices because some elements are out of width.
- The answers to the questions in the textarea are missing.
- It would be good to use a div or section to separate the questions and apply styles.
Marked as helpful - @jmartinpizarro@Emazs
Hola, claro utilizando las media queries, lo podías conseguir, yo hubiera modificado flex-container colocándolo de esta manera: .flex-container{flex-direction: column}
Además agregando un gap para crear un espacio entre las tarjetas asi: .flex-container{gap: 2rem}
también deberías modificar el height de main-container asi: .main-container {height: auto}, lo demás solo seria aplicar algún margin para separar el contenido. Espero que te pueda ser de ayuda 👋
