Skip to content
Submitted over 2 years ago

Article Preview Component

Htein Linn•130
@hteinLinn210
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

When I was building this project, I am not in the mood and it took me almost 2 hours. I have no idea how to change the color of SVG. And the sharing section is not the best. I can't figure out how to add the triangle under the sharing section. Feedbacks are warmly welcome.

Happy coding!

Community feedback

  • Akhlak Hossain Jim•1,325
    @Akhlak-Hossain-JimPosted over 2 years ago

    Great work so far.

    The things you asked, these might help,

    • remove fill attribute from HTML <path ... > then target svg from CSS and add fill: red; rule.
    • add an ::after pseudo-class and style
    .social-section::after {
    content: "";
    border-top: 10px solid var(--very-dark-grayish-blue);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    bottom: -7px;
    left: 48%;
    z-index: 10;
}

    Note: this is a way but not the only way.

    So, Happy coding :)

    Marked as helpful
    1
    Htein Linn•130
    @hteinLinn210Posted over 2 years ago

    @Akhlak-Hossain-Jim Thank you so much for your advice. It really helps me.

    0
    Akhlak Hossain Jim•1,325
    @Akhlak-Hossain-JimPosted over 2 years ago

    @hteinLinn210 always.

    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