Skip to content
Submitted over 4 years ago

Base apparel coming soon challenge: Responsive and Mobile friendly too

Sarvagya Sharma•555
@sarvagya2545
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  1. How can I create the same background as given in the real image? There are a few curvy lines in the background which are giving a special effect
    whereas my website background is vey plain looking.
  2. Also, in the source code I have only specified everything size-relaated as pixels. Is this causing anything incorrect in the design? Should I specify as rem or % ?
  3. When trying to create the form, I had to use an image as the button and then locate the button according to css positioning. Is there anything better I can do?

Thanks for everybody's support.

Community feedback

  • Adarsh Pratap•5,515
    @adarshcodesPosted over 4 years ago

    Hi! @sarvagya2545, Nice work on this challenge,

    • The background image is given in the images folder,(in case it's missing you can find it here https://drive.google.com/open?id=1Y13nWX_3vPzRcyHJ7fjA8TmpG8N5DHBB)
    • Using the pixel unit is okay but it would be much nice to use rem, you can use % when making more responsive (I uses rem unit) Check this resource https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97.
    • The input form and the button is not placed as it should be, you can fix it.
    • Solve the HTML and Accessibility issues.

    Great work!, Happy coding :)

    3
  • Kyrylo•170
    @LvovKirillPosted over 4 years ago

    Hey @sarvagya2545! I've just finished the same challenge and would like to help you with it :) As far as I see there is no need to specify objects as rem or % because everything looks fine both on desktop and mobile. In order to create the same background, you should give body a property of "background" and then locate "bg-pattern-desktop.svg" file, which is situated in "images" folder.

    For me it looks like this - background: url(/images/bg-pattern-desktop.svg);

    Also you might want to consider fixing issues found by the report!

    2
    Sarvagya Sharma•555
    @sarvagya2545Posted over 4 years ago

    @LvovKirill Thanks for the feedback. I will try doing this.

    1

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