Skip to content
OverviewSolutions
9
Comments
4
William Jesus Rivas Duran
@wiridix

All comments

  • Nahid Faraji•150
    @Nahid570Submitted over 2 years ago

    I am having some issues with responsiveness, especially images. I tried several methods for responsive Images but nothing seems good to me. There is a problem with the testimonials sections when you go to mobile view, you see the problem. I could not figure out why this is happening.

    Feedback will be appreciable.

    Responsive Sunnyside agency landing page

    1
    William Jesus Rivas Duran•230
    @wiridixPosted over 2 years ago

    Helloo, looking at your solution is fine but I noticed certain errors and those you comment

    • The logo is not being used in the header and footer.
    • In the area of the customer testimonials what happens is that you have a height: 100vh and therefore occupy all the space of the viewport, you can place a height in auto or not to place a specific height.
    • In the images in the section (image_gallery) there is a small spacing between the photos, to solve that you have to remove the class "object-fit" to the images, with the grid of the container the images will occupy the space that you assigned in the grid.
    • The background color should be #91d0c2 and the letters should be hsl(168, 34%, 41%).
    • For the hover effect of the footer icons you could use a filter brightness of 10 and generate the white on the icons.

    That's what I noticed, I hope it helps you any questions you can ask 🙌

    Marked as helpful
    1
  • Pav•0
    @itspavitSubmitted almost 3 years ago

    Please let me know about the mistakes i made so i can improve myself. I did not use a media query as i think it works well enough for both mobile and desktop as it is a single card.

    I am still very new to CSS so all suggestions are appreciated. It was very difficult for me to make this it took me about 10 hours in total. The hardest part was to hide the eye icon behind the equilibrium image and add a hover overlay effect. I learned not to give up :)

    NFT Card Solution using flexbox

    3
    William Jesus Rivas Duran•230
    @wiridixPosted almost 3 years ago

    Hello! very good job, what I recommend is that the shadow is a little less. To the avatar place a white border and change the text color to the one that comes in the challenge (--soft-blue) and finally to the hover of the image place a transition. The rest is perfect! Keep it up 🙌

    Marked as helpful
    1
  • Tami Ribeiro•40
    @tamiribeiroSubmitted almost 3 years ago

    So... my first solution here, hi everyone 🖐🏻. I'm really happy with my results but there's this thing bothering me tho. How can I make my eye icon have a different opacity than its father element? I'm stuck here. Thank u in advance 💙

    nft preview card component

    2
    William Jesus Rivas Duran•230
    @wiridixPosted almost 3 years ago

    Hi! you have a very good job. The detail with your hover in the image is that the container .overlay you have to place a transparent color ( hsl(178, 100%, 50%, 60%) ) and the overlay:hover set the opacity to 1. So you have the same effect as the design.

    Good work!

    Marked as helpful
    0
  • William Jesus Rivas Duran•230
    @wiridixPosted almost 3 years ago

    You did very well. A few details I saw was the size of the card and you missed the hover effect of the image and the title.

    You are doing great!

    Marked as helpful
    0