Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Fylo Landing Page with two columns. HTML, CSS

AlbertoIJS 135

@AlbertoIJS

Desktop design screenshot for the Fylo landing page with two column layout coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


-Any ways to get the green arrow on the same level as the anchor tag would be appreciated.

-How do i fix the border radius on the Facebook icon, it becomes a oval instead of a circle.

Thanks in advance (:

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Alberto, great work again! To answer your questions:

  1. You can add display: flex; align-items: flex-end; to the anchor tag to align the arrow.
  2. As for the social icon, you need to set the height and width to ensure the element itself is a square and then center the icon. So Flexbox comes to the rescue again. This code snippet should help (obviously keep some of your other:
.fab {
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: #fff solid 1px;
  border-radius: 50%;
  margin-right: 1.2rem;
}

I'd also recommend wrapping these icons in anchor tags, as you'd expect these to be clickable if this were a live site.

I hope this helps! Let me know if you have any questions 🙂

0

Please log in to post a comment

Log in with GitHub
Discord logo

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