Design comparison
Solution retrospective
Hello🐙, I had to go for a walk and take a break from writing this project. So it is good because it cares about my physical condition! 🤸♂️ But in the end I somehow dealt with the not cooperative flex box (or rather my knowledge of it). Anyway, as always, I appreciate your feedback. Cheers! 😊
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
The images serve no other purpose than to be decorative; It adds no value. The
alt tag
should left blank and have anaria-hidden=“true”
to hides it from assistive technology.More Info:📚
https://www.w3.org/WAI/tutorials/images/
- The only heading in this component is the “Get insights that help your business grow” everything else will be wrapped in a
paragraph
element.
- The statistics at the bottom are a list, so it should be built using an
unordered List
element.
More Info:📚
MDN <ul>: The Unordered List element
- To get the image to look like the FEM example, you are going to want to use the
mix-blend-mode
along with themultiply
value and include aopacity
with the value of 0.8.
Code:
img { opacity: 0.8; mix-blend-mode: multiply; }
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
0 - The only heading in this component is the “Get insights that help your business grow” everything else will be wrapped in a
- @catherineisonlinePosted almost 2 years ago
For the image, I did something like this, I hope that helps:
<div class="image-container"> <img class="main-image" src="images/image-header-mobile.jpg" alt=""> </div> .image-container { display: inherit; position: relative; width: 100%; border-radius: 0 10px 10px 0; background-color: hsl(277, 64%, 61%); } .main-image { width: 100%; height: 100%; position: relative; background-size: cover; border-radius: 0 10px 10px 0; mix-blend-mode: multiply; opacity: 0.75; }
0 - @SinisaVukmirovicPosted almost 2 years ago
Hello!
Taking a break, stepping away from the computer and not looking at your code for a while, when you get stuck, is important and very much advises. Often when you come back, problem is solved in no time.
I like that you use new line after each attribute in the HTML tags. Very readable! Also, you are using "mobile first approach". Nice!
One thing, though. Try not to set exact value to the width of elements. Try to let the content inside of it dictate elements width, whenever you can. Your solution looks a little off. Its 50% - 50% split in the design, and in your solution, its more like 60% - 40%. Using Flex box or Grid could help with fixing that.
Hope this helped. Good luck!
0
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