Skip to content
OverviewSolutions
6
Comments
9

AssadullahADELYAR

@AssadullahADELYAR200 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • AssadullahADELYAR•200
    @AssadullahADELYAR

    Hello!

    Congratulation you have done very well, try to improve your design for medium size you like you can center the h1 tag and increase the size of input.

    for input to remove the white background add background-color: transparent:

    #email-input {
    padding: 1rem 2rem;
    border: 2px solid var(--ds-red);
    outline: none;
    border-radius: 30px;
    width: 60%;
}

    #email-input {
    padding: 1rem 2rem;
    border: 2px solid var(--ds-red);
    outline: none;
    border-radius: 30px;
    width: 60%;
   background-color: transparent;
}

    I hope it is helpful

    Happy coding

  • AssadullahADELYAR•200
    @AssadullahADELYAR

    Hello!

    Congratulation you have done very well, but for good practice you should not add everything inside the form.

    <form action="#" id="form" class="container">
      <h2>
        WE'RE <span class="coming">COMING SOON</span>
      </h2>
      <p class="text">
        Hello fellow shoppers! We're currently building our new fashion store. 
        Add your email below to stay up-to-date with announcements and our launch deals.
      </p>
      <div class="email-container" id="email-container">
        <input type="email" id="email" class="email-box" placeholder="Email Address">
        <button type="submit" id="submit" class="submit-button"><img src="images/icon-arrow.svg"></button>
      </div>
      <span id="error-text"></span>
    </form>

    <form action="#" id="form" class="container">
        <input type="email" id="email" class="email-box" placeholder="Email Address">
        <button type="submit" id="submit" class="submit-button"><img src="images/icon-arrow.svg"></button>
      <span id="error-text"></span>
    </form>

    for input and button you don't need to add a class you can style with id.

    I hope it is helpful

    Happy coding

    Marked as helpful
  • AssadullahADELYAR•200
    @AssadullahADELYAR

    Hello!

    Great job it looks very good in small screen, but in desktop view not the same as challenge.

    To work with these kind of designs you should use CSS GRID.

    I also did this challenge I used grid and this Article helped me a lot.

    Hope it is helpful Happy coding

    Marked as helpful
  • AssadullahADELYAR•200
    @AssadullahADELYAR

    Hello!

    You have done a great job, I also did this one today and I did the picture with CSS background-image here is My Slolution

    Hope it helps

    Happy coding

    Marked as helpful
  • AssadullahADELYAR•200
    @AssadullahADELYAR

    congratulations on completing this challenge 🎉🎉

    This is great but I think you should consider changing some things:

    You don't need to have extra div's to set two background-images on your body Instead you can do something like this:

    inside of your body

    body {
background-image: url(images/bg-pattern-top.svg);
background-repeat: no-repeat;
background-size: cover;
background-position: top -40rem left -30rem;
}

    ofcourse you can use more than one background image like this:

    body {
background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
}

    please check This

    I hope it was helpful for you👍👍

    Happy coding 🙂🙂

    Marked as helpful
  • AssadullahADELYAR•200
    @AssadullahADELYAR

    Hello!

    Your solution looks very good. You can check out my solution for the Price-grid challenge. Please let me know your feedback.

    Thank you,

View more comments