Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
13

Adrian

@ohsitePoland190 points

I'm a self-taught beginner who really wants to test his skills.

Latest solutions

  • 3-column preview card component using SCSS


    Adrian•190
    Submitted over 3 years ago

    2 comments
  • Social proof section challenge using sass


    Adrian•190
    Submitted over 3 years ago

    0 comments
  • Profile card component challenge hub using SASS


    Adrian•190
    Submitted over 3 years ago

    0 comments
  • Stats preview card component using SASS


    Adrian•190
    Submitted over 3 years ago

    0 comments
  • Order summary components challenge using SASS


    Adrian•190
    Submitted almost 4 years ago

    2 comments

Latest comments

  • Duyen Nguyen•950
    @Duyen-codes
    Submitted over 3 years ago

    Stats-preview-card-component using Flexbox

    2
    Adrian•190
    @ohsite
    Posted over 3 years ago

    HI Duyen! Please not that in this challange you have 2 images.

    One for the desktop version and second one for the mobile. This fact can tell us that we are going to have to switch between those 2 pics.

    You can not do that (without using JavaScript) by putting the img there by using an <img> tag. What you should do is: create and empty div in your markup code, than set the image as the background of this div by using:

    background-image: url(the div's url goes here), (color code goes here);

    Now you have two images set as a background of the same div, first is image by using url, second one is a color, they should be separated by a comma.

    Now you are able to use background blend modes to blend those two types of background.

    Please also note that having image as a background set using css not putting it into the document by using an <img> tag allows you to switch desktop/mobile image using media queries.

    Keep up the good work!

  • Adrian•190
    @ohsite
    Submitted over 3 years ago

    3-column preview card component using SCSS

    2
    Adrian•190
    @ohsite
    Posted over 3 years ago

    Hi @pikamart, Thank you for your support! As for the body min-height that's exactly what I've been missing! Giving it just height on mobile the content would overlap top and bottom but stay centered. Really big thx for this solution. As for the footer I position it relative to take it out of the DOM order. Making it child of flex container therefore occupying some space in it, will make the second element not centered. Unless....I maybe give a footer margin top auto...yea that might work! As for the screen readers, semantic tags, and arias that is a definitely my weak side, that I have to work on more. If you be so kind please follow my future challanges and share your feedback! I've learned a lot from you. More than form few hours course! Thx again, peace <3

  • Mubaraq•140
    @muubaraq
    Submitted over 3 years ago

    Order summary page

    3
    Adrian•190
    @ohsite
    Posted over 3 years ago

    Hi there, If you want to center main element: get rid of the <section> tag, it doesn't do anything. Also if you have attribution div, just make it footer class="attribution". Style your body element to be a flex container and give it a height, like so:

    body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
    position: relative;
    }
    

    This way your body is a flex container with 2 children, main div and also footer element with the class of attribution. We gave it position relative, so now you cant give the footer position absolute which takes it out of the DOM, and you are left with perfectly centered main element.

    As for the footer do bottom: 0; left 50% + transformX and you are good to go. If you have any questions feel free to ask. Also look my solution if you want to see the code, Keep up the good work!

  • Klaudija✧˖*°࿐•130
    @klaudij
    Submitted over 3 years ago

    3 column preview card

    1
    Adrian•190
    @ohsite
    Posted over 3 years ago

    Hi, The reason why you can not use border-radius properly is because, your rows are stacking. It's happening because of using bootstrap, try use custom media-queries instead. Check my solution, when screen is getting smaller they just shrink but not stack. In your case when you use border-radius on main element you will get to the point, when top if it is 2 cards and bottom of it is 1 card, so I'm guessing 2 top cards gonna have rounded corners, bottom one is not going to have those at all. Keep up the good work!

    Marked as helpful
  • Holyworth Akhigbe•60
    @htrigga28
    Submitted over 3 years ago

    stats-preview-card-component-main

    1
    Adrian•190
    @ohsite
    Posted over 3 years ago

    Hi there! Yes, image is not loading because you have to use: background-image: not just background. Also instead of using ::before sudo element you can use multiple images as a background separated by , and then use blend modes. Keep up the good work!

  • Michael Johnson•100
    @michaeljohnson-mj
    Submitted over 3 years ago

    Responsive Order Summary using HTML5 and CSS3

    1
    Adrian•190
    @ohsite
    Posted over 3 years ago

    Dear Michael, Honestly, given all types of screens and resolutions it's basically impossible to get a perfect match. On some challenges offset is used. For ex. to set two background images with offset I use:

    background-image: url(image1), url(image2);
    background-position: -100px 0, calc(100% + 100px)  calc(100% + 100px);
    

    By using this trick 1st image will be top left corner -100px, 2nd bottom right +100px no matter the screen size.

    Try to get a perfect match with order summary challenge using offset. Stay motivated!

    Marked as helpful
View more comments

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

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