Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
18
Comments
2

Kristine

@sn-tin310 points

Hi, I'm Kristine! I aspire to be a front-end developer. I love listening to music, watching movies/dramas/series, and writing codes. I am knowledgeable in HTML, CSS (SCSS/Sass), Bootstrap, Vanilla JavaScript and ReactJS.

I’m currently learning...

ReactJS

Latest solutions

  • REST Countries API | ReactJS, Bootstrap, framer motion

    #bootstrap#framer-motion#react#styled-components

    Kristine•310
    Submitted over 2 years ago

    1 comment
  • URL Shoterning API HTML, Sass, Bootstrap, Vanilla JavaScript, Webpack

    #sass/scss#webpack#bootstrap

    Kristine•310
    Submitted almost 3 years ago

    0 comments
  • FAQ accordion card HTML, CSS (Sass), Bootstrap 5, Vanilla JavaScript


    Kristine•310
    Submitted about 3 years ago

    2 comments
  • NFT Preview Card HTML, CSS, Bootstrap 5


    Kristine•310
    Submitted over 3 years ago

    1 comment
  • Mobile First Order Summary Component HTML, CSS, SASS, Bootstrap 5


    Kristine•310
    Submitted almost 4 years ago

    1 comment
  • Huddle with alternating feature blocks HTML, Sass, Bootstrap


    Kristine•310
    Submitted over 3 years ago

    1 comment
View more solutions

Latest comments

  • ishanlearnsprog•120
    @ishanlearnsprog
    Submitted about 2 years ago

    NFT Preview Card Component

    1
    Kristine•310
    @sn-tin
    Posted about 2 years ago

    Congratulations on successfully finishing this challenge 🎉

    I just have a few recommendations to help you improve your solution.

    First, I noticed that the icons for clock and ethereum has been stretched. This is because the align-self default value is stretch. There are two ways to fix this:

    Solution 1:

    .imgp img {
      align-self: center;
    }
    

    Solution 2

    .imgp {
        display: flex;
        gap: 5px;
        align-items: center;
    }
    

    Then, when hovering over the image, I think it would be best to have the cursor: pointer.

    Nevertheless, the solution you submitted looks great! 😊

    Marked as helpful
  • elvis yanez•10
    @eljobnm
    Submitted about 4 years ago

    Huddle landing page with single introductory section solution

    1
    Kristine•310
    @sn-tin
    Posted about 4 years ago

    I added it in the body part of css by using: background-image: url(../images/bg-desktop.svg); background-repeat: no-repeat; background-size: cover;}

    I did the same for the mobile size but changed the image to: background-image: url(../images/bg-mobile.svg)

    I also changed the size to: background-size: contain

    and then I added background-position: center top;

    I hope this helps.

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