Skip to content
Submitted about 1 year ago

responsive easybank landing page with react and MUI

meyoh-23ā€¢210
@meyoh-23
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Easybank landing page
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Anyone who can help me on how to change the colors of the .svg files kindly, Working with the logo on the footer section was quite a challenge, And the resources I got were not quite helpful. the footer logo is not as visible as it should

Community feedback

  • Carlā€¢855
    @CarlHummPosted about 1 year ago

    Hi there

    When you link to an SVG image using the <img> element you lose the benefits of full customization.

    SVG images are composed of XML which is similar to HTML. This structure and it's elements represent shapes, paths, coordinates and everything else that builds your image.

    If you open up this image in a code editor you can see this. On your image in particular there is a path with a fill attribute that looks like this. <path fill="#2D314D" This path is responsible for the text portion of the image.

    With this in mind, you could.

    1. Change this fill to white, re-save the image as logo-white and link using <img>
    2. Change this fill attribute to white and copy paste code directly inline in your HTML.
    3. Copy paste this code into your HTML and use CSS to change the fill.

    Useful Links

    1. Using SVG - CSSTricks
    2. Getting Started - MDN
    Marked as helpful
    0
    meyoh-23ā€¢210
    @meyoh-23Posted about 1 year ago

    thanks Carl, this is so helpful @CarlHumm

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord