Aali - Personal Portfolio Template

Template Features

  • Fully Responsive HTML5

  • CSS3 Animations

  • SEO optimized

  • Mobile Navigations

  • Fully Responsive to all devices

  • Developer Friendly Coding

  • Sticky Navigation

  • Free Updates

Installing Template

After unzip the download pack, you'll found a html folder with all the files. You can view this template in any browser, you can display or edit the template without an internet connection. Now open your FTP Client(like File Zilla) or directly through cpanel, upload the content of the Template on your server root. Once the files are done uploading go to www.yourdomain.com and enjoy ))

HTML Structure

The template includes 2 html files. This template is a flexible layout with max 3 column. All of the information within the main content area is nested within a div with a class of "aali_tm_all_wrap". You have to open index page in order to change it.

If you would like to edit the color, font, or style of any elements in this template, you could do by using "Inspect Element" on Chrome, Safari, Mozilla and Opera(press right click on browser ). It is really powerful tool to work with html and css codes.

CSS Files and Structures

I'm using 3 CSS files in this template. If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

JavaScript Structures

All call actions are run in init.js

Attention: If you romove any of javascripts, please don't forget to remove js code call action that belongs to removed js from init.js . Otherwise your site works inproperly.

Sources and Credits

I've used the following images, icons or other files as listed.

  • Icons - These Icons by fontello.com and flaticon.com

  • Images - pexels.com

  • Fonts - Free Google Fonts: "Josefin Sans", "Open Sans"

Contact Form

Contact form works only in hosting environment. If you want to use it, open "aali/modal/contact.php" file and change main email address (line-4) to yours.

How to edit template

In order to edit the file, you need to have Code Writer program installed on your system. Just open files in code writer and edit them. Recommended programs are Adobe Dreamweaver and NotePad++

Tutorial for using special blocks

  • Enable Dark Mode

    If you want use dark mode just open your index.html and add class "dark" to "body" tag

  • Enable and Disable Magic Cursor

    If you want enable or disable Magic Cursor feature just change data-magic-cursor value. Values are show and hide

  • Color Schemes

    If you want change colors just change data-color value. Values are blue, green, brown, pink, orange, black, purple, sky, cadetBlue, crimson, olive, red

  • Change animate text effect in hero header

    If you want change animate text effect in hero header just change extra class. Values are zoom, rotate-1, letters type, letters rotate-2, loading-bar, slide, clip, letters rotate-3, letters scale, push

  • Change directions of all moving elements on scroll

    If you want change direction of moving element change its data-direction value. Values are x and y. If you want reverse it just change value of data-reverse to yes

  • Change background style in resume section

    You can use parallax image or video for background. You can use any local, youtube, vimeo videos for the background. Just change value of data-background-style and that's enough. Values are image, video

  • Important!

    Some hosting providers don't support PHP Mail Function automatically. So if you don't receive any message after changing mail address to yours, then contact with your hosting provider and they'll enable PHP Mail function. And everything would be great.

  • Contact