Article preview component

Community feedback

• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted almost 5 years ago

  Hey, Sandra! 👋

  Great job on this challenge! I like how you actually made the social media icon links go to the home pages of their respective websites! 😉

  I suggest,

  • Giving the card component a fixed width so that it doesn't become too stretched when the height of the viewport increases.
  • Giving a hover and active state to the social media popup button.
  • You could make the social media popup in the desktop layout look a little closer to the design by giving it a border-radius and creating the little down arrow with a ::before or ::after psuedo-element (just position it relative to the popup itself). You can position the entire popup using absolute positioning (as you've done) but doing away with the left property completely and simply writing something like right: -3rem. You might have to set overflow: visible for the component, though, and manually add the border-radius to the image so that the popup is still visible off the edge of the card.

  Keep coding (and happy coding, too)! 😁

  20
• 

  jemeneradev•580

  @jemeneradev

  Posted almost 5 years ago

  Consider including the svg inline(place the svg text in the page) rather than by link, so you can take advantage of the ability of styling the content of the svg file through css.

  (Hint: change the fill property to "currentColor", than it take the value of the nearest color declaration. Sara Soueidan is a person to follow if you are interested in that topic. )

  10
• 

  jemeneradev•580

  @jemeneradev

  Posted almost 5 years ago

  The social media container is basically a rounded rectangle and a triangle. There are a few approaches to get it right. Consider looking into css shapes and working with pseudo-classes. It's a big topic.

  https://codepen.io/sonorangirl/pen/mVVPXb https://codepen.io/pixelbay/pen/yOdXeN

  10