Skip to content
OverviewSolutions
23
Comments
230

dewslyse

@dewslyse3,005 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

View more solutions

Latest comments

  • dewslyse•3,005
    @dewslyse

    Hello @AnaesthCode! Congrats on your submission. Those background images can get quite tricky. You may use the examples below as a reference for how to handle them.

    Happy coding!

    Marked as helpful
  • dewslyse•3,005
    @dewslyse

    Hello @frantecbh

    You need to set the padding on .hYnCah to 1rem on all sides and delete the padding-top: 1rem; you have set on .hYnCah img

    Marked as helpful
  • dewslyse•3,005
    @dewslyse

    Hello @Wissemh, congrats on your submission. Your card looks good. Some things to note:

    • The image on the card is not perfectly centred. This is because of 👇
    .firstimg {
    width: 85%;
    margin: 2.5vh;
 }

    You should delete those properties and set a max-width on .firstimg to 100%.

    • You should also add a max-width (e.g. 375px) and some padding (e.g. 25px) to your main. You can do away with width: 45vh; on the main because it serves no purpose. You could also do away with the height: 75vh; and adjust the height of the card by applying some margins/padding to the elements on the card.

    Happy coding!!

    Marked as helpful
  • dewslyse•3,005
    @dewslyse

    Hello @tassieoshiro. Massive congrats on completing your first solo project 💪. Awesome job.

    Some things to note:

    • You could set a max-width on your .container to prevent the card from growing unnecessarily big. This component has a max-width of 375px.
    • Your page is missing an h1. You could replace <h3>Equilibrium #3429</h3> with <h1>Equilibrium #3429</h1>

    All the best and happy coding.

  • dewslyse•3,005
    @dewslyse

    Hello @thanosballo, congrats on your submission. Well implemented. Some things to note:

    • Remember to include landmarks (e.g. header, main, footer etc) in your markup. In this case you could change <div class="container"> to <main class="container">.
    • Make sure headings increase by one. You could change <h4>Annual Plan</h4> to <h2>Annual Plan</h2>
    • The order summary component is missing the background image

    Happy coding!!

    Marked as helpful
  • dewslyse•3,005
    @dewslyse

    Hello @Batareika007, you can achieve the overlay by applying background-blend-mode: multiply; to your .image-section

    Happy coding!!

    Marked as helpful
View more comments