Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
4
Comments
5
H0bG0blin9g
@H0bG0blin9g

All comments

  • H0bG0blin9g•55
    @H0bG0blin9g
    Submitted over 3 years ago

    html and css - profile-card-component-main

    1
    H0bG0blin9g•55
    @H0bG0blin9g
    Posted over 3 years ago

    I had a "quick" go at getting the background circles, but I can say that it was not easy as it took me atleast 30 mins to have something reasonable albeit off. This clearly shows the need to look into the various ways of positioning of elements.

    I will look at the solutions from the other member, but would appreciate any insights into where I made a mistake in the positioning of the circles.

    also what would be the best fix for the errors that appear? Is it wrong to put a <section> inside of a <main>? (it must be since it has produced an error right?! lol)

  • H0bG0blin9g•55
    @H0bG0blin9g
    Submitted over 3 years ago

    3-column-preview-card-component-main using vanilla css and flex box

    4
    H0bG0blin9g•55
    @H0bG0blin9g
    Posted over 3 years ago

    Oops, I missed adding some padding between the button and text for the desktop version.

    Also for some reason, the last card on the desktop version in this solutions screenshot is bigger than the other cards, but that is not the case on the actual preview site - seems like a bug during the formation of the screenshot?

  • soransh singh•1,025
    @soransh-singh
    Submitted almost 4 years ago

    Order Summary Commponent

    1
    H0bG0blin9g•55
    @H0bG0blin9g
    Posted over 3 years ago

    Nice! I like the animation on the music icon. Also looking at your code, it is much more concise and cleaner than mine. Hopefully I will get better at writing code more efficiently with more practice.

  • Esteban MConrrado•30
    @uvapaza
    Submitted over 3 years ago

    Card Product

    1
    H0bG0blin9g•55
    @H0bG0blin9g
    Posted over 3 years ago

    Try and add shadows to the primary button and the card itself. That took me quite some time to get close to the design. The CSS property is box-shadow.

    Marked as helpful
  • H0bG0blin9g•55
    @H0bG0blin9g
    Submitted over 3 years ago

    Order Summary using flex box and vanilla css

    2
    H0bG0blin9g•55
    @H0bG0blin9g
    Posted over 3 years ago

    I had a couple landmark issues, one being <html lang='en'> and then one against one of my divs (but not against it's other sibling div??), but when I added the 'role="main"' against one of the card divs, it cleared all the landmark accessibility issues except that which is against the div with the class "attribution" which is there when you download the file.
    Not sure why that is the case - both for clearing the landmark issues against the other divs and for not clearing the landmark issue agains the last div.

    What would I add to this to clear the accessibility issue on the last div? Just give it any role name?

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub