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

Mark Cates

@mscates110 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Responsive Landing Page with Flexbox and Sass

    #sass/scss

    Mark Cates•110
    Submitted over 3 years ago

    1 comment
  • responsive landing page using flexbox and sass

    #sass/scss

    Mark Cates•110
    Submitted over 3 years ago

    0 comments
  • sass and flexbox

    #sass/scss

    Mark Cates•110
    Submitted over 3 years ago

    1 comment
  • sass, flexbox

    #sass/scss

    Mark Cates•110
    Submitted over 3 years ago

    1 comment
  • preview card using flex box and sass(first time using sass)

    #sass/scss

    Mark Cates•110
    Submitted over 3 years ago

    2 comments

Latest comments

  • Nafsuki•245
    @Nafsuki
    Submitted over 3 years ago

    Meet landing page using Next.js

    #next#react
    2
    Mark Cates•110
    @mscates
    Posted over 3 years ago

    Hi Nafsuki, I liked your solution. I did see a scroll bar on mobile though. you could add overflow-x: hidden to solve this issue.

  • Ty•70
    @ItsIchi
    Submitted over 3 years ago

    Responsive Card Component with Active states using CSS grid

    3
    Mark Cates•110
    @mscates
    Posted over 3 years ago

    for the opacity, you can wrap the image in a container and give it a background color and then when you hover over the container img:hover like this, you can use the mix-blend-mode: multiply with an opacity of say .6 and you can get the hover effect like on the design. here is some sample code to see how it works.

    <div class="example"> <img src="/images/image-equilibrium.jpg" alt="equilibrium" /> </div>

    .example { background-color: $primary2; height: 300px; border-radius: 10px; } .example img { max-width: 300px; width: 100%; border-radius: 10px; }

    .example img:hover { opacity: 0.6; mix-blend-mode: multiply; border-radius: 10px; transition: 0.5s ease; cursor: pointer; }

    Marked as helpful
  • William Hernandez•90
    @WackLantern
    Submitted over 3 years ago

    opacity, max-width, max-height

    4
    Mark Cates•110
    @mscates
    Posted over 3 years ago

    one think to notice on your solution is the left part of the card all the way down. see how all the elements of the card design are lined up. the spacing between the left hand side of the card and the elements is the same. if you give the card itself a padding all the way around, this will resolve some of the issue.

  • Priyanka Vasam•40
    @priyankavasam7
    Submitted over 3 years ago

    StatsPreview

    1
    Mark Cates•110
    @mscates
    Posted over 3 years ago

    Hello Priyanka, one thing I see is that your flex-container does not have a max-width so on a large screen your card is really big. what you could do is give it a max-width of say 1000px and then set each child of the container to flex: 1 so that each takes up exactly half the space. it will be more uniform that way. your mobile view is very good. great job.

    Marked as helpful
  • arsalan farooq•30
    @arslan1070
    Submitted over 3 years ago

    Nothing special

    1
    Mark Cates•110
    @mscates
    Posted over 3 years ago

    have you looked at your solution on the web yet? the image is off center. what you can do is change the background-size to contain and add background-repeat: no-repeat and it will be centered. then change your padding to 9vh 0 and it will look better. I would also look into just using the img tag instead of the background image. might be an easier solution for you. also, you asked about the hover and you can do this with mix-blend-mode to easily do the hover action. hope his helps.

  • JC•150
    @jcsmileyjr
    Submitted over 3 years ago

    NFT Preview with HTML, CSS, & JS

    1
    Mark Cates•110
    @mscates
    Posted over 3 years ago

    Hey JC, the one accessibility issue you have is the h2, they want at least one h1 on each project we do. not a big deal, but if you want that to go away that is the solution.

    another thing I see is you could also make a card class that wraps the entire content and put a max-width on it of say 400px and then width of 100%. that way no matter how big the screen gets, it will only be 400px. right now, I have a large screen and it stretches your card out quite a bit because it doesn't have that limit. everything else looks great though. nice work.

    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

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