Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
14
Comments
6
isimeri
@isimeri

All comments

  • Monica•100
    @monicamclaughlan
    Submitted over 4 years ago

    Four Card Feature Section using HTML CSS with flex-box/media-query

    3
    isimeri•250
    @isimeri
    Posted over 4 years ago

    Hello! You did a pretty good job on this project. I'd still change a few things, though:

    • Remove all the margin-bottom that you set up for your cards. As the point of this project is to get you to know Flexbox better, rather set a height or min-height for your .card-section and just let the align-items and justify-content properties do their job, instead of using the cards' margins to increase the .card-section's height by force. I'd suggest using display:flex with a flex-direction: column for .middle-cards as well, so you don't have to guess margins to position the cards.
    • Make the <body> take up the full screen height. I'd actually use some div.container for all the content, so i won't have any regrets if i decide to add some feature to the page some day(but it's no big deal for this specific project).
    • Remove the max-width: 1440px media query. The .card-section looks very much wrong for screens wider than that. I know there was some mention in the project's instructions file, about the design being supposed to work for that width, but that shouldn't limit you from making it work for screens wider than 1440px.
    • The <footer> is directly below the cards, but that is due to the <body> not taking the entire height of the screen. It really comes down to personal preference in this specific case, but i think it would look better if the <footer> was at the bottom of the screen.

    Other than that, you did a great job. Keep it up!

  • Victoria•10
    @vjwalsh
    Submitted over 4 years ago

    Profile card component using basic HTML and CSS

    1
    isimeri•250
    @isimeri
    Posted over 4 years ago

    Hello. Your project looks pretty good overall, but it could be better, of course. Here are a couple of things i want to mention:

    • Make the <body> take up the entire height of the screen at least, because it takes up only as much as it's content does, if no height or min-height is specified. It can look ugly if there is not enough content to fill the entire screen height.
    • I'd rather use absolute positioning for those background image rings, so they adjust to the screen width.
    • Change the font color of your .credit, because it is very hard to see and read, and i would use absolute positioning here as well, to fix it to the page's bottom. If you reduce the width of your screen, you can see how it goes to heaven along with the profile card, but that's also due to the <body>'s height shrinking too much.
    • I'd place all those 3 .stats inside a container <div> and use display: flex; with justify-content: space-evenly(or space-around, doesn't matter too much), instead of bothering to pinpoint all the margins to make them look nice and evenly-spaced(but hey, if you like trying a bunch of margins until you find a good one, nobody can stop you :D ).

    As i mentioned earlier, looks good overall, and taking into account that you are a complete beginner, you did a majestic job. Keep improving and have a good time!

  • Chloe•240
    @cguttweb
    Submitted over 4 years ago

    Insure LP using flexbox

    1
    isimeri•250
    @isimeri
    Posted over 4 years ago

    Hello there. You are right, in some cases you can use those wavy patterns as background-image and forget about them, but in the case of the pattern that goes over the blue and the white background, you'd probably want to use absolute positioning. There is another interesting issue i found. By default, your nav has the .show-hide class, and if you reduce the width of your screen, to reach the mobile layout and press the hamburger button to close the nav menu, then increase the screen width to go back to the desktop layout, there is no nav menu and no button to make it appear. I'd actually create another nav menu, specifically designed for the mobile layout and just keep it display: none in the desktop layout, so there won't be any worries regarding the nav being there when switching between the mobile/desktop layouts. Also, your links and buttons don't have any hover states and the top logo looks a little distorted in the mobile layout, but those are minor issues. You have done a majestic job, mostly. Keep it up!

    Marked as helpful
  • Nishant Jain•20
    @NJain0001
    Submitted over 4 years ago

    Beginner: Card component using flexbox

    2
    isimeri•250
    @isimeri
    Posted over 4 years ago

    Hello. I read through your code a little and it's great overall. Regarding your first question, i would place those svg circles inside the html <img> tags instead, and then tackle the positioning with position: absolute. About the second question: your card .user-card has a fixed height 22.5em. The heights(margins and paddings included) of its children: .pattern-img, .user-info and .user-number-info when added, make up more than the height of the parent .user-card. That's why you see the overflow. Another little thing, when defining the height of .pattern-img, you used vh(which is a responsive unit), but also used em and rem for the other children. It's good being consistent, using vh or %, etc. everywhere(where it makes sense, of course). Reduce the height of your browser to see how .pattern-img vs the rest of the card behaves. Cheers!

  • Chloe•240
    @cguttweb
    Submitted over 4 years ago

    Profile card component with vanilla CSS

    2
    isimeri•250
    @isimeri
    Posted over 4 years ago

    Hey there. Don't use those svg images as background-image. Rather place them in <img> tags inside your html and use position: absolute and the top, left, bottom, right properties to position them. Cheers!

  • Chloe•240
    @cguttweb
    Submitted over 4 years ago

    Intro with sign up form using flexbox and vanilla JS

    2
    isimeri•250
    @isimeri
    Posted over 4 years ago

    Hey there. The error icon thing doesn't appear anywhere at all on my side. I would wrap each input element in a <div class="wrapper"> and use the .wrapper::after pseudo-element to handle this. Cheers!

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