All comments

• 

  Oluwafemi• 345

  @Albusflames

  Submitted over 2 years ago

  I need feedback on how to make my flex items grow at equal rate and always maintain equal heights, and maybe width in future cases

  

  responsive coming soon page using flexbox and media

  2

  1

  0

  

  Akerele Tunde• 165

  @trafiki

  Posted over 2 years ago

  Wetin happen comrade

  0
• 

  P

  Dave• 5,245

  @dwhenson

  Submitted over 2 years ago

  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

  7

  2

  

  Akerele Tunde• 165

  @trafiki

  Posted over 2 years ago

  Quick question, What did you use for the animation?

  0

  This comment has received 2 repliesShow
• 

  P

  Mtendere Kulemeka• 240

  @mkulemeka

  Submitted over 2 years ago

  How else can I make sure that my image fits the desired content box without setting height to 100%?

  

  Desktop first using css and HTML

  1

  1

  0

  

  Akerele Tunde• 165

  @trafiki

  Posted over 2 years ago

  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 over 3 years ago

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

  

  Coming Soon Page With Responsive Images And CSS Grid — No JS

  6

  11

  10

  

  Akerele Tunde• 165

  @trafiki

  Posted over 2 years ago

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

  0
• 

  P

  ApplePieGiraffe• 30,545

  @ApplePieGiraffe

  Submitted over 3 years ago

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

  

  Coming Soon Page With Responsive Images And CSS Grid — No JS

  6

  11

  10

  

  Akerele Tunde• 165

  @trafiki

  Posted over 2 years ago

  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

  This comment has received 1 replyShow
• 

  P

  ApplePieGiraffe• 30,545

  @ApplePieGiraffe

  Submitted almost 2 years ago

  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.

  

  Pure CSS FAQ Accordion Card With Sweet CSS Animations

  #accessibility#sass/scss

  19

  82

  37

  

  Akerele Tunde• 165

  @trafiki

  Posted almost 3 years ago

  Thanks!

  1
• 

  P

  ApplePieGiraffe• 30,545

  @ApplePieGiraffe

  Submitted almost 2 years ago

  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.

  

  Pure CSS FAQ Accordion Card With Sweet CSS Animations

  #accessibility#sass/scss

  19

  82

  37

  

  Akerele Tunde• 165

  @trafiki

  Posted almost 3 years ago

  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

  This comment has received 1 replyShow
• 

  P

  ApplePieGiraffe• 30,545

  @ApplePieGiraffe

  Submitted almost 2 years ago

  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.

  

  Pure CSS FAQ Accordion Card With Sweet CSS Animations

  #accessibility#sass/scss

  19

  82

  37

  

  Akerele Tunde• 165

  @trafiki

  Posted almost 3 years ago

  Thanks a lot!

  2
• 

  P

  ApplePieGiraffe• 30,545

  @ApplePieGiraffe

  Submitted almost 2 years ago

  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.

  

  Pure CSS FAQ Accordion Card With Sweet CSS Animations

  #accessibility#sass/scss

  19

  82

  37

  

  Akerele Tunde• 165

  @trafiki

  Posted almost 3 years ago

  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

  This comment has received 1 replyShow
• 

  Jorge• 95

  @jmora2ec

  Submitted almost 3 years ago

  let me know if someone has the solution without js.

  

  Html, css and some js (I can't figure out how to do it without js)

  2

  2

  0

  

  Akerele Tunde• 165

  @trafiki

  Posted almost 3 years ago

  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
• 

  Akerele Tunde• 165

  @trafiki

  Submitted almost 3 years ago

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

  

  Profile Card Component

  2

  1

  0

  

  Akerele Tunde• 165

  @trafiki

  Posted almost 3 years ago

  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
• 

  Mojtaba Mosavi• 3,760

  @MojtabaMosavi

  Submitted almost 3 years ago

  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 :).

  

  loopstudios-landing-page-main

  4

  2

  1

  

  Akerele Tunde• 165

  @trafiki

  Posted almost 3 years ago

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

  1

  This comment has received 2 repliesShow
• 

  P

  ApplePieGiraffe• 30,545

  @ApplePieGiraffe

  Submitted almost 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!

  #svelte#gsap

  18

  104

  36

  

  Akerele Tunde• 165

  @trafiki

  Posted almost 3 years ago

  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

  This comment has received 2 repliesShow