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

Submitted

Mobile First w/Sass

@deG3nt3lm4n

Desktop design screenshot for the Fylo data storage component coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I know my CSS may be a little.... messy please let me know whats up. i used a SASS compiler but at the same time just let me know how you feeel about it.. trying to get better.. feel like next challange i think i may be able to make it more readable for you guys as well....

At the same time if you wanna be friends let me know :)

Community feedback

Account Deleted

Hello again.

For the background, you can set the height of the html and body elements to 100% and use the ::after pseudo-element

html, body {
   height: 100%;
}

body {
   background-color: <--- here goes the dark blue background color
   position: relative;
}

body::after {
    content: "";
    width: 100%;
    height: 50%;
    background-image: url(../images/bg-mobile.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    background-position: bottom;
    bottom: 0;
    left: 0;
    z-index: -1;
}

@media (min-width: 768px) {
    background-image: url(../images/bg-desktop.png);
}

It goes something like that, you may have to tweak some things.

You may also want to check this article about CSS naming conventions; really important in collaborative work when you're doing open-source or simply working in a company with more developers on the same project.

I saw you started using more classes and less nesting, that's very good!

1

@deG3nt3lm4n

Posted

@juanmesa2097 hardy har har, yeah slow and steady right hahaha but hmm why would i do it to the HTML feel like it makes more sense to do it to the body no? but hmm setting up the background in a puesudo code makes it easier? do you feel like it is best to use when playing with background images i am lowkey kind of trying to make more use of that and yeah kinda of like this method and lowkey may try to use it next time tbh

1

Account Deleted

@deG3nt3lm4n, In this case, is necessary because there's a full blue background color and there's an image overlapping but you could use an img element too, although it doesn't look like the right element for this purpose to me, and yeah, pseudo-elements are really handy.

0

@deG3nt3lm4n

Posted

Wow realized that the background dosent match that well.... im sorry

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord