Skip to content
Submitted almost 3 years ago

Responsive Fylo using BEM and SCSS

Guillermo•170
@Guille2000
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo landing page with two column layout
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Finally, here is my solution. I had fun doing this one! If you have any advice, or there's something i should improve, please tell me! I'm excited to see your comments! :)

Community feedback

  • Renato Granados•180
    @Renato6GSPosted almost 3 years ago

    very good work. Although I think the card quotes appear outside, right? It may be that you are adding these quotes outside the card container

    Marked as helpful
    0
    Guillermo•170
    @Guille2000Posted almost 3 years ago

    @Renato6GS From the screenshot it looks like it yeah. But if you go to the url, at least in desktop, the quote looks fine. In mobile it doesnt look good in all the sizes but in my screensize it does! I used position relative and absolute. Anyways, thanks!!

    0
    Renato Granados•180
    @Renato6GSPosted almost 3 years ago

    @Guille2000 :o I think position relative and absolute is not necessary in that case.

    I leave you a suggestion. Codi.link is like codepen: https://codi.link/PGRpdiBjbGFzcz0iY2FyZCI+DQogIDxzcGFuIGNsYXNzPSJjYXJkLS1xdW90ZXMiPicnPC9zcGFuPg0KICA8cCBjbGFzcz0iY2FyZC0tZGVzY3JpcHRpb24iPkZ5bG8gaGFzIGltcHJvdmVkIG91ciB0ZWFtIHByb2R1Y3Rpdml0eSBieSBhbiBvcmRlciBvZiBtYWduaXR1ZGUuIFNpbmNlIG1ha2luZyB0aGUgc3dpdGNoDQogICAgb3VyIHRlYW0gaGFzIGJlY29tZSBhIHdlbGwtb2lsZWQgY29sbGFib3JhdGlvbiBtYWNoaW5lLjwvcD4NCiAgPGRpdiBjbGFzcz0iY2FyZC0taW5mb3JtYXRpb24iPg0KICAgIDxkaXYgY2xhc3M9ImF2YXRhci0tY29udGFpbmVyLWltYWdlIj4NCiAgICAgIDxpbWcgY2xhc3M9ImF2YXRhciIgc3JjPSJodHRwczovL3BpY3N1bS5waG90b3MvMjAwLzMwMCI+DQogICAgPC9kaXY+DQogICAgPGRpdiBjbGFzcz0iYXZhdGFyLS1kYXRhIj4NCiAgICAgIDxoMyBjbGFzcz0iYXZhdGFyLS1uYW1lIj5LeWxlIEJ1cnRvbjwvaDM+DQogICAgICA8cCBjbGFzcz0iYXZhdGFyLS1vY3VwYXRpb24iPkZvdW5kZXIgJiBDRU8sIEh1ZGRsZTwvcD4NCiAgICA8L2Rpdj4NCiAgPC9kaXY+DQo8L2Rpdj4=%7CKiB7DQogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQp9DQoNCmJvZHkgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjhmOGZlOw0KfQ0KDQouY2FyZCB7DQogIHdpZHRoOiA0MCU7DQogIGJhY2tncm91bmQtY29sb3I6ICNmZmY7DQogIHBhZGRpbmc6IDE2cHggMjBweDsNCiAgYm94LXNoYWRvdzogMnB4IDFweCAxNXB4IDNweCByZ2JhKDAsMCwwLDAuMTQpOw0KfQ0KDQouY2FyZC0tcXVvdGVzIHsNCiAgZm9udC1zaXplOiAycmVtOw0KICBtYXJnaW46IDA7DQp9DQoNCi5jYXJkLS1kZXNjcmlwdGlvbiB7DQogIGxpbmUtaGVpZ2h0OiAyN3B4Ow0KfQ0KDQouY2FyZC0taW5mb3JtYXRpb24gew0KICBkaXNwbGF5OiBmbGV4Ow0KICBnYXA6IDUlOw0KICBmbGV4LXdyYXA6IHdyYXA7DQogIA0KICBhbGlnbi1pdGVtczogY2VudGVyOw0KfQ0KDQouYXZhdGFyIHsNCiAgd2lkdGg6IDkwcHg7DQogIGhlaWdodDogOTBweDsNCiAgYm9yZGVyLXJhZGl1czogNTAlOw0KfQ0KDQouYXZhdGFyLS1kYXRhIHsNCiAgZGlzcGxheTogZmxleDsNCiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsNCiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQogIGdhcDogNHB4Ow0KfQ0KDQouYXZhdGFyLS1uYW1lIHsNCiAgbWFyZ2luOiAwOw0KfQ0KDQouYXZhdGFyLS1vY3VwYXRpb24gew0KICBtYXJnaW46IDA7DQogIGNvbG9yOiBncmV5Ow0KfQ0KDQoNCg0K%7C

    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