This project was part of The Odin Project course.
The assignment was to create a landing page from a design provided by The Odin Project. It didn't need to be pixel perfect (i.e. exact dimensions to the design), but should match the overall look and style.
Desktop:
TODO
Mobile:
TODO
- Solution URL: https://github.com/VTickner/odin-landing-page
- Live Site URL: https://vtickner.github.io/odin-landing-page/
- Created the basic HTML structure of the landing page.
- Created the basic CSS for typography, font sizing and colours.
- Created the CSS layout using flex to match as closely as possible to the design.
- Created a toggle button to switch between two different theme colours (original dark and then a pink themed colour).
- TODO:
- Refactored the CSS to make DRY.
- Added media queries to CSS to create a responsive web design for smaller devices.
- Edited :focus to match styling for keyboard only users.
- CSS3
- Flexbox
- Custom properties
- HTML5
- JavaScript
- TODO:
- Desktop first responsive layout
I found recreating the landing page relatively easy, therefore to challenge myself I learnt how to create and switch between two different colour themes.
The toggle theme colour is done by making use of custom color properties, an input checkbox that can be toggled and JavaScript to change the CSS classes between a "dark" mode (original theme) and a "light" mode (pink theme).
TODO
- Tint & Shade Generator - Free tool that calculates tints and shades for your default colour, to enable you to create a cohesive colour scheme.
- Coolers Colour Contrast Checker - Free tool that allows you to check the colour contrast of the text to background colour for accessibility / readability purposes.
- How To Create A Dark/Light Mode For A Website - Article by Jake McCambley - Create A Dark Mode For Your Website.
- V. Tickner