SANDY - One page apps landing page

The SANDY is a professional HTML5 landing page made with Bootstrap framework. It's responsive for all of the devices and designed with a clean look and feel, stylish & modern trend. It's basically built for app promotion but would be suitable also for mobile games showcase or any application website showcase. It comes with one unique layout which includes tons of sections, customization options and features for multiple purposes.

Stracture

HTML Structure

Every section start with a comment like this: 

<!-- ========== Section Name start ========== -->
Some HTML codes for this section
<!-- ========== Section Name end ========== -->

 

CSS structure

Every point of CSS content you will find start with a comment like this: 

/*  ----------------------------------------------------

#. CSS point name

-------------------------------------------------------- */

some CSS codes here

 

JS structure

Every point of JS content you will find start with comments like below in app.js file under js folder.

It comes with two different codes structure.

/* =================================

   # JQUERY FUNCTION METHOD

=================================== */

/******************** # Javascript point name ********************/

 

General

Template colors:

In this template, we have 9 free made colors version. You could use any of them or you could use your own colors. To use any specific color open the document and comment out the color you wish to use in the head section of HTML document.

Here is screenshot:

 

Font family:

All fonts used from google web font  directory. We used it by import in css/style.css file. There called 2 fonts as like below structure. You could change these fonts very easily. Follow google web font document here to see how to do. 

/*  ----------------------------------------------------

1. IMPORT GOOGLE FONTS

-------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,700');

General fonts style

All general typography used in css/style.css file. You can manage them easily. Every code organized and commented very nicely.

Logo text

You can change current logo text to your own text. See image below: 

 

Typing effect

For version Home page default half we have a typing word effect. That typing word work from JS file. To change typing words Go js folder and open app.js file in your text editor. Under the 2.4 TYPED JS comment, you could see the demo texts we used. Use your own words there.

Here is screenshot: 

Immersive video

Here are some instructions for our Home immersive video version. 

To add your own video put your video file in video folder of the root of SANDY HTML. There you may see current demo video you used. The video should be mp4 format for supporting it in major browsers. For fit the video in mobile frame use 600px frame width and 1064px frame height. You may use this site http://video.online-convert.com/convert-to-mp4 for converting your video. You have to use also a fallback image for a frame. Here is screenshot direction where to call it:

LocalSubscription

Local subscription:

We have used 2 methods to collect e-mail one is Local system and another one is MailChimp. By local system, it defaults enabled in our template. if anyone fills subscription e-mail field by using their e-mail the e-mail will store in subscribe/email-list.txt file. 

 

Here is a screenshot of HTML codes for local e-mail collection:
 

 

MailChimp

Mailchimp subscription:

For enabling MailChimp subscription you have to remove a comment for the code Mailchimp subscription form and enable comment for a local subscription. So it will work fine. Here how you could do that:
 
 
 
Now you need to add your MailChimp post URL for doing that go JS folder and open app.js file in a text editor and find this comment // Replace your mailchimp post url inside double quote "".
 
Here is screenshot how you could do that:

Contact form

Manage contact form:

The contact for we used is totally dynamic. It's working with some ajax and PHP. You can receive e-mails from your customer. You need to adjust something to work it with you e-mail address. Just go php folder and open sendmail.php file in your text editor. Replace yourmail@gmail.com with your own email address. See screenshot below:

 

Coming soon

Countdown timer

For changing countdown time for coming soon you need to go js folder and open app.js file in your editor. Bottom of that page you may see the option. Just put your launching date there it will automatically convert to countdown. Here is screenshot:

 

Support

Support:

If you need to know anything else doesn't hesitate to ask us by our ThemeForest profile or our email thmeatelierbd@gmail.com.

Credit:

The whole web community.