Emmanuel Awolusi• 80
@Orololuwa
Submitted
P
Bo Allan Johansen
@boallan
All comments
- PBo Allan Johansen• 350
@boallan
Posted
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 - PRobert McGovern• 1,095
@tarasis
Submitted
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.
PBo Allan Johansen• 350@boallan
Posted
Looks 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 - Isam David• 230
@IsamDavid
Submitted
I'd like to receive feedbacks from my code.
PBo Allan Johansen• 350@boallan
Posted
Hi 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 - Tani• 145
@tanismith
Submitted
I'm pleased to receive your feedback. Thank you!
PBo Allan Johansen• 350@boallan
Posted
Good 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 - Eman Sasu• 90
@emansasu7
Submitted
PBo Allan Johansen• 350@boallan
Posted
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 Upadhyay• 80
@pallavi-1812
Submitted
PBo Allan Johansen• 350@boallan
Posted
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 - Mudasiru Rasheed• 90
@Taiwrash
Submitted
What is the highest score for a challenge?
PBo Allan Johansen• 350@boallan
Posted
You 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 - Ashwin Jayan• 160
@ashwinjayan
Submitted
PBo Allan Johansen• 350@boallan
Posted
Solid work, looks nice, good responsiveness. A max-width would give a better experience for users with ultra-wide monitors.
0 - Mikko SIllanpää• 50
@Meekso
Submitted
PBo Allan Johansen• 350@boallan
Posted
Looks good, very close to the design
0 - Bankole Olayinka• 195
@Banxxgit
Submitted
Can anyone help with the space between the welcome section and content section?
PBo Allan Johansen• 350@boallan
Posted
I 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 - Gerben Dol• 3,115
@GerbenDol
Submitted
PBo Allan Johansen• 350@boallan
Posted
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 - Gerben Dol• 3,115
@GerbenDol
Submitted
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. 😁
PBo Allan Johansen• 350@boallan
Posted
Hi 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 - John Norman• 880
@norman02
Submitted
In the sketch inspector what does character: -0.2 mean?
All feedback welcomed.
PBo Allan Johansen• 350@boallan
Posted
Looking good.
"Character" refers to letter spacing, so "letter-spacing: -0.2px"
1 - Gm• 170
@gmmoose20
Submitted
PBo Allan Johansen• 350@boallan
Posted
Looks great. Good responsiveness. Clean code that's easy to read.
Some of the comments may be superfluous, like the ones at lines 11, 15 and 18.
Something weird is happening with the curve image, it starts becoming visible <1000px, it's being squished on top. I'm not sure why, but I'd love to look into it later, I'm curious as to why it's happening.
Below 768px the images are below the text rather than above. That can be fixed with a simple order property. And the navigation is below the logo, but that also looks easily fixable with a flex-direction:row and a little margin/padding fiddling :)
Marked as helpful
1 - Pablo Malavé• 160
@pablomalave
Submitted
- Desktop First design.
- Responsive with Media Queries at 750px y 400px.
- Flexbox for each section (except en la Contact section)
- Contact section with Grid.
PBo Allan Johansen• 350@boallan
Posted
Nice solution, close to the design, and fully responsive.
The pictures become humongous and the textlines very long on ultra-wide screens (like 3440 x 1440). A max-width could solve that.
Nice, clean code.
0 - Hendra Agil Syaputra• 135
@hendra-agil
Submitted
PBo Allan Johansen• 350@boallan
Posted
Nice solution, very close to the design, for mobile and desktop.
The page gets a horizontal ruler between 376px to 1123px, which breaks the design a little especially for mobile devices in landscape mode. If you want to improve on the solution, that would be one of the only things I could think of.
Nice, clean code.
1 - Franco• 400
@Francoveliz
Submitted
PBo Allan Johansen• 350@boallan
Posted
I'm impressed with this solution. Both desktop and mobile are very close to the design, and it's fully responsive in-between, that's rare.
Code also looks elegant, will definitely explore it some more to see how I can improve my own code for that challenge.
1 - Ranjith• 140
@Ranjith357
Submitted
PBo Allan Johansen• 350@boallan
Posted
It's awesome that you change the color of the bottom logo with filter: brightness(0) invert(1) rather than just editing the actual image.
I had been looking for a way to do that for a while, so it was a great help.
1
