heading text
Sub heading 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 |--formicons/ => All template font icons css |--css/ => All original normal CSS files |--js/ => All original template js files |--vendor/ => All dependency library files which used in template |--videos/ => All template background video |--images/ => All image files which are used in template |--index-01.html |--index-02.html |-- .... |-- .... |
Html/index-01.html
to your hosting server. You can rename "index-01.html" to "index.html"All pages developed based on bootstrap framework 4.xx. Below is overview of page structure.
Uncompress CSS list
CKav | Blon - Personal Portfolio Template
Alex Poula
Lorem ipsum dolor, sit amet consectetur adipi sicing elit. Molestiae alias minus eos nihil est.
Lear MoreNewsletter
...... .......
Blon use following main CSS files
Main | |--form-data/ |--css/ | |--ckav-main.css | |--ckav-helper.css | |--ckav-responsive.css | |--ckav-elements.css | |--template-custome.css |--js/ |--vendor/ |--images/ |--minify/ |-- |--
ckav-main.css
: All core CSS defined into this fileckav-responsive.css
: All responsive behavior css code you can find into this fileckav-elements.css
: All template elements css code you can find into this fileckav-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.template-custom.css
: Add all your custom CSS code into these file to customize template instead of directly modifying core files.ckav-main.css
: This CSS file include all widgets and main structure related codes. We strongly suggest do not modify directly.
ckav-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 bordersposition-rel
: Apply position relative on tagposition-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
zindex-01, zindex-02, zindex-03, zindex-04, zindex-05, zindex-06, zindex-07, zindex-08, zindex-09, zindex-010
Manage opacity of elements
opacity-01, opacity-02, opacity-03, opacity-04, opacity-05, opacity-06, opacity-07, opacity-08, opacity-09
All button classes which used in template
color-button-default, color-button-primary, color-button-secondary, color-button-white, color-button-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 heading
for general titles
Title text
Apply class xxxlarge, xxlarge, xlarge, large, medium, small, mini, tiny
along with title class to adjust size of title
Heading text
Apply class heading-sub
for sub heading text
Sub title text
Apply class large, medium, small, mini, tiny
along with heading-sub class to adjust size
Sub heading text
Apply class typo-light
on parent of title or other content to quickly change text color white on dark background
heading text
Sub heading text
Use below list of classes to adjust font size anywhere in content
fs-11, fs-12, fs-13, fs-14, fs-16, fs-18, fs-20, fs-22, fs-24, fs-26, fs-28, fs-30, fs-32, fs-34, fs-36, fs-38, fs-40, fs-42, fs-44, fs-46, fs-48, fs-50, fs-52, fs-54, fs-56, fs-58, fs-60, fs-62, fs-64, fs-66, fs-68, fs-70, fs-72, fs-74, fs-76, fs-78, fs-80, fs-82, fs-84, fs-86, fs-88, fs-90, fs-100, fs-110, fs-120, fs-130, fs-140, fs-150, fs-160, fs-170, fs-180, fs-190, fs-200
Title text
Sub title text
Use below list of classes to change font-family
font-1, font-2
Use below list of classes to change text colors
.color-text-default, .color-text-primary, .color-text-secondary, .color-text-white, .color-text-dark, .color-text-light
Use below listed classes to adjust alignment of content or elements
align-left
=> Text align leftalign-right
=> Text align rightalign-center
=> Text align centerflex-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
heading text
Sub heading text
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Apply data-bg-image="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-radial-gradient="rgba(0,0,0, 0.1)|rgba(0,0,0, 0.4)"
attribute. Apply two background colors with "|"
separator.
Apply attribute 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 gt-0, gt-1, gt-2, gt-4, gt-10, gt-12, gt-14, gt-16, gt-18, gt-20, gt-22, gt-24, gt-26, gt-28, gt-30, gt-40, gt-50, gt-60, gt-70, gt-80, gt-90, gt-100
reverse
along with row
to make it reverse grids.middle-md
along with row
to make all children column vertical align middle.bottom-md
along with row
to make all children column vertical align bottom.first-md
on column col-md-4
to make it first in row.last-sm
on column col-md-4
to make it last in row.CK 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.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." }
Blon 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.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: