Skip to content
OverviewSolutions
13
Comments
13
Hari Ram
@hariramjp777

All comments

  • Hari Ram•370
    @hariramjp777

    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..

  • Hari Ram•370
    @hariramjp777

    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. 👍

  • Hari Ram•370
    @hariramjp777

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

  • Hari Ram•370
    @hariramjp777

    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:

  • Hari Ram•370
    @hariramjp777

    Good. Looks nice :thumbsup:

  • Hari Ram•370
    @hariramjp777

    Good 👍

  • Hari Ram•370
    @hariramjp777

    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:

  • Hari Ram•370
    @hariramjp777

    Great work. :thumbsup:

  • Hari Ram•370
    @hariramjp777

    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:

  • Hari Ram•370
    @hariramjp777

    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..

  • Hari Ram•370
    @hariramjp777

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

  • Hari Ram•370
    @hariramjp777

    Hi, Page looks good.