Responsive Mobile Optimized Intro Page:
This intro with all files, images and sounds is free for personal or business website use under the Creative Commons (CC) license, provided this help page is included with this notice and all references to Allwebco Design Corporation are left intact unedited. (More details below.)
Allwebco Web Templates | Square Peach Music | More Add-ons | Support Site
<< Back to Intro Page

NOTE: The globe will only be animated in newer CSS3 compliant browsers.

STEP #1: Copy Files
Copy 3 files: "style-intro.css" the "intro-page.htm" and the "help-intro-page.html" in this zip file into your main website folder. Copy the 2 folders "picts-intro" and "sounds-intro" into your main website folder.


STEP #2: Rename Files
Rename your current homepage, "index.html" to "home.html" or any name you would like for the page the intro will link to.

Rename the new "intro-page.htm" to "index.html" or your current homepage name.


STEP #3: Edit Links
Edit your now renamed index.html. Find the "START BUTTONS" note and edit the two "help-intro-page.html" links so they link to your "home.html" or the name of your main page. The second link can be edited to link to a mobile version of your website or to your site map page or any other html page on your website.


STEP #4: Edit Menus
OPTIONAL STEP: Edit your menu file (menu.js) in Notepad or a text editor so it points to "home.html" instead of "index.html". If you do not edit the menu file the "home" link will go to the intro instead of the home page of your template.


STEP #5: Edit Intro Page
Edit the text and optionally replace the images in the intro page. Images included in this addon are free for use as outlined above.

The intro page will now be the first page that users will see at your website.


OPTIONS:
ABOUT THE GLOBE:
The globe on the homepage uses css code for the animation. The color of the globe can be edited in the "style-intro.css" by editing the class ".globe-container { background-color:". Images are located in the "picts-intro" folder.

INTRO COLORS & FONTS: | More Details
All colors, fonts, layout heights and widths are controlled in the "style-intro.css". You can edit this file using any plain text editor. Click link above for more help.

REMOVING THE MUSIC:
To remove the music from the intro, open your new index.html with the intro and delete the lines of code between "START MUSIC CODE" and "END MUSIC CODE"

USING OTHER MUSIC:
You can use any other music that you would like. Replace the "intro-sound.mp3" and "intro-sound.ogg" in the "sounds-intro" folder. The mp3 is used in most browsers, the .ogg file is for some browsers that do not support mp3 sound.

REPLACE THE PICTURES:
All images are located in the "picts-intro" folder. Click here for help with image editing.

THE RESPONSIVE CODE:
The "Media Queries" responsive code is located at the bottom of the "style-intro.css", and some other "non-query" responsive code is mixed in some of the other classes as well.







Allwebco Design Corporation

This notice must stay intact. Unauthorized sale of this intro template or the images included is strictly prohibited by law. You may only distribute this intro free of charge.


By downloading this intro you are authorized to use this on any type of website, business or personal. You are authorized to modify all included files.


Sound clips by Square Peach Music