
Article Preview Component with Javascript and Font Awesome
Design comparison
Solution retrospective
I'm very happy to have used CSS nesting. I was using it with SASS in a past project because I didn't know that it exist in CSS, but recently I found out and now I'm working faster.
I was using Font Awesome too. I like this icon library. Is too easy to set icons with it.
What challenges did you encounter, and how did you overcome them?It was difficult to work with the image. I spent a lot of time on it.
The social networks container was difficult to work with, especially their styles in desktop. But hey, I learn how to make arrows with css...
.share-container::before {
content: "";
position: absolute;
left: 50%;
bottom: -14px;
margin-left: -16px;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 16px solid var(--very-dark-grayish-blue);
}
and a nice transition...
What specific areas of your project would you like help with?.share-container { transition: top .4s, opacity .4s; }
I need help with the image. Can you tell me how I can position the image so that it looks exactly like the design? I'll really appreciate it.
Any other thing would be nice :D
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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