Skip to content
OverviewSolutions
31
Comments
4
Sang Le
@sqle157

All comments

  • Sang Le•520
    @sqle157Posted over 2 years ago

    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.

    1
  • Ha Anna•20
    @its-haannaSubmitted over 2 years ago

    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?

    NFT preview card component

    2
    Sang Le•520
    @sqle157Posted over 2 years ago

    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!

    Marked as helpful
    0
  • evanhill1989•200
    @evanhill1989Submitted over 2 years ago

    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.

    Order Summary Component

    1
    Sang Le•520
    @sqle157Posted over 2 years ago

    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!

    Marked as helpful
    3
  • Pablo Cisneros•10
    @Pablo6152Submitted over 2 years ago

    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

    NFT landing page using HTML and CSS

    2
    Sang Le•520
    @sqle157Posted over 2 years ago

    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.

    1. I see that you have some classes like 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.

    1. You can group your component CSS base on your HTML structure from top to bottom. Also, if you have any hover effect or anything for your component, try to write it right after your css for your component. For example, if you have a hover effect on your card, you can write your CSS like this
        .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!

    1