Skip to content
Submitted over 3 years ago

Responsive Landing Web Page with HTML + CSS

Lakshan•305
@M-lakshan
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

Hey yoh 🙂, I'm new to web designing & still getting used to it. I've created my first NEWBIE-Free challenge, the Huddle Landing Page with 90% accuracy ( I think ) but I was unable to set the background image ( desktop & mobile svg_s ) sizes that fit into the given parameters. Anyhow If I change width, height, or both properties according to my screen view - the background svg_s either span out or stretched. later I tried some CSS solutions but nothing comes out helpful. All I want to know how to set the background svg_s as the same as in the website pre-preview images that were given.

~Thanks~

Community feedback

  • Adler G Luders•1,580
    @just-a-devguyPosted over 3 years ago

    The site preview does not work 😅

    1
    Lakshan•305
    @M-lakshanPosted over 3 years ago

    @adluders yh, something went wrong with Github-page hosting. I'm not sure I submitted it correctly #checking...

    0
    Adler G Luders•1,580
    @just-a-devguyPosted over 3 years ago

    @M-lakshan 😎😎👌🏾 yeah GitHub pages can be finicky sometimes

    0
    Lakshan•305
    @M-lakshanPosted over 3 years ago

    @adluders my index.html, SCSS, CSS and image files ... all in their dedicated positions. I double-checked every path and re-uploaded them. everything works well with my code editor but only the HTML is popping up in the hosting. I don't know why! 😕

    0
    Code-decode•145
    @sayedleePosted over 3 years ago

    you should re-check your css link path..as i can see vercel only finding your html file.

    1
    Adler G Luders•1,580
    @just-a-devguyPosted over 3 years ago

    @M-lakshan I think what's listed above is what you should do. It might just be how the folder structure is.

    0
    Albertoflj•170
    @AlbertofljPosted over 3 years ago

    @M-lakshan I had the same problem, try putting "./path" instead of "/path", it worked for me.

    2
    Lakshan•305
    @M-lakshanPosted over 3 years ago

    @sayedlee , @Albertoflj , @adluders , : Thankyou very much guys 💪🏼🙂🥂. somehow I managed to host the site correctly. It can be seen in preview-site but still hv a tiny problem. How can I make it appear in the DESIGN COMPARISON as my solution?

    0
    Adler G Luders•1,580
    @just-a-devguyPosted over 3 years ago

    @M-lakshan ayyyyyyye that's great. I think if you hit generate screenshot, it should update

    0
    Lakshan•305
    @M-lakshanPosted over 3 years ago

    @adluders Oh hoooo that worked. Thanks again! 🙂🥂

    0
    Adler G Luders•1,580
    @just-a-devguyPosted over 3 years ago

    @M-lakshan ayyye. I'm glad

    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