华体会(HTH)官方网站 - 欢迎来到华体会体育HTH SPORTS

Interact Template

hth为您提供专业、贴心的服务体验。

hth为您提供专业、贴心的服务体验。Bootstrap Framework, AIDA marketing model and Principles of Conversion Centered Design.

Requirements

hth为您提供专业、贴心的服务体验。

hth为您提供专业、贴心的服务体验。
hth为您提供专业、贴心的服务体验。
hth为您提供专业、贴心的服务体验。
hth为您提供专业、贴心的服务体验。
- HTML/assets/csshth为您提供专业、贴心的服务体验。
- HTML/assets/includehth为您提供专业、贴心的服务体验。
- HTML/assets/images - Images Folder
- HTML/assets/js - Javacripts Folder
- HTML/assets/css/style.csshth为您提供专业、贴心的服务体验。
- HTML/index.htmlhth为您提供专业、贴心的服务体验。

Notes!hth为您提供专业、贴心的服务体验。

Installation

hth为您提供专业、贴心的服务体验。

Open the Package/HTMLhth为您提供专业、贴心的服务体验。
hth为您提供专业、贴心的服务体验。
hth为您提供专业、贴心的服务体验。
- HTML/assetshth为您提供专业、贴心的服务体验。
- Select HTML/landing-[name].htmlhth为您提供专业、贴心的服务体验。
- change HTML/index.htmlname file to HTML/index.html - Index File

File Structure

hth为您提供专业、贴心的服务体验。

  Interact/
  ├── Documentation/
  ├── HTML/
      ├── assets/
          ├── css
          ├── icons
          ├── images
          ├── fonts
          ├── js
          ├── less
          └── include
      ├── index(intro)
      ├── laning-name.html
      ├── ...
      └── landing-name.html

Html Structure

we use the bootstraphth为您提供专业、贴心的服务体验。herehth为您提供专业、贴心的服务体验。

hth为您提供专业、贴心的服务体验。

<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>

hth为您提供专业、贴心的服务体验。

<!-- 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 © 2015 Interact.</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!hth为您提供专业、贴心的服务体验。

hth为您提供专业、贴心的服务体验。

File Name	Description
`bootstrap.min.css`	hth为您提供专业、贴心的服务体验。herehth为您提供专业、贴心的服务体验。
`animate.min.css`	hth为您提供专业、贴心的服务体验。herehth为您提供专业、贴心的服务体验。
`style.css`	hth为您提供专业、贴心的服务体验。
`custom.css`	hth为您提供专业、贴心的服务体验。

hth为您提供专业、贴心的服务体验。

File Name	Description
`style.less`	hth为您提供专业、贴心的服务体验。
`Base Folder`	hth为您提供专业、贴心的服务体验。
`Layout Folder`	hth为您提供专业、贴心的服务体验。
`Module Folder`	hth为您提供专业、贴心的服务体验。
`State Folder`	hth为您提供专业、贴心的服务体验。
`theme folder`	hth为您提供专业、贴心的服务体验。

Javascript Structure

hth为您提供专业、贴心的服务体验。

File	Description
`jquery-2.2.4.min.js`	hth为您提供专业、贴心的服务体验。
`bootstrap.min.js`	hth为您提供专业、贴心的服务体验。
`plugins.js`	hth为您提供专业、贴心的服务体验。
`functions.js`	hth为您提供专业、贴心的服务体验。
`wow.min.js`	hth为您提供专业、贴心的服务体验。
`jquery.ajaxchimp.js`	hth为您提供专业、贴心的服务体验。
`jquery.counterup.js`	hth为您提供专业、贴心的服务体验。
`less.min.js`	hth为您提供专业、贴心的服务体验。
`owl.carousel.min.js`	hth为您提供专业、贴心的服务体验。
`html5shiv.js`	hth为您提供专业、贴心的服务体验。
`respond.min.js`	hth为您提供专业、贴心的服务体验。

hth为您提供专业、贴心的服务体验。

hth为您提供专业、贴心的服务体验。head section in your index.htmlhth为您提供专业、贴心的服务体验。

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

Loading Screen

hth为您提供专业、贴心的服务体验。

<div class="preload">
	<div class="sk-cube-grid">
		  <div class="sk-cube sk-cube1"></div>
		  <div class="sk-cube sk-cube2"></div>
		  <div class="sk-cube sk-cube3"></div>
		  <div class="sk-cube sk-cube4"></div>
		  <div class="sk-cube sk-cube5"></div>
		  <div class="sk-cube sk-cube6"></div>
		  <div class="sk-cube sk-cube7"></div>
		  <div class="sk-cube sk-cube8"></div>
		  <div class="sk-cube sk-cube9"></div>
	</div>
</div>

Change Fonts

hth为您提供专业、贴心的服务体验。head inindex.html then in first go to google fontshth为您提供专业、贴心的服务体验。

<!-- Fonts
============================================= -->
<link href='http://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CComfortaa:300,400,700' rel='stylesheet' type='text/css'>

Next Stephth为您提供专业、贴心的服务体验。`style.css`

body { 
	font-family: "Lato", Arial, sans-serif;/*Change font*/
}
h1,h2,h3,h4,h5,h6{
	font-family:'Comfortaa', cursive;/*Change font*/
}

Change Spacing

hth为您提供专业、贴心的服务体验。

