Mount Html5 Template

Mount is a pixel perfect creative multi purpose tempate based on Html5, CSS3 & designed with great attention to details, flexibility and performance. It is ultra professional, smooth and sleek, with a clean modern layout. Mount specially designed for agency, freelance, blog, magazine, portfolio, photography, corporate and ecommerce shop.

Live Sports Data Source: 东升国际

⚽ Soccer Live (0)

HomeScoreAwayLeagueTime (CST)
No matches right now — check back soon.
Updated 2026-06-12 23:56 (CST)

Thank you for purchasing Mount template. This documentation will help to know more about template and how is structured and how to use the template features.

Mount is a template for multi purpose sites built on Bootstrap Framework, AIDA marketing model and Principles of Conversion Centered Design, You can start to use template.html where all main files are already included and ready to use.

Requirements

To be able to use HTML template, you must have the following:

  • PHP (for contact page)
  • Apache webserver (Windows servers will probably work, but are not supported)
  • An FTP tool to upload the files
  • Make sure you upload the required assets files/folders listed below:
    • HTML/assets/css - Extra Stylesheets Folder
    • HTML/assets/include - Required PHP Functions Folder
    • HTML/assets/images - Images Folder
    • HTML/assets/js - Javacripts Folder
    • HTML/assets/revolution - revolution slider Folder
    • HTML/assets/css/style.css - Main Stylesheet File
    • HTML/index.html - Index File/Homepage

Installation

Follow the steps below to get started with your Mount Template:

  1. Open the Package/HTML Folder to find all the html Templates Files
  2. You will need to Upload these files to localhost server or your Web Server using FTP in order to use it on your Website.
  3. Make sure you upload the required files/folders listed below:
    • HTML/assets - Required all file Folder.
    • Select HTML/home-1.html which want to use.
    • change HTML/index.htmlname file to HTML/index.html - Index File

File Structure

unzip the compressed archive to see the following structure:

 Mount/
  ├── Documentation/
  ├── HTML/
      ├── assets/
          ├── css
          ├── icons
          ├── images
          ├── fonts
          ├── js
          ├── less
          ├── revolution
          └── php
      ├── index(intro)
      ├── home-1.html
      ├── ...
      └── cotact-us.html

Html Structure

we use the bootstrap framework as a framework. You can take a look at bootstrap here and see it's feature in action.

And basic layout of the grids look like:

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

If you find that you need to change structure. Scroll down in your html file and find section that you want to change , all section have predefined html comments like below section example.

<!-- Footer
============================================= -->
<footer id="footer1" class="footer-1 text-center bg-dark">
        
    <div class="container">
    
        <div class="row">
        
            <div class="col-md-12">
                
                <!-- Copyrights
                ============================================= -->
                <div class="copyright">
                
                    <p>copyright © 2016 Mount.</p>
                    
                </div>
                
                <!-- Footer Widget
                ============================================= -->
                <ul class="list-inline social">
                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="#"><i class="fa fa-youtube"></i></a></li>
                    <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                </ul>
                
            </div>
            
        </div>
        
    </div>
            
</footer><!--Footer end-->

CSS Structure

Heads up! I'm using several CSS files in this template. Keep in mind, that these CSS files might be overridden somewhere else in other file.

Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:

File Name Description
bootstrap.min.css This are generic styles, resets & normalization.you can take a look here add see it's feature in action.
external.css This is a bunch of cool, fun, and minify for all external css resources you can found this resources in css folder.
style.css This is the main css file, it contains all the styles of the website.
custom.css To Be Safe, We recommend you writing your rules and style declarations here and just override the previous rules. So in case i make an update you can just replace the stylesheet.

Less CSS Structure

Here's a list of Less CSS files I'm using with this template, you can find more information opening each file:

File Name Description
style.less This are generic styles and collect all files.
Base Folder This folder contain base less css file and variable file. If you want to change any variable you can go through it.
Layout Folder This folder contain layout less css files like accordion, align, background, list and etc..
Module Folder This folder contain block and section less css files like action, feature, screenshot, etc...
State Folder This folder contain state cases like on, off button and contains responsive less css file.
theme folder This folder contain color less css file like theme-red.less, theme-yellow.less, theme-purple.less, theme-pink.less, etc...

