Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Clara Wen• 320

    @clarafuwen

    Submitted

    I really used lots of relative and absolute positionings throughout the CSS to complete this challenge. It was a good learning experience of CSS position properties. The background picture in mobile screen however, for some unknown reason was a bit compressed than the original, although I have set the image to the exact dimensions that Figma provided.

    I still haven't found really helpful resources on how to configure CSS filter to get the image color change on hover. The block below changes the social icon color/hue from black to orange. Can some one explain how this works or send some helpful links? I got the filter configurations from @mendoncajoao who has completed the challenge.

    .social_media a:hover,
.social_media a:active {
    filter: invert(74%) sepia(57%) saturate(5327%) hue-rotate(327deg) brightness(103%) contrast(96%);
}

    responsive landing page using CSS positioning properties

    1

    Joao Antonio Mendonca• 70

    @mendoncajoao

    Posted

    Hey Clara!

    I posted on my reply the resources for the CSS filter, but I will repost them here, so people that are led to your solution can also have access to the resources:

    CodePen Home CSS filter generator to convert from black to target hex color

    CSS tricks has a page on CSS filters that explains some tricks to change the hue colors: Ways to change svg fill colors with css filters

    If you want to get really technical and maybe even go crazy, check this discussion on stackoverflow: Crazy maths ahead: Watch out!

    1
  • Michelle Monrreal• 40

    @MichelleMonrreal

    Submitted

    So really the only thing that I found difficult was the positioning. Im just starting out so I really didn't want to use flex/grid, just to really get the hang of positioning relative/absolute/fixed. To get the div right in the middle of the page was difficult for me I found a solution on stack overflow (https://stackoverflow.com/questions/9862167/positioning-div-element-at-center-of-screen), its the third solution down it work for me but I'm really not sure about the reasoning/why it works. So I would really appreciate the feedback, maybe explain why it works. But this was really great for my first challenge! Thanks! -Michelle

    qr-code page / css positioning/relative/absolute/fixed

    1

    Joao Antonio Mendonca• 70

    @mendoncajoao

    Posted

    Hi Michelle.

    Your result looks good, but the code is a little bit messy.

    If you don´t want to use grid or flexbox to center that object, you can use transform and position absolute.

    Inside the style file, all you need to center the card is:

    body {
    margin: 0;
    padding: 0;
    background: hsl(212, 45%, 89%);
}

.card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 470px;
    width: 310px;
    background: white;
    border-radius: 15px;
}

    This works as the BODY tag is already doing the work for your .qr-card class.

    The way this works is explained very well in this site: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

    I hope this helps you.

    Keep on coding!

    3
  • Joao Antonio Mendonca• 70

    @mendoncajoao

    Posted

    Wow!! This has to be the one of the most perfect reproductions I´ve seen so far. It looks almost like 2 screenshots placed one on top of the other!

    Congratulations!

    0