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

Hari Ram

@hariramjp777India370 points

Learning Web

Latest solutions

  • Responsive Landing Page using CSS


    Hari Ram•370
    Submitted about 4 years ago

    0 comments
  • Three Card Component using CSS


    Hari Ram•370
    Submitted about 4 years ago

    1 comment
  • TODO APP using HTML - Drag and Drop | CSS | JS - Local Storage


    Hari Ram•370
    Submitted over 4 years ago

    0 comments
  • Profile Card Component - CSS


    Hari Ram•370
    Submitted over 4 years ago

    1 comment
  • Testimonials Grid Section - CSS Grid


    Hari Ram•370
    Submitted over 4 years ago

    0 comments
  • Social Proof Section - Flex and Grid


    Hari Ram•370
    Submitted over 4 years ago

    1 comment
View more solutions

Latest comments

  • Enisa Abazaj•135
    @eniabazaj
    Submitted over 4 years ago

    Huddle landing page with blocks

    1
    Hari Ram•370
    @hariramjp777
    Posted over 4 years ago

    Hi Enisa, Your solution looks good. Great 👍

    To change the logo in the footer,

    • Create a new file - logo-footer.svg.
    • Copy the code of logo.svg and paste in logo-footer.svg.
    • Start editing logo-footer.svg. If you look at the code, you'll see kind of markup model,
    <svg>
      <g>
        <path d="" fill=""></path>
        <path d="" fill=""></path>
      </g>
    </svg>
    
    • So, Here you see two path elements inside g element. Among them, One path is for the chat-box like icon and other is for the text "Huddle".

    • Now change the value of fill attribute in the path elements which defines color.

    • So, for first path, fill = "#fafafa" [ for chat-box like icon ]

    • and for second path, fill = "#ffffff" [for text "Huddle"]

    • Finally, update src attribute of <img> in html page.

    Hope it helps.. If you've doubts in the code, ask me in the comments. Have a good day Enisa..

  • Gracious Ng'etich•25
    @GraciousNgetich
    Submitted over 4 years ago

    Four feature card section using HTML and CSS

    2
    Hari Ram•370
    @hariramjp777
    Posted over 4 years ago

    Hi @Gracious Ng'etich, Your mobile layout looks good. For desktop layout, you've to use grid with three columns and two rows.

    main {                                                                 /* card container */
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }
    

    and then you set grid-row and grid-column for child elements which specifies number of rows/columns to span.

    You can look at my repository

    Hope it helps. 👍

  • Enisa Abazaj•135
    @eniabazaj
    Submitted over 4 years ago

    Profile card component

    2
    Hari Ram•370
    @hariramjp777
    Posted over 4 years ago

    @eniabazaj Great, Everything looks good. Keep it up :thumbsup:

  • Jessica Strachan•160
    @JessicaStrachan
    Submitted over 4 years ago

    Profile Card Component: sass, background images and pseudo elements

    2
    Hari Ram•370
    @hariramjp777
    Posted over 4 years ago

    Hi @JessicaStrachan, Good Job. Your solution looks good.

    I recommend using width: 90% for profile card and flex-direction: column for footer section when it comes to mobile layouts.

    Happy Coding, :thumbsup:

  • Enisa Abazaj•135
    @eniabazaj
    Submitted over 4 years ago

    Single price grid component

    2
    Hari Ram•370
    @hariramjp777
    Posted over 4 years ago

    Good. Looks nice :thumbsup:

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

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

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