@AlbusflamesSubmitted over 3 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
Akerele Tunde
@trafikiAll comments
- @dwhensonSubmitted about 3 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.
@trafikiPosted about 3 years agoQuick question, What did you use for the animation?
0 - @mkulemekaSubmitted about 3 years ago
How else can I make sure that my image fits the desired content box without setting height to 100%?
@trafikiPosted about 3 years agoHi @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 helpful1 - @ApplePieGiraffeSubmitted about 4 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! 😁
@trafikiPosted about 3 years agoOkay thanks, I see the selectors that made that possible now
0 - @ApplePieGiraffeSubmitted about 4 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! 😁
@trafikiPosted about 3 years agoHi, 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 - @ApplePieGiraffeSubmitted over 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-shadowCSS function) and animated thelinear-gradientbackground 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
displaytonone) but they're gone on the actual page, as far as I can tell. - @ApplePieGiraffeSubmitted over 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-shadowCSS function) and animated thelinear-gradientbackground 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
displaytonone) but they're gone on the actual page, as far as I can tell.@trafikiPosted over 3 years agoHi @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 - @ApplePieGiraffeSubmitted over 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-shadowCSS function) and animated thelinear-gradientbackground 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
displaytonone) but they're gone on the actual page, as far as I can tell. - @ApplePieGiraffeSubmitted over 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-shadowCSS function) and animated thelinear-gradientbackground 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
displaytonone) but they're gone on the actual page, as far as I can tell.@trafikiPosted over 3 years agoHi @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 - @jmora2ecSubmitted over 3 years ago
let me know if someone has the solution without js.
@trafikiPosted over 3 years agoI 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 - @trafikiSubmitted over 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 ✌🏽
@trafikiPosted over 3 years agoThanks 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 - @MojtabaMosaviSubmitted over 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 :).
@trafikiPosted over 3 years agoWonderful job, I'm curious, how did you achieve the opening section (the one with the vr guy)??
1
