- Use the logo as a favicon
- Use the landing name as a page title
- All logos should be links to the top of the page
- Change text color on hover for phone, email, and address
- Make sure phone icons and phone numbers are real links to start a call
- All addresses should be links to some location on Google Maps. Open them in a new tab with
target="_blank"
. - Increase all images on hover (make them links to #, if there is no better option)
- Make sure everything looks neat on mobile and without horizontal scrolling
- The speed of animations should be the same throughout the page (for example, increasing when hovering or moving blocks when scrolling)
- Ensure that all
nav__links
work smoothly - Disable page scrolling under the menu using the next code:
.page:has(.page__menu:target) { overflow: hidden; /* not to scroll the page */ }
- Make it possible to scroll the menu if it is higher than the viewport;
.menu { overflow: auto; /* to scroll the menu if needed */ } .menu__top { position: sticky; /* to keep cross always visible */ top: 0; z-index: 1; background-color: #e5e5e5; }
- All form fields should be required and have correct types (
email
,tel
, etc.) - Placeholders should give examples of what should be added, to make the expected format clear
- The page shouldn't be reloaded on form submit, but the fields should be cleared. Use:
<form onsubmit="this.reset(); return false;">
- Make the
footer
sticky at the bottom withz-index: -1
to get afixed
background effect.