Skip to content
OverviewSolutions
13
Comments
13
Hari Ram
@hariramjp777

All comments

  • Enisa Abazaj•135
    @eniabazajSubmitted almost 4 years ago

    Hi everyone! I had some troubles with the logo in the footer section, I can't understand how to turn it white... Any feedback is appreciated, thank you all!

    Huddle landing page with blocks

    1
    Hari Ram•370
    @hariramjp777Posted almost 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..

    1
  • Gracious Ng'etich•25
    @GraciousNgetichSubmitted almost 4 years ago

    Hi Guys..this is my first challenge on FrontEnd Mentor and am excited to be part of this amazing community. I need your help in aligning the two cards in the second column to lie on top of each other. Your feedback and comments are welcome!

    Four feature card section using HTML and CSS

    2
    Hari Ram•370
    @hariramjp777Posted almost 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. 👍

    0
  • Hari Ram•370
    @hariramjp777Posted almost 4 years ago

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

    0
  • Hari Ram•370
    @hariramjp777Posted about 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:

    0
  • Hari Ram•370
    @hariramjp777Posted about 4 years ago

    Good. Looks nice :thumbsup:

    0
  • Janet•40
    @janetthieuSubmitted about 4 years ago

    This was my first challenge here! I learned a lot about grid, flex, and media queries.

    My questions:

    • Would there be a more efficient way to create the responsiveness on this site?
    • Are there other things you could suggest to make this site more accessible?

    Any and all critiques are welcome. I'm here to grow and thank you in advance for helping me do so!

    Mobile first responsive design using HTML and CSS

    3
    Hari Ram•370
    @hariramjp777Posted about 4 years ago

    Good 👍

    0
  • Hari Ram•370
    @hariramjp777Posted about 4 years ago

    Hi @Hortensefrom, Great job, I recommend using a separate div for background and scss variables, imports.

    You can refer my solution, https://github.com/hariramjp777/frontend-fylo-data-storage-component/

    Great work, keep it up :thumbsup:

    0
  • Hari Ram•370
    @hariramjp777Posted over 4 years ago

    Great work. :thumbsup:

    1
  • Hari Ram•370
    @hariramjp777Posted over 4 years ago

    Hi, I appreciate your solution.

    I recommend changing the box-shadow of parent container to blue-like color. Use this color #2ab2af

    All the best, great work :thumbsup:

    1
  • Hari Ram•370
    @hariramjp777Posted over 4 years ago

    Hi Brother, It's a good solution and it's responsive. I recommend the following,

    Add hover effects for cards.

    Second title should be white in dark theme and black in light theme. (Overview - Today)

    section and article must need a heading inside to pass html validation. So, I recommend using div for containers here in this challenge since it'll reduce your html issues.

    All the best, brother..

    1
  • Hari Ram•370
    @hariramjp777Posted over 4 years ago

    Good solution brother especially using classes for accessibility such as visually-hidden..

    1