Title text
Sub title text
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Thank you for purchasing my template.
We are happy to help you but before you contact, please make sure that you followed the whole documentation very carefully, because it cover whole information to manage template.
We provide a support within 24 working hours. In order to get help you should contact me via themeforest user contact form or support.
Ticket support Profile contact form
Please note that we will only provide the support if you contact us via themeforest contact form or our support area. This is the only way we can verify you as our customer!
Below is main folder which include all landing page light and dark theme dependency files and all pre-define ready to use landing page files.
Html | |--form-data/ => All php wrapper for mail settings |--css/ => All original normal CSS files |--js/ => All original template js files |--lib/ => All dependency library files which used in template |--images/ => All image files which are used in template |--minify/ => All minify CSS files which are used in template |--index-1.html |--index-1-dark.html |--page-aboutus-01.html |--page-aboutus-01-dark.html |-- .... |-- .... |
Html/index-1.html to your hosting server. You can rename "index-1.html" to "index.html"All pages developed based on bootstrap framework 3.xx. Below is overview of page structure.
Uncompress CSS list
CKavArt - Ira One Page Creative HTML Template
ALL JAVASCRIPT FILES USED IN TEMPLATE ...... ...
Ira use following main CSS files
Main | |--form-data/ |--css/ | |--themes/ | |--ckav-grids.css | |--responsive.css | |--main.css | |--animate.css | |--helper.css | |--custom.css |--js/ |--lib/ |--images/ |--minify/ |-- |--
ckav-grids.css : All grids related CSS defined into this fileresponsive.css : All responsive behavior css code you can find into this filemain.css : This CSS file include all typography and main structure related codes. We strongly suggest do not modify directly.animate.css : Include all CSS animation classeshelper.css : This CSS include all helper CSS classes which are widely used in layout structure to generate design templates. We strongly suggest take full overview to know how we used these classes into layout structure. These classes help you to manipulate design structure very easily.theme/ : Include all color related CSS filescustom.css : Add all your custom CSS code into these file to customize template instead of directly modifying core files.main.css : This CSS file include all widgets and main structure related codes. We strongly suggest do not modify directly.
helper.css : This CSS include all helper CSS classes which are widely used in layout structure to generate design templates. We strongly suggest take full overview to know how we used these classes into layout structure. These classes help you to manipulate design structure very easily. Best way to get classes overview directly from helper.css file.
full-wh class used to cover full width x height overlay div or background in any section. full-wh class use position absolute so it alway dependent on parent tag position relative.no-border : For reseting borderspos-rel : Apply position relative on tagpos-abs : Apply position absolute on tagl0 : Apply left position 0. Generally apply when element use absolute position.r0 : Apply right position 0. Generally apply when element use absolute position.list-reset : Used to reseting ul HTML element.Manage z-index of element when position relative or absolute
z1, z2, z3, z4, z5, z6, z7, z8, z9, z10
Manage opacity of elements
op-0, op-001, op-002, op-003, op-004, op-005, op-006, op-007, op-008, op-009
op-01, op-02, op-03, op-04, op-05, op-06, op-07, op-08, op-09
Manage shadow of elements
.shadow-large,
.hov-shadow-large,
.shadow-medium,
.hov-shadow-medium,
.shadow-small,
.hov-shadow-small,
.shadow-mini,
.hov-shadow-mini,
.shadow-tiny,
.hov-shadow-tiny,
.shadow-micro,
.hov-shadow-micro,
All button classes which used in template
btn-default, btn-primary, btn-secondary, btn-white, btn-dark
Button text Button text Button text Button text Button text
Apply class solid along with button classes for solid button
Button text
Apply class large, medium, small, mini, tiny along with button classes to adjust button sizes
Button text
Apply class round along with button classes for round button
Button text
Apply class title for general titles
Title text
Apply class xlarge, large, medium, small, mini, tiny along with title class to adjust size of title
Title text
Apply class title-sub for sub title text
Sub title text
Apply class large, medium, small, mini, tiny along with title-sub class to adjust size
Sub title text
Apply class typo-light on parent of title or other content to quickly change text color white on dark background
Title text
Sub title text
Apply classes list-1, list-2, list-3 on ul list to apply quick style on ul
Apply class tag-text to create small tag element
Tag text
Use class bg-white, bg-gray, bg-dark, bg-default, bg-primary, bg-secondary, bg-light to change tag color
Tag text
Apply class txt-upper, txt-lower, txt-capi to change text case
Title text
Sub title text
Use below list of classes to adjust font size anywhere in content
fs11, fs12, fs13, fs14, fs16, fs18, fs20, fs22, fs24, fs26, fs28, fs30, fs32, fs34, fs36, fs38, fs40, fs42, fs44, fs46, fs48, fs50, fs52, fs54, fs56, fs58, fs60, fs62, fs64, fs66, fs68, fs70, fs72, fs74, fs76, fs78, fs80, fs82, fs84, fs86, fs88, fs90, fs100, fs110, fs120, fs130, fs140, fs150, fs160, fs170, fs180, fs190, fs200
Title text
Sub title text
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Use below list of classes to adjust line height of content
lh-1, lh-2, lh-3, lh-4, lh-5, lh-6, lh-7, lh-8, lh-9, lh-10, lh-11, lh-12, lh-13, lh-14, lh-15, lh-16, lh-17, lh-18, lh-19, lh-20
Title text
Sub title text
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Use below list of classes to adjust font-weight of text
bold-n, bold-0, bold-1, bold-2, bold-3, bold-4, bold-5, bold-6
Use below list of classes to change font-family
f-1, f-2
Use below list of classes to change text colors
.txt-default, .txt-primary, .txt-secondary, .txt-white, .txt-dark, .txt-light
Use below list of classes to apply hover text colors
.hov-txt-default, .hov-txt-primary, .hov-txt-secondary, .hov-txt-white, .hov-txt-dark
Use below listed classes to adjust alignment of content or elements
align-l => Text align leftalign-r => Text align rightalign-c => Text align centeralign-m => Text align middlealign-t => Text align topflex-tl => Align inner elements top leftflex-tc => Align inner elements top centerflex-tr => Align inner elements top rightflex-cc => Align inner elements center centerflex-cl => Align inner elements center leftflex-cr => Align inner elements center rightflex-bc => Align inner elements bottom centerflex-bl => Align inner elements bottom leftflex-br => Align inner elements bottom rightExample of flex alignment - center center inner element
Title text
Sub title text
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Apply data-bg="images/bg1.jpg" attribute on element with your image path to apply background image
...
Use helper classes bg-cc bg-cover to adjust background image on element.
Apply data-gradient="y" and data-g-colors="rgba(0,0,0,0)|rgba(13, 29, 125, 0.7)" attribute. Apply two background colors with "|" separator.
Apply attribute data-stellar="y" data-stellar-ratio="0.8" and set image path in data-bg="images/bg-img-01.jpg" to apply parallax image.
Please note parallax image only apply on transparent element.
All landing pages use flex based grid structure. Grid structure classes is same as bootstrap grid structure just added prefix flex-. Below example code to create basic grid structure.
... GIRD COLUMN CONTENT ...... GIRD COLUMN CONTENT ...... GIRD COLUMN CONTENT ...
flex-row to adjust space between columns gt0, gt1, gt2, gt4, gt10, gt12, gt14, gt16, gt18, gt20, gt22, gt24, gt26, gt28, gt30, gt40, gt50, gt60, gt70, gt80, gt90, gt100
flex-row to apply bottom margin on columns mb0, mb1, mb2, mb4, mb10, mb12, mb14, mb16, mb18, mb20, mb22, mb24, mb26, mb28, mb30, mb40, mb50, mb60, mb70, mb80, mb90, mb100
reverse along with flex-row to make it reverse grids.middle-md along with flex-row to make all children column vertical align middle.bottom-md along with flex-row to make all children column vertical align bottom.first-md on column flex-col-md-4 to make it first in row.last-sm on column flex-col-md-4 to make it last in row.R.Gen landing pages use very simple form structure. It's very easy to customize or add new fields according to requirement. Below is example code of basic form.
Set your email address on hidden field on which you would like to get mails.
You can also set these email directly in form-data/formdata.php as well.
Below is default php code.
$to = $_POST['to']['val']; // default code
Example code to set email in php file directly
$to = "abc@xyz.com"; // Your email ID
form-data/formdata.php file is main file to sending mail of form data.data-success-redirect="y" to activate thank you page when form successfully submitted.
Open file js/ckav-template.js and find below code than apply your thank you page path.
/* URL OF SUCCESS PAGE ON FORM SUBMIT *********************/ success_url: "thankyou.html"
data-label="Name" is use as label in mail content.
required attribute make field mandatory.
data-msg="Please enter name." is validation message if field is mandatory.
All validation settings find in js/ckav-template.js file
ckav.global_validation = {
form: '',
rules: {
email : { required: true, email: true },
name : { required: true },
message : { required: true },
phone : { required: true, number: true },
date : { required: true, date: true },
people : { required: true, number: true },
datetime : { required: true, date: true }
},
msgpos: 'normal',
msg: {
email: {email: "Please, enter a valid email"}
},
subscribe_successMsg : "You are in list. We will inform you as soon as we finish.",
form_successMsg : "Thank you for contact us. We will contact you as soon as possible.",
successMsg : "",
errorMsg : "Oops! Looks like something went wrong. Please try again later."
}
Ira included MailChimp, Campaign Monitor, Get response, iContact, Constant Contact Option to save email addresses in text file. Below is example code to set newsletter subscription form
form-data/config.php file. All basic requirements / steps mention in file.Follow below steps to disable or remove loader from page.
Open your index.html file and remove or comment below line of code
Please remember you have purchased a very affordable theme and you have not paid for a full-time web design agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. We provide support for your connivance, so please be patient, polite and respectful.
Please visit our profile page
Support for my items includes: