Portfolio Style Guide
INTERACTIVE ELEMENTS
In-text Link
This is an in-text link.
Navigation Links
Submit/Reset/Text Buttons
Sample Hyperlinked Image with Figcaption
Sample Video
Sample Audio
Image Carousel
This is an image with a sample caption.
COLORS
Primary Color - #202020
Secondary Color - #606060
Background Color - #FAFAFA
TEXT STYLING
Headings
Display h1 - Playball (8rem)
Display h2 - Playball (4.5rem)
Display h3 - Playball (4rem)
Display h4 - Playball (3.5rem)
Display h5 - Playball (3rem)
Display h6 - Playball (2.5rem)
Bootstrap h1 - Red Hat Display (2.5rem)
Bootstrap h2 - Red Hat Display (2rem)
Bootstrap h3 - Red Hat Display (1.75rem)
Bootstrap h4 - Red Hat Display (1.5rem)
Bootstrap h5 - Red Hat Display (1.25rem)
Logo Font - Freestyle Script
Paragraphs
This is a short, bold paragraph. Lato (1rem 700)
This is a long paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus consequat vestibulum. Nulla orci est, aliquam rutrum tincidunt quis, pretium nec leo. Sed sit amet nibh sed eros dictum aliquam ut vitae ipsum. Nam est elit, consectetur sed placerat ac, aliquet quis ex. Aliquam erat volutpat. Nam porttitor nulla eu risus viverra tempus. Mauris lacinia porttitor dapibus. Vestibulum auctor finibus eros, ut rhoncus ligula viverra at. Aliquam ac vehicula elit. Mauris quis scelerisque dui, venenatis commodo neque. Donec enim nisl, condimentum et purus in, ultricies placerat turpis.
Lato 300 (1rem)
Ordered List
- Item 1
- Item 2
- Item 3
Unordered List
- Item A
- Item B
- Item C
COMBINED ELEMENTS
Main Navigation
Footer
Project Banners
Project Sub-Navigation
Citations
- Chan, Herman. Herman Chan's Portfolio, 2022, kybre.github.io/.
- Otto, Mark. “Bootstrap Docs.” Bootstrap v5.3, getbootstrap.com/docs/5.3/getting-started/introduction/. Accessed 17 Apr. 2024.