Available to view at: https://emcglackenr1.github.io/Basic_Responsive_Page/
This is a demonstration of some of the fundamental features of a responsive web landing page. The design layout adapts to the screen size of the device in order to optimise user experience. It was created without the usage of templates, Bootstrap or Tailwind.
The design was created during pride month, so the colour scheme was inspired by a combination of LGBTQ+ Flags.
This is a demonstration of what the site looks like on a desktop or laptop screen.
For this layout the four 'cards' are in a single row. These could demonstrate links to four sections of the website, or could be previews for blog content such as article blurbs.
For a smaller screen the layout has changed from one row of four cards to two rows of two cards. This maintains the readability and usability across different devices.
In this final version the cards are turned into a single column which the user can scroll up and down to view the content. This allows the same number of words and cards to be displayed without sacrificing usability and readability.