Skip to content
OverviewSolutions
41
Comments
14

Alexei

@Batareika007Israel831 points

Front-end developer in past...

I’m currently learning...

Game Developer Unreal Engine

Latest solutions

View more solutions

Latest comments

  • Alexei•831
    @Batareika007

    Hi Hira, good job for your first challenge !

    To improve, you can remove the height from .product-card the padding inside .product-card-rightdid the gob for it. also remove height from media queries too.

    and maybe to make font-size more smaller on mobile, but it right to your taste =)

    Hope it help and keep going coding !

    Marked as helpful
  • Alexei•831
    @Batareika007

    @Kevin27j

    Good job for that challenge ! one of quick fix, maybe not perfect one but it will work and put rating inside button. you can put it all inside label and then wrap the "1" inside span

    <label for="btn-1" class="rating-value">
          <input type="radio" name="rating" id="btn-1" class="rating-btn" value="1" placeholder="1">
          <span>1</span>
 </label>

    add some CSS to label and span and it will be in the center.

    .rating-value{
  position: relative;
}

.rating-value span{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

    of course you can change color and add some animation... for now on click the number will be not seen because the same color , but you can change it, you will figure out how to do this =)

    about second question, I don't see something wrong with that. I think when you will go with frameworks you will learn new ways how to do that, for now I think it's fine.

    hope it will help.

  • Alexei•831
    @Batareika007

    Hi Purbo, The project looks good ! I didn't understand why you put all in header tag but all looks good and responsive, I think you can separate it in header , main and 'footer' create link on your portfolio, but it's up to you. Great work !

  • Alexei•831
    @Batareika007

    Congrats on your first project ! to make image more flexible you can set img width to max-width: 100%

    .wrapper-img__qr {
  max-width: 100%;
}
    Marked as helpful
  • Alexei•831
    @Batareika007

    Hi Ahmed,

    nice work on that challenge. I notice there is horizontally scrollbar on desktop, you can get rid of it by giving

    body{
overflow-x: hidden;;
}

    or

    id='intro'{
width:100vw; // remove it
}
main div#intro img.desktop{
width: 49vw; // 49 instead of 50
}

    but then it can make other serious problem on mobile device. need to check more deeply what cause of that inside main tag. only there some issues with width

    another advice, I think it will be good idea to put logo images inside a link, for example <a href="index.html" id="logo" ><img src="./images/logo.svg" alt="Company's Logo" ></a> at header and footer, its help users to navigate back to the page if there is need.

    at footer you can make list instead of paragraphs like that:

    <ul class="footerMenu">
  <li class="menuTitle">Product</li>
  <li class="menuItem"><a href="#">Overview</a></li>
  <li class="menuItem"><a href="#">Pricing</a></li>
  <li class="menuItem"><a href="#">Marketplace</a></li>
  <li class="menuItem"><a href="#">Features</a></li>
  <li class="menuItem"><a href="#">Integrations</a></li>
</ul>

    it's just suggestion, your work looking really great

    Marked as helpful
  • Alexei•831
    @Batareika007

    Hi @VKampos2, It's looks good, you can put the card in a middle of a page using flex-box, for example:

    .conteiner{
display: flex;
align-items: center;
justify-content: center;
height: 80vh; 
}

    And I think it's a good idea to make card's height to min-height or no height at all, for best practice if you will need to add some more text to the card.

    Marked as helpful
View more comments