Skip to content
OverviewSolutions
24
Comments
6
P
Dana Hong
@Dana-Hong

All comments

  • Dana Hong•340
    @Dana-HongPosted almost 2 years ago

    Hey Thomas, good work with this! Using flexbox like you did is a good choice for centering elements vertically.

    0
  • Dana Hong•340
    @Dana-HongPosted almost 2 years ago

    Hey Jimoh,

    Good work with this challenge! It looks like you would have to create the background from scratch, since it wasn't a part of the starter files. Luckily, the shapes are simple enough to replicate. What you can do is create some empty <div>s in the <body> and give them a linear gradient for their background. Give them a height, width, and border-radius to mimic the pill shape. Finally, position them using position: absolute and some transform.

    Hope this helps!

    0
  • Dana Hong•340
    @Dana-HongPosted almost 2 years ago

    Hey Ismail,

    Good effort with this challenge. I noticed that your QR image is not centered and that you were using position to center elements. Here are some tips to consider:

    It's much easier to center elements by either using

    1. flexbox, or
    2. margin: 0 auto if the child element has a set width.

    For example, your .main__card__thumbnail has a set width of 250px. You can simply remove position-related properties like position: relative and left: 3%, set the margin to margin: 0 auto, and give it display: block. This will save you time, as you don't have to tinker around with percentages trying to get it perfectly centered.

    You can also look into short-hand properties; for example, you can write border-radius: 10px instead of border-radius: 10px 10px 10px 10px to save you time.

    Hope this helps!

    0
  • zavier•30
    @UWUzieSubmitted almost 2 years ago

    this is my first attempt at any coding project. i started learning html and css last night and wanted to test what i have learned to some degree. i know im missing alot of changes like the color of text etc. i just couldnt figure out how to make the image picture perfect and im only submitting because i have work. im a sous chef so im open to criticism so have at it

    Qr card challenge

    1
    Dana Hong•340
    @Dana-HongPosted almost 2 years ago

    Hey Zavier,

    Good attempt, but it looks like you're missing some files from your repository. When I visit the preview site, there aren't any styles applied. Your index.html has paths like /styles/style.css and images/image-qr-code.png, but they aren't in your repo. If you have the missing files on your local machine, all you need to do is add them to the root directory, then push it up to GitHub and try redeploying. Hope this helps!

    0
  • Ekwugha Clinton•60
    @KlinteenSubmitted almost 2 years ago

    So basically during the workflow of the project, I had issues with the color overlay on the NFT image when a mouse is hovered. I was able to use the hover feature for the texts, but with the image, the color wasn't just popping.

    I might have taken the wrong approach, but I am thankful for any help that I can get.

    nft-preview-card-component

    1
    Dana Hong•340
    @Dana-HongPosted almost 2 years ago

    Hey Ekwugha,

    Good job with this challenge. To add a hover effect, what you can do is nest the NFT image inside of a <div>, along with another <div>. You can then add your view image and background colour to this <div>.

    Something like this:

    <div class="feature-image">
      <img src="*path_to_nft_image*" alt=""/>
      <div class="hover-overlay">
            <img src="*path_to_view-icon*" alt=""/>
      </div>
</div>

    Two pieces of general advice I would give:

    1. Avoid the use of type selectors like p, and img, unless you are using them to override defaults. You can read more here.
    2. Avoid the use of id selectors, since they are not reusable, and lead to a lot of repeated code. They're also better for scalability. You can read more here .

    Hope this helps!

    1
  • Aima Aimaduddin bin Bollhasan•100
    @aimaduddinSubmitted almost 2 years ago

    Hi, I have a question.

    May I know why I could not add the SVG icon using the background-image property inside ::after pseudo-element? It only can be loaded when I put the image inside the content property. You can check my code at line 181. Any thoughts?

    NFT Preview Card Component

    1
    Dana Hong•340
    @Dana-HongPosted almost 2 years ago

    Hi Aima,

    Good work with this solution. If you want to put the image in a pseduo-element as a background image, you have to set the parent of the pseudo-element to position: relative;, and the pseudo-element to position: absolute;. However, you would then need to turn off the repeating background images with background-repeat: no-repeat;, then add padding to the parent and adjust the positioning on the pseudo-element.

    Another solution would be to use an <img> tag, since these are inline by default.

    Hope this helps!

    Marked as helpful
    1