About
Alpa is a Responsive HTML5 / CSS3 simple, clean and Professional theme. It comes with 10+ Unique layouts, Many more inner Pages, Awesome Slideshows, Unique Color Variations. It's perfect for any business like business, hosting, restaurant, portfolio, agency and many more...
How to use
Upload "html" folder into your ftp server. This folder contains all files of the template.
- css
- images
- js
- php
- html files
Topbar
We have included topbars which are light, dark and much more colors. You can add colors by adding color name after topbar class. If you want to edit topbar classes, then you just open the default.css and go to line number 2001. Here you will find the topbar related classes.
*List of Colors (dark,light, white)
Example: .topbar.dark
CSS code
/* Topbar
------------------------------ */
.topbar {
float: left;
width: 100%;
padding: 0;
margin: 0px;
}
.topbar.white {
background-color: #fff;
border-bottom: 1px solid #efefef;
}
HTML code
Logo
You can find the logo section below the topbar, where it can be visible in the template. Now add/update your own logo image ( You can create logo of your choice by any editor.) that should be replaced with same name in the images folder. You can also see the included files of menu and header styles. If you would like to add any other styles, make sure that you are maintaining the code format as it is.
Here is the logo path: images/logo/logo.png
HTML code
Mega menu
We have included many more versions, light, dark, boxed and transparent. You can copy the HTML code from one to another HTML file. If you want to edit classes then open below path to find relevant classes.
js/megamenu/stylesheets/screen.cssInclude the following files in your section of the page. Please ensure that all of them have the correct path:
Mega Menu links
Slider Revolution
We have got amazing premium slider's. It is very flexible and easy to edit, so please get slider related files in the following path.
js/revolution-slider/Include the following files in your head section of the page. Please ensure that all of them have the correct path:
Slider Revolution Links Required Files
The following js script is for Slider Revolution. Here you can change the width, height, controls and layout mode of the slider. This script can be found at the bottom of every slider page. You can also add the background videos for the Slider Revolution to know more check our demo files.
Slider Revolution Js Code
Insert the following JavaScript after slider HTML
Slider Revolution Html Code
Insert following HTML code to the body section. This HTML code defines your slider content. And you can add more sliders like as following code.
-
Slider Revolution Online Documentation
If you want to know more about slider revolution please read online documentation
https://www.themepunch.com/revsliderjquery-doc/slider-revolution-jquery-5-x-documentation/Page Sections
We have created simple page sections with editable paddings and titles. If you want to add less padding to the section add sec-padding, or more just add sec-padding-3.
html Code
your code here
You can also add the background colors to the sections. Find the following classes at the line number 2849 in the default.css file.
Css Code
/*============ Page Section Styles ============ */
/* section background dark
------------------------------ */
.section-dark {
background-color: #101010;
}
.section-dark.two {
background-color: #1b1b1b;
}
.section-medium-dark {
background-color: #161616;
}
.section-fulldark {
background-color: #000;
}
Add the section-dark, section-light, section-gyellow and more background classes to the section in the html code.
html Code
your text here
Section Titles
You can add any page title class from any other html files, which we have included. If you want to edit page title classes, follow the below path and go to line number 2183.
css/theme-default.css
CSS Code
/*============ Section Titles ============ */
/* page title
------------------------------ */
.section-title {
font-weight: 400;
}
/* subtitle
------------------------------ */
.sub-title {
width: 48%;
font-size: 16px;
margin: 0 auto 70px auto;
}
We have included to the template, a set of google fonts to look more beautiful. If you want to add your choice! Just follow the URL: https://fonts.google.com/
Follow the below path and go to line number 555 to find the google fonts, where we included in this template.
css/theme-default.css
Css Code
/*=============== fonts ============= */
.droid-serif {
font-family: 'Droid Serif', serif;
}
.ubuntu {
font-family: 'Ubuntu', sans-serif;
}
.oswald {
font-family: 'Oswald', sans-serif;
}
.muli {
font-family: 'Muli', sans-serif;
}
.great-vibes {
font-family: 'Great Vibes', cursive;
}
.old-standardtt {
font-family: 'Old Standard TT', serif;
}
.dosis {
font-family: 'Dosis', sans-serif;
}
.roboto-slab {
font-family: 'Roboto Slab', serif;
}
.gfs-didot {
font-family: 'GFS Didot', serif;
}
.raleway {
font-family: "Raleway", sans-serif;
}
.gloria-hallelujah {
font-family: 'Gloria Hallelujah', cursive;
}
.love-ya-like-a-sister {
font-family: 'Love Ya Like A Sister', cursive;
}
.michroma {
font-family: 'Michroma', sans-serif;
}
.sacramento {
font-family: 'Sacramento', cursive;
}
.yesteryear {
font-family: 'Yesteryear', cursive;
}
.playfair {
font-family: 'Playfair Display', serif;
}
.jockey-one {
font-family: 'Jockey One', sans-serif;
}
.pompiere {
font-family: 'Pompiere', cursive;
}
.raleway {
font-family: 'Raleway', sans-serif;
}
.six-caps {
font-family: 'Six Caps', sans-serif;
}
.cinzel-decorative {
font-family: 'Cinzel Decorative', cursive;
}
Create any title and add font classes to the title tag like the below example. Also add text color, uppercase and font weight.
Your title here
Your title here
Youtube Video Backgrounds
We included a stunning ytplayer plugin, which enables you to add your own youtube video backgrounds. Just copy the video embeded code and paste it, as the example shows.
Include the following files in your head section of the page. Please ensure that all of them have the correct path:
Ytplayer Links Required Files
HTML Code
Here you can chang the video url (videoURL), controls like loop, autoplay, stopat, startat and more...!
My video
Parallax Backgrounds
We included a stunning parallax plugin, Just copy the parallax code and paste it, as the example shows.
Include the following files in your head section of the page. Please ensure that all of them have the correct path:
CSS Code
/*============ Parallax Sections ============ */
.parallax-1 {
background: rgba(0, 0, 0, 0) url("../images/parallax/ce4-parallax1.jpg") no-repeat fixed 50% 0;
}
.parallax-2 {
background: rgba(0, 0, 0, 0) url("../images/parallax/ce4-parallax2.jpg") no-repeat fixed 50% 0;
}
.parallax-3 {
background: rgba(0, 0, 0, 0) url("../images/parallax/ce4-parallax3.jpg") no-repeat fixed 50% 0;
}
Parallax Links Required Files
Cube Portfolio
We have included premium cube portfolio plugin that provides many more portfolio styles and animations. Check our portfolio pages and copy the HTML code and paste it in your page.
Include the following files in your head section of the page. Please ensure that all of them have the correct path:
Cube Portfolio Links Required Files
Icon Boxes
Create super cool icon boxes with right text box or left text box. You can also align the icon boxes and text boxes to the left, right or center alignment. Check our demo pages whereas we used these styles and code. You can create icon boxes like large, medium, small, tiny and more with predefined classes.
Css Code
Find the icon box classes from line number 810 in the default.css.
/*=============== Icon Boxes ============= */
.iconbox-dxlarge, .iconbox-xlarge, .iconbox-large, .iconbox-xmedium, .iconbox-medium, .iconbox-smedium, .iconbox-small, .iconbox-tiny, .iconbox-xtiny {
padding: 0px;
margin: 0 auto;
text-align: center;
transition: all 0.3s ease-out 0s;
}
.iconbox-dxlarge {
width: 200px;
height: 200px;
font-size: 46px;
color: #242424;
border: none;
line-height: 135px;
}
.iconbox-xlarge {
width: 135px;
height: 135px;
font-size: 46px;
color: #242424;
line-height: 135px;
}
Css Code
Find the text box classes from line number 1028 in the default.css.
/*============ Text Boxes ============ */
.text-box-right {
display: block;
padding: 0px 0px 0px 99px;
margin: 0px;
text-align: left;
}
.text-box-left {
display: block;
padding: 0px 90px 0px 0;
margin: 0px;
text-align: right;
}
HTMl Code
left icon box and right text box
Graphic design
Lorem ipsum dolor sit amet consectetuer adipiscing elit Sus Aliquam ornare hendrerit augue.
HTMl Code
Right icon box and left text box
Ui design
Lorem ipsum dolor sit amet consectetuer adipiscing elit Sus Aliquam ornare hendrerit augue.
Animations
Add animations to your sections, elements, titles, buttons and anything.
Include the following files in your head section of the page. Please ensure that all of them have the correct path:
Animation Links Required Files
Add any animation like bounce, fade, left, right and more. If you want to add more animations please download the animation plug in, and add animation type in the html file.
https://github.com/joemottershaw/animationsHTML Code
your text hereyour text here
Style Customizer
You can customize the template with beautiful style customizer like colors, border types, boxed, full width, background image, pattrens and many more.
If you want to customize the template, go to our live demo and click on the style customizer and select color, boxed, fullwidth, border types and loading then click on the get cssfile button it opens a popup box and follow the instructions as we given.
1. Upload the "skin.css" file to "css" directory in your template
2. link the skin.css file into "index.html" file in your template, after the line marked as
CSS file link
Buttons
We have created beautiful buttons which are very easy to add. You can also change/edit the button size, button radius, button border colors and the other attributes as well.
Open below css file, and go to line number 1211 to find out the following code.
css/default.cssCSS Code
/* button styles
------------------------------ */
.btn {
padding: 10px 36px;
margin: 0px;
box-shadow: none;
border-radius: 0;
}
.btn.btn-large {
padding: 15px 60px;
}
.btn.btn-medium {
padding: 10px 30px;
}
.btn.btn-small {
padding: 8px 18px;
}
.btn.btn-small-2 {
padding: 4px 18px;
}
Diffrent Example buttons are given below.
HTML Code
Button Large Button small Button Default
Tabs
You can add the horizontal tabs and vertical tabs, also you can change the colors as well.
js/tabs/Include the following files in your head section of the page. Please ensure that all of them have the correct path:
Tabs Links Required Files
If you want to add diffrent tabs from the other html files we have included, just copy the html code and paste it in your file or you can change the tab numbers as well.
HTML Code
Accordions
You can add a wide range of accordions and change the colors as well.
js/tabs/Include the following files in your head section of the page. Please ensure that all of them have the correct path:
Accordions Links Required Files
HTML Code
Creative Designyour text hereGraphic Designyour text herePhotographyyour text here
Owl Carousel
You can add Owl carousel sliders in your sections. It has great features like auto height, single item with image, custom slide and synced Owls.
js/owl-carousel/Include the following files in your head section of the page. Please ensure that all of them have the correct path:
Owl Carousel Links Required Files
Contact Form
We have included premium smart forms that has great features like validation check without any page refresh.
Include the following files in your head section of the page. Please ensure that all of them have the correct path:
Smart Forms Links Required Files
HTML Code
For your email addresses, Open below php file and go to line number 41 and find the following code. Here you can add your email id.
mail.phpPHP Code
$to = 'codelayers9@gmail.com';
Google Maps
Add google maps in your pages with customized dimensions. If you want to change the height of the map, find the class at bottom of the page in default.css.
Support
Still If you have any questions, please feel free to email via my profile page contact form here.
HTMl Code
Chang Log
- initial release