Assets

The assets folder is where almost all of your customization happens. Everything is separated by purpose, so you always know where to look.

• Directoryassets

  • Directorycss

    • vendor third-party libraries
    • support helper stylesheets
    • main.css font imports & entry point
    • default.css colors & typography
    • custom.css your styles go here
  • Directoryjs

    • vendor third-party libraries
    • main.js your custom scripts
  • fonts icon web-fonts
  • images template imagery
  • videos background & showcase clips
  • php contact form & reCAPTCHA

css — styles

The css folder holds the template’s stylesheets, organized by function, with third-party libraries in a vendor subfolder and helper styles in support. Font families are declared with @import at the top of main.css.

Add your own CSS the safe way

Don’t edit the core stylesheets directly — a future update could overwrite your work. Put every custom rule in custom.css so your changes stay separate and easy to maintain.

Want a different typeface? Grab the @import line from Google Fonts and add it to main.css.

js — interactions

Everything interactive — menus, sliders, animations — is powered from the js folder. Your own scripts go in main.js; the vendor subfolder holds the libraries the template relies on.

fonts — icon web-fonts

The source files for the template’s icon set. You won’t usually edit this directly — see Icons for how icons are used in markup.

php — contact form & reCAPTCHA

Handles the contact form submission and Google reCAPTCHA verification. See Forms & PHP and Google reCAPTCHA for setup details.

images & videos — media

All template imagery lives in images, and background/showcase clips live in videos. When you replace them with your own media, match the original dimensions so the layout stays balanced.

Demo media is licensed

The images and videos used in the live demo are copyrighted and can’t be redistributed. Swap in your own media before publishing.

Find free media

Unsplash and Pexels offer professional photos — and Pexels has free stock video too.

Compress before you ship

Shrink images with CompressJPEG so large files don’t slow your site down.

Continue to IconsAdd icons throughout the template with Simple Line Icons.