Meenakshi K• 510
@Memeena
Submitted
Please review my solution and appreciate your valuable feedback! Thanks!
Emin Muratoglu
@scorpion61
All comments
- Emin Muratoglu• 190
@scorpion61
Posted
Hi, good work. Liked it. Small issue i saw was: You applied border-radius to all three containers. You can just apply it to the whole box. Rounded corners have original corners behind them visible. You can avoid that by using overflow: hidden
0 - hammercait• 250
@hammercait
Submitted
feedback welcome! :)
Emin Muratoglu• 190@scorpion61
Posted
Hello @hammercait, Very nice one. I also completed the same challenge couple days ago. Looks beautiful 😉 My suggestion is to make it responsive with media queries. To be able to use media queries easier, my humble suggestion would be to use flexbox and/or CSS Grid for each section of the page. Good job again 👍
0 - merna mohamed• 90
@merna07
Submitted
Emin Muratoglu• 190@scorpion61
Posted
Hi Merna, Liked it, nicely designed. The only issue though, is around 1100px viewport width (and less), words and right part picture start to overlap the phone design.
0 - Natalie• 60
@nataliespace
Submitted
Hey! Any feedback would be much appreciated. Thanks!
Emin Muratoglu• 190@scorpion61
Posted
Hi Natalie, very nice job. Works well. That's the main point. After this point, what you need to do is to achieve your designs in a more reccommended way. To clarify,
- Using responsive units like em, rem, vw, vh, %.
- Using flexbox and / or CSS Grid instead of absolute positiong for especially layouts (doesn't mean you should not use abs. positioning at all) will make it much easier to achieve same design and will be a lot more maintainable. Again good job on completing it.
1 - Isy• 215
@isy-creates
Submitted
Anything i can improve?
Emin Muratoglu• 190@scorpion61
Posted
Really loved the animation. Problem is, though, yes as @bashiroglu said above, right box is getting smashed while resizing to tab viewport. It may be solved by a min-width property.
2 - PRobert McGovern• 1,095
@tarasis
Submitted
First attempt at anything like this.
Spent far too long using diffchecker to compare the design image and an output grab from chrome. You can see mob-img-diff-1.png & img-diff-2-desktop-near-enough.png in the work-through directory in the repo to see how close I ended up (there is some mild diff because of the image quality, the illustration mockup has slight diff colors in it, likewise the background)
With positioning like this, is it better to use %, rem, or px?
I tried using 700 weight for the header "Build the ...." but it never looked right. Nor does 400 but it's close enough. What should have it been?
How best to get the fontbook-awesome images more central in the circles?
How close should I be looking to get?
Emin Muratoglu• 190@scorpion61
Posted
Hi Robert, good job on completing this. It looks very nice and works well with mobile. A small suggestion I d give you is it is not that important to make everything 100% exact same as mockup. I mean it should look same mark up, but a bit up / down slightly bigger / smaller doesn't matter. That's why you ended up with playing with margins a lot and waste too much time. Just my opinion. Great job again. Thanks.
2 @KrlosAren
Submitted
What do you thing about the result?
Emin Muratoglu• 190@scorpion61
Posted
Hi Carlos, nice job on completing this task. The small issue I saw, though, was after 600ish viewport width (and less), there is no margin between heading and text.
0- Juliane Gaudencio• 215
@julianegaudencio
Submitted
I still have difficulty in the responsive part so it only applies the difference less than 890px, I'm starting the challenges now so some things I needed to research because it went blank, please leave your opinions.
Emin Muratoglu• 190@scorpion61
Posted
Hi Juliane, Very nice job. One small issue is, on tablet/phone layout, background picture repeats itself. It can be solved by changing background-size to cover I believe.
0 - mksawic• 10
@mksawic
Submitted
I would like to make the socials popout dissapear when user clicks outside it. I've tried to use "blur" event but I couldn't figure it out.
Emin Muratoglu• 190@scorpion61
Posted
Hi MKSAWIC, You can use a hide class on share popup box which you will declare display: none on css, then activate it with JS. You can make a click event on popup, if event.target equals to window object, then add class of hide to the popup. I hope i was able to explain the logic :D
0 - Maria• 60
@Maria131621
Submitted
Emin Muratoglu• 190@scorpion61
Posted
Hi Maria, Great job on completing this challenge. I loved the animation on status bar. Just footer text color can be a lighter one as it is hard to see.
0