Javascript Structure

The js (scripts) files are loaded in footer. I loaded js Library in the bottom because it will increase the site speed and rendering.

The JS files used in this template are:

File Description
jquery-2.2.4.min.js jQuery is a Javascript library that greatly reduces the amount of code that you must write.
bootstrap.min.js this bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.
plugins.js this bring all javascript plugins to life which we compresed all plugins to min.
functions.js this to active javascript function and add some coll function to your landing page.
wow.min.js this is a JavaScript plugin that reveals animations when you scroll. Very Animate.css friend,Easily customize animation settings: style, delay, length, offset, iterations...
jquery.ajaxchimp.js AjaxChimp is a jQuery plugin that lets you ajaxify your mailchimp form.
jquery.counterup.js ‏Counter-Up is a lightweight jQuery plugin that counts up to a targeted number when the number becomes visible
less.min.js This is the JavaScript, official, stable version of Less. Getting Started. Options for adding Less CSS to your project.
owl.carousel.min.js jQuery plugin that lets you create beautiful responsive carousel slider.
html5shiv.js This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.
respond.min.js this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don't support CSS3 Media Queries.

Using LESS CSS

To work with less css, Just add to head section in your index.html less library code with main less style file.

<link rel="stylesheet/less" type="text/css" href="assets/less/style.less" />
<script src="assets/js/less.js" type="text/javascript"></script>

Loading Screen

You can use loading screen spinners.

Here's a loading screen I'm using with this template, you can select/change what you need and use it:

<div class="preloader">
	<div class="spinner">
		<div class="bounce1">
		</div>
		<div class="bounce2">
		</div>
		<div class="bounce3">
		</div>
	</div>
</div>

Change Fonts

To change the font, Check head inindex.html then in first go to google fonts choose a font and use the generated code and replace with next code.

<!-- Fonts
============================================= -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100italic,100,200,200italic,300,300italic,400italic,500,500italic,600,600italic,700italic,700,800,800italic,900,900italic%7COpen+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic%7CUbuntu:400,300,300italic,400italic,500,700,500italic,700italic%7CRoboto+Slab:400,100,300,700%7CLora:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

Next Step : change font family for body in style.css

body { 
	font-family: "Raleway", Arial, sans-serif;/*Change font*/
}
h1,h2,h3,h4,h5,h6{
	font-family:"Ubuntu", Arial, sans-serif;/*Change font*/
}

Change Spacing

we uses helper classes to space elements on Mount template. Helper classes are used to space elements with margin and padding. This makes it easier to create your own elements in HTML without needing extra CSS to arrange them appropriately.

AVAILABLE CLASSES

/* All margin */
.m-0 {
	margin: 0;
}

.m-xs {
margin:(@baseline/2);
}

.m-sm {
 margin:@baseline;
}

.m-md {
margin:@baseline*2;
}

.m-lg {
margin:@baseline*4;
}

/* top margin */
.mt-0 {
	margin-top: 0;
}

.mt-xs {
margin-top:(@baseline/2);
}

.mt-sm {
 margin-top:@baseline;
}

.mt-md {
margin-top:@baseline*2;
}

.mt-lg {
margin-top:@baseline*4;
}

.mt-30 {
	margin-top: 30px !important;
}

.mt-50 {
	margin-top: 50px !important;
}

.mt-60 {
	margin-top: 60px;
}

.mt-150 {
	margin-top: 150px;
}

/* bottom margin */
.mb-0 {
	margin-bottom: 0 !important;
}

.mb-xs {
margin-bottom:(@baseline/2);
}

.mb-15 {
	margin-bottom: 15px;
}

.mb-sm {
 margin-bottom:@baseline;
}

.mb-md {
margin-bottom:@baseline*2 !important;
}

.mb-lg {
margin-bottom:@baseline*4;
}

