Apperle HTML App Landing Page Template

How To Start :

Step 1 - Unzip The Template File.

Step 2 - Install Code Editor Like Brackets Or Sublime Text.

Step 3 - Open The Project In The Code Editor.

Step 4 - Open Index.html on your web browser to see your website

How To Install PURE Via FTP :

Step 1 - For faster load times it is recommended to minify your files after you customize them.
You can minify your css files Here
Minify html file Here
Minify Javascript files Here
Optimize Your images Here

Step 2 - Log into your hosting space via an FTP software (Filezilla for example).

Step 3 - Unzip your Download Pack file and open the extracted PURE template folder.

Step 4 - Upload the HTML file corresponding to the variant of your choice along with all directories (css,js,php,img) in the structure that they appear in your download package. Then, the HTML file should reside in the root directory, and all other files should reside inside their associated folder.

This template uses google fonts, you can change the fonts for the paragraph or the headings

Step 1 - Go to google fonts Here and find a font you like.

Step 2 - Change lines 38 for paragraphs and line 48 for the headers in the styles.css OR styles.scss files

This template uses Font Awesome Icons, you can change any of the icons.

Step 1 - Go to Font Awesome Here and find an icon you like but make sure to leave any extra classes you find in the Index.html file.

Step 2 - Change the icon in the Index.html file

Step 1 - Go to style#.css in css/color folder where # is the number of the style color you like and copy the styles as shown in image 1

Step 2 - Go to styles.css and styles-animated.css files you are using and find these lines and replace them with the ones you copied as shown in image 2

Step 2 - Change the icon in the Index.html file

There are two navbars in this template the top navbar and side navbar

You will need to change both of them in Index.html file

To Change website Logo and Name

Step 1 - Open Index.html file and change the main nav bar logo and name

Step 2 - Change the Side nav logo and name

To Change website top Links Names

Step 1 - Open Index.html file and change the main nav bar Links

Step 2 - Change the Side nav Links

To Change Dropdown Links

Step 1 for Top navbar - Open Index.html file and change the menu name as shown in first image

Step 2 for Top navbar - Change the dropdown links you will find them at the end of the ul tag

Step 3 for side navbar - Change the links names for the sidenav as highlighted in the image

To Change the Social Icons

Step 1 for Top navbar - In Index.html file Change the Icon class using Font Awesome and change the href link to point to your website

Make Sure Don't remove any extra classes you find in the Index.html file

Step 3 for side navbar

We are using an image as the app name

Step 1 for Top navbar - In Index.html file Change the Image, the Paragraph and the slogan

This slider is handled by owl carousel in main.js file

There is three slides for the header section, you add more by adding extra img element

Step 1 - In Index.html file Change the Image src as highlighted - Recommended size is 300 x 609

To use the Count Down in your demo first change the time to your dead line in main.js file as shown in firts image

To use the count down in any other demo just copy the code in second image from index-cd.html file to the index file you want to use

There is 3 slides change the mobile image for each

Step 1 - In Index.html file Change the Image src as highlighted - Recommended size is 717 x 1319 OR same ratio

Change Title, Text and Icon for 6 of them.

Step 1 - In Index.html file Change as highlighted

Showcase has 3 sections.

Step 1 - In Index.html file Change the Text, Icon and Image src as highlighted - Recommended size is 470 x 470

Screenshots slideshow is controlled by materialize js library in main.js file

In main.js file you can change the perspective of images by changing dest
Or change the padding between the images by changing the padding
Or change the speed by changing the 3000ms on line 74 to any speed you like
Or stop the images from moving automatically by removing lines 72, 73, 74.

Step 1 - In Index.html file Change the Image src as highlighted - Recommended size is 717 x 1319 OR same ratio

There is two images path for the image and when user clicks on it it opens in full screen So be sure to change both paths

Testimonials, Teams & News are both controlled by owl carousal in main.js file

Please refer to the Owl website Here For more information

Download has two sections the download links and the image

There is 3 slides change the mobile image for each

Step 1 - In Index.html file Change the Image src as highlighted - Recommended size is 717 x 1319 OR same ratio

Step 2 - In Index.html file Change the Text and the Link as highlighted

Upload your video to youtube, and Change the link for the video as highlighted.

Step 1 - In Index.html file Change the Image src as highlighted - Recommended size is 717 x 1319 OR same ratio

Step 2 - In Index.html file Change the Questions and Answers for FAQs and add more as you like.

There is two forms on the website, subscribe form and contact form

Both are handled in contact-form.js and contact.php

Subscription Form is handled by MailChimp, Please sign up Here There is a free plan

Step 1 - Create a free plan and get an API key and create a list and get List ID

Step 2 - Change the API key and List ID in contact.php file.

Contact Form is handled by contact.php and contact.js

Step 1 - Change Your email and the message you want to be sent to yourself in contact.php file

Step 2 - You can change the custom error messages that appears to the user while filling the form in contact.php file.

The Map is handled by google maps in maps.js file

Step 1 - Replace your Google Maps API key index.html with the word 'YOUR API KEY' as highlighted.

Step 2 - Change your company's area longitude and latitude in maps.js file in line 14.

Step 3 - Change your company's exact position longitude and latitude in maps.js file in line 186 for the pin position on map.

Step 4 - Change your company's Address in maps.js file in line 193.

Step 1 - Change Your email, phone and address in Index.html file as highlighted

Instagram feed is handled by a plugin called spectragram find it Here

Step 1 - Sign up in Instagram apps and get an access token and client id for yourself Here is a good article to learn how.

Step 2 - Change the client id and access token in main.js as highlighted

Step 1 - To change how the particles look and behave go to Particles Website

Step 2 - Choose what you like for the particles, for its speed and shape and download the json file

Step 3 - Use the json file and replace the code in animated-main.js file from line 44

Step 1 - To change the background go to index file and change the svg image as shown in first Image

Step 2 - To change how the background react and behave go to Parallax Website

Step 3 - Replace the code in animated-main.js file from line 35 as shown in second image

Step 1 - To change the background go to Demo 1 OR Demo 2 and change the background as you like by clicking on and copy its code by clicking on the copy icon

Step 2 - Then go to index file and change the svg image as shown in first Image

Step 3 - To change how the background react and behave go to Parallax Website

The particles is controlled by snow-bg-min.js file, don't change it yourself
instead ask a developer to un minify it and change particles color and behaviour

Step 1 - To change the video on the background or unmute it or change its settings in animated-main.js file as highlighted

Step 1 - This demo uses Marvel App Demos to display the interactive mobile

Step 2 - Head over to their website here and create your own slides and animations, using their documentation

Step 3 - Change the code in the index file as shown in the image and you can choose any smart phone other than iPhone X

The particles is controlled by animated1.js file, don't change it yourself
instead ask a developer to un minify it and change particles color and behaviour

The particles is controlled by animated2.js file, don't change it yourself
instead ask a developer to un minify it and change particles color and behaviour

- jQuery V-3.2.1

- Materialize

- Animate On Scroll

- Animate.css

- Counter Up

- Owl Carousel

- Lity JS

- Scroll it

- Spectragram

- Match Height JS