Submitted over 3 years ago

Huddle Landing Page using HTML, Sass

Siddhesh Kamble• 330

@Sk7867

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Huddle landing page with a single introductory section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my first time using Sass instead of CSS3. I enjoyed using it and will continue to do so. Any suggestions or improvements are welcome.

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

Hey, Siddhesh Kamble! 👋

Nice work on this challenge! 🙌 Your solution looks pretty good! 😀 Also, kudos for trying out Sass (it is very nice and makes writing CSS easier). 👍

I'd just like to suggest adding background-size: cover to the background image so that it fills the entire area of the screen but doesn't get stretched or squeezed when the size of the screen changes. 😉

You could also try allowing the width of the image to be determined by the size of the screen in the mobile layout (by adding width: 100% to the image or its container or something) so that you don't have to use a media query to change the size of the image twice for the mobile layout. 🙂

Keep coding (and happy coding, too)! 😁

Marked as helpful

Siddhesh Kamble• 330

@Sk7867

Posted over 3 years ago

@ApplePieGiraffe Thank you for your suggestions 🙌 I just have a simple query how do you highlight properties like background-size: cover and all width:100 😅

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@Sk7867

Glad to help! 😀

These comments support markdown—which means you can highlight code by surrounding it in back ticks (`). There should be a keyboard icon in the upper-right corner of the feedback text field that you can click that will show you how to do this and use other markdown features.

Hope that helps. 🙂

Siddhesh Kamble• 330

@Sk7867

Posted over 3 years ago

@ApplePieGiraffe Thank You very much, I thought that was some kind of virtual keyboard.😅

Vanza Setia• 27,795

@vanzasetia

Posted over 3 years ago

👋Hi Siddhesh Kamble! My name is Vanza!

One thing on your style.scss, in my opinion, next time you can just do:

background: url(../images/bg-mobile.svg), $violet;

Rather than this:

background: url(./../images/bg-mobile.svg), $violet;

Because in my opinion, it's just kinda redundant, since it's just doing the same thing.

That's it! Hopefully this little tip may useful for you!

Marked as helpful

Siddhesh Kamble• 330

@Sk7867

Posted over 3 years ago

@vanzasetia Yaa, It is a bit helpful 😅, saves some typing effort. I just have a simple query how do you highlight properties like background and all 😅 Thank you 🙌

Vanza Setia• 27,795

@vanzasetia

Posted over 3 years ago

@Sk7867 To highlight large block of code just do three backticks.

Well, if you want to know everything about highlightning, bold, italic, etc. You can click the keyboard icon on the top right corner when you want to reply to see the syntax.

Please log in to post a comment

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