Styleguide



← Back to projects
Branding
Colors
Font
Interactive
About Slideshow
Scroll Animations
Git Repo

Brand Identity



My brand identity is the cherry blossom to represent growth and new beginnings.



Color Palette


#000000; - Foreground (i.e. Buttons, Header, Footer, etc.)



#white - Hover or focus



#2348624d - Container Border



#DF62BC or $brand_pink - Brand Logo , Emphasis



Light mode



#white - Light background



#000000 - Light Body Text Font



#000000 - Light Headings



Dark mode



#000000 - Dark background



#white - Dark Body Text Font



#white - Dark Headings



Typography & Text Elements


Headings use 'Verdana' Font-family. Body text including paragraphs and buttons use 'Verdana' font-family.



Heading 1

Heading 2

Heading 3

Heading 4

Body Text

Caption Text



Heading 1

Heading 2

Heading 3

Heading 4

Body Text

Caption Text



Interactive Elements


In-text link


github

Buttons


Read blog


Inputs & Textfields





Gallery



tailor

How to Tailor your Website for Success

Read blog
me

Joomla! Team Interview

Watch video
hamburger

Boosting Productivity with Web Development

Read blog


sdt

Smart Drive Test

A learning platform, teaching new and experienced drivers ways to improve driving.

Joomla!
CSS
HTML
Hikashop


Read more

About Slideshow


Light

Dark




Dark


Light

Scroll Animations


Scroll animations has been disabled for mobile mode -> maxwidth: 800px. I did this to avoid any interference with the viewport for mobile.


Refreshing the browser is required to update the animation when the viewport changes.


GSAP and scrollmagic library was referenced from: https://scrollmagic.io/


Blossom animation with typewriter


Growing plant animation



Github Link


Visit my Github here






Contact Me