Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
14
Comments
7

Cristina

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

  • E-commerce product page with React, Typescript and Sass

    #react#sass/scss#typescript#vite#react-testing-library

    Cristina•360
    Submitted over 2 years ago

    1 comment
  • API Shortening React App

    #jest#react#react-testing-library#tailwind-css

    Cristina•360
    Submitted over 2 years ago

    0 comments
  • React Interactive Card Details Form

    #react#react-router#react-testing-library

    Cristina•360
    Submitted over 2 years ago

    0 comments
  • Advice generator - CSS Grid, Vanilla JS

    #accessibility#animation#fetch

    Cristina•360
    Submitted over 2 years ago

    1 comment
  • Expenses chart component with chart.js

    #accessibility#chart-js#fetch

    Cristina•360
    Submitted almost 3 years ago

    1 comment
  • Accessible Intro section with dropdown navigation

    #accessibility

    Cristina•360
    Submitted about 3 years ago

    1 comment
View more solutions

Latest comments

  • Mathias•220
    @Mathitarazonad
    Submitted almost 3 years ago

    Responsive Time Tracker Page

    1
    Cristina•360
    @cr1deg0
    Posted almost 3 years ago

    Hi Mathias

    Your solution looks good, I specially like that you've introduced a media query for medium screen sizes. However the design comparison screenshot above looks odd. Perhaps because of the way you've centered the content on the screen, instead of using "padding" in your ".main-container" you could try: body { display: flex; justify-content: center; align-items: center; height: 100vh; } Hope it helps! Cristina

    Marked as helpful
  • Nemesis•120
    @nemesisaquib
    Submitted almost 3 years ago

    QR code component

    3
    Cristina•360
    @cr1deg0
    Posted almost 3 years ago

    Hi Nemesis

    Your solution looks great, well done! If you want to improve it, you could look into the accessibility and html issues in the report; perhaps replace the "section" tag by a "main" one and "h2" by an "h1".

    You could also look into using rem/em units for padding and margin, rather than px.

    Cheers

    Marked as helpful
  • Zizi Aymen•170
    @zizi-ayman
    Submitted almost 3 years ago

    Testimonials grid section

    3
    Cristina•360
    @cr1deg0
    Posted almost 3 years ago

    Hi Zizi,

    Awesome solution, it's such a great idea to use css grid for this design.

    img { display: block; max-width: 100%; } normally helps to work with images. In your solution you can set width: 40px; or similar to control the size of the headshots.

    I've noticed your content is not vertically centered on the page. To solve this you could use body { display: flex; flex-direction: column; justify-content: center; height: 100vh; } Hope it helps!

    Marked as helpful
  • Kevin•110
    @KKS1991
    Submitted about 3 years ago

    Intro Sign-up form with HTML, CSS, JS & Bootstrap

    #bootstrap
    2
    Cristina•360
    @cr1deg0
    Posted about 3 years ago

    Hi Kevin,

    Good solution, well done!

    It looks like your <p> element has some bottom margin applied to it, you can try by adding:

    .signup-proposal-txt { padding: 1rem 0; margin: 0; }

    You may want to have a look into the desktop version media query. You currently have the breakpoint as min-width: 1440px and it seems too tight, as the page is loading with the mobile layout for me (browser window size just short of 13.3inch). I would try something smaller, perhaps min-width: 1000px;

    Hope it helps!

    Marked as helpful
  • Hassan•940
    @hnasser44
    Submitted about 3 years ago

    Responsive intro component with sign up form

    1
    Cristina•360
    @cr1deg0
    Posted about 3 years ago

    Hi Hassan

    The error icon is an svg, rather than inserting it as an image in the html document you can try by adding a css class via javascript to the input element when validating the form. You can define error.svg as background image in the class and control the size and position within the input element with the background properties.

    The background images are failing to display because are missing quotes in the code: background-image: url("image.png");

    I've noticed also that you have imported the fonts in Italic, perhaps this is what it's preventing the styling of the heading and text.

    I hope it helps!

  • Huda Rashid•160
    @hudarashid
    Submitted about 4 years ago

    3-column preview card component using HTML and SCSS

    1
    Cristina•360
    @cr1deg0
    Posted about 4 years ago

    Hi Huda, looks very good! A few things you may want to revisit to make it even better:

    • the Learn More button for the Luxury cars is a bit off compared with the other two.
    • have a look into the accessibility issues in the report.
    • you could round the corners of the card with border-radius: 12px;
    • the background colour is more greyish in the design.

    Cheers, Cristina

    Marked as helpful
View more comments
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

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