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

Land Page

@vedatsozen

Desktop design screenshot for the Easybank landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I could not make it responsive. Because in second part of page with background image and mobile phone images must be at top of div at responsive design. But i made its div with left text as display:flex; So i can not position image to top in div. So i did not make responsive design of page. Anyway i hope you like. Comments below please.

Community feedback

Erick 270

@d3bu6m3

Posted

do you know that you can use flex 'order' to change the order number of flex items? if you do the mobile first approach the image is in the top of the text so when it comes to desktop if you will use flex the image will be in the left and the text will be on the right, to arrange their position you can use order: 1; for text and then order: 2; for the image so they will swap position, the image will be on the left part by doing this order. You can also use CSS Grid it can help you alot when positioning elements to the corresponding place

0

@vedatsozen

Posted

@d3bu6m3 You are right. Thank you. I now remembered it.

flex-direction: column-reverse;

or row-reverse;

I will use it.

I like flex.

I don't use grid so much.

0
Erick 270

@d3bu6m3

Posted

@vedatsozen flex-direction is also a different thing, you can search for 'order'

0

@vedatsozen

Posted

@d3bu6m3 ok. I will search it. Thanks.

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