Neomi HTML App Landing Page Template

Thank you for downloading Neomi Template

Please find the full documentation of the template

I would be very grateful if you could rate my item at this link with 5 stars and leave your feedback, this is very important for me, Thanks! :-)

If you have any questions, feel free to email me via my user page with the contact form Here
I try to answer as soon as possible!
During your customization, I advise you to be connected to Internet for the correct running of jQuery
All the lines of style written in this document are the lines of the CSS files. The line numbers for the SASS users are almost the same, thanks for your comprehension.


Getting Started

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 any HTML file on your web browser to see your website

Installation

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.

Fonts and Buttons

Fonts

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

Buttons

Most of the buttons reveals an icon on hover, to disable this effect simply replace the button-main class with button-secondary class as highlighted

And remove the icon as well

Icons

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

Section Icons

Every Section title has an icon underneath it, you can change the icon as highlighted in the attached image, using fontawesome icons

And the lines has classes one and two you can change their colors as well

Section Titles

Section titles reveals another text when you hover a section title

You can change the title and the text as highlighted in the image

To remove the hover me icon, simply remove the hover-me class as highlighted in second image

To disable this effect simply remove the menu__item class and also remove the label as highlighted in third image

Colors

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 file you are using and find these lines and replace them with the ones you copied as shown in image 2

You can find the colors with the number of the file inside css/colors folder

5

6

7

29

10

16

23

28

3

8

9

11

12

13

14

15

17

18

20

22

24

25

26

32

1

2

4

19

21

27

30

31

32

33

34

35

100

101

Javascript Files

File Name Description Files Used
plugins.js Includes all Javascript plugins used and has an index of all the used plugins All HTML Files
main.js Includes all the Javascript logic and customization for all files All HTML Files
contact-form.js Used for the contact form and MailChimp subscribe form All HTML files that has a contact or subscribe form
maps.js Used to style google maps inside some of HTML files and you can edit and customize these styles to your need from here HERE Some HTML Files with maps
maps2.js Used to style google maps inside some of HTML files and you can edit and customize these styles to your need from here HERE Some HTML Files with maps
maps-light.js Used to style google maps inside some of HTML files and you can edit and customize these styles to your need from here HERE Some HTML Files with maps
revolution-slider.js Javascript file for The jquery Revolution Slider Plugin and you can find its documentation HERE rev-blend-mode.html
rev-blur-effect.html
rev-particles1.html
animated-circle.js Used for the animated circle in the textillate html files index-textillate.html
index-textillate2.html
index-textillate3.html
index-textillate4.html
animated-circle-plugins.js Some plugins for the animated circle in the textillate html files index-textillate.html
index-textillate2.html
index-textillate3.html
index-textillate4.html
animated-main.js Has the Logic for the particles plugin and the background video logic Particles, Snow And Video files
jquery.youtubebackground.js Plugin for video background index-video.html
index-video1.html
index-video2.html
index-video3.html
hexagon-min.js Login for the hexagon background in index-hexagon.html index-hexagon.html
jquery.interactive_bg.min.js Used for the interactive parallax background index-parallax.html
index-parallax1.html
index-parallax2.html
index-parallax3.html
index-parallax4.html
index-simple4.html
index-simple5.html
nav-slider-min.js Used for slider background in one file index-slider.html
particles.min.js Used for particles and snow files for the Particles Plugin found HERE index-particles.html
index-particles1.html
index-particles2.html
index-particles3.html
index-particles4.html
index-snow.html
index-snow1.html
index-snow2.html
index-snow3.html
index-snow4.html
preview-ripples.js Used for the ripples background index-ripples.html
segments-min.js Control the segment background animation index-segment-parallax.html

Nav Bar

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

Logo And Name

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

Links

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

Dropdown 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

Social Icons

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

Header

App Name

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

Header Variations

There is many different header sections, all have the same idea, except for particles headers, snow headers and revolution slider headers which will be explained at the bottom

Count Down

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

Features

Features has 3 slides, it is not recommended to add more slides.

This is handled by Owl Carousel in the main.js file

Features Slides

There is 3 slides change the image for each

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

Step 2 - To add more feature links In Index.html file each link has an owl item as in the attached image, increase this number as you add images

Slides Text & Icons

Change Title, Text and Icon for 6 of them.

Step 1 - In Index.html file Change as highlighted

Showcase

Showcase has 3 sections.

Step 1 - In Index.html file Change the Text, Icon and Image src as highlighted - Recommended size is 1321 x 767 OR same ratio

Screenshots

Screenshots has 6 slides

This is handled by Owl Carousel in the main.js file

Step 1 - In Index.html file Change the Image src as highlighted - Recommended size is 846 x 660 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

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

Please refer to the Owl website Here For more information

Download

Download has two sections the download links and the image and information

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

Step 2 - To add more feature links In Index.html file each link has an owl item as in the attached image, increase this number as you add images

Video

Upload your video to youtube, and Change the link for the video as highlighted.
Video has two sections the video links and the image and video link

Step 1 - In Index.html file Change the Image background in styles.css for videos as highlighted - Recommended size is 840 x 660 OR same ratio

Step 2 - To add more download links In Index.html file each link has an owl item as in the attached image, increase this number as you add images

FAQs

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

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

Forms

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

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

Subscribe Form

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

Step 1 - Create a free plan and go to Signup Forms and then Embedded Forms and get your link as attached in the first image

Step 2 - Change the Link in index.html file as highlighted in second image.

Contact Form

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.

Footer

Map

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 OR maps2.js file around line 193.

Contact Address

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

Other Demos

Coming Soon

For coming soon count down timer, you can change it in main.js file as highlighted in the image
You can also change images and text for the blog in html file as highlighted in the second image

Particles And Snow

Step 1 - To change how the particles and snow background 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 - Each file has a different settings for the particles, please check the id of the particles as highlighted in first image Use the json file and replace the code in animated-main.js

Step 3 - Use the json file and replace the code in animated-main.js for this specific id

Parallax

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

Video

For Video index-video.html 1, 2 and index-video3.html Files

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

For Video index-video4.html File you can change the video link directly from the html file as highlighted in second image

Resources

Used Javascript and CSS Plugins

- jQuery V-3.2.1
- Materialize
- Animate On Scroll
- Animate.css
- Counter Up
- Owl Carousel
- Lity JS
- Scroll it
- Match Height JS
- Charming JS
- Anime JS
- Textiallate JS
- Codrops
- Particles JS

Fonts and Icons

- Google Fonts
- Font Awesome
- UI Surf

Images

- Pexels
- Icons8
- FlatIcon
- Unsplash
- Undraw