Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • @trafiki

    Posted

    Wetin happen comrade

    0
  • P
    Dave 5,245

    @dwhenson

    Submitted

    I had to do a lot of mental gymnastics to get the animation working on this one. I feel like a need to lie down for about a week now. Any feedback or suggestions most welcome.

    Just updated this one as I noticed that the JS refresh was overwriting the transitions. It works now but the JS is not ideal and very repetitive.

    Countdown Timer - SCSS, JS

    #accessibility#gulp#sass/scss

    2

    @trafiki

    Posted

    Quick question, What did you use for the animation?

    0
  • @trafiki

    Posted

    Hi @mkulemeka considering the approach you took, It is necessary that you set width and height of the image. The issue with setting the width and height here is that the image is forced to take the dimension of the container making the image distorted when the dimension of the parent div's container doesn't quite align with the image dimension. To fix this error, all you need to do is add "object-fit: cover;" to your ".main .img img" style rule.

    You can read more about the object-fit css property at https://www.w3schools.com/css/css3_object-fit.asp

    Let me know if that helps or if you have additional questions.

    Cheers :)

    Marked as helpful

    1
  • P
    ApplePieGiraffe 30,545

    @ApplePieGiraffe

    Submitted

    Hey, everybody! 👋

    I have to admit, this was a much trickier challenge than I thought! 🤔

    I originally tried to layout this site using flexbox, but eventually switched to CSS grid (which I found to be easier).

    I also decided not to try out any JS for the form validation but use CSS pseudo-classes and combinators to make the error elements appear when the email input is invalid.

    I really wasn't sure about how to make this challenge responsive. 😥 Other than follow the designs for the desktop and mobile layouts of the site (which look nice when the screen is exactly 1440x800 or 375x800) I think there's a lot of blank space on other screen sizes and I wasn't sure if I should allow the images to scale a whole lot (because then they might not look so clear).

    Any help or feedback on this would be greatly appreciated! 😌

    Happy coding, everyone! 😁

    @trafiki

    Posted

    Okay thanks, I see the selectors that made that possible now

    0
  • P
    ApplePieGiraffe 30,545

    @ApplePieGiraffe

    Submitted

    Hey, everybody! 👋

    I have to admit, this was a much trickier challenge than I thought! 🤔

    I originally tried to layout this site using flexbox, but eventually switched to CSS grid (which I found to be easier).

    I also decided not to try out any JS for the form validation but use CSS pseudo-classes and combinators to make the error elements appear when the email input is invalid.

    I really wasn't sure about how to make this challenge responsive. 😥 Other than follow the designs for the desktop and mobile layouts of the site (which look nice when the screen is exactly 1440x800 or 375x800) I think there's a lot of blank space on other screen sizes and I wasn't sure if I should allow the images to scale a whole lot (because then they might not look so clear).

    Any help or feedback on this would be greatly appreciated! 😌

    Happy coding, everyone! 😁

    @trafiki

    Posted

    Hi, I;m curious, how did you achieve the email validation without JS. How did you make it display the error message and icon without js

    1
  • P
    ApplePieGiraffe 30,545

    @ApplePieGiraffe

    Submitted

    Hey, everybody! 👋

    This was a fun challenge in which I learned how to use and style the <details> and <summary> HTML elements.

    I also added a bobbing animation to the floating cube (with a small touch from the drop-shadow CSS function) and animated the linear-gradient background with this helpful tool.

    I'm quite happy with the result! 😊

    Any feedback on both the design and code is welcome and appreciated! 😃

    Happy coding! 😁

    EDIT: For some reason, the details marker on each of the FAQs is showing up in the screenshot (even though I set their display to none) but they're gone on the actual page, as far as I can tell.

  • P
    ApplePieGiraffe 30,545

    @ApplePieGiraffe

    Submitted

    Hey, everybody! 👋

    This was a fun challenge in which I learned how to use and style the <details> and <summary> HTML elements.

    I also added a bobbing animation to the floating cube (with a small touch from the drop-shadow CSS function) and animated the linear-gradient background with this helpful tool.

    I'm quite happy with the result! 😊

    Any feedback on both the design and code is welcome and appreciated! 😃

    Happy coding! 😁

    EDIT: For some reason, the details marker on each of the FAQs is showing up in the screenshot (even though I set their display to none) but they're gone on the actual page, as far as I can tell.

    @trafiki

    Posted

    Hi @ApplePieGiraffe, I have one more question if you don't mind, how are you able to make the cube stay at the same position when resizing the window on desktop view? I have tried different techniques but they aren't working. What the secret? 😪

    2
  • P
    ApplePieGiraffe 30,545

    @ApplePieGiraffe

    Submitted

    Hey, everybody! 👋

    This was a fun challenge in which I learned how to use and style the <details> and <summary> HTML elements.

    I also added a bobbing animation to the floating cube (with a small touch from the drop-shadow CSS function) and animated the linear-gradient background with this helpful tool.

    I'm quite happy with the result! 😊

    Any feedback on both the design and code is welcome and appreciated! 😃

    Happy coding! 😁

    EDIT: For some reason, the details marker on each of the FAQs is showing up in the screenshot (even though I set their display to none) but they're gone on the actual page, as far as I can tell.

    @trafiki

    Posted

    Thanks a lot!

    2
  • P
    ApplePieGiraffe 30,545

    @ApplePieGiraffe

    Submitted

    Hey, everybody! 👋

    This was a fun challenge in which I learned how to use and style the <details> and <summary> HTML elements.

    I also added a bobbing animation to the floating cube (with a small touch from the drop-shadow CSS function) and animated the linear-gradient background with this helpful tool.

    I'm quite happy with the result! 😊

    Any feedback on both the design and code is welcome and appreciated! 😃

    Happy coding! 😁

    EDIT: For some reason, the details marker on each of the FAQs is showing up in the screenshot (even though I set their display to none) but they're gone on the actual page, as far as I can tell.

    @trafiki

    Posted

    Hi @ApplePieGiraffe great work! I was wondering, how did you tuck the image on the left under the body background while it's still inside the white container? I've tried inspecting your code but I didn't find anything. I'd appreciate some explanation or if it's a technique that I can look up please let me know. Thank you!

    2
  • @trafiki

    Posted

    I think doing it without js involves using scss. But this challenge listed js in the technologies to be used so i think it's okay to do it with js.

    0
  • @trafiki

    Submitted

    It gets better with each challenge. I am thankful for this community. This is my submission folks! Corrections are very welcome. Thanks ✌🏽

    @trafiki

    Posted

    Thanks for the feedback @vanzasetia. Where would you suggest I use headings, ul, and li in this case. I get confused about this sometimes except for situations where it's quite obvious like an actual list or page heading.

    Edit: Never mind, I took a look at your solution and now have a clue. Thanks

    0
  • @MojtabaMosavi

    Submitted

    Hi guys, I learned quite a few new thing doing this one( see the repo for more). No qestions come to mind directly but as always I would love to hear any thoughts you wanna share.

    Keep coding :).

    @trafiki

    Posted

    Wonderful job, I'm curious, how did you achieve the opening section (the one with the vr guy)??

    1
  • P
    ApplePieGiraffe 30,545

    @ApplePieGiraffe

    Submitted

    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! 😁

    @trafiki

    Posted

    Hi APG, this is a brilliant solution, how did you achieve the vertical line and circle thing preceding the "Built for modern use" and "Experience more together" sections? What is it called? I will really appreciate if you can point me to a tutorial that explains the concept or tell me what it's called so i can search online for a guide. Thank you

    1