A mockup of a payment infrastructure website made using HTML and CSS. Responsive on all screen sizes. Click here to try it out! Or, watch a quick gif of me interacting with it below:
- Responsive design; website looks flawless on multiple screen sizes (pc, small pc, tablet, mobile)
- Strong CSS reuse; many classes are used upwards of 10 times throughout the page.
- Semantic HTML used throughout the code; makes code more readable, optimizes SEO, and makes site more accessible to those using screen readers.
- EXTREMELY good use of ::before and ::after pseudo-elements to prevent clogging up the HTML with unnecessary code. Improves readability (by having purely visual things in the CSS) and prevents screen-readers from encountering unnecessary tags.
- Usage of gradients, animations, transitions, CSS variables (the "full" CSS experience); usage of REMs and EMs ensures site will look the same regardless of user's font-size.
- The code in the CSS file is organized from general -> specific styles. First, general styles used all over the page are defined. Then, styles used for specific sections are defined, in the order you see them on the webpage. In other words, if you read the CSS from top-to-bottom, it will reflect what you see scrolling on the HTML page from top-to-bottom.
- Download the directory containing all the files in the repository. Unzip this directory.
2.Double-click on the file called "index.html". This will open the website up in your default browser. Then, scroll around the website and enjoy!
