Skip to content
OverviewSolutions
6
Comments
9
AssadullahADELYAR
@AssadullahADELYAR

All comments

  • AssadullahADELYAR•200
    @AssadullahADELYARPosted about 1 year ago

    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

    1
  • AssadullahADELYAR•200
    @AssadullahADELYARPosted about 1 year ago

    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
    1
  • AssadullahADELYAR•200
    @AssadullahADELYARPosted about 1 year ago

    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
    1
  • Jennifer Souza•340
    @zoedarkweatherSubmitted about 1 year ago

    All feedback welcome, especially any tips for handling the images on this one. I set max-widths on the desktop as it was either too large or shrinking weirdly, but I'm wondering if anyone's found a better way to handle that. Thank you!

    Mobile-first solution using CSS grid

    1
    AssadullahADELYAR•200
    @AssadullahADELYARPosted about 1 year ago

    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
    1
  • AssadullahADELYAR•200
    @AssadullahADELYARPosted about 1 year ago

    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
    1
  • FinnJ04•100
    @FinnJ04Submitted about 1 year ago

    building the component went quite well, but I was facing an issue when the screen-size was too small (you couldn't see the whole component when the Y size was too small, nor scroll). I fixed this by setting the height too 100%, but this caused that the component was not vertically centered anymore.(I also used the overflow property, but didn't like that either). I didn't have this issue on my stats-preview-card-component. Tips how to solve this problem would be very much appreciated!

    single-price-grid-component using flexbox & grid

    1
    AssadullahADELYAR•200
    @AssadullahADELYARPosted about 1 year ago

    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,

    0
  • Simonas•40
    @SimasCodeSubmitted about 1 year ago

    Hello, Frontend Mentor Community ! This is my first project solution. I would appreciate it if you leave a comment.

    QR code component solution

    1
    AssadullahADELYAR•200
    @AssadullahADELYARPosted about 1 year ago

    Hello!

    You have done a great job, in my opinion for margin in container class you can do with one line of code and for box-shadow you can put the first value 0px and increase the 3rd value for blur.

    .container {
  background-color: var(--white);
  border-radius: 20px;
  margin: 60px 30px 60px 30px;
  width: 340px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}

    .container {
  margin: 0 auto;
  box-shadow: 0px 6px 50px rgba(0, 0, 0, 0.1);
}

    I hope it was helpful for you

    Happy coding,

    Marked as helpful
    0
  • AssadullahADELYAR•200
    @AssadullahADELYARPosted about 1 year ago

    Hello, your design looks great, but you don't need to use too many P tags.

    <section class="boldedText">
      <p>Improve your front-end </p>
      <p>skills by building projects</p>
    </section>
    <section class="nonboldedText">
      <p>Scan the QR code to visit Frontend </p>
      <p>Mentor and take your coding skills to</p>
      <p>the next level</p>
    </section>

    for boldedText class you should use heading tag and control the size with CSS.

    <section class="boldedText">
      <p>Improve your front-end </p>
      <p>skills by building projects</p>
    </section>

    <section class="boldedText">
      <h2>Improve your front-end skills by building projects</h2>
    </section>

    You can do it with one paraghraph tag.

    <section class="nonboldedText">
      <p>Scan the QR code to visit Frontend </p>
      <p>Mentor and take your coding skills to</p>
      <p>the next level</p>
    </section>

    <section class="nonboldedText">
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </section>

    and you can control the spacing with gap: 15px when you use flex-box.

    I hope it was helpful for you

    Happy coding,

    Marked as helpful
    0
  • MonarchRyuzaki•180
    @MonarchRyuzakiSubmitted about 1 year ago

    I usually find it a bit difficult on the following things:

    1. Center/Position stuff.
    2. Setting Height/Width and stuffs of images

    So would want some advice to improve on that Thank you

    QR Code Component Using CSS Flexbox

    3
    AssadullahADELYAR•200
    @AssadullahADELYARPosted about 1 year ago

    Hi! use flex-box to center your content.

    0