Skip to content
OverviewSolutions
5
Comments
5

Konstantin Shuvalov

@ShuvalovrusEarth170 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

  • Konstantin Shuvalov•170
    @Shuvalovrus

    Hi, good job, your wrap element is not centered because the height of main does stretch to the content, so in order for the align-items property to work, you need to set the min-height of main to 100vh, like this:

        main {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-family: 'Outfit', sans-serif;
      min-height: 100vh;
    }
    Marked as helpful
  • Konstantin Shuvalov•170
    @Shuvalovrus

    Hi great job, but for the image to be displayed, specify the correct path to the image in the src attribute of the img tag. After all the image is in the images folder the path should look like this :

    <img src="./images/image-qr-code.png" alt="qr-code">

    or

    <img src="./image-qr-code.png" alt="qr-code">

    I advise you to delete the image that you have in the root folder and leave only the one in the images folder and specify the path I suggested first.

    I hope my advice helped you. Good luck in the future

    Marked as helpful
  • Konstantin Shuvalov•170
    @Shuvalovrus

    In this case I would not bother, you can set body property display: flex; with justify-conent:center; and align-items: center;

    html, body {
    min-height: 100vh;
}
body {
    background-color: hsl(212, 45%, 89%);
    font-family: "Outfit", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

    Read more here - How to center

  • Konstantin Shuvalov•170
    @Shuvalovrus

    Hi there 👋. Good job on completing the challenge ! @Moses-anidugbe These errors appear because you are using fontawesome.com for icons, the thing is that when you plug in the fontawesome script it creates its own styles for icons in html, try using: - IcoMoon or Ionicons as described in the task.

    Marked as helpful
  • Konstantin Shuvalov•170
    @Shuvalovrus

    Colback takes a single parameter based Event describing an event that happened. So that we can use e.targer, we need to rewrite the code like this

    menuIcon.addEventListener('click', menuSlide);

    function menuSlide(e) {
    e.target.classList.toggle('change');
    cover.classList.toggle('show_cover');
    extraLayer.classList.toggle('show_cover');
}
    Marked as helpful