logo

Documentation
Thank you

Hey there, thank you for Purchasing blackport. It's an amazing App Landing Page HTML5 Template, it's very easy to use and customize, and has trending features. let's have a look into the main feature-

  • 4 Demo-
    • Agency
    • personal
    • Nav-right
    • Flat-menu
  • Fully Responsive for all devices
  • Based on Bootstrap framework
  • Very clean and well commented code
  • 3 different Popup Single Blog
  • 2 different Popup Project Details
  • Font Awesome and Flaticon
  • 3 Google fonts
  • Crossbrowser Compatible
  • W3C Validated
  • and much more ...
markupu straucture 
<!DOCTYPE html>
<html>
<html>
    <head>
        <body>
        	<div class="pre-wrapper"></div>
            <div class="main-wrapper">
                <header></header>
                <div id="home"></div>
                    <section class="page-content">
                        <div class="section-about" id="about">
                        	<div class="my-services"></div>
                        	<div class="my-skills"></div>
                        	<div class="great-team"></div>
                        </div>
                        <div class="section-portfolio" id="portfolio">
                        	<div class="recent-projects"></div>
                        	<div class="pricing"></div>
                        	<div class="facts-area"></div>
                        </div>
                        <div class="section-blog" id="blog">
                        	<div class="blog-area"></div>
                        	<div class="subscribe-area"></div>
                        	<div class="testimonial"></div>
                        	<div class="partner"></div>
                        </div>
                    </section>
                <footer></footer>
            </div>
        </body>
    </head>
</html>
all section class names 
.section-about {...}
.section-portfolio {...}
.section-blog {...}

.section-shadow {...}
.section-shadow-in {...}
.section-header {...}
.section-head {...}
.section-title {...}
.st-light {...}
section header 
<!-- section-header start -->
<div class="container">
	<div class="row">
		<div class="section-header smb-5">
			<h2 class="section-head wow fadeInLeft animDu-1">
				<span>section header</span>
			</h2>
		</div>
	</div>
</div>
<!-- section-header end -->

/*section-header start*/
.section-header {
    display: block;
    position: relative;
}

.section-header:after {
    position: absolute;
    content: '';
    width: 65%;
    height: 1px;
    left: 20%;
    background: #000;
    top: 50%;
}

.section-header:before {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    left: 85%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #000;
    top: calc(50% - 5px);
    -webkit-box-shadow: 8px -8px #000;
    box-shadow: 8px -8px #000;
}

.section-head {
    display: inline-block;
    position: relative;
    z-index: 2;
}

.section-head:before {
    position: absolute;
    content: '';
    width: 99.9%;
    height: calc(100% + 20px);
    right: -10px;
    top: -10px;
    border: 1px solid #000;
    background: #f1f1f1;
    z-index: -1;
}

.section-head span {
    font-family: 'PT Mono', monospace;
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 10px;
    line-height: 50px;
    display: inline-block;
    position: relative;
    padding-left: 50px !important;
    padding-right: 20px !important;
    text-align: center;
    background: #000;
    z-index: 2;
    text-shadow: .5px .5px 0 rgba(255,255,255,.5)
}

.section-head span:after {
    position: absolute;
    content: '';
    width: 100px;
    height: 5px;
    left: calc(100% + 10px);
    background: #000;
    top: calc(50% - 2.5px);
}
/*section-header end*/

support: tanim.mahbub001@gmail.com

section title 
<!-- section-title markupu start -->
<h2 class="section-title spb-50 text-uppercase text-center">
    <span>section title</span>
</h2>
<!-- section-title markupu end -->


/*section-title css start*/
.section-title {
    font-family: 'Unica One', cursive;
    font-size: 25px;
    color: #000;
    position: relative;
}

