Skip to content
OverviewSolutions
7
Comments
7
Suraj Singh
@suraj-singh127

All comments

  • Steven Abaco•65
    @stevenabacoSubmitted about 3 years ago

    Hello fellow developers,

    This is my second challenge I completed. I loved building it. I decided to keep it simple and just used HTML, CSS and vanilla Javascript. In retrospect I think it would have been a fun project to build with React since there are a duplication in code for the same components. With React I could have created a class and just passed in the required props. I probably will refactor with React at some point in time.

    I do have a question for anyone else who also built this project. I could not figure out a way to use a gradient fill using "Border-Top" for the Instagram component. How did you do it? I just have a simple solid fill but curious how to get the three color gradient fill.

    Anyway, I hope you like my solution. I'm open to any feedback, comments or recommendations. I'm here to learn and help other developers on the same journey.

    Thanks and Happy Coding!

    Social Media Dashboard Challenge using HTML | CSS | JavaScript

    3
    Suraj Singh•-20
    @suraj-singh127Posted about 3 years ago

    Wow! It looks almost exactly like the intended design. Good Work. That toggle button theme switcher appears really good. Can you share some secrets on that theme switcher? Thanks!

    1
  • Giovani•90
    @giovanibulianSubmitted over 3 years ago

    Hi, guys!

    I have a question about the 5-star in the review cards. Let me explain how I did it first:

    • I used a <div> and set the star icon as its background-image.

    • To get 5 stars in total, I set the property background-repeat: space and adjusted the <div>'s dimensions.

    • Now comes the "but": I couldn't work with the spacing to match the design given since a wider <div> would fit more starts into it after a certain breakpoint.

    • And the question: is it possible to give extra spacing using the icon as background or is it only accomplished by adding the star icon itself as an html element and styling it from there?

    Many thanks in advance and feedback regarding anything else will be appreciated!

    Happy coding!

    Mobile first workflow and CSS Grid

    2
    Suraj Singh•-20
    @suraj-singh127Posted over 3 years ago

    Everything is nearly pixel perfect! I would really like to know how you adjusted the margins and paddings so perfectly to match it with the original design?

    0
  • Suraj Singh•-20
    @suraj-singh127Posted over 3 years ago

    Awesome man!!! Especially that intro animation!

    1
  • Suraj Singh•-20
    @suraj-singh127Posted over 3 years ago

    Great Job!!

    0
  • Graziele Nascimento•10
    @GrazinascitoSubmitted over 3 years ago

    Hello, that is my first code with frontend mentor. I hope receive good feedback so that I can improve.

    html,css,flexbox

    3
    Suraj Singh•-20
    @suraj-singh127Posted over 3 years ago

    Great job!! It looks good. Just try increasing the overall size of the centre card.

    0
  • Suraj Singh•-20
    @suraj-singh127Posted over 3 years ago

    Wow! This is almost 99.99% accurate compared to the original design. Good Work!!

    0
  • Mohamed•325
    @MohamedBehharSubmitted over 3 years ago

    Hello, frontend mentor community, This challenge was a bit difficult for me, especially the footer section with a lot of divs, I'm happy with the result but I'll definitely try to make my code as dry as possible in the future. I'll be grateful if someone could review my code and give me some advice.

    Responsive landing page using CSS Flexbox and Grid

    2
    Suraj Singh•-20
    @suraj-singh127Posted over 3 years ago

    Brother this is awesome work! You must have worked really hard on this and I can assure it has paid off. Keep Going!!!

    0