This is a solution to the Easybank landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Solution URL: Frontend Mentor Solution
- Live Site URL: Easy Bank
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Deesktop-first workflow
I learned how to use the pseudo element selector to position the phone mockup.
.main::before {
content: "";
position: absolute;
right: 0;
width: 60%;
height: 120vh;
background:
url(./images/image-mockups.png) top -7rem right -10rem no-repeat;
background-size: 46rem;
}
- Website - Raymond Adutwum Agyei
- Frontend Mentor - @alosoft
- Linkedin - Raymond Adutwum Agyei