Teplok 1-pager responsive parallax

Developer
Lizz
Size
7,622 Kb
Views
46,552
  1. Teplok 1-pager responsive parallax Previews
  2. Teplok 1-pager responsive parallax HTML Codes

How do I make an teplok 1-pager responsive parallax?

Teplok - Responsive Landing Pagebootstrap 3.x and font awesome 4.xOriginal source: diliat.in/wrapbootstrap/Teplok/1.0/OnePageParallax/index.html. What is a teplok 1-pager responsive parallax? How do you make a teplok 1-pager responsive parallax? This script and codes were developed by Lizz on 18 August 2022, Thursday.

Teplok 1-pager responsive parallax Previews
IQ Test

Teplok 1-pager responsive parallax - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>teplok 1-pager responsive parallax</title>
</head>
<body> <!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:#">[email protected]</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>
</body>
</html>
Teplok 1-pager responsive parallax - Script Codes
Teplok 1-pager responsive parallax - Script Codes
Home Page Home
Developer Lizz
Username lizz
Uploaded August 18, 2022
Rating 4
Size 7,622 Kb
Views 46,552
Do you need developer help for Teplok 1-pager responsive parallax?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lizz (lizz) Script Codes
Name
Pretty nav colors
Ionic flipping flashcard fork
Bootstraptor
Tinker v1 - delete later
Ionic sharing data btw views
A Pen by lizz
Just circular bg for ionicons
Combining pricing tables
Fixed ionic bar with numbered steps
Ionicons experiments
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!