@OrololuwaSubmitted about 4 years ago
Bo Allan Johansen
@boallanAll comments
- @boallanPosted about 4 years ago
Looks good. You get a vertical scrollbar between the desktop and the mobile design though.
How did you find the color "hsla(179, 62%, 43%, 0.897)" for the last box?
0 - @tarasisSubmitted about 4 years ago
No questions. Just a note that my heart wasn't in this one (think more general mood). I feel I could have nudged it into place. The Sign-up button looks bad when resizing.
I plan to return to this at some point.
@boallanPosted about 4 years agoLooks good. Good responsiveness. Consider adding a max-width to keep the page from stretching too much on ultra-wide monitors.
You can make the signup button behave a little better if you remove the 3.25rem padding on the sides. Text-align:center takes care of the positioning, and then the browser will take care of the padding so to speak.
1 - @IsamDavidSubmitted about 4 years ago
I'd like to receive feedbacks from my code.
@boallanPosted about 4 years agoHi Isam,
The mockup image stretches when resizing the viewport on desktop. Is that an intentional design choice?
The background image for mobile view doesn't seem to follow along as you resize, so the design breaks a little at certain resolutions.
I love the added github link by the social icons, I think I might start doing something like that too :)
2 - @tanismithSubmitted about 4 years ago
I'm pleased to receive your feedback. Thank you!
@boallanPosted about 4 years agoGood job!
Code looks clean, and the solution is close to the design.
Responsiveness is good. Some details could be polished at certain resolutions, like the distance between images and text, and my pet-peeve, there should be a max-width for users with ultra-wide monitors.
I like that you do several commits and have the comments in imperative. Good git practice is a very important habit.
0 - @emansasu7Submitted about 4 years ago@boallanPosted about 4 years ago
The solution looks like the design, and it's fully responsive. Html has proper semantics with intuitive classnames, and the css is short and concise. In fact, very short, I'll have to compare my solution to yours to see what I can make more efficient.
So unless you want feedback on something specific, I can't say much else than: Looking real good.
0 - @pallavi-1812Submitted over 4 years ago@boallanPosted over 4 years ago
Looking good. The colored borders can be tricky to get just right, but you hit it perfectly.
You should add a max-width to keep the design from stretching too much when viewing on large monitors. And the design breaks a little somewhere between 600px-1000px, stacking the boxes in that range would give a better design, and it can be fixed by adjusting a single media-query.
1 - @TaiwrashSubmitted over 4 years ago
What is the highest score for a challenge?
@boallanPosted over 4 years agoYou get a score for submitting, depending on the difficulty of the challenges. This one is intermediate and awards 30 points. If someone likes your solution, you get 10 points, and someone bookmarking gives 20 points.
You can see the complete scoring system under your profile (click your profile picture) if you click the little "i" above to "mentor score"
0 - @ashwinjayanSubmitted over 4 years ago@boallanPosted over 4 years ago
Solid work, looks nice, good responsiveness. A max-width would give a better experience for users with ultra-wide monitors.
0 - @MeeksoSubmitted over 4 years ago
- @BanxxgitSubmitted over 4 years ago
Can anyone help with the space between the welcome section and content section?
@boallanPosted over 4 years agoI believe it has something to do with "grid-template-row: 1fr 1fr" in .block forcing the bottom row to have an absolute(fixed) size.
I'm just starting with grid, sorry that I can't be more specific.
0 - @GerbenDolSubmitted over 4 years ago@boallanPosted over 4 years ago
I love that little animation next to the "build the community" headline. It's like it's literally being built before our eyes as the page loads, it works very well.
0 - @GerbenDolSubmitted over 4 years ago
Hey guys! So, I enjoyed putting together this layout. It really showed me the ease of using flexbox for all these sections. Keeping the site mobile first was super easy this way.
I also loved using grid for the footer, as it just made the layout a breeze.
My question to you: how would you spice up a layout like this? Maybe add some animations on scroll? Would really like seeing your solution and hearing what you're missing. 😁
@boallanPosted over 4 years agoHi Gerben, I was looking to your solution to see how you position the curve image. Good stuff, definitely bookmarked.
I currently place the curve images in a picture element with an alt="". It works fine, and it should be acceptable for assistive technologies too. I however feel like it's not semantically optimal, since it's purely decorative, and I was considering the object element or to simply place a div with the curve as a background image. Or maybe just place it as a background image within my stayproductive section and see if I can position it correctly in the top of element.
But then I saw you using ::before to place the image and now I'm confused on an even higher level :)
Would you mind sharing your thoughts about using ::before in this situation? I'm trying to wrap my head around what the best solution is, but I'm hitting a dead-end, I would be grateful for any suggestions :)
1
