Skip to content
OverviewSolutions
9
Comments
3
Joao Antonio Mendonca
@mendoncajoao

All comments

  • Clara Wen•320
    @clarafuwenSubmitted over 2 years ago

    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
    @mendoncajoaoPosted over 2 years ago

    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
    @MichelleMonrrealSubmitted over 2 years ago

    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
    @mendoncajoaoPosted over 2 years ago

    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
    @mendoncajoaoPosted almost 3 years ago

    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