Skip to content
OverviewSolutions
6
Comments
5
Prithvi
@Prithvi12890

All comments

  • Prithvi•110
    @Prithvi12890Posted over 2 years ago

    Hello Chaitanya!

    Amazing work with the advice generator! It is fast and really good. Your code is well organized and easy to read & understand too. The styling looks good, close to the given design.

    Though the accessibility issues can be ignored, you can remove them with the following steps:

    • In card.js, you can try giving the button a title attribute, as you are using an image as a button and don't want any text, so.. <button className="btn" onClick={() => setClick(!Click)}> <img className="dice" src={Dice} alt="" /> </button> to <button className="btn" onClick={() => setClick(!Click)} title="dice"> <img className="dice" src={Dice} alt="dice" /> </button>

    • In index.html try changing <div id="root"></div> to <div id="root" role="main"></div>

    Hope this helps you and am looking forward to more works from you ✌

    Marked as helpful
    1
  • Keshav Tulsyan•170
    @codekeshSubmitted over 2 years ago

    I am facing issue opacity of icon while hovering. Please give me advice to fixed this. All feedback are welcome. Thank You

    NFT Preview Card Component

    2
    Prithvi•110
    @Prithvi12890Posted over 2 years ago

    "I am facing issue opacity of icon while hovering. Please give me advice to fixed this. All feedback are welcome. Thank You"

    Hello Keshav, You can try giving just the background color an opacity by replacing hsl with hsla (for the color) with desired opacity instead of giving the whole hover effect and opacity. This will make just the background transparent but not the icon-view SVG

    Hope this is helpful and looking forward to seeing your final result ✌

    1
  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlineSubmitted almost 3 years ago

    Hello, Frontend Mentor community! This is my solution to the NFT preview card component.

    I have read all the feedback on this project and improved my code. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

    You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

    Thank you

    NFT preview card component

    16
    Prithvi•110
    @Prithvi12890Posted over 2 years ago

    Hello Catherine!

    The styling looks amazing and the comments in your CSS & HTML file make it easier to read and understand too. The transition is smooth too.

    A small suggestion to match the design, even more, you can try changing the hover state of the card's image as below to match with the active state design: .color-image:hover { background-color: var(--cyan); opacity: 0.5; } to .color-image:hover { background-color: hsla(178, 100%, 50%,0.5); opacity: 1; }

    i.e., instead of giving the whole hover thing an opacity of 0.5, we can give just the background an opacity of 0.5 using hsla() for cyan color so that the eye-svg does not get that opacity and its true color is shown.

    And even, changing the font-weight of the card title to 600, card description, and time left to 300 if you are particular about matching the design weights 😄

    The whole card style looks amazing and even your way of writing the HTML and CSS (with comments, and proper indentations) is really good and easily understandable.

    Great Styling!

    0
  • Prithvi•110
    @Prithvi12890Posted over 2 years ago

    Hello Keshav!

    If you want to remove the accessibility issue we can do it quickly as follows:

    Since you do not have only one heading, use <h1>' tag instead of <h2>i.e., change<h2 class="firstpara center">Improve your front-end skills by building projects</h2>to<h1 class="firstpara center">Improve your front-end skills by building projects</h1>'

    And, coming to center your whole card, try using relative units like % instead of px for the top attribute in the CSS file. Like, you can try changing the top attribute in section ID from #section { top: 100px; } to... #section { top: 50%; transform: translateY(-50%); }

    Another alternative is to use a flexbox which will take away most of the work and make sizing and positioning easy and flexible. If you don't know flexbox, I recommend doing this short course on flexbox to get you started.

    Everything else looks great!!. Hope these suggestions help you ✌

    Good Styling!

    0
  • Prithvi•110
    @Prithvi12890Posted over 2 years ago

    Hello Chaitanya!

    If you want to remove the errors in the preview we can do it quickly as follows:

    Since your images folder is in the same directory as index.html, you need not specify a '/' at the start, i.e., you should modify <img src="/images/icon-suvs.svg" alt="sedans image" class="icon"> to <img src="images/icon-suvs.svg" alt="sedans image" class="icon"> or <img src="./images/icon-suvs.svg" alt="sedans image" class="icon"> Similarly for the other image tags.

    Everything else looks amazing!! Even the mobile view.

    Good Styling!

    Marked as helpful
    1