Hi!
I used the propertie multiply to do the purple effect, don't no if was the best way to do this.
I needed to change the link in the desktop version because of the Github live version. On the VScode was perfect, but when I put on Github the picture just did not appears. I think was some bug and changed the link. Is it normal happens something like that?
Please give me your feedback, it'll help a lot. Thank! :)
Hello there 👋. Good job on completing the challenge !
I have SOME suggestions about your code that might interest you.
As regards your solution giving errors on the accessibility reports. This as a result of not having a Landmark. To solve this issues, add a <main></main> just outside the <div class="content"></div> and this will fix the issue. More on LandMarks
To help with the effect on the image, Try adding a <div class="overlay"></div> element just right before the <div class="image" ></div> container or <img> element. Now put both <div class="overlay"></div> container and the <div class="image" ></div> container inside a <div class=image__box ><div> .This will serve as the Parent Element of both . Then add the following styles below... Example
HTML
<div class=image__box >
<div class="overlay"></div>
<div class="image" > ... </div>
<div>
CSS
.image__box{
position: relative;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%
height: 100%
background: ... ; // Color goes here
}
.image {
background-image : url(...) ; // If used a url instead of placing it directly in the HTML
mix-blend-mode: multiply;
opacity: 75%;
object-fit:cover;
}
<picture></picture> element as this can help with switching between two images based on viewport.I hope you find these comments helpfull! 😄 And I was able to answer your questions
Happy coding!
Hi, how are you doing? :)
I've some questions about CSS.
On the root, I put the names the same like was in the style guide, in the "real world" is better if I choose better names to the variables? For example: "--red" is just better than "--grayishBlueT"?
Other question, sometimes I use padding or margin just on top or left, for example. I was wondering if it doesn't look ugly and maybe will be better try to keep a pattern? For a better example, the ilustration inside the card, I've used position relative and align with "right: -220px;". It was be better if I used display flex (or something else) to align to right?
First I create the desktop version and later I adapted to the mobile version, and look like there's something really wrong because I needed to do this: ".content { position: default; top: 580px; width: 300px; }"
Is this the best way to align the mobile version in this case?
Please give me your feedback, it'll help a lot. Thank! :)
Hello there 👋. Good job on completing the challenge !
I have SOME suggestions about your code that might interest you.
Regards naming your CSS Custom properties . It's okay to use the names provided in the style-guide.md .Peronsally, for best practices try using Variable names instead, as this will also be the type of naming conventions you might use in bigger projects or challenges
Example --red --cyan , Try --clr-primary-1 --clr-primary-1 .
As regards your <div class="content" > </div> .Wrap all your body content inside a <main>...</main> as this solves the accessibility issue in your code.
.body {
display:grid;
place-items:center;
min-height:100%;
}
The code above will help with centering the content and providing a much cleaner code
margin-left: auto to the card-icon should push it to the extreme right. Example.card{
display:grid;
gap:2rem;
}
.card__icon{
margin-left:auto;
}
To solve the issue of the responsive design. Change the media-queries to adjust when the 4 Cards can no longer be visible on a large screen @media (min-width: 1100px){ }.
Extra Tip: Check out BEM for better naming of classes and practice using order measurement units such as rem em % as it boosts responsive design
I hope you these comments useful! 😄 And I was able to answer your questions
Happy coding!