.section-title:before {
    position: absolute;
    content: '';
    width: 100px;
    height: 1px;
    background: #000;
    bottom: 40px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.section-title:after {
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    background: #000;
    bottom: 37.5px;
    left: 50%;
    
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

    -webkit-box-shadow: -5px 5px 0 0 #000;
    box-shadow: -5px 5px 0 0 #000;
}

.section-title > span {
    display: inline-block;
    position: relative;
    letter-spacing: 0px
}

.section-title > span:after,
.section-title > span:before {
    position: absolute;
    content: '';
    width: 20px;
    height: 5px;
    top: calc(100% + 7px);
    background: #000;
}

.section-title > span:before {
    left: calc(50% + 50px);
}
.section-title > span:after {
    right: calc(50% + 50px);
}

/*add class .st-light when background is dark*/
.section-title.st-light {
    color: #fff;
}
.section-title.st-light:after {
    -webkit-box-shadow: -5px 5px 0 0 #fff;
    box-shadow: -5px 5px 0 0 #fff;
}
.section-title.st-light:before,
.section-title.st-light:after,
.section-title.st-light > span:after,
.section-title.st-light > span:before {
    background: #fff;
}
/*section-title css end*/
Buttons

All the colors and sizes for Buttons like background and width depends on their Classes. You can change style very easily by changing the Classes for padding, background and color. 

<a href="#" class="btn-prime bgc-f8 spx-45 spy-15 f3 c-1 scroll-btn">
    btn-prime
</a>
<a href="#" class="btn-prime btn-dark bgc-f8 spx-45 spy-15 f3 c-1 scroll-btn">
    btn-dark
</a>
<a href="#" class="btn-prime btn-xit bgc-f8 spx-45 spy-15 f3 c-6 tnz-2">
    btn-xit
</a>
<a href="#" class="btn-prime bgc-f8 spx-45 spy-15 f3 c-1 tnz-2">
    right-icon
    <span class="fa fa-external-link"></span>
</a>
<a href="#" class="btn-prime btn-dark bgc-f8 spx-45 spy-15 f3 c-1 tnz-2">
    <span class="fa fa-external-link"></span>
    left-icon
</a>

<!-- =========================== -->
<!-- these are the buttons which are made by only one class. But the Button size always depends on padding classes. -->
<a href="#" class="btn-X spy-15 spx-45">btn-X</a>
<a href="#" class="btn-Xv1 spy-15 spx-45">btn-Xv1</a>
<a href="#" class="btn-Xt spy-15 spx-45">btn-Xt</a>
<a href="#" class="btn-Xr spy-15 spx-45">btn-Xr</a>
<a href="#" class="btn-Xb spy-15 spx-45">btn-Xb</a>
<a href="#" class="btn-Xl spy-15 spx-45">btn-Xl</a>
<a href="#" class="btn-X-sc spy-15 spx-45">btn-X-sc</a>
<a href="#" class="btn-Xsc spy-15 spx-45">btn-Xsc</a>
<a href="#" class="btn-Xscx spy-15 spx-45">btn-Xscx</a>
<a href="#" class="btn-Xscy spy-15 spx-45">btn-Xscy</a>
<a href="#" class="btn-Y spy-15 spx-45">btn-Y</a>
<a href="#" class="btn-Yv1 spy-15 spx-45">btn-Yv1</a>

<a href="#" class="btn-icon">
    <span class="spy-10 spr-20 spl-10">btn-icon</span>
    <i class="fa fa-info spy-10 spx-15"></i>
</a>

<a href="#" class="icon-btn">
    <i class="fa fa-info spy-10 spx-15"></i>
    <span class="spy-10 spr-10 spl-20">icon-btn</span>
</a>


/*All Button Class names start*/
.btn-prime {...}
.scroll-btn {...}
.btn-dark {...}
.btn-xit {...}
.btn-X {...}
.btn-Xv1 {...}
.btn-Xt {...}
.btn-Xr {...}
.btn-Xb {...}
.btn-Xl {...}
.btn-X-sc {...}
.btn-Xsc {...}
.btn-Xscx {...}
.btn-Xscy {...}
.btn-Y {...}
.btn-Yv1 {...}
.btn-icon {...}
.icon-btn {...}
/*All Button Class names end*/
Buttons

5 Styles for list-style-type, from class .list-style-1 to .list-style-5. Just add any class from .list-style-1, .list-style-2, .list-style-3, .list-style-4 or .list-style-5 to the ul and that will be all. 

<!-- list-style markup start -->
<ul class="list-style-1 f3 c-3 sm-10">
    <li class="smb-10">list-style-1</li>
    <li class="smb-10">list-style-1</li>
    <li>list-style-1</li>
</ul>
<ul class="list-style-2 f3 c-3 sm-10">
    <li class="smb-10">list-style-2</li>
    <li class="smb-10">list-style-2</li>
    <li>list-style-2</li>
</ul>
<ul class="list-style-3 f3 c-3 sm-10">
    <li class="smb-10">list-style-3</li>
    <li class="smb-10">list-style-3</li>
    <li>list-style-3</li>
</ul>
<ul class="list-style-4 f3 c-3 sm-10">
    <li class="smb-10">list-style-4</li>
    <li class="smb-10">list-style-4</li>
    <li>list-style-4</li>
</ul>
<ul class="list-style-5 f3 c-1 sm-10">
    <li class="smb-10">list-style-5</li>
    <li class="smb-10">list-style-5</li>
    <li>list-style-5</li>
</ul>
<!-- list-style markup end -->


/*list-style-1 start*/
.list-style-1 li {
    padding-left: 20px;
    position: relative;
    font-size: 18px;
    letter-spacing: .3px;
}

.list-style-1 li:before {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    background: #f1f1f1;
    border: 3px solid #000;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 6px;
    left: 0;
}
/*list-style-1 end*/

/*list-style-2 start*/
.list-style-2 li {
    padding-left: 40px;
    position: relative;
    font-size: 15px;
    letter-spacing: .3px;
    font-weight: bold;
}

.list-style-2 li:before {
    position: absolute;
    content: '';
    width: 20px;
    height: 1px;
    background: #333;
    left: 0;
    top: 10px;
}

.list-style-2 li:after {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,.3);
    border: 2px solid #000;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 6px;
    left: 20px;
}
/*list-style-2 end*/

/*list-style-3 start*/
.list-style-3 li {
    padding-left: 45px;
    position: relative;
    font-size: 16px;
    font-style: italic;
}

.list-style-3 li:before {
    position: absolute;
    content: '';
    width: 20px;
    height: 1px;
    background: #333;
    left: 0;
    top: 8px;
}

.list-style-3 li:after {
    position: absolute;
    content: '';
    width: 20px;
    height: 5px;
    border-radius: 5px;
    background: #000;
    top: 6px;
    left: 20px;
}
/*list-style-3 end*/

/*list-style-4 start*/
.list-style-4 li {
    padding-left: 20px;
    position: relative;
    font-size: 16px;
}

.list-style-4 li:before {
    position: absolute;
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: #eee;
    border: 3px solid #555;
    left: 0;
    top: 3px;
}
/*list-style-4 end*/

/*list-style-5 start*/
.list-style-5 li {
    font-size: 15px;
    padding-left: 20px;
    position: relative;
}

.list-style-5 li:before {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 100%;
    left: 0;
    top: 8px;
    background: #aaa;
}
.list-style-5 li:after {
    position: absolute;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 100%;
    left: -2px;
    top: 6px;
    border: 1px solid #bbb;
}
/*list-style-5 end*/

support: tanim.mahbub001@gmail.com

Top