I completed this project in ten days! That's because I took my time.
Please check out my site and let me know if you have any questions.
I completed this project in ten days! That's because I took my time.
Please check out my site and let me know if you have any questions.
Hi,
It's a really nice solution! I like the transition you made with framer-motion. I did the same thing with my solution on this challenge too but it wasn't as smooth as you did.
I spent more time making the image hover the way it should than I am willing to admit. What are other solutions to this? Is there a way to do it more efficiently and clean?
Hi,
Congratulations on completing your challenge! For your question, you can try to use pseudo element ::after
or ::before
instead of having another img
tag in your code.
For example, this is how I'm gonna handle the image hover
.art-div::after {
content: ''; // you can also put the image as the content in here
display: none;
position: absolute;
inset: 0;
border-radius: 0.75rem;
background: url(./images/icon-view.svg), hsl(178, 100%, 50%, 0.5);
background-repeat: no-repeat;
background-position: center;
}
.art-div:hover::after {
display: block;
}
I hope this answers your question!
Happy coding and good luck with further challenges!
How could I have achieved this without defining a width on my .card container?
Starting to feel like rigid widths and heights might defeat the purpose of using flex to some degree.
Hi,
Congratulations on completing your challenge! For your question, you can try to use min
in your width so that it will change the width base on the smaller value.
For example, your css can be like this
.container {
width: min(100% - 1.5rem, 450px ) // This will make the width of the container equals the width of the
parent width minus 1.5rem on each side and it will apply when the screen is small
This is a common way to define a container that wraps around all the content.
I hope this answers your question, and have a nice day!
I used @media (orientation: landscape) instead of fixed pixels to show the desktop layout, I'm not sure if that's bad practice, also I think my CSS is too messy
Hi,
First of all, congratulation for completing this challenge. I think you did a pretty nice job, and I have some tips from my personal experience to help you organize your CSS.
middle
, flex-type
, text-accent
, ... which are the utilities classes, you can group those classes into 1 comment block, like this.flex-type { your code } .middle { your code } .text-accent { your code }
I think that will help you create a more readable and organized structure for your CSS.
.card { ... }
.card:hover { ... }
I recommend watching Kevin Powell and Traversy Media on Youtube. They have great content for CSS and Frontend Skills in general, and I think you will learn a lot from them!