Skip to content
OverviewSolutions
26
Comments
10
P

Michael Tze

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

  • P
    Michael Tze•480
    @Biggboss7Posted over 2 years ago

    Hello Chris Ekstedt, Great job on accomplishing this project. You gave the best shot by linking the socmed to the real website :)

    Maybe there are some feedbacks which I can give for you :

    1. The texts of your landing page got pressed in on mobile view (375px). I think it is better to adjust the margin of the body and font-size of the text to be smaller.

    2. Referring to your question about semantic tags on HTML. I notice that in the footer section, you are using <div> as the container to contain the socmed links. I think it is more semantically if you change <div> into <nav>. The code may looks like this :

    <footer> <nav> <ul> <li><a>...</a></li> </ul> <nav> </footer>

    I hope it can be helpful. Happy Coding

    0
  • P
    Michael Tze•480
    @Biggboss7Posted over 2 years ago

    Hello @dracowarz, good job on accomplishing this challenge. I think it is better and easier for you to set the media query in bigger range. You can make it "@media only screen and (max-width : 1000px)". So, it is not only fit in mobile, but also on tablet view. Hope it will be useful. Happy Coding

    Marked as helpful
    1
  • P
    Michael Tze•480
    @Biggboss7Posted over 2 years ago

    Hello @eriktoger, You did a great job on this challenge. I like how you make the share-link location appears as it is shown in the given design. However, I think that you miss a meta viewport on the HTML head section, which cause the card cannot follow the media query rules.

    Hope it helpful.

    Marked as helpful
    0
  • P
    Michael Tze•480
    @Biggboss7Posted over 2 years ago

    Do you mean that you didn't see it on the given design by frontend mentor or you didn't see it after you tried my solution ?

    If you mean that you didnt see it on the given design, try to check it one more time on the this challenge preview site and click on active state. It does exist on the challenge.

    Marked as helpful
    0
  • P
    Michael Tze•480
    @Biggboss7Posted over 2 years ago

    Hello @TRIPLE-ADE, Good job on accomplishing this challenge. The NFT Card that you built is great, it is almost resemble the given design from frontend mentor.

    However, I noticed there is one thing missing in your card, which is the eye logo in the middle of the card.

    As the solution from me, maybe you can try this out.

    1. Inside your image container (id="overlay"), put the image "eye logo".

    2. set your image container (id="overlay") to position : relative

    3. set the eye-logo to position : absolute. nb : from step 2 and 3, it will enable your eye logo to be anywhere you like, which the movement is based/relative to the parent container

    4. Move the eye logo until it stands in the middle of your NFT-image

    5. Inside the CSS, set the eye-logo image to hidden

    6. Last, make sure that your eye logo as well as your your background to appear, when you hover through it.

    You can write it like this : #overlay:hover img("the eye logo") { display:inline-block; }

    I hope this solution can be helpful to you. Happy Coding!

    Marked as helpful
    0
  • P
    Michael Tze•480
    @Biggboss7Posted over 2 years ago

    Hello Sam Ayebanate, good job on accomplishing this project. The website you created almost resemble the given design from frontend mentor. In order to make it perfect, maybe you can add the border-radius on the card.

    Marked as helpful
    0
View more comments