Design comparison
Solution retrospective
I am still not satisfied with the background pattern on the desktop version (these semi transparent patterns are going to be the death of me X_x ) but after spending a lot of time on it (I tried to make it look as close to the original design as possible) I simply decided to go with the current build. It's not the same but I am honestly out of ideas on how to make it work.
Feedback and suggestions are always welcome!
Thank you in advance! ^^
Community feedback
- @Cyrus-Akwaboah-EmmanuelPosted over 3 years ago
Good work except that its height is not 100% fixed. Apart from that everything else is ok. The color corresponds to the color of her shirt and her skin(sort of) 👌
1@RaelianPosted over 3 years ago@Cyrus-Akwaboah-Emmanuel Thank you for pointing that out! I made the background pattern fixed now. ^^
0 - @tedikoPosted over 3 years ago
Hello, Rael! 👋
Congratulations on finishing another challenge! Again, good job! Please don't be too hard on yourself, your solution is very close to design. These backgrounds are often pain in the.. I know from own experience, especially when they have such colors like in this challenge. Small tips:
- Since your
.wrapper__logo
image is decorative youralt
text should be provided empty (alt="") so that they can be ignored by assistive technologies, such as screen readers. The same goes for.img-desktop
. - Add
border: none;
to your.wrapper__btn
to get rid of this 1px white border. - " We're coming soon" is your title, you want that to be your heading
<h1-h6>
element. Wrap the text that you want to be bold with <span> but within this h1 element. To make this wrapped effect you can usemax-width
property on that element.
Good luck with that, have fun coding! 💪
1@RaelianPosted over 3 years ago@tediko Thank you for the suggestions and kind words! ^^
I've already made the tweaks as per your suggestions! I probably should have simply used a
div
withbackground-image
on those images, now that I think about it.Thanks again for the advice! ^^
0 - Since your
- @palgrammingPosted over 3 years ago
Yes the light colors on this challenge make it extra annoying I agree but you should look at your mobile to desktop transition around 1000px you have some text issues that you need to probably tweak a little bit
1@RaelianPosted over 3 years ago@palgramming Thank you for pointing it out! I actually left it like that on purpose but after taking another look it did look kinda... fugly and not fitting so I tweaked the text to have the same width as the image. It should look more eye pleasing now.
Thank you once more! ^^
0@palgrammingPosted over 3 years ago@Raelian No problem glad I could help. People keep talking responsive but I think they key word should be consistent experience across screen width. Thing do not need to endlessly scale up and down. Controlling the items so they look good across all widths seems more important
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord