Skip to content
OverviewSolutions
6
Comments
8
Eric Karugu
@erickarugu

All comments

  • Eric Karugu•210
    @erickaruguPosted almost 3 years ago

    Hi Naveen👋,

    Good job! I love your solution. It looks great.

    Happy coding 💻!

    Marked as helpful
    1
  • Eric Karugu•210
    @erickaruguPosted over 3 years ago

    Hello Shibu👋

    Your solution looks great.

    0
  • Eric Karugu•210
    @erickaruguPosted over 3 years ago

    Also, I think synchronizing the body background-color theme switch with that of the cards will be a great add-on.

    0
  • Eric Karugu•210
    @erickaruguPosted over 3 years ago

    Hello Clement👋,

    Your implementation looks superb. I love the layout and how you adopted the BEM CSS class naming convention👍

    The site looks great. The styling is working perfectly on my end too. A minor suggestion would be maybe to fix the few HTML issues as highlighted in the report.

    Regarding styling the top-border, I would suggest you go with the simpler and direct border-top styling, i.e for example border-top: 4px solid blue; in the various cards instead of using the ::before selector. I think this makes the border styling more similar to the one in the design. For the HSL not working, you can try converting the colors to RGB or hex to work in the linear-gradient.

    Otherwise, job well done!🙌 Happy Coding!😊

    0
  • Eric Karugu•210
    @erickaruguPosted over 3 years ago

    Hello Sayantani👋,

    Good job! Your solution looks splendid. Regarding the blue border, Bootstrap has a box-shadow CSS style for buttons in focus state:

    .btn:focus{ box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%); } So overriding this by setting it to none, i.e box-shadow: none or tweaking it to your liking will get you there.

    Happy Coding!

    Marked as helpful
    0
  • Dardian•60
    @TheTryfechtaSubmitted over 3 years ago

    Hello everyone!

    Question: For the stats (likes, photos, followers): I used padding to make the container bigger and to center the text at the same time, but the div does not fit the card exactly. My question is, how would one go about making the stats div take up all the space left in the card?

    Card page using HTML and CSS

    3
    Eric Karugu•210
    @erickaruguPosted over 3 years ago

    Hello Dardian!

    Well done on completing this challenge👏👏 Regarding your question I see you have the transform: translateY(-3em) on your .content div and this is pulling all the contents inside this div up leaving a space at the bottom of the card. You can negate this by removing padding: 1.5em and margin-top: 1.5em; and replacing it with transform: translateY(3em) on the .stats div.

    That is one way to do it. Happy coding!👩‍💻

    1
  • Nicolas Aguilera García•20
    @niaggarSubmitted over 3 years ago

    Hi!

    This is my first challenge, I don't know if its the best solution but i tried (I think that the CSS file could be smaller). So I read the comments if anyone has something to tell me 😊

    And thanks in advance!

    Victor - Profile card

    1
    Eric Karugu•210
    @erickaruguPosted over 3 years ago

    Hello Nicolas👋

    Welcome to Frontend Mentor!🙌 For your first challenge, you have done an amazing job. Regarding the CSS being smaller that is true but personally I prefer having a working solution and then refactor from there instead of struggling to look for the shortest way from the word go.

    A brief suggestion, while you are doing that maybe you can fix the images issue by adding the alt text. It is really helpful when it comes to screen readers. Also, you can look at BEM classes naming convention to have your classes consistent and easier to follow.

    Happy coding!👩‍💻

    1
  • Eric Karugu•210
    @erickaruguPosted over 3 years ago

    Hello Shaumik ✋, I love how you approached the challenge. Everything looks great. Well done. A couple of suggestions maybe. Coupling BEM naming convention with SCSS and sticking to that through out your work will make your CSS classes consistent and easy to follow. Again it is just a suggestion. Good job!👏

    Marked as helpful
    0