Skip to content
OverviewSolutions
18
Comments
11

Coding Nerd

@onyedikachi23370 points

My Goal is to become a full stack web developer.

Latest solutions

View more solutions

Latest comments

  • Coding Nerd•370
    @onyedikachi23

    For the hover effects (change colour on hover) on the SVGs, you can check out this question thread from StackOverflow on how to use the CSS filter property to change the colour of an SVG image.

    From the thread: Alternatively you can use this tool from this codepen project, that works by inputting the hex coded colour to generate the filter functions and values to get the required colour.

  • Coding Nerd•370
    @onyedikachi23

    Your HTML structure is alright.

    For the CSS, your usage of the Grid Layout, that is display: grid; is uncalled for. A simpler Layout structure like Flexbox would be recommended.

    Avoid applying your layout designs directly to the body element. Instead nest a container div, and apply your layout structure.

    For a simple design like this, it is responsive enough.

    Marked as helpful
  • Coding Nerd•370
    @onyedikachi23

    What happened to the background-image and the fonts used?

  • Coding Nerd•370
    @onyedikachi23

    I see your problem is with Flexbox Layout and you use absolute units a lot. Making your design not responsive.

    You can learn about Flexbox layout in this short tutorial: Learn Flexbox CSS in 8 minutes.

    In addition, for better mastery of the Layout, you read these articles from MDN DOCS:

    If after studying these resources, and you still got problems, please don't hesitate to share your difficulties.

    Marked as helpful
  • Coding Nerd•370
    @onyedikachi23

    I see your issue is probably with blending the image to with the violet colour.

    • To do this, put the image in a container and make the image fill the container entirely without distorting (stretching) its look.
    • Add the violet colour as the background colour for the container.
    • Then use mix-blend-mode: multiply; or mix-blend-mode: lighten; on the image to make it blend with the violet colour.

    You can read more about the mix-blend-mode CSS property here - mix-blend-mode - MDN DOCS.

    Marked as helpful
  • Coding Nerd•370
    @onyedikachi23

    Make the two sections have the same width and height, and the size of the main container fit the two sections.

View more comments