Design Kit


Get it now

Switch to dark mode

typography

1. press Command (ctrl) + Shift + C to open up inspect.
2. Select one of the heading titles and play with the css properties.
3. All the changes you've made won't be saved, that's why I asked you to download my website. :)

Heading 1

Montserrat / Size:2.653em

Heading 2

Montserrat / Size:1.563em

Heading 3

Montserrat / Size: 1.25em

Heading 4

Montserrat / Size:1em

Heading 5

Montserrat / Size:0.8em

Paragraph Style

Questrial / Size:1.2em

Colors

As with typography, we can also change all the colors of the page by going to inspect and change the properties of the :root (just scroll down till you see it). Making such changes will be applied across ALL other pages! ���

  • Primary_dark

  • Primary_light

  • One_color

  • Two_color

  • Three_color

  • Four_color

  • Five_color

Buttons

These are all the buttons that were used in my website, change it to your heart's content.

Animations

The Animated-on-Scroll script was used throughout my website and here are some examples. For instance, I put 'data-aos-once' to false so elements will disappear when you scroll past them.

Read More
fade up
slide up
flip up
zoom in

Gallery

In this example, we have a Pinterest like layout, all you need is the script at the bottom of this HTML + lightgallery.css & js files. Now, duplicate the item's div & you're good to go - just check out this markup.

wedding
meetartist
supermoon
bunny
Batman

Accordion

Making an accordion has never been easier, check out the instructions below :)

  • How does it work?

    Well, it's a combination of 3 elements: HTML (which you can inspect), CSS (all the classes are in css/main.css) & JS (the function is available at css/toggle.js) combine all three & you're good to go.

  • Is it free?

    Sure is! You can grab all this goodness at the top page.

  • Why should I use this?

    Well, you don't have to unless you want to assist users with different questions.

Carousel

If you want a carousel as a component just change the contents withing the glide__slide tag - it's quite easy to change