AVAILABLE CLASSES

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

.m-xs {
margin:10px;
}

.m-sm {
 margin:20px;
}

.m-md {
margin:40px;
}

.m-lg {
margin:80px;
}

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

.mt-xs {
margin-top:10px;
}

.mt-sm {
margin-top:20px;
}

.mt-md {
margin-top:40px;
}

.mt-lg {
margin-top:80px;
}

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

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

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

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

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

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

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

.mb-md {
margin-bottom:40px;
}

.mb-lg {
margin-bottom:80px;
}

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

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

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

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

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

.mr-xs {
margin-right:10px;
}

.mr-sm {
margin-right:20px;
}

.mr-md {
margin-right:40px;
}

.mr-lg {
margin-right:80px;
}

.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:10px;
}

.ml-sm {
margin-left:20px;
}

.ml-md {
margin-left:40px;
}

.ml-lg {
margin-left:80px;
}

.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:10px;
}

.p-sm {
padding:20px;
}

.p-md {
padding:40px;
}

.p-lg {
padding:80px;
}

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

.pt-xs {
padding-top:10px;
}

.pt-sm {
padding-top:20px;
}

.pt-md {
padding-top:40px;
}

.pt-lg {
padding-top:80px;
}

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

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

.pb-xs {
padding-bottom:10px;
}

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

.pb-md {
padding-bottom:40px;
}

.pb-lg {
padding-bottom:80px;
}

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

.pr-xs {
padding-right:10px;
}

.pr-sm {
padding-right:20px;
}

.pr-md {
padding-right:40px;
}

.pr-lg {
padding-right:80px;
}

.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:10px;
}

.pl-sm {
padding-left:20px;
}

.pl-md {
padding-left:40px;
}

.pl-lg {
padding-left:80px;
}

Change Color

hth为您提供专业、贴心的服务体验。style.csshth为您提供专业、贴心的服务体验。

<!-- COLORS -->
Primary Color   : #e74c3c
Secondary Color : #bdbdbd
Body Color      : #999999
Heading Color   : #2c3e50

Change Favicon

hth为您提供专业、贴心的服务体验。assets/images/favicon/favicon.icohth为您提供专业、贴心的服务体验。

hth为您提供专业、贴心的服务体验。assets/images/favicon/apple-touch-icon.pnghth为您提供专业、贴心的服务体验。

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

Change logo

hth为您提供专业、贴心的服务体验。logo-light.pnghth为您提供专业、贴心的服务体验。assets/images/logo/ or open index.htmlhth为您提供专业、贴心的服务体验。

<div class="navbar-header">
   <img class="logo center-block" src="assets/images/logo/logo-light.png" alt="logo">
</div>

Change background

hth为您提供专业、贴心的服务体验。

<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>

hth为您提供专业、贴心的服务体验。assets/images/bghth为您提供专业、贴心的服务体验。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%;
}
.....

hth为您提供专业、贴心的服务体验。bg-overlay-light, bg-overlay-dark,bg-overlay-theme.

hth为您提供专业、贴心的服务体验。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

hth为您提供专业、贴心的服务体验。

Font Awesome – http://fortawesome.github.io/Font-Awesome/cheatsheet/
hth为您提供专业、贴心的服务体验。https://www.behance.net/gallery/17079811/Stroke-Gap-Icons
Linearicons – https://linearicons.com/free

<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

hth为您提供专业、贴心的服务体验。

<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>

Subscription

hth为您提供专业、贴心的服务体验。mailchimp OR campaign monitor

hth为您提供专业、贴心的服务体验。

hth为您提供专业、贴心的服务体验。

Open functions.jshth为您提供专业、贴心的服务体验。

hth为您提供专业、贴心的服务体验。

hth为您提供专业、贴心的服务体验。here.

hth为您提供专业、贴心的服务体验。

replace:

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

hth为您提供专业、贴心的服务体验。send.php at the folder assets/php/hth为您提供专业、贴心的服务体验。

$to_Email       = "myemail@gmail.com"; //Replace with recipient email address

Call to Action

hth为您提供专业、贴心的服务体验。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 -->

Testimonial

hth为您提供专业、贴心的服务体验。elements-testimonials.html.

Credit Files

hth为您提供专业、贴心的服务体验。

JavaScript Plugins

CSS Files

Icons

Images

Support

hth为您提供专业、贴心的服务体验。Themeforest Profile.

changelog

Initial Release V1.0

Released on 21th of November 2016.

Interact Template

Requirements

Installation

File Structure

Html Structure

CSS Structure

hth为您提供专业、贴心的服务体验。

Javascript Structure

hth为您提供专业、贴心的服务体验。

Loading Screen

Change Fonts

Next Stephth为您提供专业、贴心的服务体验。style.css

Change Spacing

AVAILABLE CLASSES

Change Color

Change Favicon

Change logo

Change background

Change Icons

Change Header

primary menu

Subscription

hth为您提供专业、贴心的服务体验。

hth为您提供专业、贴心的服务体验。

Contact Form

Call to Action

Testimonial

Credit Files

JavaScript Plugins

CSS Files

Icons

Images

Support

hth为您提供专业、贴心的服务体验。Themeforest Profile.

changelog

Initial Release V1.0

Next Stephth为您提供专业、贴心的服务体验。`style.css`