https://github.com/vmosiichuk-dev/mortgage-expert-landing

Accessible and responsive template for mortgage brokers. Text content fetched based on page's URL. Contact form fuctionality, Google Map, statistics and reviews sections.
https://github.com/vmosiichuk-dev/mortgage-expert-landing

a11y commercial-project google-maps html javascript landing-page responsive-web-design smooth-animations tailwind-css

Last synced: 7 days ago
JSON representation

Accessible and responsive template for mortgage brokers. Text content fetched based on page's URL. Contact form fuctionality, Google Map, statistics and reviews sections.

• Host: GitHub
• URL: https://github.com/vmosiichuk-dev/mortgage-expert-landing
• Owner: vmosiichuk-dev
• License: agpl-3.0
• Created: 2023-07-10T19:40:05.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-30T05:51:35.000Z (5 months ago)
• Last Synced: 2024-12-15T10:49:16.062Z (8 days ago)
• Topics: a11y, commercial-project, google-maps, html, javascript, landing-page, responsive-web-design, smooth-animations, tailwind-css
• Language: CSS
• Homepage: https://klaudia-salapa.pl
• Size: 258 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Mortgage expert landing

A landing page template for a mortgage expert in a consulting company. Designed to be used for multiple experts, fetching data from a JSON database. Finally, the project was split into separate static pages, leaving database fetching for ease of text content change for the client. 

Client asked for a contact form fuctionality, Google Map, statistics and reviews sections. Header and contact form on large screens were designed to stick while scrolling through main content, stopping on the map/reviews section, which acts as a footer. Light and minimalistic design was used with company accent colors.

[livePreview(1);](https://klaudia-salapa.pl)




[livePreview(2);](https://m-piotrowski.pl)

### JavaScript functionality

- Contact form security

- Form label transforms on focus

- Form input validation with debounce

- Handling and visualising form submission

- Modal for a contact form on mobile devices

- Dynamic copyright year notice

- Fetching data from JSON database

- Cycling through customer reviews

- Choosing to use or disable cookies

- Making use of sessionStorage & localStorage

- Implementing a loader for a smoother User Experience on load 

- Using IntersectionObserverAPI for statistics animation

- Toggling navigation on mobile devices

- Integrating Google Analytics to analyse leads & traffic