Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
4
Comments
3

dannebrob

@dannebrobSweden130 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

  • Product preview card component


    dannebrob•130
    Submitted almost 3 years ago

    2 comments
  • Interactive card details form with Tailwind & React Hook Form

    #react#tailwind-css

    dannebrob•130
    Submitted almost 3 years ago

    1 comment
  • Stats-preview-card-component


    dannebrob•130
    Submitted about 4 years ago

    2 comments
  • Four card feature section


    dannebrob•130
    Submitted about 4 years ago

    2 comments

Latest comments

  • Bekzat•480
    @BekEsaly
    Submitted almost 3 years ago

    Interactive card details form

    #jss
    1
    dannebrob•130
    @dannebrob
    Posted almost 3 years ago

    Hi @BekEsaly, nice to see your solution to the challenge. I saw your question about adding spaces on the front of the credit card. I found that this function worked for me, give it a try 🖖

    function injectSpaces(str) {
        let groupsOf4 = [];
        for (let start = 0; start < str.length; start += 4) {
          let group = str.slice(start, start + 4);
          groupsOf4.push(group);
        }
        return groupsOf4.join(" ");
      }
    
    Marked as helpful
  • Yevgeny•210
    @YevgeniyMakkaveev
    Submitted about 4 years ago

    Sunnyside agency landing page

    1
    dannebrob•130
    @dannebrob
    Posted about 4 years ago

    Hi, nice looking solution!

    I noticed that if I view your page on smaller screens than 400px the layout don't work. What I tend to do myself is write the css to work on either mobile or on desktop first. And then use the @media at-rule just for the specific changes needed. So in this case I might have writen the css for the mobile view first and then writen the changes needed to work on lager screens in a media queries. Maybe this link will help you? https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    I was also thinking that you repeted the same css alot on some places (like on .gallery-back-img1/ and main-text-row-img1/). You might find it more efficent to write like explained on stack overflow: https://stackoverflow.com/questions/15374830/stop-repetition-of-css-code

    Other than that, I like it.

    I hope my sugestions will be useful to you.

    Keep up the good work! 💪

    See you on the coding trail 😉

    Marked as helpful
  • Chandra Shekhar Pawar•110
    @Shekharpawar1
    Submitted about 4 years ago

    HTML 5 css3

    2
    dannebrob•130
    @dannebrob
    Posted about 4 years ago

    Have you tried to put the image in another div with a solid background color and change the opacity of the img?

    Marked as helpful

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

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

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