Skip to content
OverviewSolutions
18
Comments
8

Dessidy

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

  • Dessidy•300
    @Dessidy

    Hello 👋👋👋

    Just got a few things to say on your code.

    body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }

    This Will perfectly center your code just like it is on the challenge. Its more advisable than margin:0 auto

    And every website must have at least 1 h1 tag

    That's all I have to say

    Nice code though 😁

  • Dessidy•300
    @Dessidy

    Hey 👋👋👋

    I noticed your image doesn't have the purple background in it so I thought I would help out

    .img_container { position: relative; (This is very important!) }

    `.img_container::before { content: ""; position: absolute; inset: 0;

    background: var(--clr-Soft-violet); opacity: .8; mix-blend-mode: multiply; (This is just to make it blend better) } `

    Oh and also I noticed that you don't have <h1> tag, which is not so good practice. <h1> tags are very important to web pages.

    That's all though. Hope this helps 👦

    Marked as helpful
  • Dessidy•300
    @Dessidy
    
background-image: url(bg-pattern-top.svg), 
url(bg-pattern-bottom.svg);

background-repeat: no-repeat;

background-position: right 52vw bottom 35vh, 
left 48vw top 52vh;```

This is for the back ground positioning in the body
Hope this helps 😁
  • Dessidy•300
    @Dessidy

    Try reducing the opacity of the cyan color. The image would be more visible also the eye icon, in general it will just blend things more

  • Dessidy•300
    @Dessidy

    Hello 👋👋

    I think you should increase your media query break point to let it display properly on mobile devices as the design suggest.

    @media (min-width: 600px)

    Also starting with a mobile first approach is a good practice.

    Hope you found this helpful 🙏

    Marked as helpful
  • Dessidy•300
    @Dessidy

    This is concerning your <h2> tag.

    A Website needs at least one <h1> so I think it's best if you use the <h1> tag then size it perfectly using font-size: ;

    Hope this was of help 😅

View more comments