P
@Igor-CarnaubaSubmitted about 1 month ago
What specific areas of your project would you like help with?
I dont know how to do the image overlay with the eye icon. Should be great if anyone could help me. Tks.
Latest solutions
Dictionary web app using nextjs and Typescript
#fetch#next#pure-cssPSubmitted about 1 month agoThere's nothing I'd particularly like help with but I'd be keen to understand how other people did the Dark mode in Nextjs. I looked on their official documentation as it comes built with some dark mode variables but I can't see anything further. I appreciate this isn't pixel perfect but I'm happy with the outcome.
Product List with Cart
#next#reduxPSubmitted 5 months agoNone at the moment. I'm happy with the overall outcome.
Results Summary using Nextjs and Flexbox
#nextPSubmitted 7 months agoI'm happy with my project as it is.
Latest comments
- P@RopenfoldPosted about 1 month ago
Hi,
This is how I approached this issue, I also had the same issue as you in resolving this issue. I overcame this by putting the image inside a div and overlaying this when hovering over it, turning the opacity to 100:
<div className="absolute inset-0 bg-cyan-500 bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity duration-300 rounded-lg z-10 flex items-center justify-center"> <Image src="/frontend-mentor-nft-preview-card-component/img/icon-view.svg" alt="View Icon" width={40} height={40} /></div> </div>Hope this helps!
Marked as helpful0 - @MrD0doSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
That it works somehow :D
What challenges did you encounter, and how did you overcome them?- CSS Grid layout for the first time
In my opinion, it is not a fully responsive on mobile, so feel free to give your tips, tricks to get better at it... :)
P@RopenfoldPosted about 1 month agoHi Mr Dodo, just taking a look at your app in mobile view and I see you're using grid a lot. I would suggest maybe using flexbox and in the desktop layout use Row and in mobile switch this to column when in mobile view. Thats how I would approach this challenge.
0 - @AdrianoEscaraboteSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I am very proud of how well I executed the design and ensured the project remained true to the original specifications. The attention to detail in the layout and responsiveness was a particular highlight for me.
What specific areas of your project would you like help with?I would appreciate comments on the code structure and any recommendations for improving performance. I'm also open to suggestions on how to improve accessibility and ensure the project is as easy to use as possible across all devices and platforms.
Product list with cart w/ (Next + Tailwind + Typescript) 👨💻
#jest#next#redux#typescript#tailwind-cssP@RopenfoldPosted about 1 month agoHi Adriano, I've had a look at your code and how it works and it looks and operates great! There's not a lot I can see that would do differently, I would say the tablet layout could be improved, I have had a look on the figma design and it is a 3 tile across layout. When I checked this in the browser set to a tablet layout, it didn't quite look the same. You would just need 2 media view classes. I tend to start with the mobile view and then build out the other 2 layouts. Other than that, this is a great design. Well Done.
1 - @haloviiSubmitted 5 months agoWhat challenges did you encounter, and how did you overcome them?
I'm trying to learn how media queries and responsive web design work so I attempted the mobile version first, however I struggled to actually achieve the responsive design so instead I duplicated the folder and coded the web version separately. Hopefully in the future I'll overcome this and figure out how responsive design works!
P@RopenfoldPosted 5 months agoLook at Flexbox when working with responsive queries, I particularly find the wrap element to be the most useful. Also work with @media queries in css, I use the following 2 options for Tablet and desktop: Tablet: @media (min-width: 768px) and (max-width: 1023px) {}
Desktop: @media (min-width: 1023px) { }
Marked as helpful1 - @darckis28Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Agrege una funcionalidad para compartir el pedido a cualquier contacto en whatsapp
What challenges did you encounter, and how did you overcome them?se me dificulto integrar las imágenes del JSON sin que estén en la carpeta public.
What specific areas of your project would you like help with?en la parte del organizado de los componentes y carpetas
P@RopenfoldPosted 5 months agoHay un par de errores gramaticales que puedo ver, "Your card" debería ser "Your Cart" y la fuente parece tener un frente diferente al que se proporciona. Con respecto a la estructura, descubrí que la carpeta de imágenes tenía que estar directamente en la carpeta pública; si estuviera en una subcarpeta de esta, sería un problema. ¡Este es un gran trabajo y la integración adicional con WhatsApp es realmente buena!
Marked as helpful0 - @inioluwabelloSubmitted over 1 year agoP@RopenfoldPosted 7 months ago
Well done on completing this task! Looking at this on different devices, the design works on these. I have a couple of suggestions in regards to reducing the amount of 'copypasta' code in regards to the reaction, Memory, Verbal, and Visual components. could you maybe turn this into one component and then Array map in the data, dynamically changing the colour? This means if there is a further category added it would not need code to be written out again, it would just utilise the component that is already there. Other than that this good work, well done!
0
