Skip to content
OverviewSolutions
8
Comments
25
Éric Férole
@Eric-Ferole

All comments

  • Éric Férole•420
    @Eric-FerolePosted over 2 years ago

    Great job Claire !

    Your negative margin on your .avatar is a simple and clever way to make it ! Instead of using a negative margin with % you could have use the half of the height of your image. Per example, 106px/2 = 56px. magin-top: -56px;.

    I noticed you used margins in your footer to make space around your statistics block. Padding is alway a better choice for this.

    Well done !

    0
  • Éric Férole•420
    @Eric-FerolePosted over 2 years ago

    Great job ! It look pretty much as the design. Few littles things that are almost invisible but I thing I worth doing it.

    • The margins of your .title are not accurate. Think of resetting some the CSS default value by adding a CSS reset (* { margin: 0; }) and then adjust every margin manually to gain more control. Here is the one I use : My Custom CSS Reset
    • Put the margin on the outer block instead of inner element. Per example, the <p>s of .additionnal-info have margins on them. The margin should be on .additionnal-info.
    • Instead on adding a fix height on your .image you can add a display: block; on your image to make your image fit in the .image perfectly.
    • You should not use fix height for your components. By doing so, you prevent the div to expand if we add more content dynamically. The box size of your block plus the margins should be all you need.

    Hope it helps. Keep up the good work ! :)

    0
  • Éric Férole•420
    @Eric-FerolePosted over 2 years ago

    Good job Claire. It's close to perfect.

    Here some recommendations :

    • Add a border radius to .qr-background of 10px.
    • For your QR image and background, to make things simpler, you could add the background directly to the div.qr-code and align your <img qr-code.svg> in the center of the div with flexbox.
    • Media query is not needed here because the size of the div.card in desktop resolution is the same as in mobile resolution.
    • Review your accessibility issues and make sure you understand them.

    Keep up and see you around ;)

    Éric F.

    1
  • Éric Férole•420
    @Eric-FerolePosted almost 3 years ago

    Hi JsRavel, Nice work. Well done for the JS. Here's some comments :

    • Fix the positioning of your hover in desktop
    • Try to center your card in the page horizontally and vertically
    • Use more meaningful name for your classes. Instead of superCont, drw, shaR. It help other to - better understand what it is.

    Hope it helps,

    Keep up.

    1
  • Éric Férole•420
    @Eric-FerolePosted almost 3 years ago

    Great work. I would add, try to give meaningful name to your classes instead of partone, parttwo etc... And use semantic HTML element when possible <header> <footer> <main> etc. Here's a good article to start with.

    Keep up !

    Marked as helpful
    0
  • Éric Férole•420
    @Eric-FerolePosted almost 3 years ago

    Great work. It looks pretty close to the solution. Here are a few things I noticed :

    • Your page layout seems to shift compared to the solution. Probably a margin/padding issue.
    • Your background image is not right positioned. I use a Chrome extension called PixelPerfect to align elements as perfectly as possible.
    • The logo, title and subtitle could have been placed in a header element
    • Try to give meaningful name to your class instead of .section-one/.section-two

    Hope it helps.

    Keep up !

    Marked as helpful
    1
  • Zaib Ali•90
    @zaybaliSubmitted almost 3 years ago

    I could'nt fix the hover solution of Equilibrium image, so i left that part, can anyone help me put that missing part.

    HTML5, CSS3

    3
    Éric Férole•420
    @Eric-FerolePosted almost 3 years ago

    Hi Zaib,

    The most valuable quality of a developper is his capacity to solve problem by himself. At junior level, most of the solution can be find by googling the issues. Per example, for your hover problem you could make a search on Google with the keywords : "image hover css". The first results answer what you were looking for. This is the best way to improve.

    Hope it helps,

    Keep up !

    Marked as helpful
    1
  • Nelson Uprety•320
    @nelsonuprety1Submitted almost 3 years ago

    I was not able to put a cyan color while on active state. Please if you know the solution for the problem feel free to comment.

    The tags are totally irrelevant because there was no any option. Thank you

    NFT Preview Card Component

    3
    Éric Férole•420
    @Eric-FerolePosted almost 3 years ago

    Hi Nelson,

    The most valuable quality of a developper is his capacity to solve problem by himself. At junior level, most of the solution can be find by googling the issues. Per example, for your hover problem you could make a search on Google with the keywords : "image hover css". The first results answer what you were looking for. This is the best way to improve.

    Hope it helps,

    Keep up !

    Marked as helpful
    1
  • Éric Férole•420
    @Eric-FerolePosted almost 3 years ago

    Good job! Don't forget the box-shadow on the card.

    0
  • Éric Férole•420
    @Eric-FerolePosted almost 3 years ago

    Thank you for taking the time to review my code. I found this about the input labeling. Very interesting https://www.w3.org/WAI/tutorials/forms/labels/ I'll take your advises ! Much appreciated.

    0
  • Éric Férole•420
    @Eric-FerolePosted almost 3 years ago

    Well done Javier ! Looks pretty the same as the solution.

    It’s a personal preference but, I would use CSS/SCSS instead of Bootstrap to make your layout. It makes your HTML messy and so it’s harder to maintain. Some may not agree. Here some points I noticed :

    • Your card is a bit bigger than the solution
    • Space between avatar and footer text
    • User a border bottom instead of a HR
    • You forgot the box-shadow on the card

    Keep up !

    Marked as helpful
    0
  • Christian Lam•20
    @ui-AuxilarySubmitted almost 3 years ago

    How to optimise HTML Structure/CSS? ie. Unnecessary divs, better grouping of elements

    Are there better methods to create an overlay animation over an image?

    How to reduce repeating styling in CSS, and in-line styling in the HTML?

    Responsive Card Component w/ Hover Animation CSS

    2
    Éric Férole•420
    @Eric-FerolePosted almost 3 years ago

    Hi Christian, nice work. You forgot your alt attribute on your img tag, it's important for accessibility and SEO. I saw you use a div to make your overlay. It's perfectly good. But most will use the pseudo element ::before to make that kind of effect.

    For the structure I would suggest you to learn BEM methodology. Super easy to learn and it will help you to structure your class. Also, read about HTML 5. You could make your HTML structure more accessible with tag like <footer> instead of using a div with a class footer.

    Hope it helps. Keep up !

    Marked as helpful
    1