Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
14
Comments
5
Aurel
@Aur71

All comments

  • Barish Barla•40
    @Valac01
    Submitted almost 3 years ago

    Interactive rating component with animations

    #bem#vanilla-extract
    1
    Aurel•290
    @Aur71
    Posted almost 3 years ago

    They are good, dont worry

  • Donn O'Lochlainn•20
    @donnol87
    Submitted almost 3 years ago

    Perfume Challenge

    #accessibility
    3
    Aurel•290
    @Aur71
    Posted almost 3 years ago

    Using padding and margin is normal, so dont worry about it. Also when you downlad the starter files there is a styling guide. There you will find the colors and fonts used in design.

  • Hafsat Nasidi•60
    @hafsatun2020
    Submitted almost 3 years ago

    Order-summary-component html5 and css

    2
    Aurel•290
    @Aur71
    Posted almost 3 years ago

    Put bouth of them inside a container.

    .container { display: flex; gap: 10px; }

    Or you can just use margin-top on the price and margin-bottom on the text.

    Marked as helpful
  • Billy•40
    @DavincyProject
    Submitted almost 3 years ago

    Using Flexbox

    3
    Aurel•290
    @Aur71
    Posted almost 3 years ago

    Put bouth images inside your img-container. To the desktop image give an id = "desktop-img". To the mobile image give an id = "mobile-img"

    #desktop-img { display: block; } #mobile-img { display: none; }

    Now you just have to use a media querie so you can switch the display when you hit a break point.

    @media only screen and (max-width: 600px) {

    #desktop-img { display: none; } #mobile-img { display: block; }

    And last change the direction of your container

    .container { flex-direction: column; } }

    Marked as helpful
  • Jacob Marshall•270
    @JacobMarshall0
    Submitted almost 3 years ago

    Responsive Product Card design using flexbox

    1
    Aurel•290
    @Aur71
    Posted almost 3 years ago

    For better accessibility use semantic html, like header, main, footer, etc (in this case i think you shoud wrap all the content in a <main> element). Is good practice to only use a slinge <h1> on your page for your most important title . Also use the alt attribute from your images.

    Marked as helpful
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