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

easy-banking-lading-page

@MojtabaMosavi

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


1-Doing this project I learned how to change hover state to svg icon by defining an external svg file with desired behaviors and then applying it to the svg icon's hover state.

element {
  &.hover{
  filter : url("loaction of the external svg file")
  }
}

2- Revealing module pattern is really neat way to structure code. This pattern gives you the ability to create seperate namespaces for each different components and thus the benefit of not polluting the global namespace. Another advantage with this pattern is that it gives the ability to create a public api in witch you expose the peaces of the fucntionality you want and keep the rest private.It's also fexiable and can be modified to not be an IFEE which makes possible to create new instances of the module.

YourModule = (function(){})() 
or
YourModule = function(){}

3- Intersection API is a way to asynchronously observe changes in the intersection of a target element with a ancestor element or if not specified the top-level document's viewport.This API allows to implenent features such as infinite scroll, srcoll on view and lazy loading of images to name a few. In this porject I scratched the surface of what this API can do by implementing partial scroll on view.

Community feedback

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