Skip to content
OverviewSolutions
2
Comments
2

Luam Belay

@LuamBBerlin40 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Luam Belay•40
    @LuamB

    Hola 👋

    congrats on your design, which is very close to the design!

    Awesome aspects of your solution 🤩

    • Use of CSS custom properties (variables)
    • Use of transition

    Stuff to improve 🤓

    • You can define font-family once in the <body> element to avoid repetition and only define font-weight for each <h1> and <p> element:
    body {
    font-family: "Figtree", sans-serif;
    ...
}

h1.title {
    font-weight: 800;
    ...
}

p.description {
    font-weight: 500;
    ...
}

    <body>
    <main class="container">
        <article class="blog-card">
            <img 
                class="blog-card__image"
                src="assets/images/illustration-article.svg" alt="#" 
            >
            <ul class="blog-card__category">
                <li>Learning</li>
            </ul>
            ...
            <figure class="author">
                <img 
                    class="author__image"
                    src="assets/images/image-avatar.webp" alt="#" 
                >
                <figcaption class="author__name">Greg Hooper</p>
            </figure>
        </article>
    </main>
</body>
    • You can remove the <div class="attribution"> element (included in the starter package of each challenge) from your final solution, because it's not included in the design.

    I’m a beginner, but I hope my feedback is still valuable for you. I would appreciate if you could mark my comment as helpful if it was! 🙏

    Let me know if you have feedback on my comment or any questions and I'll do my best to respond.

    
Happy coding! 💻

    Marked as helpful
  • Luam Belay•40
    @LuamB
    • you might want to remove div.attribution
    • you might want to improve spacing between img, h1 and p to match the design
    • you might want to reduce border-radius of the img (border-radius of qr is ok, I think)