.mb-30 {
	margin-bottom: 30px !important;
}

.mb-50 {
	margin-bottom: 50px!important;
}

.mb-60 {
	margin-bottom: 60px!important;
}

.mb-100 {
	margin-bottom: 100px!important;
}

.mb-150 {
	margin-bottom: 150px!important;
}

/* right margin */
.mr-0 {
	margin-right: 0;
}

.mr-xs {
margin-right:(@baseline/2);
}

.mr-sm {
 margin-right:@baseline;
}

.mr-md {
margin-right:@baseline*2;
}

.mr-lg {
margin-right:@baseline*4;
}

.mr-30 {
	margin-right: 30px !important;
}

.mr-50 {
	margin-right: 50px;
}

.mr-60 {
	margin-right: 60px;
}

.mr-150 {
	margin-right: 150px;
}

/* left margin */
.ml-0 {
	margin-left: 0;
}

.ml-xs {
margin-left:(@baseline/2);
}

.ml-sm {
 margin-left:@baseline;
}

.ml-md {
margin-left:@baseline*2;
}

.ml-lg {
margin-left:@baseline*4;
}

.ml-30 {
	margin-left: 30px !important;
}

.ml-50 {
	margin-left: 50px;
}

.ml-60 {
	margin-left: 60px;
}

.ml-150 {
	margin-left: 150px;
}

/* All padding */
.p-0 {
	padding: 0;
}

.p-xs {
padding:(@baseline/2);
}

.p-sm {
 padding:@baseline;
}

.p-md {
padding:@baseline*2;
}

.p-lg {
padding:@baseline*4;
}

/* top padding */
.pt-0 {
	padding-top: 0 !important;
}

.pt-xs {
padding-top:(@baseline/2);
}

.pt-sm {
 padding-top:@baseline;
}

.pt-md {
padding-top:@baseline*2;
}

.pt-lg {
padding-top:@baseline*4;
}

.pt-30 {
	padding-top: 30px !important;
}

.pt-50 {
	padding-top: 50px !important;
}

.pt-60 {
	padding-top: 60px;
}

.pt-100 {
	padding-top: 100px !important;
}

.pt-150 {
	padding-top: 150px !important;
}

/* bottom padding */
.pb-0 {
	padding-bottom: 0 !important;
}

.pb-xs {
padding-bottom:(@baseline/2);
}

.pb-sm {
 padding-bottom:@baseline;
}

.pb-md {
padding-bottom:@baseline*2;
}

.pb-lg {
padding-bottom:@baseline*4;
}

.pb-30 {
	padding-bottom: 30px;
}

.pb-50 {
	padding-bottom: 50px;
}

.pb-60 {
	padding-bottom: 60px;
}

.pb-100 {
	padding-bottom: 100px !important;
}

/* right padding */
.pr-0 {
	padding-right: 0;
}

.pr-xs {
padding-right:(@baseline/2);
}

.pr-sm {
 padding-right:@baseline;
}

.pr-md {
padding-right:@baseline*2;
}

.pr-lg {
padding-right:@baseline*4;
}

.pr-15 {
	padding-right: 15px !important;
}

.pr-30 {
	padding-right: 30px !important;
}

.pr-50 {
	padding-right: 50px;
}

.pr-60 {
	padding-right: 60px;
}

.pr-150 {
	padding-right: 150px;
}

/* left padding */
.pl-0 {
	padding-left: 0;
}

.pl-xs {
padding-left:(@baseline/2);
}

.pl-sm {
 padding-left:@baseline;
}

.pl-md {
padding-left:@baseline*2;
}

.pl-lg {
padding-left:@baseline*4;
}

.pl-15 {
	padding-left: 15px;
	;
}

