Using flex-blox techniques and some other basic means, the project was completed as far as possible.
Guy Ezra
@ezraguy
All comments
- Guy Ezra⢠615
@ezraguy
Posted
Hey @juniorjuarez, Great Work! 1 suggestion that I have is adding a little bit of transition to the hover state of the image by adding this CSS:
.image div{ transition: .3s ease; }
Marked as helpful
0 - Abhik⢠4,840
@abhik-b
Submitted
Hi Frontend Mentors š,
I created some staggering animations using
setTimeout
s , however I personally feel there's a better a way for that. So if anyone knows that please help me out!Any feedbacks,tips,suggestions will be highly appreciated š
Guy Ezra⢠615@ezraguy
Posted
hey @abhik-b, Great work! about the setTimeout on the animations, maybe
animation-delay
in your CSS is the solution you are looking for.Marked as helpful
1 - env-y⢠20
@env-y
Submitted
Hi everyone! Feedback would be greatly appreciated, do you have any tips for me?
Guy Ezra⢠615@ezraguy
Posted
Hey, @Env-y your project looks very good! I have only a suggestion. in the 960px width break point maybe make the pricing cards half the width of the screen I think it will make them look better and more readable. other than that it looks great! Happ coding! š
1 - PErik Tangvik⢠255
@Etang131
Submitted
Let me know if anything needs to be fixed
Guy Ezra⢠615@ezraguy
Posted
Hey @Etang131, I have 1 suggestion to offer, I think the image component should not be in the container. because the container has a
max-width:1440px
and when you look at the website with a desktop monitor there are white spaces on the sides because the screen is wider than 1440px. what I would do is would take the image out of the container CSS as a background image and add it as an img tag and give it the following CSS:.background-img{ position:'absolute'; width:100%; height:100%; z-index:-1; }
other than that it looks great! Happy coding! š
1 - Abhik⢠4,840
@abhik-b
Submitted
I have used javascript for some animations however I guess my code can be improved ! Any feedback will be appreciated š
Guy Ezra⢠615@ezraguy
Posted
Hey @abhik-b, great job!
I have 2 suggestions:
-
like @axevldk said around 300px width the text in the card starts to overflow.
-
In the 1023px breakpoint I would make the card's width around 55% percent because, in my opinion, 80% percent looks a bit stretched and I would add min-width to the card.
@media screen and (max-width: 1023px) article { grid-template-areas: "image image" "details details"; grid-template-columns: 1fr; grid-template-rows: 200px auto; height: 70%; width: 55%; min-width: 300px;
other than that it's great!
1 -
- PApplePieGiraffe⢠30,545
@ApplePieGiraffe
Submitted
Hey, everybody! š
I've given a lot of feedback on this particular challenge, and now it's my turn to give it a go! I hope I did okay! š
I ended up coding a lot more Sass and JS than I initially expected, but I learned a lot. I decided to put the slider images in my HTML so that I could use the
<picture>
element for responsive images but stored the text in my JS (feedback on my JS would be appreciated).I added some cool transitions to the mobile menu and navigation and created an intro animation (using GSAP) after stumbling upon this YouTube video and remembering Connor Z did the exact same thing (and blew me away when I saw it) when he completed this challenge! š
More importantly, I tried to ensure that the design scales up and down nicely (which gave me quite a headache because of this behavior of flexbox), but I think I managed to do it okay in the end.
Of course, feedback is welcome and appreciated! š
Happy coding, everyone! š
Guy Ezra⢠615@ezraguy
Posted
Hey @ApplePieGiraffe, your solution is absolutely beautiful, WOW. very professional! great job!
1 - tediko⢠6,170
@tediko
Submitted
Helloš!
Thanks to @Grace and @Aleks from slack for helping in this project. This time i tried to create more accessible mobile nav and i was following this article in order to achive this. I know this is not true mobile nav but atleast it is a step forward towards it! I have no specific questions but any feedback will be appreciated!
Thanks! š
Guy Ezra⢠615@ezraguy
Posted
Hello @tediko, Great challenge! I love the components entering the page animations and the hover state animations very clean! great job!
1 - Yinon Hever⢠785
@yinonhever
Submitted
I used Vuex to manage the state of the list items and the dark/light theme. The list in its updated order is also saved into the local storage, so it remains the same after refreshing the browser.
Guy Ezra⢠615@ezraguy
Posted
Hey @yinonhever, Great Job! the challenge looks great and I especially love the smooth transitions. I have only 2 suggestions. 1.In mobile mode (600px width breakpoint) maybe make the text a little bit bigger because it's a little bit hard to read. 2.When choosing a different mode of filtering (active, completed) maybe change the "All" option color to white so its clear to the user which filter he is viewing right now. Awesome job!
1 - Pratham⢠90
@Pluffy2217
Submitted
Hey! Any ideas or suggestions are welcome. ^_^
Guy Ezra⢠615@ezraguy
Posted
hey @Pluffy2217, The site looks great! but I did found 1 thing that can be fixed. the media query that makes the main div become vertical needs to be triggered a little bit sooner. the current media query triggers at 480px but when I resize my screen to around 500px the left and right of the div overflows the screen. other than that everything is perfect. Great Work!
1 - PApplePieGiraffe⢠30,545
@ApplePieGiraffe
Submitted
Hey!
This was a fun challenge that I spiced up a little with some CSS animations from Animate.css.
Feedback definitely appreciated!
Guy Ezra⢠615@ezraguy
Posted
Hey @ApplePieGiraffe, very responsive and very professional! and the animations make it look even better! Great Work!
0 - Hailo⢠90
@HailoMYM
Submitted
This is my second challenge and I tried to improve the quality of my code using scss and the 7-1 architecture. I also applied BEM naming convention in order to have a better structure for my classes.
I am still looking the way to have pixel perfect design like many others, even I have access to the sketch file I could not figure it out how to have the right margins/paddings.
Guy Ezra⢠615@ezraguy
Posted
Hello HailoMYM, the design looks great! awesome job! but I do have 2 suggestions:
- At 959px width the stars start to break so i would add a min-width like this:
@media only screen and (min-width: 769px) .rating__star { margin-bottom: 0; -webkit-box-flex: 1; -ms-flex: 1 0 120px; flex: 1 0 120px; min-width: 135px; }
- I loved the way you organized the cards without margins only with align-self but around 880px width their height starts to change because the amount of text in each card is different and they look uneven. if you will remove the align-self for the first and last card at the (min-width: 769px) media query and add a height of 90% to all they will look even.
1 - Diarrah⢠3,418
@Diarrah
Submitted
I always have a hard time navigating to another page via the mobile navbar & the navbar staying open. I had to write some complex code just to re-close it. Any help?
Thanks!
All critiques + feedback welcomed.
Guy Ezra⢠615@ezraguy
Posted
Hello, The site looks great! very responsive. About closing the navbar situation because you are using React maybe a way to close it easily is to make the navbar take its className from the state. so when 1 on of the links is clicked a function will be called that will change the navbar className state and will close it.
0 - bwhitney2439⢠545
@bwhitney2439
Submitted
feedback welcome
Guy Ezra⢠615@ezraguy
Posted
Hello bwhitney2439 , the design looks great! but it seems that the navigation bar does not work on the mobile view.
0 - Jade Buniel⢠185
@jadebuniel
Submitted
Take a look and leave a thought about my work. Willing to learn more.
Guy Ezra⢠615@ezraguy
Posted
Hey Jade, Awesome work it looks great! But I do have 1 suggestion. In the media query
(min-width: 64em)
I would set the margin-top of the second card to 0. Because when there are only 2 cards in a row it looks the second card is misplaced. It will make the cards look more organized.@media (min-width: 64em) .reviews_container:nth-child(2) { margin-top: 0; }
Great Work!
1 - Sven⢠295
@Sven72
Submitted
While coding this challenge, I found a video by Kevin Powell about aimating gradients āĀ which fits perfectly to this challenge. It's applied at
.load-used
. I had issues to center the boxes in te desktop view. I appliedflex-basis
, so that both boxes are on one line. But thealign-items: center
does not work anymore. I solved this with adding apadding-top: 25%
āĀ but this does not feel good. :)Guy Ezra⢠615@ezraguy
Posted
Hello Sven, the site looks great and I really like the animated gradients. About the centering for the main div I think all u need to change in the
flex-container
class is removing these 2 lines:padding-top: 25%; align-items: baseline;
0 - akwong372⢠30
@akwong372
Submitted
I'd love some general pointers on how to improve my CSS.
Guy Ezra⢠615@ezraguy
Posted
Looks good! , I would change 2 things...
-
I would change the media query to a
@media screen and (max-width: 700px)
because as of now elements break on around 615px width like the "poster-name" and "poster-date". -
I would add
overflow-x: hidden
to the body CSS to prevent the horizontal scroll.
2 -
- Alex Mollison-Ball⢠10
@AlexHBall
Submitted
Wasn't sure how to get the excellent on one line, played around with the font settings for 15 mins but couldn't get it.
Guy Ezra⢠615@ezraguy
Posted
looks good! about the "excellent on one line" issue try removing the br tag you have there.
0 - Christopher Till⢠1,070
@chri55
Submitted
Please let me know what you think. Thanks!
Guy Ezra⢠615@ezraguy
Posted
Looks great!
0