Latest solutions
- Submitted about 22 hours ago
Product Preview Card
- HTML
- CSS
I manage to do it, to pixel perfect but close
Latest comments
- @khaled1018Submitted 2 days agoP@eurico3Posted about 22 hours ago
Hi Khaled,
Very nice work ! I think you just forgot the hoover on the card button.
/* Hover Effect / .btn:hover { background-color:var(--green-700); / Darker green */ }
1 - @johnstone14Submitted 20 days agoP@eurico3Posted 5 days ago
Very Good !
I think you just miss top and bottom margins of the card.
.card { max-width: 736px; margin: 128px 0px 128px 0px; /* top right bottom left */ padding: 40px; background-color: var(--white); border-radius: 24px; display: flex; flex-direction: column; align-items: flex-start;
}
1 - @VladimirDikovskiSubmitted 26 days agoP@eurico3Posted 7 days ago
Could improve on semantic html using tags like main, section, nav
Layout could improve regarding correct use of color and effects on hoover buttons
However the code is readable and reusable, but the solution differ slightly from the design
Happy coding !
0 - @Til-daSubmitted 8 days agoWhat are you most proud of, and what would you do differently next time?
Glad i wrote it myself
What challenges did you encounter, and how did you overcome them?Didn't encounter any
What specific areas of your project would you like help with?none. Thank you.
But I'll like to get other people feedback and their opinion.
P@eurico3Posted 8 days agoHi the work is very good, but one request in the challenge was to see hover and focus states for all interactive elements on the page.
/* Card Hover Effect */ .card:hover { box-shadow: 10px 10px 0px var(--dark); }
/* Hover & Focus Effects for Title */ .article-title:hover, .article-title:focus { color: var(--yellow); cursor: pointer; }
/* Improve Accessibility: Hover & Focus States */ .article-tag:hover, .article-tag:focus { background-color: var(--grey-950); color: var(--yellow); transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; }
/* Add Focus States for Keyboard Users */ .article-title:focus, .article-tag:focus, .author-name:focus { outline: 2px dashed var(--dark); outline-offset: 3px; }
0 - @Sims-3dSubmitted 9 days agoP@eurico3Posted 8 days ago
The solution is working and works well on a good renage of screen sizes. The solutions could be better if user could have used media queries to change the background image based on screen width.
For example : @media screen and (max-width: 768px) { body { background-image: url('./design/mobile-design.jpg'); /* Mobile image */ } }
0