/* Postions */
.fixed {
	position: fixed;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.static {
	position: static;
}

/* Zindex*/
.zindex-1 {
	z-index: 1;
}

.zindex-2 {
	z-index: 2;
}

.zindex-3 {
	z-index: 3;
}

/* Borders */
.border-all {
border:        1px solid @color-theme;
}

.border-top {
border-top:    1px solid @color-theme;
}

.border-bottom {
border-bottom: 1px solid @color-theme;
}

.border-right {
border-right:  1px solid @color-theme;
}

.border-left {
border-left:   1px solid @color-theme;
}

/* Display */
.inline {
	display: inline;
}

.block {
	display: block;
}

.inline-block {
	display: inline-block;
}

.hide {
	display: none;
}

.flex {
	display: flex;
}

@media only screen and (max-width : 767px ) {

section {
	padding-top: 60px;
	padding-bottom: 60px;
}

.text-center-xs {
	text-align: center !important
}

.pull-none-xs {
	float: none !important;
	text-align: center !important
}

.mb-15-xs {
	margin-bottom: 15px;
}

.mb-30-xs {
	margin-bottom: 30px !important;
}

.mb-50-xs {
	margin-bottom: 50px;
}

.mb-60-xs {
	margin-bottom: 60px!important;
}

.p-none-xs {
	padding-right: 0;
	padding-left: 0
}
}

@media only screen and (min-width : 768px) and (max-width : 991px) {

.text-center-sm {
	text-align: center !important
}

.mb-0-sm {
	margin-bottom: 0;
}

.mb-15-sm {
	margin-bottom: 15px;
}

.mb-30-sm {
	margin-bottom: 30px !important;
}

.mb-50-sm {
	margin-bottom: 50px;
}

.mb-60-sm {
	margin-bottom: 60px;
}

.pb-15-sm {
	padding-bottom: 15px;
}

.pb-30-sm {
	padding-bottom: 30px;
}

.pb-50-sm {
	padding-bottom: 50px;
}

.pb-60-sm {
	padding-bottom: 60px;
}

Change Color

yellow hats has a number of included colour schemes that you can switch to at any time. To switch colour schemes, simply replace color code in style.css with what you need.

<!-- COLORS -->
Primary Color   : #ffc527
Secondary Color : #5a5a5a
Body Color      : #828282
Heading Color   : #2f2f2f

Change Favicon

The main favicon is located in assets/images/favicon/favicon.ico replace with your own.

Rest of favicons for iphone/tablet are located in assets/images/favicon/apple-touch-icon.png replace with your own favicon.

<link href="assets/images/favicon/favicon.ico" rel="icon">
<link href="assets/images/favicon/apple-touch-icon.png" rel="apple-touch-icon"/>

Change background

You can use the backgorund image using the Following code:

<section class="bg-overlay bg-overlay-theme">
	<div class="bg-section" >
		<img src="assets/images/call/2.jpg" alt="Background"/>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2">
				....
			</div>
			<!-- .col-md-8 end -->
		</div>
		<!-- .row end -->
	</div>
	<!-- .container end --> 
</section>

We used class to add backgound to feature , call to action section and etc. you can find this backgorunds in images folderassets/images/bg, and you can Find this background in style.css.

/*------------------------------------*\
    #BACKGROUNDS
\*------------------------------------*/
.bg-theme{ background-color:@color-theme}
.bg-gray { background-color:@color-gray} 
.bg-white { background-color:@color-white}
/* Background Image */
.bg-section {
	position: relative;
	overflow: hidden;
	z-index: 1;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	    -ms-background-size: cover;
	     -o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	width:100%;
	height:100%;
}
.....

You can choose between 3 Types of background overlay while creating your section, bg-overlay-light, bg-overlay-dark,bg-overlay-theme.

you can change background opacity from style.css

.bg-overlay-light:before {
	background-color: rgba(255,255,255, 0.6);
}

.bg-overlay-dark:before {
	background-color: rgba(47, 47, 47, 0.95);
}

.bg-overlay-theme:before {
	background-color: rgba(255, 197, 39, 0.9);
}

Change Icons

we use icon fonts with easy control in color and size so feel free to use more than 600 icon , you can check this icon:

<ul class="list-unstyled checklist">
    <li>
        <i class="fa fa-line-chart pull-left"></i>
        <h4 class="text-capitalize text-strong">conversion rate improvement</h4>
    </li>
    <li>
        <i class="fa fa-search pull-left"></i>
        <h4 class="text-capitalize text-strong">crawling search engine speedily</h4>
    </li>
    <li>
        <i class="fa fa-refresh pull-left"></i>
        <h4 class="text-capitalize text-strong">customize code quickly</h4>
    </li>
</ul>

Change Header

You can choose between 10 Types of headers while creating your Pages. Simply adding the Header Type CSS class to the Header Element and change the header structure that you need of go to header page template that you wnat and copy HTML code.

<header id="navbar-spy" class="transparent-header">
	<nav id="primary-menu" class="navbar navbar-fixed-top style-1">

	</nav>
</header>

primary menu

<ul class="nav navbar-nav navbar-left">

</ul>

dropdow menu

<li class="has-dropdown"> 
	<a href="#" data-toggle="dropdown" class="dropdown-toggle">about</a>
	<ul class="dropdown-menu">
		<li class="dropdown-submenu"> 
			<a href="#" data-toggle="dropdown" class="dropdown-toggle">about us</a>
			<ul class="dropdown-menu">
				<li><a href="about-1.php">about us 1</a></li>
				<li><a href="about-2.php">about us 2</a></li>
				<li><a href="about-me.php">about me</a></li>
			</ul>
		</li>
		<li class="dropdown-submenu"> 
			<a href="#" data-toggle="dropdown" class="dropdown-toggle">our team</a>
			<ul class="dropdown-menu">
				<li><a href="team-1.php">team 1</a></li>
				<li><a href="team-2.php">team 2</a></li>
			</ul>
		</li>
		<li><a href="testimonials.php">testimonials</a></li>
		<li><a href="faq.php">FAQS</a></li>
	</ul>
</li>
<!-- li end -->

mega menu

<li class="has-dropdown active"> 
	<a href="#" data-toggle="dropdown" class="dropdown-toggle">Home</a>
	<ul class="mega-menu">
		<li>
			<ul>
				<li><a href="home-1.php">home page 1</a></li>
				<li><a href="home-2.php">home page 2</a></li>
				<li><a href="home-3.php">home page 3</a></li>
				<li><a href="home-4.php">home page 4</a></li>
				<li><a href="home-5.php">home page 5</a></li>
				<li><a href="home-6.php">home page 6</a></li>
			</ul>
		</li>
		<li>
			<ul>
				<li><a href="home-7.php">home page 7</a></li>
				<li><a href="home-8.php">home page 8</a></li>
				<li><a href="home-9.php">home one page</a></li>
				<li><a href="home-10.php">home shop page</a></li>
				<li><a href="home-11.php">home architect</a></li>
			</ul>
		</li>
		
		
	</ul>
</li>
<!-- li end -->

Change Page Title

You can choose between 6 Types of page title while creating your Pages. Simply adding the page title section to your page and change the page title content with that you need, you can find all page title sections in elements-page-title.html.

<!-- Page Title #1
============================================= -->
<section class="bg-overlay bg-overlay-gradient pb-0">
	<div class="bg-section" >
		<img src="assets/images/page-title/2.jpg" alt="Background"/>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-12">
				<div class="page-title title-1 text-center">
					<div class="title-bg">
						<h2>page titles</h2>
					</div>
					<ol class="breadcrumb">
						<li><a href="#">Home</a></li>
						<li class="active">page title</li>
					</ol>
				</div><!-- .page-title end -->
			</div><!-- .col-md-12 end -->
		</div><!-- .row end -->
	</div><!-- .container end -->
</section>

Change Heading

You can choose between 8 Types of heading section while creating your Pages. Simply adding the heading section to your section and change heading content with that you need, you can find all heading section in elements-heading.html.

<!-- Heading #1
============================================= -->
<section class="bg-gray">
	<div class="container">
		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-8">
				<div class="heading heading-1">
					<p>all about us</p>
					<h2>our stroy</h2>
					<p class="mb-0">Mount is a leading developer of A-grade commercial, industrial and residential portfolio in USA. Since its foundation the company has doubled its turnover year on year, with its staff numbers swelling accordingly.</p>
				</div><!-- .heading end -->
			</div><!-- .col-md-8 end -->
		</div><!-- .row end -->
	</div><!-- .container end -->
</section>

Change Widget

You can choose between 9 widgets while creating your sidebar. Simply adding widget to your sidebar. you can find all widgets in elements-widget.html.

Subscription

The newsletter is actually an integration of MailChimp or campaignmonitor. You can easily set-up a free account at mailchimp OR campaign monitor

Working with mailchimp

1.find mailchimp url

Go to your mailchimp account. Then go to your existing list. Then Signup forms. Select Embedded forms. You will find form action URL in this page.

mailchimp

2.connect mail chimp

Open functions.js and find following script. Just replace that mailchimp form action url with your mailchimp list url.

mailchimp
working with campaign monitor

1.find campaign monitor url

Paste your existing subscribe form in the area designated just after and Take your Campaign Monitor subscribe form... in the code. If you don't yet have a subscription form

more about AJAX Subscription Form and steps here.

2.replace mailchimp code form with campaign monitor code form

replace:

mailchimp

with:

<!-- Campaignmonitor Form Subscription
============================================= -->
<form class="form-inline" action="Your Form Action URL" method="post" id="campaignmonitor">
    <p>
        <input id="fieldEmail" class="form-control input-box" name="cm-jidjdl-jidjdl" type="email" required />
    </p>
    <p>
        <button type="submit" class="btn button-primary text-capitalize">signup me now</button>
    </p>
</form>

Contact Form

Just put your email address in file send.php at the folder assets/php/ and you should see the code there:

$to_Email       = "[email protected]"; //Replace with recipient email address

Call to Action

You can choose between 8 call to action section while creating your Pages. Simply adding the CTA section to your pages and change section content with that you need, you can find all CTA section in elements-cta.html.

<!-- Call To Action #1
============================================= -->
<section id="cta-1" class="cta pb-0">
	<div class="container">
		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-12">
				<div class="cta-1 bg-theme">
					<div class="row">
						<div class="col-xs-12 col-sm-12 col-md-1 hidden-xs">
							<div class="cta-img">
								<img src="assets/images/call/cta-1.png">
							</div>
						</div>
						<!-- .col-md-2 end -->
						<div class="col-xs-12 col-sm-12 col-md-7 cta-devider text-center-xs">
							<div class="cta-desc">
								<p>Have Any Questions !</p>
								<h5>Don’t Hesitate To Contact Us ANy Time.</h5>
							</div>
						</div>
						<!-- .col-md-7 end -->
						<div class="col-xs-12 col-sm-12 col-md-2 pull-right pull-none-xs">
							<div class="cta-action">
								<a class="btn btn-secondary" href="#">contact us</a>
							</div>
						</div>
						<!-- .col-md-2 end -->
					</div>
				</div>
				<!-- .cta-1 end -->
			</div>
			<!-- .col-md-12 end -->
		</div>
		<!-- .row end -->
	</div>
	<!-- .container end --> 
</section>
<!-- #cta-1 end -->

Slider

Mount includes Unique Sliders & 12+ Pre-Built Slider Templates for you to be used on any Page with alot of Options and +55 hero premium tempate. The List of all the Sliders included are mentioned as follows:

  • Revolution Slider

Revolution Slider

You can find the Revolution Slider related Documentation here.

portfolio

You can choose between portfolio grid options while creating your Pages. Simply select what you need form portfolio pages and work with it. Also we use isotrope to filter portfolio.

portfolio filter

<!-- Portfolio Filter
============================================= -->
<div class="col-xs-12  col-sm-12  col-md-12 portfolio-filter">
	<ul class="list-inline">
		<li><a class="active-filter" href="#" data-filter="*">All</a></li>
		<li><a href="#" data-filter=".filter-photography">Photography</a></li>
		<li><a href="#" data-filter=".filter-video">Video</a></li>
		<li><a href="#" data-filter=".filter-development">Development</a></li>
		<li><a href="#" data-filter=".filter-branding">Branding</a></li>
		<li><a href="#" data-filter=".filter-mockups">Mockups</a></li>
	</ul>
</div>
<!-- .Portfolio-filter end --> 

portfolio item

<!-- Portfolio #1 -->
<div class="col-xs-12 col-sm-6 col-md-3  portfolio-item  filter-video">
	<div class=" portfolio-item -body">
	<div class="portfolio-img">
		<img src="assets/images/portfolio/masonary/4col/1.jpg" alt="Portfolio Item">
		<div class="portfolio-hover">
			
			<div class="portfolio-action">
			<div class="portfolio-zoom-like">
				<a class="img-popup zoom" href="assets/images/portfolio/full/1.jpg" title="Portfolio Item 1">
					<i class="fa fa-search"></i>
				</a>
			</div>
			<div class="portfolio-link">
				<a href="#"><i class="fa fa-link"></i></a>
			</div>
		</div><!-- .Portfolio-action end -->
		</div><!-- .Portfolio-hover end --> 
	</div><!-- .Portfolio-img end -->
	<div class="portfolio-bio">
		<div class="portfolio-meta">
				<div class="portfolio-cat">
					<span>In </span><span>Mockups</span>
				</div>
				<div class="portfolio-title">
					<h4>Branding Mockup</h4>
				</div>
			</div><!-- .Portfolio-meta end -->
			<a class="likes" href="#">
				<i class="fa fa-heart"></i><span>125</span>
			</a>
	</div><!-- .portfolio-bio end -->
	</div><!-- . portfolio-item -body end -->
</div><!-- . portfolio-item  end -->

Portfolio types:

  • gallery
  • classic
  • masonry
  • without spacing
  • full width

Portfolio grid:

  • 1 Column
  • 2 Column
  • 3 Column
  • 4 Column

Portfolio single types:

  • full width
  • right sidebar
  • left sidebar

Testimonial

You can choose between 6 testimonial section while you creating your pages. Simply adding section to your page. you can find all widgets in elements-testimonials.html.

A comprehensive entertainment platform built around the 东升国际 brand, focusing on quality and experience. The site features clear layouts for entertainment content and service access, helping users quickly understand the platform's offerings. With a stable, simple style and clear operations, it's ideal for users seeking diverse entertainment in a relaxed environment.

Blog

You can choose between blog grid pages while you creating your pages.

Posts use Simple code for post item. Use the Code below:

With 东升国际官网 at its core, 东升国际 brings a fast, seamless experience.

blog types:

  • grid
  • classic
  • masonry

blog grid:

  • 1 Column
  • 2 Column
  • 3 Column
  • 4 Column

post types:

  • Standard
  • Embedded Video
  • Embedded Audio
  • Text
  • Gallery

Shortcodes

Mount includes +38 unique shortcode. The List of all the shrotcode included are mentioned as follows:

  • according
  • alerts
  • animation
  • back to top
  • blockquotes
  • breadcrumbs
  • buttons
  • clients
  • code
  • color palettes
  • columns
  • counter down
  • call to action
  • features Blocks
  • forms
  • heading
  • icon box
  • icon list
  • icons
  • images
  • list
  • maps
  • media embeds
  • modals
  • panels
  • pie charts
  • pricing tables
  • range slider
  • responsive-utilities
  • sections
  • services
  • skills
  • tables
  • team
  • testimonial
  • typogrpahy

Support

If you need any help. Feel free to contact me anytime. I will reply in 24 hours. Send a mail from Themeforest Profile.

changelog

Initial Release V1.0

Released on 1st sep 2016.

Top
Dong Sheng International Technology Co., Ltd.Dedicated to building a stable, concise, and high-quality integrated entertainment platform, providing users with a relaxed and enjoyable entertainment experience.Phone:+86 150 3022 3774Email:[email protected]WeChat:portaldongsh_971Hours: Monday to Friday 9:00–18:00No. 619 Tianfu Avenue, High-tech Zone, Chengdu City