kuzukani• 180
@Kuzukani
Submitted
i dont know how to apply color to image. all i do is place div that have 100% width and height with rgba color on top of image. can i have feedback how to make image color like solution design image?
Don
@coffeeslammer
All comments
- Don• 220
@coffeeslammer
Posted
to mix the color to the image you use
picture{ background-color: color of choice; } picture img{ mix-blend-mode: multiply opacity: 0 - 1; }and the background color to a wrapper like <picture> or <div> depending on situation
0 - Kevin H.• 150
@kevinx9000
Submitted
I started with desktop design first and then adjusted by using @media to create the mobile layout. That was probably the biggest challenge is fixing the layout for the breakpoint. Since separate images were provided for the desktop and mobile view (as opposed to using the same image and making that element responsive), I had to play with adding both images to the HTML document and then using display in CSS to switch them on or off for the responsive views.
Don• 220@coffeeslammer
Posted
Here's a nice way of fixing that
<picture class="perfume-images"> <source srcset="./images/image-product-desktop.jpg" media="(min-width: 39.75rem)"> <img src="./images/image-product-mobile.jpg" alt="perfume"> </picture>(use what ever class name you like) Once the image gets to the size its set to it will switch to in media (mine 39.75rem) the srcset replaces the image without any css code
You should also always start mobile first. Makes it way easier
Marked as helpful
0 - waldir• 120
@waldir07
Submitted
Please, I need feedback.
Don• 220@coffeeslammer
Posted
Here is a couple things Look into <Picture> element and srcset. It will resize your picture for you without css.
<picture class="perfume-images"> <source srcset="./images/image-product-desktop.jpg" media="(min-width: 39.75rem)"> <img src="./images/image-product-mobile.jpg" alt="perfume"> </picture>The Perfume should be your H1. Think of your H's as a file structure. If they were folders H1 is the root folder and all other H's are sub-folders. Perfume would be the main folder and brands would be stored in that folder (figuratively speaking). The brand here would be a <P>.
Always use CSS to do uppercase. A screen reader may interpret uppercase in html text as being an acronym and may read it as letters rather than words. Use text-transform in CSS.
The prices shouldn't be H's either.
Hope this helps on your learning journey.
Marked as helpful
0 - Oluwafemi Kolade• 230
@Kolade1024
Submitted
An awesome project. Any tips for improvement will be appreciated.
Don• 220@coffeeslammer
Posted
I can give you a couple tips. look into <Picture> element. and srcset. It will resize your picture for you The Perfume should be your H1. Think of your H's as a file structure. If they were folders H1 is the root folder and all other H's are sub-folders. Perfume would be the main folder and brands would be stored in that folder (figuratively speaking). The brand here would be a <P>. Also its always recommended to use CSS to do uppercase. I'm still learning but I think the reason is some screenreaders will read each letter instead of the word. Use text-transform in CSS. Hope this helps on your learning journey.
Marked as helpful
1 - Micwir• 80
@Micwir
Submitted
Hi 👋, please feel free to give me some feedback of my solution here 😉.
Thank you 😀
Don• 220@coffeeslammer
Posted
I'm still learning myself. I saw you are using the H1 more then once. You are only suppose to use it one time. Way I am understanding the H's is use one H1 once then the other use H2. Think of them as a folder structure in a way if you had a another h deeper under the h2 you would make it an h3 and so on. I picked that idea up from Keven Powell on you tube.
Marked as helpful
0
