Latest solutions
Latest comments
- @eniabazaj@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 inlogo-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 insideg
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 thepath
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>
inhtml
page.
Hope it helps.. If you've doubts in the code, ask me in the comments. Have a good day Enisa..
- Create a new file -
- @GraciousNgetich@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
andgrid-column
for child elements which specifies number of rows/columns to span.You can look at my repository
Hope it helps. 👍
- @eniabazaj@hariramjp777
@eniabazaj Great, Everything looks good. Keep it up :thumbsup:
- @JessicaStrachan@hariramjp777
Hi @JessicaStrachan, Good Job. Your solution looks good.
I recommend using
width: 90%
for profile card andflex-direction: column
for footer section when it comes to mobile layouts.Happy Coding, :thumbsup:
- @eniabazaj@hariramjp777
Good. Looks nice :thumbsup: