Skip to content
OverviewSolutions
26
Comments
10
P
Michael Tze
@Biggboss7

All comments

  • 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
  • Draco•160
    @dracowarzSubmitted over 2 years ago

    Please check my "3 Column Preview Card Component Main" solution, and see whether I have any need to improve, especially the media query part.

    One question here, any tips for me to improve or do better on the media queries part? I'm a bit of head pain on that part.

    Thank you very much! :D

    3 Column Preview Card Component Main

    1
    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
  • 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
  • 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
  • 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
  • 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
  • ApplePieGiraffe•30,545
    @ApplePieGiraffeSubmitted over 3 years ago

    Hello, everybody! 👋

    I finally completed another challenge! 🎉 I know it's been a while, but I'm happy to submit another solution after taking a little break. 😆

    This was a short, simple challenge that I created with Svelte. Svelte is such a joy to use and it worked out really well with GSAP (which I used to add the animations to the site). I also used ScrollTrigger and smooth-scrollbar to enhance the animation and scrolling experience just a bit! 😀

    And for a tiny surprise—scroll past the hero section and back again to toggle the avatars of some of your favorite Frontend Mentors! 😆

    Of course, feedback is welcome and appreciated! 😊 Do let me know of any issues you find (since I'm afraid I'm bound to have missed something somewhere)! 😅

    Oh, yes, and click on the giraffe for the attribution. 😉

    Happy coding! 😁

    Meet Landing Page | Svelte + GSAP | Surprise!

    18
    Michael Tze•480
    @Biggboss7Posted over 2 years ago

    Very cool !!

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

    Great job @BismeetSingh on accomplishing this project. You can try to implement --> background-size : contain;, so that the background will be more resemble to the original design.

    Hope it helpful and happy coding

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

    Hello @codekesh, I think you do a great job on this project. Somehow I notice that the border-radius of your main content is not fully displayed. I recommend you to try to put overflow : hidden; on your <main> element. Hope it can be helpful.

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

    Hello @TRIPLE-ADE, Good Job on accomplishing this great challenge. Anyway, I think there are some aspects that you can improve on this challenge.

    1. I think it would be better to build the CSS Styling externally, in another file, outside from HTML file. It will make the code cleaner.

    2. If you want, you can make your main section appears precisely in the middle of the body, by : a. add, min-height : 100 vh; in the body section, it will make your body section to appear full page

    b. put in the body section display : flex; flex-direction : column; justify-content : center; align-item : center;

    I hope this feedback has been useful to you! keep coding :)

    0