Latest solutions
Latest comments
- @Nafsuki@mscates
Hi Nafsuki, I liked your solution. I did see a scroll bar on mobile though. you could add overflow-x: hidden to solve this issue.
- @ItsIchi@mscates
for the opacity, you can wrap the image in a container and give it a background color and then when you hover over the container img:hover like this, you can use the mix-blend-mode: multiply with an opacity of say .6 and you can get the hover effect like on the design. here is some sample code to see how it works.
<div class="example"> <img src="/images/image-equilibrium.jpg" alt="equilibrium" /> </div>.example { background-color: $primary2; height: 300px; border-radius: 10px; } .example img { max-width: 300px; width: 100%; border-radius: 10px; }
.example img:hover { opacity: 0.6; mix-blend-mode: multiply; border-radius: 10px; transition: 0.5s ease; cursor: pointer; }
Marked as helpful - @WackLantern@mscates
one think to notice on your solution is the left part of the card all the way down. see how all the elements of the card design are lined up. the spacing between the left hand side of the card and the elements is the same. if you give the card itself a padding all the way around, this will resolve some of the issue.
- @priyankavasam7@mscates
Hello Priyanka, one thing I see is that your flex-container does not have a max-width so on a large screen your card is really big. what you could do is give it a max-width of say 1000px and then set each child of the container to flex: 1 so that each takes up exactly half the space. it will be more uniform that way. your mobile view is very good. great job.
Marked as helpful - @arslan1070@mscates
have you looked at your solution on the web yet? the image is off center. what you can do is change the background-size to contain and add background-repeat: no-repeat and it will be centered. then change your padding to 9vh 0 and it will look better. I would also look into just using the img tag instead of the background image. might be an easier solution for you. also, you asked about the hover and you can do this with mix-blend-mode to easily do the hover action. hope his helps.
- @jcsmileyjr@mscates
Hey JC, the one accessibility issue you have is the h2, they want at least one h1 on each project we do. not a big deal, but if you want that to go away that is the solution.
another thing I see is you could also make a card class that wraps the entire content and put a max-width on it of say 400px and then width of 100%. that way no matter how big the screen gets, it will only be 400px. right now, I have a large screen and it stretches your card out quite a bit because it doesn't have that limit. everything else looks great though. nice work.
Marked as helpful