Skip to content
OverviewSolutions
5
Comments
5
P
Eurico Paes
@eurico3

All comments

  • P
    Eurico Paes•50
    @eurico3

    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 */ }

  • P
    Eurico Paes•50
    @eurico3

    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;

    }

  • P
    Eurico Paes•50
    @eurico3

    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 !

  • Matilda•190
    @Til-da
    What 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.

    Responsive card with flexbox, shadows, fonts, hover, and semantic HTML

    1
    P
    Eurico Paes•50
    @eurico3

    Hi 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; }

  • P
    Eurico Paes•50
    @eurico3

    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 */ } }