Skip to content
Submitted over 3 years ago

Mobile first huddle landing page with scss

ToNisamBioJa•330
@ToNisamBioJa
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hii!

I would really appreciate if somebody looked at this one for me!

I used the BEM naming convention and I paid attention to make the code readable and clean. I also ordered declarations by type(position, display, colors, font, miscellaneous…).

This one was trickier for me than I expected. The background image was a problem for me but I managed to complete it on my third try.

I tried hard to get it to the original design but I still didnt manage to place the social links where I wanted. But I think its still pretty close to the original one.

I went with a mobile first approach as always and on mobile I think I got it very close to the original.

On a previous challenge somebody pointed out that I dont use box shadow and hover effects enough so I added some on this one(just something simple). I need to learn animations more and I apply them to these designs more.

On the design comparison it shows it a little different than it is when you preview the site :/.

Sorry for the long text on such a simple challenge.

All feedback is appreciated as always. Thanks in advance!!!

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Hello, ToNisamBioJa! 👋

    Good job on this challenge! 👏 It's great to hear that you learned a lot and your solution looks nice and responds well! 👍

    One small thing I'd like to suggest is to add background-size: cover to the body so that they background image fills up the entire area of the screen in the desktop layout. 😉

    Also, it might be worth using padding rather than margin to add space around the content of the page and the sides of the screen because the body of your page seems a little misplaced in the dev tools because of margin collapsing. It's not a huge deal, but it's useful to be aware of when layout things out in CSS. Learn more about margin collapsing in this great article.

    Hope that helps a little. 🙂

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    1
    ToNisamBioJa•330
    @ToNisamBioJaPosted over 3 years ago

    @ApplePieGiraffe Thank you for the advice and nice words!

    1
  • Digvijay Ghosh•1,020
    @dvion0o0Posted over 3 years ago

    it is completely responsive you have done a great work here 👍

    Marked as helpful
    1
    ToNisamBioJa•330
    @ToNisamBioJaPosted over 3 years ago

    @dvion0o0 Thank you very much!!

    0
  • Nebiyou Ersabo•185
    @NebiyouErsaboPosted over 3 years ago

    Great job here! Just add cursor:pointer on the social icons and you're good to go.

    I think you nailed this one! 👍

    Marked as helpful
    1
    ToNisamBioJa•330
    @ToNisamBioJaPosted over 3 years ago

    @Nebiyou12 Will do! Thank you so much!

    0

Please log in to post a comment

Log in with GitHub

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