Find free photos
Assets
The assets folder is the heart of the template. Almost everything you customize lives here, organized by purpose across five subfolders.
Directoryassets
Directorycss
- vendor third-party libraries
- 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
Directoryphp
- form.php contact-form mailer
- recaptcha.php spam protection
css — styles
Section titled “css — styles”The css folder contains the template’s stylesheets, organized by function, with third-party libraries
kept in a vendor subfolder. Font families are declared with @import statements at the top of
main.css.
Need a different typeface? Browse Google Fonts, copy the @import line it gives you, and paste it into main.css.
js — interactions
Section titled “js — interactions”The js folder powers everything interactive on the page — menus, sliders, counters, and more. Your own
scripts belong in main.js; the vendor subfolder holds the libraries the template relies on.
fonts — icon web-fonts
Section titled “fonts — icon web-fonts”Contains the font files used to render the template’s icon sets. You normally won’t touch this folder directly — see Icons for how icons are used in markup.
images — template imagery
Section titled “images — template imagery”All of the template’s images live here, sized to fit their placements. When you swap in your own photos, try to match the original dimensions so the layout stays balanced.
Compress before you ship
Large images slow your site down. Run them through CompressJPEG to shrink file size without visible quality loss.
php — forms & security
Section titled “php — forms & security”The php folder holds form.php (which sends the contact form’s email) and recaptcha.php
(which blocks spam). Setting these up gets its own guide: