logo

Documentation

Thank you

Hey there, thank you for Purchasing Bracket. Bracket is an amazing One Page HTML5 Template. Can use as Agency, Personal, Corporate and Portfolio template. It doesn't need any onther page like- single project or single news, because It has Bootstrap popup single service, single project, single news and single team member.
It’s very easy to use and customize, clean and well commented code. Also has trending features and unique design. let's have a look into the main feature-

  • Pages-
    • index.html (PARALLAX BACKGROUND)
    • index_2.html (TYPED.JS)
    • index_3.html (BACKGROUND SLIDER)
  • Fully Responsive for all devices
  • Based on Bootstrap framework
  • Very clean and well commented code
  • Popup Single Service
  • Popup Single Project
  • Popup Team Member
  • Popup Single Blog
  • Font Awesome and Flaticon
  • 2 Google fonts
  • Crossbrowser Compatible
  • W3C Validated
  • and much more ...

markupu straucture

<!DOCTYPE html>
<html lang="en">
    <head></head>
    <body>
        <!-- page-wrapper start -->
        <div class="page-wrapper">
            <header>
                <!-- topbar start  -->
                <div class="topbar"></div>
                <!-- topbar end -->
                <!-- menu-wrapper start -->
                <div class="menu-wrapper"></div>
                <!-- menu-wrapper end -->
                <!-- menu-btn start -->
                <button class="menu-btn stricky tnz-inner bg-f p-10"></button>
                <!-- menu-btn end -->
                <!-- main_menu start (fixed) -->
                <div class="main_menu"></div>
                <!-- main_menu end -->
            </header>

            <!-- main-banner start -->
            <div class="main-banner crop" id="home"></div>
            <!-- main-banner end -->

            <!-- page-content start -->
            <div class="page-content" id="learn_more">
                <!-- #about start -->
                <div class="sec-about pos-r mt-5" id="about"></div>
                <!-- #about end -->
                <!-- #services start -->
                <div class="sec-services pos-r mt-5" id="services"></div>
                <!-- #services end -->
                <!-- #portfolio start -->
                <div class="sec-porfolio pos-r clearfix" id="portfolio"></div>
                <!-- #portfolio end -->
                <!-- #news start -->
                <div class="sec-news pos-r" id="news"></div>
                <!-- #news end -->
            </div>
            <!-- page-content end -->
            <!-- footer start/ #contact start -->
            <footer class="sec-contact pos-r" id="contact"></footer>
            <!-- footer end/ #contact end -->
            <!-- back2Top button start -->
            <div class="back2Top"></div>
            <!-- back2Top button end -->
        </div>
        <!-- page-wrapper end -->
    </body>
</html>

all section class and id names

.section-header {...}
.inner-title {...}

#about {...}
#services {...}
#portfolio {...}
#news {...}
#contact {...}

section header

<!-- ====== section-header HTML ======= -->
<!-- section-header start -->
<div class="container">
    <div class="section-header">
        <div class="sh-wrapper pb-40 px-15">
            <h1 class="cw bg-0 d-ib">
				<span>section header</span>
			</h1>
        </div>
    </div>
</div>
<!-- section-header end -->

/* ====== section-header CSS ======= */
/*section-header start*/
.section-header {
    position: relative;
    padding-bottom: 88px;
    text-transform: uppercase;
}

.sh-wrapper {
    display: inline-block;
    position: relative;
    border-bottom: 1px solid #000;
}

.section-header:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 1px;
    background: #000;
    top: 51%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.sh-wrapper:before,
.sh-wrapper:after {
    position: absolute;
    content: '';
    width: 15px;
    height: 15px;
    background: #000;
    border: 4px solid #999;
    bottom: -8px;
}

.sh-wrapper:before {
    left: -7px;
}

.sh-wrapper:after {
    right: -7px;
}

.section-header h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    
    font-size: 13px;
    margin-bottom: 5px;
    position: relative;
    
    letter-spacing: 7px
}

.section-header h1 span {
    display: inline-block;
    position: relative;
    padding: 10px 30px;
    line-height: 28px;
    text-shadow: 0.5px 0.5px 0 rgba(255,255,255,.5);
}

.section-header h1 span:before {
    position: absolute;
    content: '';
    width: calc(100% + 30px);
    height: calc(100% - 10px);
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    top: 5px;
    left: -15px;
}

.section-header h1 span:after {
    position: absolute;
    content: '';
    width: calc(100% + 30px);
    height: calc(100% + 50px);
    top: -5px;
    left: -15px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

.section-header h1:before,
.section-header h1:after {
    position: absolute;
    content: '';
    width: 7px;
    height: calc(100% + 10px);
    top: -5px;
    background: #000;
    border-radius: 6px;
}

.section-header h1:before {
    left: -18px;
}

.section-header h1:after {
    right: -18px;
}
/*section-header end*/

inner-title

<!-- inner-title start -->
<div class="inner-title text-center mb-80">
    <div class="inner-title-wrapper">
        <h2>
			<span class="d-ib px-60 pb-10 cw">
				inner title
			</span>
		</h2>
    </div>
</div>
<!-- inner-title end -->

/*inner-title start*/
.inner-title {
    position: relative;
}

.inner-title:after {
    position: absolute;
    content: '';
    width: 90px;
    height: 6px;
    border-radius: 6px;
    background: #000;
    bottom: -2px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 2;
}

.inner-title-wrapper {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.inner-title-wrapper:before {
    position: absolute;
    content: '';
    width: calc(100% - 50px);
    height: calc(100% - 10px);
    background: #000;
    border-radius: 10px 10px 0 0;
    z-index: -2;
    top: 10px;
    left: calc(50% - 3px);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.inner-title-wrapper:after {
    position: absolute;
    content: '';
    width: 96px;
    height: 6px;
    border-radius: 6px 6px 0 0;
    border: 4px solid #fff;
    border-bottom: none;
    bottom: 1px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: -1;
}

.inner-title h2 {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.inner-title span {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 0.5px 0.5px 0 rgba(0,0,0,.5);
    border-bottom: 1px solid #000;
    position: relative;
    z-index: 1;
}

.inner-title.it-light span {
    text-shadow: 0.5px 0.5px 0 rgba(255,255,255,.5);
    border-bottom: 1px solid #fff;
}

.inner-title span:before,
.inner-title span:after {
    position: absolute;
    content: '';
    width: 11px;
    height: 11px;
    border-radius: 100%;
    background: #000;
    bottom: -6px;
}

.inner-title.it-light span:before,
.inner-title.it-light span:after {
    background: #fff;
}

.inner-title span:before {
    left: -10px;
}

.inner-title span:after {
    right: -10px;
}
/*inner-title end*/

Assets

<!-- ========== JS Assets ========== -->
<script src="js/jquery-1.12.4.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<script src="js/gmaps.min.js"></script>
<script src="js/map-helper.js"></script>
<script src="js/numscroller-1.0.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/SmoothScroll.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/lightbox.js"></script>
<script src="js/typed.js"></script>
<script src="js/jquery.filterizr.js"></script>
<script src="js/jquery.enllax.min.js"></script>
<script src="js/jquery.malihu.PageScroll2id.min.js"></script>
<script src="js/wow.min.js"></script>


/*CSS Assets*/
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700|Roboto:400,500,700,900');
@import url(css/bootstrap.min.css);
@import url(css/bootstrap-select.min.css);
@import url(css/font-awesome.min.css);
@import url(css/flaticon.css);
@import url(css/lightbox.css);
@import url(css/animate.min.css);
@import url(css/owl.carousel.css);