Skip to content
Submitted almost 4 years ago

HTML, CSS, no JS, mobile first design

Jane•1,040
@janegca
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Used a hover effect with CSS only for the 'active' states. Couldn't figure out how to change the 'icon-share.svg' foreground colour, the background-color property worked ok but the color property had no effect. Any hints as to how it can be changed with CSS??

Getting the hover to work right took a bit of experimenting, was happy to finally get it working.

Community feedback

  • Web Frog•1,840
    @MasterDev333Posted almost 4 years ago

    Great work @Jane. If you add some transitions, it would be better. transition: all .3s ease-in-out; Hope it helps. Happy coding ~ :)

    0
    Jane•1,040
    @janegcaPosted almost 4 years ago

    Thank you for the suggestion @MasterDev333 :)

    0
  • Aleksandr Aksenov•750
    @axevldkPosted almost 4 years ago

    Hi, @Jane ~ I have studied your work, and it is really great ~ 👍

    Some of my opinions on your work is to add padding to container, so that it won't kiss out with the border on smaller resolutions. And icon sizes seems too small. Hope it to be a little bigger.

    And about svg color, as long as you have imported it as image, you can't change color of it. If you have imported it as svg tag, it will be able by touching fill property.

    Hope this will help you even a bit. Happy coding ~ ✨

    0
    Jane•1,040
    @janegcaPosted almost 4 years ago

    Thank you @axevldk, I will look at the svg tag; haven't used it as yet.

    0

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