Pod request access landing page

Community feedback

• 

  P

  Krishna Vishwakarma•1,390

  @KrishnaVishwakarma1595Posted about 1 year ago

  Hey, @Smallz97

  I have some points for you to improve the solution -

  • Instead of providing the background to your #hero section, you can provide the background to the body like below, so it won't look stretched.

  body{
      background: #121725 url(assets/desktop/image-host.jpg);
      background-position: center right;
      background-repeat: no-repeat;
      min-height: 100vh;
  }
  

  • Also, the logo looks stretched so don't provide its width & height to the class .logobox, even in the media queries.

  • For the dotted pattern image you can provide CSS like below, so that also not get streched

  .dotted-pattern-box{
      position: absolute;
      width: 232px;
      height: 104px;
      right: 0;
      bottom: 70px;
  }
  .dotted-pattern-box img{
  width: 100%;
      height: 100%;
      object-fit: cover;
  }
  

  • When we focus into the input .email-input there is an outline, you can hide hit by giving outline:none

  • Even If I input the email like this krishna@gmail, it takes and didn't provide the error message that it is invalid.

  • Instead of the browser's default required message you can provide your custom one.

  • Don't provide width & height to these classes .supporting-brands, .brand & remove position: absolute from .brand img. It makes logos stretched.

  Hope these point will help you to improve the solution.

  Happy Coding

  1

  ---

  

  { Big Smallz }•170

  @Smallz97Posted about 1 year ago

  Hey @KrishnaVishwakarma1595,

  Thank you for the detailed feedback and your insights.

  To this effect, I've implemented some of the changes you suggested, while refraining from implementing the others, for which I'll be giving my reason(s) below:

  body {
    font-family: "Chivo", sans-serif;
    background-color: var(--deep-purple);
    background-image: url(assets/desktop/image-host.jpg);
    background-size: 62% 71%;
    background-position: right;
    background-repeat: no-repeat;
    /* min-height: 100vh; */
  }
  

  Including the "min-height" property on the body element and setting its value to "100vh", will mean that the hero page can extend beyond the device's viewport height, which is contrary to my interpretation of the design provided.

  .logobox {
    top: 11.34%;
    left: 11.45%;
    height: 6.2%;
    width: 9.36%;
    display: flex;
    position: absolute;
  }
  

  Including the "height" and "width" properties to the .logobox and providing their corresponding values in percentages, ensures responsiveness across multiple devices. It also matches perfectly with the design on the solution-design comparator.

  .dotted-pattern-box {
    top: 79.78%;
    left: 83.88%;
    width: 16.11%;
    display: flex;
    height: 11.55%;
    position: relative;
  }
  

  For the .dotted.pattern-box, I've refrained from using absolute values for the "width" and "height" properties, or any other properties in the entire project as I aim to achieve responsiveness with the least lines of code.

  .supporting-brands {
    display: flex;
    width: 74.14%;
    height: 5.69%;
    justify-content: space-between;
  }
  
  .brand {
    width: 6.6vw;
    height: 100%;
    display: flex;
  }
  

  For the .supporting-brands and .brands, I decided to include a "height" and "width" property here again for two major reasons:

  • The .supporting-brands is a parent flex container within another parent container and for me to effectively use some "flex-properties" such as justify-content, I have to specify the width of the container within its parent container. For this, I decided to go with a percentage value, again, to ensure responsiveness across multiple devices.

  • The .brands being a child flex item of the parent .supporting-brands, I used the property height: 100% to ensure it takes up 100% of the height of the parent container.

  I'm still iterating through the possible solutions for the other issues you highlighted and I'll notify you as soon as I'm done.

  For the issue with the .email-input field accepting an input such as khfuf@gmail without returning an error message, I would like it if you could suggest possible solutions that I could try out.

  Also, I would appreciate it if you could describe a way to implement the padding in the .email-input field as shown in the design, with the current code structure I have.

  Thanks.

  0

  

  P

  Krishna Vishwakarma•1,390

  @KrishnaVishwakarma1595Posted about 1 year ago

  Hey, @Smallz97

  Good to see you made updates. I understand your concern about giving the width and height to the brand's logo & other images but we are talking about responsiveness where each user will have different screen sizes of different widths and heights. I'm just concerned because the images look stretched on my screen, it might be not in yours. It could happen with other users too, and the user won't feel good at first glance. So, all of my concerns are actually about the user's UI/UX experience.

  • For the email issue, you can add an event listener to the form to listen to the submitted event and do the email validation using any regex expression. You can find an email validation regex out there and use it. So, what this regex expression does is actually matches the validation according to expression if it passes then it returns true otherwise false. For example -

  const regex = /^(.+)@(.+)$/;
  if(regex.test("[email protected]")){
  console.log("Valid email");
  } else{
  console.log("Not a valid email!");
  }
  

  The above example is just a basic regex email validation that tests the passed string and provides true & false in return. If you thoroughly test with this regex that is also partially correct we can say cause for some email strings like "user@gmailcom" also returns true. So, for full email format validation the regex would be little complex so it'll matches correct. I just given you an example how you can do it.

  • For the input padding you can do this. Provide padding to email input and make a little change to button

  .email-input{
  padding: 14px 0px 14px 32px
  }
  .desktop-form-btn{
      right: 4px;
      top: 3px;
      height: 40px;
  }
  

  I hope this will help you.

  Marked as helpful

  0