cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!DOCTYPE html>
<html> <!-- http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/index.html -->
  <head>
	<title>Teplok - Responsive Landing Page</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="">
	<!-- CSS -->
	<link href="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/css/bootstrap.min.css" rel="stylesheet">
	<link href="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/css/animate.css" rel="stylesheet">
	<link href="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/css/style.css" rel="stylesheet">
	<link href="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/css/style-responsive.css" rel="stylesheet">
	<link href="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/third/font-awesome/css/font-awesome.css" rel="stylesheet">
	
	<!-- REQUIRED FOR LANDING PAGE -->
	<link href="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/third/vegas/jquery.vegas.min.css" rel="stylesheet">
	<link href="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/third/hovericon/css/component.css" rel="stylesheet">


	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
	
	
	</head>
	
	<!-- BODY WITH DATA STYPE FOR SCROLLSPY -->
	<body class="tooltips" id="top" data-spy="scroll" data-target="#myScrollspy">
	
	
	<!-- START PAGE -->
	<div class="wrapper">
	
		<!-- HEADER -->
		<div id="header-landing">
		
			<!-- NAV MENU WRAPPER FOR FIXED POSITION -->
			<div id="nav-menu">
			
				<!-- NAV MENU CONTAINER -->
				<div class="container">
					
					<!-- LOGO -->
					<div id="logo">
					<h1><a href="index.html"><i class="fa fa-flask"></i> teplok.</a></h1>
					</div>
					<!-- END LOGO -->
					
					<!-- NAV MENU -->
					<div class="menus" id="myScrollspy">
						<ul class="nav scroll-nav">
							<li class="active"><a href="#top"><i class="fa fa-home"></i><span>Home</span></a></li>
							<li><a href="#features"><i class="fa fa-laptop"></i><span>Features</span></a></li>
							<li><a href="#services"><i class="fa fa-cog"></i><span>Services</span></a></li>
							<li><a href="#portfolio"><i class="fa fa-flask"></i><span>Portfolio</span></a></li>
							<li><a href="#blog"><i class="fa fa-coffee"></i><span>Blog</span></a></li>
							<li><a href="#team"><i class="fa fa-users"></i><span>Team</span></a></li>
							<li><a href="#contact"><i class="fa fa-envelope"></i><span>Contact</span></a></li>
						</ul>
					</div>
					<!-- END NAV MENU -->
					
				</div>
				<!-- END NAV MENU CONTAINER -->
				
			</div>
			<!-- END NAV MENU FIXED POSITION -->
			
			<!-- HEADER SECTION CONTENT -->
			<div class="awesome-slogan">
			<h2>Your <span>Awesome</span> Text <span>Goes Here</span></h2>
			<h4>aku kelingan <span>jaman semono</span> pas iseh nganggo <span>teplok</span></h4>
				<p>FOLLOW US</p>
				
				<div class="clear"></div>
				<div class="social-icons">
				<a href="#fakelink" data-toggle="tooltip" title="Facebook"><img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/social-icons/facebook.png" alt="Facebook icon"></a>
				<a href="#fakelink" data-toggle="tooltip" title="Github"><img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/social-icons/github.png" alt="Github icon"></a>
				<a href="#fakelink" data-toggle="tooltip" title="Google+"><img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/social-icons/gplus.png" alt="Gplus icon"></a>
				<a href="#fakelink" data-toggle="tooltip" title="Liked In"><img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/social-icons/likedin.png" alt="Linkedin icon"></a>
				<a href="#fakelink" data-toggle="tooltip" title="Tumblr"><img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/social-icons/tumblr.png" alt="Tumblr icon"></a>
				<a href="#fakelink" data-toggle="tooltip" title="Twitter"><img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/social-icons/twitter.png" alt="Twitter icon"></a>
				<a href="#fakelink" data-toggle="tooltip" title="Vimeo"><img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/social-icons/vimeo.png" alt="Vimeo icon"></a>
				<a href="#fakelink" data-toggle="tooltip" title="Youtube"><img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/social-icons/youtube.png" alt="Youtube icon"></a>
				</div>
			</div>
			<!-- END HEADER SECTION CONTENT -->
			
		</div>
		<!-- END HEADER -->
		
		
		<!-- SEECTION THEME COLOR -->
		<div class="section-theme-landing"></div>
		<!-- END SECTION THEME COLOR -->
		
		<!-- SECTION FEATURES -->
		<div class="section-page-landing section-light-grey" id="features">
			<div class="inner-section">
				<div class="container">
				
					<!-- SECTION TITLE -->
					<h2 class="text-center">Main Features</h2>
					
					<!-- WRITE SOMETHING ABOUT FEATURES HERE -->
					<h4 class="text-center">
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
					</h4>
					<!-- END FEATURES DESCRIPTION -->
					
					<!-- FEATURES COLUMN -->
					<div class="row">
						<div class="col-md-3 col-sm-6">
							<div class="the-box-landing border-hover-bottom text-center">
								<h4>RESPONSIVE DESIGN</h4>
								<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/flat-icon/s1.png" class="small-icon" alt="Features image">
								<p>
								Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius
								</p>
							</div>
						</div>
						<div class="col-md-3 col-sm-6">
							<div class="the-box-landing border-hover-bottom text-center">
								<h4>USE BOOTSTRAP 3.1.X</h4>
								<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/flat-icon/s2.png" class="small-icon" alt="Features image">
								<p>
								Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius
								</p>
							</div>
						</div>
						<div class="col-md-3 col-sm-6">
							<div class="the-box-landing border-hover-bottom text-center">
								<h4>+ COMING SOON</h4>
								<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/flat-icon/s7.png" class="small-icon" alt="Features image">
								<p>
								Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius
								</p>
							</div>
						</div>
						<div class="col-md-3 col-sm-6">
							<div class="the-box-landing border-hover-bottom text-center">
								<h4>EASY TO USE</h4>
								<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/flat-icon/s3.png" class="small-icon" alt="Features image">
								<p>
								Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius
								</p>
							</div>
						</div>
					</div>
					<!-- END FEATURES COLUMN -->
					
					
					<div class="the-box-landing border-color-left">
						<div class="row">
							<div class="col-sm-9">
								<h3>Nek sampeyan juga podo kelingan jaman semono iseh nggunake Teplok, monggo dipun kersakne hasil karya kulo</h3>
							</div>
							<div class="col-sm-3">
							<button class="btn btn-default btn-teplok btn-block btn-lg btn-purchase"><i class="fa fa-shopping-cart"></i> Purchase Item</button>
							</div>
						</div>
					</div>
					
				</div>
			</div>
		</div>
		<!-- END SECTION FEATURES -->
		
		
		<!-- SECTION SERVICES -->
		<div class="section-page-landing section-grey" id="services">
			<div class="inner-section">
				<div class="container">
					<h2 class="text-center">Our Services</h2>
					<h4 class="text-center">
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
					</h4>
					
					<div class="hi-icon-effect-1 hi-icon-effect-1a">
						<div class="row">
							<div class="col-sm-3">
								<div class="the-box-landing the-box-transparent text-center">
									<h4>WEB DESIGN</h4>
									<a href="#fakelink" class="hi-icon hi-icon-screen">Web Design</a>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="the-box-landing the-box-transparent text-center">
									<h4>UI DESIGN</h4>
									<a href="#fakelink" class="hi-icon hi-icon-images">UI Design</a>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="the-box-landing the-box-transparent text-center">
									<h4>MOBILE APPS</h4>
									<a href="#fakelink" class="hi-icon hi-icon-mobile">Mobile Apps</a>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="the-box-landing the-box-transparent text-center">
									<h4>WEB HOSTING</h4>
									<a href="#fakelink" class="hi-icon hi-icon-archive">Web Hosting</a>
								</div>
							</div>
						</div>
					</div>
					
					<hr />
					
					<h2 class="text-center">What They Say About Us?</h2>
					
					
					<!-- TESTIMONIAL CAROUSEL -->
					<div id="carousel-testimonial" class="carousel-landing carousel carousel-testimonial slide" data-ride="carousel">
					
					<div class="testimonial-icon">
						<span class="fa-stack fa-lg">
						  <i class="fa fa-circle fa-stack-2x"></i>
						  <i class="fa fa-comments-o fa-stack-1x fa-inverse"></i>
						</span>
					</div>
					
					  <!-- Indicators -->
					  <ol class="carousel-indicators">
						<li data-target="#carousel-testimonial" data-slide-to="0" class="active"></li>
						<li data-target="#carousel-testimonial" data-slide-to="1"></li>
						<li data-target="#carousel-testimonial" data-slide-to="2"></li>
					  </ol>

					  <!-- Wrapper for slides -->
					  <div class="carousel-inner">
						<div class="item active">
							<div class="testimonial-inner">
								<h5>&#34;
								Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi
								&#34;</h5>
								<h4 class="testimonial-name">Ari Rusmanto - Yogyakarta, <abbr title="Indonesia">ID</abbr></h4>
								<div class="testimonial-avatar">
									<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/avatar/arirusmanto.png" class="img-circle" alt="Avatar">
								</div>
							</div>
						</div>
						<div class="item">
							<div class="testimonial-inner">
								<h5>&#34;
								Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi
								&#34;</h5>
								<h4 class="testimonial-name">Hana Sartika - Tokyo, Japan</h4>
								<div class="testimonial-avatar">
									<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/avatar/hanasartika.png" class="img-circle" alt="Avatar">
								</div>
							</div>
						</div>
						<div class="item">
							<div class="testimonial-inner">
								<h5>&#34;
								Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi
								&#34;</h5>
								<h4 class="testimonial-name">Bambang Wicaksono - London, UK</h4>
								<div class="testimonial-avatar">
									<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/avatar/bambangwicaksono.png" class="img-circle" alt="Avatar">
								</div>
							</div>
						</div>
					  </div>
					</div>
					<!-- END TESTIMONIAL CAROUSEL -->
					
					
				</div>
			</div>
		</div>
		<!-- END SECTION SERVICES -->
		
		
		
		<!-- SECTION PORTFOLIO -->
		<div class="section-page-landing" id="portfolio">
			<div class="inner-section">
			
				<!-- MODAL PORTFOLIO -->
				<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				  <div class="modal-dialog">
					<div class="modal-content">
						
						<!-- MODAL HEADER -->
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">Project name</h4>
						</div>
						
						<!-- MODAL BODY -->
						<div class="modal-body">
						<img src="images/blog-img/image001.jpg" class="img-responsive" alt="Image portfolio">
						<hr />
							<div class="row">
								<div class="col-sm-4">
									<button class="btn btn-default btn-teplok btn-block">Launch project</button>
									<table class="table table-modal-project">
									<tbody>
									<tr><td><strong>Type</strong></td><td class="text-right">Photography</td></tr>
									<tr><td><strong>Client</strong></td><td class="text-right">Marlboro</td></tr>
									<tr><td><strong>Year</strong></td><td class="text-right">2014</td></tr>
									</tbody>
									</table>
								</div>
								<div class="col-sm-8">
									<p style="text-align: justify">
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
									</p>
								</div>
							</div>
						</div>
						
					</div>
				  </div>
				</div>
				<!-- END MODAL PORTFOLIO -->
				
				
				
				<div class="container">
					<h2 class="text-center">Our Work</h2>
					<div class="portfolio-landing">
						
						<!-- PORTFOLIO CATEGORY FILTER -->
						<ul class="nav nav-pills nav-justified">
							<li class="filter" data-filter="all">All</li>
							<li class="filter" data-filter="web_design">Web Design</li>
							<li class="filter" data-filter="ui_design">UI Design</li>
							<li class="filter" data-filter="logo_design">Logo Design</li>
							<li class="filter" data-filter="photography">Photography</li>
							<li class="filter" data-filter="psd_template">PSD Template</li>
						</ul>
						<!-- END PORTFOLIO CATEGORY FILTER -->
						
						
						<!-- PORTFOLIO GRID CONTENT -->
						<ul id="portfolio-grid">
							<li class="mix ui_design">
								<div class="des">
									<h4>Project Name</h4>
									<p>Short descriptions</p>
									<p>
										<a data-toggle="modal" data-target="#myModal"><i class="fa fa-share"></i></a>
										<a href="#fakelink"><i class="fa fa-link"></i></a>
									</p>
								</div>
								<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/image_small/image_small001.jpg" alt="Image portfolio">
							</li>
							<li class="mix logo_design">
								<div class="des">
									<h4>Project Name</h4>
									<p>Short descriptions</p>
									<p>
										<a data-toggle="modal" data-target="#myModal"><i class="fa fa-share"></i></a>
										<a href="#fakelink"><i class="fa fa-link"></i></a>
									</p>
								</div>
								<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/image_small/image_small002.jpg" alt="Image portfolio">
							</li>
							<li class="mix photography">
								<div class="des">
									<h4>Project Name</h4>
									<p>Short descriptions</p>
									<p>
										<a data-toggle="modal" data-target="#myModal"><i class="fa fa-share"></i></a>
										<a href="#fakelink"><i class="fa fa-link"></i></a>
									</p>
								</div>
								<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/image_small/image_small003.jpg" alt="Image portfolio">
							</li>
							<li class="mix ui_design">
								<div class="des">
									<h4>Project Name</h4>
									<p>Short descriptions</p>
									<p>
										<a data-toggle="modal" data-target="#myModal"><i class="fa fa-share"></i></a>
										<a href="#fakelink"><i class="fa fa-link"></i></a>
									</p>
								</div>
								<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/image_small/image_small004.jpg" alt="Image portfolio">
							</li>
							<li class="mix web_design">
								<div class="des">
									<h4>Project Name</h4>
									<p>Short descriptions</p>
									<p>
										<a data-toggle="modal" data-target="#myModal"><i class="fa fa-share"></i></a>
										<a href="#fakelink"><i class="fa fa-link"></i></a>
									</p>
								</div>
								<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/image_small/image_small005.jpg" alt="Image portfolio">
							</li>
							<li class="mix logo_design">
								<div class="des">
									<h4>Project Name</h4>
									<p>Short descriptions</p>
									<p>
										<a data-toggle="modal" data-target="#myModal"><i class="fa fa-share"></i></a>
										<a href="#fakelink"><i class="fa fa-link"></i></a>
									</p>
								</div>
								<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/image_small/image_small006.jpg" alt="Image portfolio">
							</li>
							<li class="mix psd_template">
								<div class="des">
									<h4>Project Name</h4>
									<p>Short descriptions</p>
									<p>
										<a data-toggle="modal" data-target="#myModal"><i class="fa fa-share"></i></a>
										<a href="#fakelink"><i class="fa fa-link"></i></a>
									</p>
								</div>
								<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/image_small/image_small007.jpg" alt="Image portfolio">
							</li>
							<li class="mix logo_design">
								<div class="des">
									<h4>Project Name</h4>
									<p>Short descriptions</p>
									<p>
										<a data-toggle="modal" data-target="#myModal"><i class="fa fa-share"></i></a>
										<a href="#fakelink"><i class="fa fa-link"></i></a>
									</p>
								</div>
								<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/image_small/image_small008.jpg" alt="Image portfolio">
							</li>
							<li class="mix ui_design">
								<div class="des">
									<h4>Project Name</h4>
									<p>Short descriptions</p>
									<p>
										<a data-toggle="modal" data-target="#myModal"><i class="fa fa-share"></i></a>
										<a href="#fakelink"><i class="fa fa-link"></i></a>
									</p>
								</div>
								<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/image_small/image_small009.jpg" alt="Image portfolio">
							</li>
							<li class="mix psd_template">
								<div class="des">
									<h4>Project Name</h4>
									<p>Short descriptions</p>
									<p>
										<a data-toggle="modal" data-target="#myModal"><i class="fa fa-share"></i></a>
										<a href="#fakelink"><i class="fa fa-link"></i></a>
									</p>
								</div>
								<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/image_small/image_small010.jpg" alt="Image portfolio">
							</li>
							<li class="mix web_design">
								<div class="des">
									<h4>Project Name</h4>
									<p>Short descriptions</p>
									<p>
										<a data-toggle="modal" data-target="#myModal"><i class="fa fa-share"></i></a>
										<a href="#fakelink"><i class="fa fa-link"></i></a>
									</p>
								</div>
								<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/image_small/image_small001.jpg" alt="Image portfolio">
							</li>
							<li class="mix psd_template">
								<div class="des">
									<h4>Project Name</h4>
									<p>Short descriptions</p>
									<p>
										<a data-toggle="modal" data-target="#myModal"><i class="fa fa-share"></i></a>
										<a href="#fakelink"><i class="fa fa-link"></i></a>
									</p>
								</div>
								<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/image_small/image_small002.jpg" alt="Image portfolio">
							</li>
						</ul>
						<!-- END PORTFOLIO GRID CONTENT -->
						
						
					</div>
				</div>
				
				
			</div>
		</div>
		<!-- END SECTION PORTFOLIO -->
		
		
		
		<!-- SECTION PRICING TABLE -->
		<div class="section-page-landing section-transparent" id="pricing-table">
			<div class="section-overlay">
				<div class="inner-section">
					<div class="container">
						<h2 class="text-center">Pricing Table</h2>
						
						<!-- PRICING TABLE COLUMN -->
						<div class="row">
							<div class="col-md-3 col-sm-6">
								<div class="pricing-table-landing">
									<div class="the-box-landing full">
										<div class="header">
											<h3>BRONZE</h3>
										</div>
										<div class="circle-price-wrap">
										<h2>&#36;25<small>Per-Month</small></h2>
										</div>
										<table class="table table-inner table-striped">
											<tbody>
												<tr><td><strong>250MB</strong> Storage</td></tr>
												<tr><td><strong>2.5GB</strong> Monthly Bandwidth</td></tr>
												<tr><td><strong>Free</strong> Set up</td></tr>
												<tr><td><strong>10</strong> Email Accounts</td></tr>
												<tr><td><strong>1</strong> Add ons Domain</td></tr>
											</tbody>
											<tfoot>
												<tr><td>
												<a class="btn btn-primary">Purchase</a>
												</td></tr>
											</tfoot>
										</table>
									</div>
								</div>
							</div>
							
							<div class="col-md-3 col-sm-6">
								<div class="pricing-table-landing">
									<div class="the-box-landing full">
										<div class="header">
											<h3>SILVER</h3>
										</div>
										<div class="circle-price-wrap">
										<h2>&#36;50<small>Per-Month</small></h2>
										</div>
										<table class="table table-inner table-striped">
											<tbody>
												<tr><td><strong>500MB</strong> Storage</td></tr>
												<tr><td><strong>5GB</strong> Monthly Bandwidth</td></tr>
												<tr><td><strong>Free</strong> Set up</td></tr>
												<tr><td><strong>25</strong> Email Accounts</td></tr>
												<tr><td><strong>2</strong> Add ons Domain</td></tr>
											</tbody>
											<tfoot>
												<tr><td>
												<a class="btn btn-primary">Purchase</a>
												</td></tr>
											</tfoot>
										</table>
									</div>
								</div>
							</div>
							
							<div class="col-md-3 col-sm-6">
								<div class="pricing-table-landing best-choice">
									<div class="the-box-landing full">
										<div class="header">
											<h3>GOLD</h3>
										</div>
										<div class="circle-price-wrap">
										<h2>&#36;100<small>Per-Month</small></h2>
										</div>
										<table class="table table-inner table-striped">
											<tbody>
												<tr><td><strong>1GB</strong> Storage</td></tr>
												<tr><td><strong>10GB</strong> Monthly Bandwidth</td></tr>
												<tr><td><strong>Free</strong> Set up</td></tr>
												<tr><td><strong>100</strong> Email Accounts</td></tr>
												<tr><td><strong>5</strong> Add ons Domain</td></tr>
											</tbody>
											<tfoot>
												<tr><td>
												<a class="btn btn-default btn-teplok">Purchase</a>
												</td></tr>
											</tfoot>
										</table>
									</div>
								</div>
							</div>
							
							<div class="col-md-3 col-sm-6">
								<div class="pricing-table-landing">
									<div class="the-box-landing full">
										<div class="header">
											<h3>PLATINUM</h3>
										</div>
										<div class="circle-price-wrap">
										<h2>&#36;250<small>Per-Month</small></h2>
										</div>
										<table class="table table-inner table-striped">
											<tbody>
												<tr><td><strong>3GB</strong> Storage</td></tr>
												<tr><td><strong>50GB</strong> Monthly Bandwidth</td></tr>
												<tr><td><strong>Free</strong> Set up</td></tr>
												<tr><td><strong>200</strong> Email Accounts</td></tr>
												<tr><td><strong>10</strong> Add ons Domain</td></tr>
											</tbody>
											<tfoot>
												<tr><td>
												<a class="btn btn-primary">Purchase</a>
												</td></tr>
											</tfoot>
										</table>
									</div>
								</div>
							</div>
						</div>
						<!-- END PRICING TABLE COLUMN -->
						
					</div>
				</div>
			</div>
		</div>
		
		
		
		<!-- BLOG SECTION -->
		<div class="section-page-landing" id="blog">
			<div class="inner-section">
				<div class="container">
					<h2 class="text-center">From the Blog</h2>
					
					<!-- BLOG STYLE 1 -->
					<div class="row">
						<div class="col-md-3 col-sm-6 col-xs-6">
							<div class="the-box-landing full the-box-light-grey blog-landing">
								<div class="blog-column">
									<div class="img-wrap">
										<a href="blog-detail.html">
										<div class="show-link-icon"><i class="fa fa-link"></i></div>
										<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/blog-img/image003.jpg" alt="Image blog">
										</a>
									</div>
									<div class="blog-column-des">
										<h3><a href="blog-detail.html">Duis autem vel eum iriure dolor in hendrerit in vulputate</a></h3>
										<p class="additional">By <a href="#fakelink">John Doe</a> about 12 hours ago</p>
										<a href="blog-detail.html" class="btn btn-default btn-teplok"><i class="fa fa-angle-right"></i>Read more</a>
									</div>
									
								</div>
							</div>
						</div>
						
						<div class="col-md-3 col-sm-6 col-xs-6">
							<div class="the-box-landing full the-box-light-grey blog-landing">
								<div class="blog-column">
									<div class="img-wrap">
										<a href="blog-detail.html">
										<div class="show-link-icon"><i class="fa fa-link"></i></div>
										<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/blog-img/image002.jpg" alt="Image blog">
										</a>
									</div>
									<div class="blog-column-des">
										<h3><a href="blog-detail.html">Duis autem vel eum iriure dolor in hendrerit in vulputate</a></h3>
										<p class="additional">By <a href="#fakelink">John Doe</a> about 12 hours ago</p>
										<a href="blog-detail.html" class="btn btn-default btn-teplok"><i class="fa fa-angle-right"></i>Read more</a>
									</div>
									
								</div>
							</div>
						</div>
						
						<div class="clearfix visible-xs"></div>
					
						<div class="col-md-3 col-sm-6 col-xs-6">
							<div class="the-box-landing full the-box-light-grey blog-landing">
								<div class="blog-column">
									<div class="img-wrap">
										<a href="blog-detail.html">
										<div class="show-link-icon"><i class="fa fa-link"></i></div>
										<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/blog-img/image001.jpg" alt="Image blog">
										</a>
									</div>
									<div class="blog-column-des">
										<h3><a href="blog-detail.html">Duis autem vel eum iriure dolor in hendrerit in vulputate</a></h3>
										<p class="additional">By <a href="#fakelink">John Doe</a> about 12 hours ago</p>
										<a href="blog-detail.html" class="btn btn-default btn-teplok"><i class="fa fa-angle-right"></i>Read more</a>
									</div>
									
								</div>
							</div>
						</div>
						
						<div class="col-md-3 col-sm-6 col-xs-6">
							<div class="the-box-landing full the-box-light-grey blog-landing">
								<div class="blog-column">
									<div class="img-wrap">
										<a href="blog-detail.html">
										<div class="show-link-icon"><i class="fa fa-link"></i></div>
										<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/blog-img/image003.jpg" alt="Image blog">
										</a>
									</div>
									<div class="blog-column-des">
										<h3><a href="blog-detail.html">Duis autem vel eum iriure dolor in hendrerit in vulputate</a></h3>
										<p class="additional">By <a href="#fakelink">John Doe</a> about 12 hours ago</p>
										<a href="blog-detail.html" class="btn btn-default btn-teplok"><i class="fa fa-angle-right"></i>Read more</a>
									</div>
									
								</div>
							</div>
						</div>
					</div>
					<!-- END BLOG STYLE 1 -->
					
					
					
					<h4 class="text-center">YOU CAN ALSO USE THE FOLLOWING STYLE</h4>
					
					<!-- BLOG STYLE 2 -->
					<div class="row">
						<div class="col-md-6 col-sm-12">
							<div class="the-box-landing full the-box-light-grey blog-landing border-color-left">
								<div class="blog-latest-img">
									<a href="blog-detail.html">
									<div class="show-link-icon"><i class="fa fa-link"></i></div>
									<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/blog-img/image001.jpg" alt="Image blog">
									</a>
								</div>
								<div class="blog-latest-des">
									<h3><a href="blog-detail.html">Duis autem vel eum iriure dolor in hendrerit in vulputate</a></h3>
									<p class="additional">By <a href="#fakelink">John Doe</a> about 9 hours ago</p>
									<a href="blog-detail.html" class="btn btn-default btn-teplok"><i class="fa fa-angle-right"></i>Read more</a>
								</div>
							</div>
						</div>
						<div class="col-md-6 col-sm-12">
							<div class="the-box-landing full the-box-light-grey blog-landing border-color-left">
								<div class="blog-latest-img">
									<a href="blog-detail.html">
									<div class="show-link-icon"><i class="fa fa-link"></i></div>
									<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/blog-img/image002.jpg" alt="Image blog">
									</a>
								</div>
								<div class="blog-latest-des">
									<h3><a href="blog-detail.html">Duis autem vel eum iriure dolor in hendrerit in vulputate</a></h3>
									<p class="additional">By <a href="#fakelink">John Doe</a> about 9 hours ago</p>
									<a href="blog-detail.html" class="btn btn-default btn-teplok"><i class="fa fa-angle-right"></i>Read more</a>
								</div>
							</div>
						</div>
						<div class="col-md-6 col-sm-12">
							<div class="the-box-landing full the-box-light-grey blog-landing border-color-left">
								<div class="blog-latest-img">
									<a href="blog-detail.html">
									<div class="show-link-icon"><i class="fa fa-link"></i></div>
									<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/blog-img/image003.jpg" alt="Image blog">
									</a>
								</div>
								<div class="blog-latest-des">
									<h3><a href="blog-detail.html">Duis autem vel eum iriure dolor in hendrerit in vulputate</a></h3>
									<p class="additional">By <a href="#fakelink">John Doe</a> about 9 hours ago</p>
									<a href="blog-detail.html" class="btn btn-default btn-teplok"><i class="fa fa-angle-right"></i>Read more</a>
								</div>
							</div>
						</div>
						<div class="col-md-6 col-sm-12">
							<div class="the-box-landing full the-box-light-grey blog-landing border-color-left">
								<div class="blog-latest-img">
									<a href="blog-detail.html">
									<div class="show-link-icon"><i class="fa fa-link"></i></div>
									<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/blog-img/image001.jpg" alt="Image blog">
									</a>
								</div>
								<div class="blog-latest-des">
									<h3><a href="blog-detail.html">Duis autem vel eum iriure dolor in hendrerit in vulputate</a></h3>
									<p class="additional">By <a href="#fakelink">John Doe</a> about 9 hours ago</p>
									<a href="blog-detail.html" class="btn btn-default btn-teplok"><i class="fa fa-angle-right"></i>Read more</a>
								</div>
							</div>
						</div>
					</div>
					<!-- END BLOG STYLE 2 -->
					
				</div>
			</div>
		</div>
		
		
		
		<!-- TEAM SECTION -->
		<div class="section-page-landing section-light-grey" id="team">
			<div class="inner-section">
				<div class="container">
					<h2 class="text-center">Meet Our Team</h2>
					
					<!-- TEAM COLUMN -->
					<div class="row">
						<div class="col-md-3 col-sm-6">
							<div class="the-box-landing text-center the-team-landing full">
								<div class="ava-wrap">
										<div class="see-detail"></div>
										<div class="button-link">
											<a href="#fakelink"><i class="fa fa-facebook"></i></a>
											<a href="#fakelink"><i class="fa fa-twitter"></i></a>
											<a href="#fakelink"><i class="fa fa-google-plus"></i></a>
										</div>
									<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/avatar/ava001.png" alt="Image team">
								</div>
								<div class="des">
									<h3>Ari Rusmanto</h3>
									<h5>-ART DIRECTOR-</h5>
								</div>
							</div>
						</div>
						<div class="col-md-3 col-sm-6">
							<div class="the-box-landing text-center the-team-landing full">
								<div class="ava-wrap">
										<div class="see-detail"></div>
										<div class="button-link">
											<a href="#fakelink"><i class="fa fa-facebook"></i></a>
											<a href="#fakelink"><i class="fa fa-twitter"></i></a>
											<a href="#fakelink"><i class="fa fa-google-plus"></i></a>
										</div>
									<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/avatar/ava003.png" alt="Image team">
								</div>
								<div class="des">
									<h3>Mas Bambang</h3>
									<h5>-UI DESIGNER-</h5>
								</div>
							</div>
						</div>
						
						<div class="col-md-3 col-sm-6">
							<div class="the-box-landing text-center the-team-landing full">
								<div class="ava-wrap">
										<div class="see-detail"></div>
										<div class="button-link">
											<a href="#fakelink"><i class="fa fa-facebook"></i></a>
											<a href="#fakelink"><i class="fa fa-twitter"></i></a>
											<a href="#fakelink"><i class="fa fa-google-plus"></i></a>
										</div>
									<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/avatar/ava004.png" alt="Image team">
								</div>
								<div class="des">
									<h3>John Doe</h3>
									<h5>-COPYWRITER-</h5>
								</div>
							</div>
						</div>
						<div class="col-md-3 col-sm-6">
							<div class="the-box-landing text-center the-team-landing full">
								<div class="ava-wrap">
										<div class="see-detail"></div>
										<div class="button-link">
											<a href="#fakelink"><i class="fa fa-facebook"></i></a>
											<a href="#fakelink"><i class="fa fa-twitter"></i></a>
											<a href="#fakelink"><i class="fa fa-google-plus"></i></a>
										</div>
									<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/avatar/ava002.png" alt="Image team">
								</div>
								<div class="des">
									<h3>Nduk Annisa</h3>
									<h5>-PHOTOGRAPHER-</h5>
								</div>
							</div>
						</div>
						
						<div class="clearfix visible-xs"></div>
						
						<div class="col-md-3 col-sm-6">
							<div class="the-box-landing text-center the-team-landing full">
								<div class="ava-wrap">
										<div class="see-detail"></div>
										<div class="button-link">
											<a href="#fakelink"><i class="fa fa-facebook"></i></a>
											<a href="#fakelink"><i class="fa fa-twitter"></i></a>
											<a href="#fakelink"><i class="fa fa-google-plus"></i></a>
										</div>
									<img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/img/avatar/ava006.png" alt="Image team">
								</div>
								<div class="des">
									<h3>Ebit Celenx</h3>
									<h5>-GRAPHIC DESIGNER-</h5>
								</div>
							</div>
						</div>
						
						<!-- YOU CAN USE THIS COLUMN FOR HIRING INFORMATION -->
						<div class="col-md-9 col-sm-6">
							<div class="the-box-landing full text-center the-box-transparent">
								<h2>We're hiring, join with us...</h2>
								<h4>
								Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.
								</h4>
								<button class="btn btn-default btn-teplok btn-lg btn-distance"><i class="fa fa-cloud-upload"></i> Submit your application</button>
								<p class="text-danger">*note : all in one zipped file</p>
							</div>
						</div>
					</div>
					<!-- END TEAM COLUMN -->
					
				</div>
			</div>
		</div>
		<!-- END SECTION TEAM -->
		
		
		
		<!-- SECTION CLIENTS -->
		<div class="section-page-landing section-grey" id="client">
			<div class="inner-section">
				<div class="container text-center">
					<h2 class="text-center">Our Clients</h2>
					
					<div class="clients">
						<div class="row">
							<div class="col-md-2 col-xs-6">
								<a href="#fakelink"><img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/client-logo/google-logo.png" alt="Image client"></a>
							</div>
							<div class="col-md-2 col-xs-6">
								<a href="#fakelink"><img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/client-logo/wordpress-logo.png" alt="Image client"></a>
							</div>
							<div class="col-md-2 col-xs-6">
								<a href="#fakelink"><img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/client-logo/yahoo-logo.png" alt="Image client"></a>
							</div>
							<div class="col-md-2 col-xs-6">
								<a href="#fakelink"><img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/client-logo/marlboro-logo.png" alt="Image client"></a>
							</div>
							<div class="col-md-2 col-xs-6">
								<a href="#fakelink"><img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/client-logo/microsoft-logo.png" alt="Image client"></a>
							</div>
							<div class="col-md-2 col-xs-6">
								<a href="#fakelink"><img src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/images/client-logo/nokia-logo.png" alt="Image client"></a>
							</div>
						</div>
					</div>
					
				</div>
			</div>
		</div>
		<!-- END SECTION COLUMN -->
		
		
		
		<!-- SECTION QUOTE OF THE DAY -->
		<div class="section-page-landing section-transparent" id="quote">
			<div class="section-overlay">
				<div class="inner-section">
					<div class="container text-center">
						<div class="quote">
						<h1>&#34;If you can't make it good at least make it look good&#34;</h1>
						<h3>- Bill Gates</h3>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- END SECTION QUOTE OF THE DAY -->
		
		
		
		<!-- SECTION CONTACT  -->
		<div class="section-page-landing" id="contact">
			<div class="inner-section">
				<div class="container">
					<h2 class="text-center">Get in Touch</h2>
					
					<form role="form" class="contact-form" id="ContactForm" method="post">
						<div class="row">
							<div class="col-sm-4">
							  <div class="form-group">
								<input type="text" name="YourName" class="form-control" placeholder="Your name">
							  </div>
							</div>
							<div class="col-sm-4">
							  <div class="form-group">
								<input type="email" name="YourEmail" class="form-control" placeholder="Your email">
							  </div>
							</div>
							<div class="col-sm-4">
							  <div class="form-group">
								<input type="text" name="YourWebsite" class="form-control" placeholder="Your website">
							  </div>
							</div>
						</div>
					  <div class="form-group">
						<textarea class="form-control" name="YourMessage" style="height: 200px" placeholder="Your message"></textarea>
					  </div>
						<div class="row">
							<div class="col-sm-5">
							</div>
							<div class="col-sm-2">
							  <div class="form-group">
								<h4 class="text-center" id="SimpleCaptcha"></h4>
								<input type="text" name="captcha" class="form-control" placeholder="Result">
							  </div>
							</div>
							<div class="col-sm-5">
							</div>
						</div>
						<p class="text-center">
						<button type="submit" class="btn btn-default btn-teplok"><i class="fa fa-envelope"></i>Submit</button>
						</p>
					</form>
				</div>
			</div>
		</div>
		<!-- END SECTION CONTACT -->
		
		
		<!-- FOOTER -->
		<footer>
			<div class="container">
				<div class="row text-center">
					<div class="col-sm-3">
						<h5>ABOUT US</h5>
						<p>
						Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
						<br />
						<a href="#fakelink">Read more</a>
						</p>
					</div>
					<div class="col-sm-3">
						<h5>NAV MENUS</h5>
						<ul>
							<li><a href="#fakelink">Template Features</a></li>
							<li><a href="#fakelink">Our Services</a></li>
							<li><a href="#fakelink">Our Portfolio</a></li>
							<li><a href="blog-list.html">Blog Page</a></li>
							<li><a href="#fakelink">Contact Us</a></li>
						</ul>
					</div>
					<div class="col-sm-3">
						<h5>OUR LOCATION</h5>
						<address>
						  <strong>Teplok - Responsive Landing Template</strong><br>
						  Ds. Jatirejo RT 02/21 No 25A<br>
						  Sendangadi, Mlati, Sleman<br>
						  Yogyakarta, Indonesia<br>
						  <abbr title="Phone">P:</abbr> (+6274) 123-4567
						</address>

						<address>
						  <strong>Email : </strong><br>
						  <a href="mailto:#">first.last@example.com</a>
						</address>
					</div>
					<div class="col-sm-3">
						<h5>SUBSCRIBE</h5>
						<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,</p>
						<form role="form" method="POST" class="form-subscribe">
							<div class="input-group">
							  <input type="text" class="form-control" placeholder="Email address">
							  <span class="input-group-btn">
								<button class="btn btn-default btn-teplok" type="button"><i class="fa fa-chevron-right"></i></button>
							  </span>
							</div>
						</form>
						<p>*we never send junks</p>
					</div>
				</div>
			</div>
			
			<div class="footer">
				<div class="container">
					&copy; 2014 <a href="#fakelink">Company Name</a><br />
					<a href="#fakelink">Teplok - Responsive Landing Template</a> design with love by <a href="http://isohdesign.com" target="_blank">ID Studio</a> in Yogyakarta, <abbr title="Indonesia">ID</abbr>
				</div>
			</div>
		</footer>
		<!-- END FOOTER -->
		
		
		<!-- BACK TO TOP BUTTON -->
		<div id="back-top">
			<a href="#top"><i class="fa fa-chevron-up"></i></a>
		</div>
		<!-- END BACK TO TOP -->
		
		
	</div>
	
	
	<!-- END OF PAGE -->
	
	
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/js/jquery.js"></script>
	<script src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/js/bootstrap.min.js"></script>
	<script src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/third/validator/bootstrapValidator.min.js"></script>
	<script src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/js/jquery.smooth-scroll.js"></script>
	
	<!-- REQUIRED FOR LANDING PAGE -->
	<script src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/third/hovericon/js/modernizr.custom.js"></script>
	<script src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/third/parallax/jquery.parallax-1.1.3.js"></script>
	<script src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/third/parallax/TweenMax.min.js"></script>
	<script src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/third/parallax/jquery.superscrollorama.js"></script>
	<script src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/third/mixitup/jquery.mixitup.js"></script>
	<script src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/third/vegas/jquery.vegas.min.js"></script>
	<script src="http://diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/assets/js/teplok-one-page.js"></script>
	</body>
</html>
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console