Difference between revisions of "Team:Tianjin/Community/Overview"

Line 1: Line 1:
 
{{:Team:Tianjin/Templates/MaterialTheme|}}
 
{{:Team:Tianjin/Templates/MaterialTheme|}}
  
−
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/Overview/style.css}}
+
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/css/style.css}}
−
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/Overview/font.css}}
+
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/css/bootstrap.css}}
−
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/Overview/slider.css}}
+
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/css/font.css}}
 +
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/css/animation.css}}
 +
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/css/animate.css}}
  
 
<html>
 
<html>
−
<head>
+
<head>
−
<meta charset="utf-8">
+
<meta charset="utf-8">
−
<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
<title>Worthy</title>
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
<meta name="description" content="Worthy a Bootstrap-based, Responsive HTML5 Template">
 +
<meta name="author" content="htmlcoder.me">
  
−
<title>Home</title>
+
<!-- Mobile Meta -->
 +
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  
 +
<!-- Favicon -->
 +
<link rel="shortcut icon" href="images/favicon.ico">
  
 +
  
−
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+
</head>
−
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+
−
<!--[if lt IE 9]>
+
−
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+
−
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+
−
  <![endif]-->
+
−
</head>
+
  
−
<body>
+
<body class="no-trans">
−
+
<!-- scrollToTop -->
 +
<!-- ================ -->
 +
<div class="scrollToTop"><i class="icon-up-open-big"></i></div>
  
−
<div class="container-fluid tm-section tm-section-2">
+
<!-- header start -->
−
<div class="row tm-media-row">
+
<!-- ================ -->  
−
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
+
−
<img src="img/tm-img-320x320-1.jpg" alt="Image" class="img-fluid img-circle img-thumbnail tm-media-img">
+
−
</div>
+
−
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
+
−
<div class="tm-media-text-container">
+
−
<h3 class="tm-media-title tm-gray-text">Interdum et malesuada fames</h3>
+
−
<p class="tm-media-description tm-gray-text-2">Aliquam dapibus felis fringilla ligula mittis, ut congue purus gravida. Suspendisse suscipit tellus id odio mollis, id tincidunt metus gravida. Ut at arcu in elit maximus eleifend.</p>   
+
−
</div>                   
+
−
</div>
+
−
</div>
+
−
+
−
<div class="row tm-media-row tm-flex-container-reverse">
+
 
 
−
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tm-flex-child-2">
+
<!-- header end -->
−
<img src="img/tm-img-320x320-2.jpg" alt="Image" class="img-fluid img-circle img-thumbnail tm-media-img">
+
−
</div>
+
  
−
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 tm-flex-child-1">
+
<!-- banner start -->
−
<div class="tm-media-text-container-left">
+
<!-- ================ -->
−
<h3 class="tm-media-title tm-gray-text">Interdum et malesuada fames</h3>
+
−
<p class="tm-media-description tm-gray-text-2">Aliquam dapibus felis fringilla ligula mittis, ut congue purus gravida. Suspendisse suscipit tellus id odio mollis, id tincidunt metus gravida. Ut at arcu in elit maximus eleifend.</p>   
+
−
</div>                   
+
−
</div>
+
  
 +
<!-- section start -->
 +
<!-- ================ -->
 +
<div class="section clearfix object-non-visible" data-animation-effect="fadeIn">
 +
<div class="container">
 +
                        <div></br></div><div></br></div><div></br></div>
 +
<div class="row">
 +
<div class="col-md-12">
 +
<h1 id="about" class="title text-center">About <span>Worthy</span></h1>
 +
<p class="lead text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta officia, aspernatur.</p>
 +
<div class="space"></div>
 +
<div class="row">
 +
<div class="col-md-6">
 +
<img src="https://static.igem.org/mediawiki/2016/e/e1/T--Tianjin--community-section-image-1.png" alt="desktop">
 +
<div class="space"></div>
 +
</div>
 +
<div class="col-md-6">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi adipisci illo, voluptatum ipsam fuga error commodi architecto, laudantium culpa tenetur at id, beatae placeat deserunt iure quas voluptas fugit eveniet.</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo ducimus explicabo quibusdam temporibus deserunt doloremque pariatur ea, animi a. Delectus similique atque eligendi, enim vel reiciendis deleniti neque aliquid, sit?</p>
 +
<ul class="list-unstyled">
 +
<li><i class="fa fa-caret-right pr-10 text-colored"></i> Lorem ipsum dolor sit amet</li>
 +
<li><i class="fa fa-caret-right pr-10 text-colored"></i> Reiciendis deleniti neque aliquid</li>
 +
<li><i class="fa fa-caret-right pr-10 text-colored"></i> Ipsam fuga error commodi</li>
 +
<li><i class="fa fa-caret-right pr-10 text-colored"></i> Lorem ipsum dolor sit amet</li>
 +
<li><i class="fa fa-caret-right pr-10 text-colored"></i> Dignissimos molestiae necessitatibus</li>
 +
</ul>
 +
</div>
 +
</div>
 +
<div class="space"></div>
 +
<h2>Becessitatibus quae beatae possimus ullam</h2>
 +
<div class="row">
 +
<div class="col-md-6">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi adipisci illo, voluptatum ipsam fuga error commodi architecto, laudantium culpa tenetur at id, beatae placeat deserunt iure quas voluptas fugit eveniet.</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo ducimus explicabo quibusdam temporibus deserunt doloremque pariatur ea, animi a. Delectus similique atque eligendi, enim vel reiciendis deleniti neque aliquid, sit?</p>
 +
<p>Vitae dolores quam magnam accusantium nam, voluptatibus expedita delectus, dolorum odio magni ut nemo nihil ex earum pariatur molestias velit eveniet, facere autem saepe aut. Ut minima itaque porro facere. Cumque vitae autem, dignissimos molestiae necessitatibus culpa aliquam deleniti soluta sunt voluptatibus tenetur, unde dolorem eligendi doloribus quibusdam facere totam. Possimus atque deserunt numquam aliquam magnam, facilis officiis illo alias ipsa voluptas laborum, praesentium eveniet nobis velit voluptatem odio eligendi, corporis et iste distinctio! Repellendus, id, ad.</p>
 +
</div>
 +
<div class="col-md-6">
 +
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 +
<div class="panel panel-default">
 +
<div class="panel-heading" role="tab" id="headingOne">
 +
<h4 class="panel-title">
 +
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
 +
Collapsible Group Item #1
 +
</a>
 +
</h4>
 +
</div>
 +
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
 +
<div class="panel-body">
 +
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher.
 +
</div>
 +
</div>
 +
</div>
 +
<div class="panel panel-default">
 +
<div class="panel-heading" role="tab" id="headingTwo">
 +
<h4 class="panel-title">
 +
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
 +
Collapsible Group Item #2
 +
</a>
 +
</h4>
 +
</div>
 +
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
 +
<div class="panel-body">
 +
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
 +
</div>
 +
</div>
 +
</div>
 +
<div class="panel panel-default">
 +
<div class="panel-heading" role="tab" id="headingThree">
 +
<h4 class="panel-title">
 +
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
 +
Collapsible Group Item #3
 +
</a>
 +
</h4>
 +
</div>
 +
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
 +
<div class="panel-body">
 +
Richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic.
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
 +
<!-- section end -->
  
−
<div class="row tm-media-row">
+
<!-- section start -->
−
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
+
<!-- ================ -->
−
<img src="img/tm-img-320x320-3.jpg" alt="Image" class="img-fluid img-circle img-thumbnail tm-media-img">
+
<div class="section translucent-bg bg-image-1 blue">
−
</div>
+
<div class="container object-non-visible" data-animation-effect="fadeIn">
−
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
+
<h1 id="services"  class="text-center title">Worthy Services</h1>
−
<div class="tm-media-text-container">
+
<div class="space"></div>
−
<h3 class="tm-media-title tm-gray-text">Interdum et malesuada fames</h3>
+
<div class="row">
−
<p class="tm-media-description tm-gray-text-2">Aliquam dapibus felis fringilla ligula mittis, ut congue purus gravida. Suspendisse suscipit tellus id odio mollis, id tincidunt metus gravida. Ut at arcu in elit maximus eleifend.</p>  
+
<div class="col-sm-6">
−
</div>                  
+
<div class="media">
 +
<div class="media-body text-right">
 +
<h4 class="media-heading">Service 1</h4>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.</p>
 +
</div>
 +
<div class="media-right">
 +
<i class="fa fa-cog"></i>
 +
</div>
 +
</div>
 +
<div class="media">
 +
<div class="media-body text-right">
 +
<h4 class="media-heading">Service 2</h4>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.</p>
 +
</div>
 +
<div class="media-right">
 +
<i class="fa fa-check"></i>
 +
</div>
 +
</div>
 +
<div class="media">
 +
<div class="media-body text-right">
 +
<h4 class="media-heading">Service 3</h4>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.</p>
 +
</div>
 +
<div class="media-right">
 +
<i class="fa fa-desktop"></i>
 +
</div>
 +
</div>
 +
<div class="media">
 +
<div class="media-body text-right">
 +
<h4 class="media-heading">Service 4</h4>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.</p>
 +
</div>
 +
<div class="media-right">
 +
<i class="fa fa-users"></i>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="space visible-xs"></div>
 +
<div class="col-sm-6">
 +
<div class="media">
 +
<div class="media-left">
 +
<i class="fa fa-leaf"></i>
 +
</div>
 +
<div class="media-body">
 +
<h4 class="media-heading">Service 5</h4>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.</p>
 +
</div>
 +
</div>
 +
<div class="media">
 +
<div class="media-left">
 +
<i class="fa fa-area-chart"></i>
 +
</div>
 +
<div class="media-body">
 +
<h4 class="media-heading">Service 6</h4>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.</p>
 +
</div>
 +
</div>
 +
<div class="media">
 +
<div class="media-left">
 +
<i class="fa fa-child"></i>
 +
</div>
 +
<div class="media-body">
 +
<h4 class="media-heading">Service 7</h4>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.</p>
 +
</div>
 +
</div>
 +
<div class="media">
 +
<div class="media-left">
 +
<i class="fa fa-codepen"></i>
 +
</div>
 +
<div class="media-body">
 +
<h4 class="media-heading">Service 8</h4>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
</div>
+
<!-- section end -->
−
+
 
−
<section class="tm-section tm-section-3 tm-bg-purple">
+
<!-- section start -->
−
<div class="container-fluid tm-section-3-inner">
+
<!-- ================ -->
−
<div class="row center-block text-xs-center tm-section-3-header">
+
<div class="default-bg space blue">
−
<div class="col-xs-12">
+
<div class="container">
−
<h2 class="tm-text-white tm-section-3-title">Choose your plan</h2>
+
<div class="row">
−
<p class="tm-text-white tm-section-3-description">Curabitur porta scelerisque justo, ut ultrices lacus auctor eget. Proin volutpat eu mi nec consequat. Integer porta tristique quam.</p>    
+
<div class="col-md-8 col-md-offset-2">
 +
<h1 class="text-center">Let's Work Together!</h1>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
<div class="row">                  
+
</div>
−
+
<!-- section end -->
−
<div class="tm-plan-boxes-container">
+
−
+
−
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-table-col">
+
−
+
−
<table class="tm-plan">
+
−
<thead>
+
−
<tr>
+
−
<th class="text-xs-center tm-plan-table-header">Silver Plan</th>
+
−
</tr>
+
−
</thead>
+
−
<tbody class="tm-bg-light-purple">
+
−
<tr class="tm-plan-table-row"><td class="tm-plan-table-cell">Sed porttitor lobortis</td></tr>
+
−
<tr class="tm-plan-table-row"><td class="tm-plan-table-cell">10 sit amet luctus sapien</td></tr>
+
−
<tr class="tm-plan-table-row"><td class="tm-plan-table-cell">15 eget sagittis</td></tr>
+
−
<tr class="tm-plan-table-row"><td class="tm-plan-table-cell">20 aliquam eros nec tortor</td></tr>
+
−
<tr class="tm-plan-table-row"><td class="tm-plan-table-cell">30 vel suscipit turpis</td></tr>                                   
+
−
</tbody>
+
−
<tfoot>
+
−
<tr>
+
−
<td class="text-xs-center">
+
−
<a href="#" class="tm-plan-link tm-plan-link-purple">Sign up</a>
+
−
</td>
+
−
</tr>
+
−
</tfoot>
+
−
</table>
+
  
−
</div>
+
<!-- section start -->
 +
<!-- ================ -->
 +
<div class="section">
 +
<div class="container">
 +
<h1 class="text-center title" id="portfolio">Portfolio</h1>
 +
<div class="separator"></div>
 +
<p class="lead text-center">Lorem ipsum dolor sit amet laudantium molestias similique.<br> Quisquam incidunt ut laboriosam.</p>
 +
<br>
 +
<div class="row object-non-visible" data-animation-effect="fadeIn">
 +
<div class="col-md-12">
  
−
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-table-col">
+
<!-- isotope filters start -->
−
+
<div class="filters text-center">
−
<table class="tm-plan">
+
<ul class="nav nav-pills">
−
<thead>
+
<li class="active"><a href="#" data-filter="*">All</a></li>
−
<tr>
+
<li><a href="#" data-filter=".web-design">Web design</a></li>
−
<th class="text-xs-center tm-plan-table-header">Titanium Plan</th>
+
<li><a href="#" data-filter=".app-development">App development</a></li>
−
</tr>
+
<li><a href="#" data-filter=".site-building">Site building</a></li>
−
</thead>
+
</ul>
−
<tbody class="tm-bg-light-green">
+
</div>
−
<tr class="tm-plan-table-row"><td class="tm-plan-table-cell">Sed porttitor lobortis</td></tr>
+
<!-- isotope filters end -->
−
<tr class="tm-plan-table-row"><td class="tm-plan-table-cell">20 sit amet luctus sapien</td></tr>
+
−
<tr class="tm-plan-table-row"><td class="tm-plan-table-cell">25 eget sagittis</td></tr>
+
−
<tr class="tm-plan-table-row"><td class="tm-plan-table-cell">35 aliquam eros nec tortor</td></tr>
+
−
<tr class="tm-plan-table-row"><td class="tm-plan-table-cell">45 vel suscipit turpis</td></tr>                                   
+
−
</tbody>
+
−
<tfoot>
+
−
<tr>
+
−
<td class="text-xs-center">
+
−
<a href="#" class="tm-plan-link tm-plan-link-green">Sign up</a>
+
−
</td>
+
−
</tr>
+
−
</tfoot>
+
−
</table>  
+
  
−
</div>
+
<!-- portfolio items start -->
 +
<div class="isotope-container row grid-space-20">
 +
<div class="col-sm-6 col-md-3 isotope-item web-design">
 +
<div class="image-box">
 +
<div class="overlay-container">
 +
<img src="https://static.igem.org/mediawiki/2016/1/1e/TeamTianjin_BG_Test.jpg" alt="">
 +
<a class="overlay" data-toggle="modal" data-target="#project-1">
 +
<i class="fa fa-search-plus"></i>
 +
<span>Web Design</span>
 +
</a>
 +
</div>
 +
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-1">Project Title</a>
 +
</div>
 +
<!-- Modal -->
 +
<div class="modal fade" id="project-1" tabindex="-1" role="dialog" aria-labelledby="project-1-label" aria-hidden="true">
 +
<div class="modal-dialog modal-lg">
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 +
<h4 class="modal-title" id="project-1-label">Project Title</h4>
 +
</div>
 +
<div class="modal-body">
 +
<h3>Project Description</h3>
 +
<div class="row">
 +
<div class="col-md-6">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
 +
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
 +
</div>
 +
<div class="col-md-6">
 +
<img src="images/portfolio-1.jpg" alt="">
 +
</div>
 +
</div>
 +
</div>
 +
<div class="modal-footer">
 +
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- Modal end -->
 +
</div>
  
−
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-table-col">
+
<div class="col-sm-6 col-md-3 isotope-item app-development">
 +
<div class="image-box">
 +
<div class="overlay-container">
 +
<img src="images/portfolio-2.jpg" alt="">
 +
<a class="overlay" data-toggle="modal" data-target="#project-2">
 +
<i class="fa fa-search-plus"></i>
 +
<span>App Development</span>
 +
</a>
 +
</div>
 +
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-2">Project Title</a>
 +
</div>
 +
<!-- Modal -->
 +
<div class="modal fade" id="project-2" tabindex="-1" role="dialog" aria-labelledby="project-2-label" aria-hidden="true">
 +
<div class="modal-dialog modal-lg">
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 +
<h4 class="modal-title" id="project-2-label">Project Title</h4>
 +
</div>
 +
<div class="modal-body">
 +
<h3>Project Description</h3>
 +
<div class="row">
 +
<div class="col-md-6">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
 +
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
 +
</div>
 +
<div class="col-md-6">
 +
<img src="images/portfolio-2.jpg" alt="">
 +
</div>
 +
</div>
 +
</div>
 +
<div class="modal-footer">
 +
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- Modal end -->
 +
</div>
 +
 +
<div class="col-sm-6 col-md-3 isotope-item web-design">
 +
<div class="image-box">
 +
<div class="overlay-container">
 +
<img src="images/portfolio-3.jpg" alt="">
 +
<a class="overlay" data-toggle="modal" data-target="#project-3">
 +
<i class="fa fa-search-plus"></i>
 +
<span>Web Design</span>
 +
</a>
 +
</div>
 +
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-3">Project Title</a>
 +
</div>
 +
<!-- Modal -->
 +
<div class="modal fade" id="project-3" tabindex="-1" role="dialog" aria-labelledby="project-3-label" aria-hidden="true">
 +
<div class="modal-dialog modal-lg">
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 +
<h4 class="modal-title" id="project-3-label">Project Title</h4>
 +
</div>
 +
<div class="modal-body">
 +
<h3>Project Description</h3>
 +
<div class="row">
 +
<div class="col-md-6">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
 +
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
 +
</div>
 +
<div class="col-md-6">
 +
<img src="images/portfolio-3.jpg" alt="">
 +
</div>
 +
</div>
 +
</div>
 +
<div class="modal-footer">
 +
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- Modal end -->
 +
</div>
 +
 +
<div class="col-sm-6 col-md-3 isotope-item site-building">
 +
<div class="image-box">
 +
<div class="overlay-container">
 +
<img src="images/portfolio-4.jpg" alt="">
 +
<a class="overlay" data-toggle="modal" data-target="#project-4">
 +
<i class="fa fa-search-plus"></i>
 +
<span>Site Building</span>
 +
</a>
 +
</div>
 +
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-4">Project Title</a>
 +
</div>
 +
<!-- Modal -->
 +
<div class="modal fade" id="project-4" tabindex="-1" role="dialog" aria-labelledby="project-4-label" aria-hidden="true">
 +
<div class="modal-dialog modal-lg">
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 +
<h4 class="modal-title" id="project-4-label">Project Title</h4>
 +
</div>
 +
<div class="modal-body">
 +
<h3>Project Description</h3>
 +
<div class="row">
 +
<div class="col-md-6">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
 +
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
 +
</div>
 +
<div class="col-md-6">
 +
<img src="images/portfolio-4.jpg" alt="">
 +
</div>
 +
</div>
 +
</div>
 +
<div class="modal-footer">
 +
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- Modal end -->
 +
</div>
 +
 +
<div class="col-sm-6 col-md-3 isotope-item app-development">
 +
<div class="image-box">
 +
<div class="overlay-container">
 +
<img src="images/portfolio-5.jpg" alt="">
 +
<a class="overlay" data-toggle="modal" data-target="#project-5">
 +
<i class="fa fa-search-plus"></i>
 +
<span>App Development</span>
 +
</a>
 +
</div>
 +
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-5">Project Title</a>
 +
</div>
 +
<!-- Modal -->
 +
<div class="modal fade" id="project-5" tabindex="-1" role="dialog" aria-labelledby="project-5-label" aria-hidden="true">
 +
<div class="modal-dialog modal-lg">
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 +
<h4 class="modal-title" id="project-5-label">Project Title</h4>
 +
</div>
 +
<div class="modal-body">
 +
<h3>Project Description</h3>
 +
<div class="row">
 +
<div class="col-md-6">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
 +
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
 +
</div>
 +
<div class="col-md-6">
 +
<img src="images/portfolio-5.jpg" alt="">
 +
</div>
 +
</div>
 +
</div>
 +
<div class="modal-footer">
 +
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- Modal end -->
 +
</div>
 +
 +
<div class="col-sm-6 col-md-3 isotope-item web-design">
 +
<div class="image-box">
 +
<div class="overlay-container">
 +
<img src="images/portfolio-6.jpg" alt="">
 +
<a class="overlay" data-toggle="modal" data-target="#project-6">
 +
<i class="fa fa-search-plus"></i>
 +
<span>Web Design</span>
 +
</a>
 +
</div>
 +
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-6">Project Title</a>
 +
</div>
 +
<!-- Modal -->
 +
<div class="modal fade" id="project-6" tabindex="-1" role="dialog" aria-labelledby="project-6-label" aria-hidden="true">
 +
<div class="modal-dialog modal-lg">
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 +
<h4 class="modal-title" id="project-6-label">Project Title</h4>
 +
</div>
 +
<div class="modal-body">
 +
<h3>Project Description</h3>
 +
<div class="row">
 +
<div class="col-md-6">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
 +
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
 +
</div>
 +
<div class="col-md-6">
 +
<img src="images/portfolio-6.jpg" alt="">
 +
</div>
 +
</div>
 +
</div>
 +
<div class="modal-footer">
 +
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- Modal end -->
 +
</div>
 +
 +
<div class="col-sm-6 col-md-3 isotope-item site-building">
 +
<div class="image-box">
 +
<div class="overlay-container">
 +
<img src="images/portfolio-7.jpg" alt="">
 +
<a class="overlay" data-toggle="modal" data-target="#project-7">
 +
<i class="fa fa-search-plus"></i>
 +
<span>Site Building</span>
 +
</a>
 +
</div>
 +
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-7">Project Title</a>
 +
</div>
 +
<!-- Modal -->
 +
<div class="modal fade" id="project-7" tabindex="-1" role="dialog" aria-labelledby="project-7-label" aria-hidden="true">
 +
<div class="modal-dialog modal-lg">
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 +
<h4 class="modal-title" id="project-7-label">Project Title</h4>
 +
</div>
 +
<div class="modal-body">
 +
<h3>Project Description</h3>
 +
<div class="row">
 +
<div class="col-md-6">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
 +
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
 +
</div>
 +
<div class="col-md-6">
 +
<img src="images/portfolio-7.jpg" alt="">
 +
</div>
 +
</div>
 +
</div>
 +
<div class="modal-footer">
 +
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- Modal end -->
 +
</div>
 +
 +
<div class="col-sm-6 col-md-3 isotope-item web-design">
 +
<div class="image-box">
 +
<div class="overlay-container">
 +
<img src="images/portfolio-8.jpg" alt="">
 +
<a class="overlay" data-toggle="modal" data-target="#project-8">
 +
<i class="fa fa-search-plus"></i>
 +
<span>Web Design</span>
 +
</a>
 +
</div>
 +
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-8">Project Title</a>
 +
</div>
 +
<!-- Modal -->
 +
<div class="modal fade" id="project-8" tabindex="-1" role="dialog" aria-labelledby="project-8-label" aria-hidden="true">
 +
<div class="modal-dialog modal-lg">
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 +
<h4 class="modal-title" id="project-8-label">Project Title</h4>
 +
</div>
 +
<div class="modal-body">
 +
<h3>Project Description</h3>
 +
<div class="row">
 +
<div class="col-md-6">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
 +
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
 +
</div>
 +
<div class="col-md-6">
 +
<img src="images/portfolio-8.jpg" alt="">
 +
</div>
 +
</div>
 +
</div>
 +
<div class="modal-footer">
 +
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- Modal end -->
 +
</div>
  
−
<table class="tm-plan">
+
<div class="col-sm-6 col-md-3 isotope-item web-design">
−
<thead>
+
<div class="image-box">
−
<tr>
+
<div class="overlay-container">
−
<th class="text-xs-center tm-plan-table-header">Platinum Plan</th>
+
<img src="images/portfolio-9.jpg" alt="">
−
</tr>
+
<a class="overlay" data-toggle="modal" data-target="#project-9">
−
</thead>
+
<i class="fa fa-search-plus"></i>
−
<tbody class="tm-bg-light-orange">
+
<span>Web Design</span>
−
<tr class="tm-plan-table-row"><td class="tm-plan-table-cell">Sed porttitor lobortis</td></tr>
+
</a>
−
<tr class="tm-plan-table-row"><td class="tm-plan-table-cell">30 sit amet luctus sapien</td></tr>
+
</div>
−
<tr class="tm-plan-table-row"><td class="tm-plan-table-cell">40 eget sagittis</td></tr>
+
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-9">Project Title</a>
−
<tr class="tm-plan-table-row"><td class="tm-plan-table-cell">50 aliquam eros nec tortor</td></tr>
+
</div>
−
<tr class="tm-plan-table-row"><td class="tm-plan-table-cell">60 vel suscipit turpis</td></tr>                                  
+
<!-- Modal -->
−
</tbody>
+
<div class="modal fade" id="project-9" tabindex="-1" role="dialog" aria-labelledby="project-9-label" aria-hidden="true">
−
<tfoot>
+
<div class="modal-dialog modal-lg">
−
<tr>
+
<div class="modal-content">
−
<td class="text-xs-center">
+
<div class="modal-header">
−
<a href="#" class="tm-plan-link tm-plan-link-orange">Sign up</a>
+
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
−
</td>
+
<h4 class="modal-title" id="project-9-label">Project Title</h4>
−
</tr>
+
</div>
−
</tfoot>
+
<div class="modal-body">
−
</table>  
+
<h3>Project Description</h3>
 +
<div class="row">
 +
<div class="col-md-6">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
 +
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
 +
</div>
 +
<div class="col-md-6">
 +
<img src="images/portfolio-9.jpg" alt="">
 +
</div>
 +
</div>
 +
</div>
 +
<div class="modal-footer">
 +
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- Modal end -->
 +
</div>
  
−
</div>
+
<div class="col-sm-6 col-md-3 isotope-item site-building">
−
 
+
<div class="image-box">
−
</div> <!-- tm-plan-boxes-container -->
+
<div class="overlay-container">
−
+
<img src="images/portfolio-10.jpg" alt="">
−
</div>
+
<a class="overlay" data-toggle="modal" data-target="#project-10">
−
</div>           
+
<i class="fa fa-search-plus"></i>
−
</section>
+
<span>Site Building</span>
−
 
+
</a>
−
<section class="center-block tm-section tm-section-4">
+
−
<div class="container-fluid tm-section-3-inner">
+
−
<div class="row center-block text-xs-center tm-section-3-header">
+
−
<div class="col-xs-12">
+
−
<h2 class="tm-section-3-title">Testimonials</h2>
+
−
<p class="tm-section-3-description">Curabitur porta scelerisque justo, ut ultrices lacus auctor eget. Proin volutpat eu mi nec consequat. Integer porta tristique quam.</p>     
+
−
</div>
+
−
</div>
+
−
<div class="row">
+
−
<div class="col-xs-12">
+
−
<div id="tmCarousel" class="carousel slide tm-carousel" data-ride="carousel">
+
−
<!--
+
−
Remove data-interval="false" to auto play
+
−
Add data-interval="false" to disable auto play
+
−
-->
+
−
 
+
−
<ol class="carousel-indicators">
+
−
<li data-target="#tmCarousel" data-slide-to="0" class="active"></li>
+
−
<li data-target="#tmCarousel" data-slide-to="1" class=""></li>
+
−
<li data-target="#tmCarousel" data-slide-to="2" class=""></li>
+
−
</ol>
+
−
 
+
−
<div class="carousel-inner" role="listbox">
+
−
+
−
<div class="carousel-item active">
+
−
<div class="carousel-content">
+
−
<div>
+
−
<img src="img/tm-img-270x270-1.jpg" alt="Image" class="img-fluid img-circle img-thumbnail tm-media-img">
+
−
<p class="text-xs-center tm-carousel-item-text">Quisque quis ex sed lorem consectetur aliquet vitae in lorem. Vivamus non commodo sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat leo vestibulum vestibulum.</p>
+
 
</div>
 
</div>
−
</div>                              
+
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-10">Project Title</a>
 +
</div>
 +
<!-- Modal -->
 +
<div class="modal fade" id="project-10" tabindex="-1" role="dialog" aria-labelledby="project-10-label" aria-hidden="true">
 +
<div class="modal-dialog modal-lg">
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 +
<h4 class="modal-title" id="project-10-label">Project Title</h4>
 +
</div>
 +
<div class="modal-body">
 +
<h3>Project Description</h3>
 +
<div class="row">
 +
<div class="col-md-6">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
 +
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
 +
</div>
 +
<div class="col-md-6">
 +
<img src="images/portfolio-10.jpg" alt="">
 +
</div>
 +
</div>
 +
</div>
 +
<div class="modal-footer">
 +
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- Modal end -->
 
</div>
 
</div>
  
−
<div class="carousel-item">
+
<div class="col-sm-6 col-md-3 isotope-item web-design">
−
<div class="carousel-content">
+
<div class="image-box">
−
<div>
+
<div class="overlay-container">
−
<img src="img/tm-img-270x270-2.jpg" alt="Image" class="img-fluid img-circle img-thumbnail tm-media-img">
+
<img src="images/portfolio-11.jpg" alt="">
−
<p class="text-xs-center tm-carousel-item-text">Vivamus non commodo sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis ex sed lorem consectetur aliquet vitae in lorem. Donec consequat leo vestibulum vestibulum venenatis.</p>
+
<a class="overlay" data-toggle="modal" data-target="#project-11">
 +
<i class="fa fa-search-plus"></i>
 +
<span>Web Design</span>
 +
</a>
 +
</div>
 +
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-11">Project Title</a>
 +
</div>
 +
<!-- Modal -->
 +
<div class="modal fade" id="project-11" tabindex="-1" role="dialog" aria-labelledby="project-11-label" aria-hidden="true">
 +
<div class="modal-dialog modal-lg">
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 +
<h4 class="modal-title" id="project-11-label">Project Title</h4>
 +
</div>
 +
<div class="modal-body">
 +
<h3>Project Description</h3>
 +
<div class="row">
 +
<div class="col-md-6">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
 +
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
 +
</div>
 +
<div class="col-md-6">
 +
<img src="images/portfolio-11.jpg" alt="">
 +
</div>
 +
</div>
 +
</div>
 +
<div class="modal-footer">
 +
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
 +
</div>
 +
</div>
 
</div>
 
</div>
−
</div>                              
+
</div>
 +
<!-- Modal end -->
 
</div>
 
</div>
  
−
<div class="carousel-item">
+
<div class="col-sm-6 col-md-3 isotope-item app-development">
−
<div class="carousel-content">
+
<div class="image-box">
−
<div>
+
<div class="overlay-container">
−
<img src="img/tm-img-270x270-3.jpg" alt="Image" class="img-fluid img-circle img-thumbnail tm-media-img">
+
<img src="images/portfolio-12.jpg" alt="">
−
<p class="text-xs-center tm-carousel-item-text">Donec consequat leo vestibulum vestibulum venenatis. Quisque quis ex sed lorem consectetur aliquet vitae in lorem. Vivamus non commodo sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+
<a class="overlay" data-toggle="modal" data-target="#project-12">
 +
<i class="fa fa-search-plus"></i>
 +
<span>App Development</span>
 +
</a>
 
</div>
 
</div>
−
</div>                              
+
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-12">Project Title</a>
 +
</div>
 +
<!-- Modal -->
 +
<div class="modal fade" id="project-12" tabindex="-1" role="dialog" aria-labelledby="project-12-label" aria-hidden="true">
 +
<div class="modal-dialog modal-lg">
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 +
<h4 class="modal-title" id="project-12-label">Project Title</h4>
 +
</div>
 +
<div class="modal-body">
 +
<h3>Project Description</h3>
 +
<div class="row">
 +
<div class="col-md-6">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
 +
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
 +
</div>
 +
<div class="col-md-6">
 +
<img src="images/portfolio-12.jpg" alt="">
 +
</div>
 +
</div>
 +
</div>
 +
<div class="modal-footer">
 +
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- Modal end -->
 
</div>
 
</div>
  
 
</div>
 
</div>
−
+
<!-- portfolio items end -->
−
</div>  
+
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
</div>          
+
</div>
−
</section>
+
<!-- section end -->
  
−
<!-- Contact section -->
+
<!-- section start -->
−
+
<!-- ================ -->
 +
<div class="section translucent-bg bg-image-2 pb-clear">
 +
<div class="container object-non-visible" data-animation-effect="fadeIn">
 +
<h1 id="clients" class="title text-center">Clients</h1>
 +
<div class="space"></div>
 +
<div class="row">
 +
<div class="col-md-4">
 +
<div class="media testimonial">
 +
<div class="media-left">
 +
<img src="images/testimonial-1.png" alt="">
 +
</div>
 +
<div class="media-body">
 +
<h3 class="media-heading">You are Amazing!</h3>
 +
<blockquote>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo.</p>
 +
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 +
</blockquote>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-md-4">
 +
<div class="media testimonial">
 +
<div class="media-left">
 +
<img src="images/testimonial-2.png" alt="">
 +
</div>
 +
<div class="media-body">
 +
<h3 class="media-heading">Yeah!</h3>
 +
<blockquote>
 +
<p>Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus.</p>
 +
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 +
</blockquote>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-md-4">
 +
<div class="media testimonial">
 +
<div class="media-left">
 +
<img src="images/testimonial-3.png" alt="">
 +
</div>
 +
<div class="media-body">
 +
<h3 class="media-heading">Thank You!</h3>
 +
<blockquote>
 +
<p>Aperiam consequatur quo quis exercitationem reprehenderit suscipit iste placeat.</p>
 +
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 +
</blockquote>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="col-md-4">
 +
<div class="media testimonial">
 +
<div class="media-left">
 +
<img src="images/testimonial-2.png" alt="">
 +
</div>
 +
<div class="media-body">
 +
<h3 class="media-heading">Thank You!</h3>
 +
<blockquote>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo.</p>
 +
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 +
</blockquote>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-md-4">
 +
<div class="media testimonial">
 +
<div class="media-left">
 +
<img src="images/testimonial-3.png" alt="">
 +
</div>
 +
<div class="media-body">
 +
<h3 class="media-heading">Amazing!</h3>
 +
<blockquote>
 +
<p>Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus.</p>
 +
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 +
</blockquote>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-md-4">
 +
<div class="media testimonial">
 +
<div class="media-left">
 +
<img src="images/testimonial-1.png" alt="">
 +
</div>
 +
<div class="media-body">
 +
<h3 class="media-heading">Best!</h3>
 +
<blockquote>
 +
<p>Aperiam consequatur quo quis exercitationem reprehenderit suscipit iste placeat.</p>
 +
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 +
</blockquote>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- section start -->
 +
<!-- ================ -->
 +
<div class="translucent-bg blue">
 +
<div class="container">
 +
<div class="list-horizontal">
 +
<div class="row">
 +
<div class="col-xs-2">
 +
<div class="list-horizontal-item">
 +
<img src="https://static.igem.org/mediawiki/2016/1/1e/TeamTianjin_BG_Test.jpg" alt="client">
 +
</div>
 +
</div>
 +
<div class="col-xs-2">
 +
<div class="list-horizontal-item">
 +
<img src="images/client-2.png" alt="client">
 +
</div>
 +
</div>
 +
<div class="col-xs-2">
 +
<div class="list-horizontal-item">
 +
<img src="images/client-3.png" alt="client">
 +
</div>
 +
</div>
 +
<div class="col-xs-2">
 +
<div class="list-horizontal-item">
 +
<img src="images/client-4.png" alt="client">
 +
</div>
 +
</div>
 +
<div class="col-xs-2">
 +
<div class="list-horizontal-item">
 +
<img src="images/client-5.png" alt="client">
 +
</div>
 +
</div>
 +
<div class="col-xs-2">
 +
<div class="list-horizontal-item">
 +
<img src="images/client-6.png" alt="client">
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- section end -->
 +
</div>
 +
<!-- section end -->
  
 +
<!-- section start -->
 +
<!-- ================ -->
 +
<div class="default-bg space">
 +
<div class="container">
 +
<div class="row">
 +
<div class="col-md-8 col-md-offset-2">
 +
<h1 class="text-center">10000+ Happy Clients!</h1>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- section end -->
  
−
<script>    
+
<!-- footer start -->
−
 
+
<!-- ================ -->
−
$(document).ready(function(){
+
<footer id="footer">
  
−
/* Auto play bootstrap carousel
+
<!-- .footer start -->
−
* http://stackoverflow.com/questions/13525258/twitter-bootstrap-carousel-autoplay-on-load
+
<!-- ================ -->
−
-----------------------------------------------------------------------------------------*/               
+
−
$('.carousel').carousel({
+
<!-- .footer end -->
−
  interval: 3000
+
−
})
+
  
−
/* Enable swiping carousel for tablets and mobile
+
−
* http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/
+
−
---------------------------------------------------------------------------------*/
+
−
if($(window).width() <= 991) {
+
−
$(".carousel-inner").swipe( {
+
−
//Generic swipe handler for all directions
+
−
swipeLeft:function(event, direction, distance, duration, fingerCount) {
+
−
$(this).parent().carousel('next');
+
−
},
+
−
swipeRight: function() {
+
−
$(this).parent().carousel('prev');
+
−
},
+
−
//Default is 75px, set to 0 for demo so any distance triggers swipe
+
−
threshold:0
+
−
});
+
−
} 
+
  
−
/* Handle window resize */
+
</footer>
−
$(window).resize(function(){
+
<!-- footer end -->
−
if($(window).width() <= 991) {
+
−
$(".carousel-inner").swipe( {
+
−
//Generic swipe handler for all directions
+
−
swipeLeft:function(event, direction, distance, duration, fingerCount) {
+
−
$(this).parent().carousel('next');
+
−
},
+
−
swipeRight: function() {
+
−
$(this).parent().carousel('prev');
+
−
},
+
−
//Default is 75px, set to 0 for demo so any distance triggers swipe
+
−
threshold:0
+
−
});
+
−
}
+
−
});                           
+
−
});
+
  
−
</script>           
+
−
 
+
</body>
−
</body>
+
 
</html>
 
</html>
 +
 +
 +
 +
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/Community/js/modernir.js}}
 +
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/Community/js/isotope.js}}
 +
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/Community/js/backstretch.js}}
 +
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/Community/js/appear.js}}
 +
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/Community/js/template.js}}

Revision as of 02:25, 1 October 2016

TEAM TIANJIN

LOGO


Worthy




About Worthy

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta officia, aspernatur.

desktop

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi adipisci illo, voluptatum ipsam fuga error commodi architecto, laudantium culpa tenetur at id, beatae placeat deserunt iure quas voluptas fugit eveniet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo ducimus explicabo quibusdam temporibus deserunt doloremque pariatur ea, animi a. Delectus similique atque eligendi, enim vel reiciendis deleniti neque aliquid, sit?

  • Lorem ipsum dolor sit amet
  • Reiciendis deleniti neque aliquid
  • Ipsam fuga error commodi
  • Lorem ipsum dolor sit amet
  • Dignissimos molestiae necessitatibus

Becessitatibus quae beatae possimus ullam

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi adipisci illo, voluptatum ipsam fuga error commodi architecto, laudantium culpa tenetur at id, beatae placeat deserunt iure quas voluptas fugit eveniet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo ducimus explicabo quibusdam temporibus deserunt doloremque pariatur ea, animi a. Delectus similique atque eligendi, enim vel reiciendis deleniti neque aliquid, sit?

Vitae dolores quam magnam accusantium nam, voluptatibus expedita delectus, dolorum odio magni ut nemo nihil ex earum pariatur molestias velit eveniet, facere autem saepe aut. Ut minima itaque porro facere. Cumque vitae autem, dignissimos molestiae necessitatibus culpa aliquam deleniti soluta sunt voluptatibus tenetur, unde dolorem eligendi doloribus quibusdam facere totam. Possimus atque deserunt numquam aliquam magnam, facilis officiis illo alias ipsa voluptas laborum, praesentium eveniet nobis velit voluptatem odio eligendi, corporis et iste distinctio! Repellendus, id, ad.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic.

Worthy Services

Service 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.

Service 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.

Service 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.

Service 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.

Service 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.

Service 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.

Service 7

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.

Service 8

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.

Let's Work Together!

Portfolio

Lorem ipsum dolor sit amet laudantium molestias similique.
Quisquam incidunt ut laboriosam.


Web Design
Project Title
App Development
Project Title
Web Design
Project Title
Site Building
Project Title
App Development
Project Title
Web Design
Project Title
Site Building
Project Title
Web Design
Project Title
Web Design
Project Title
Site Building
Project Title
Web Design
Project Title
App Development
Project Title

Clients

You are Amazing!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo.

Someone famous in Source Title

Yeah!

Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus.

Someone famous in Source Title

Thank You!

Aperiam consequatur quo quis exercitationem reprehenderit suscipit iste placeat.

Someone famous in Source Title

Thank You!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo.

Someone famous in Source Title

Amazing!

Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus.

Someone famous in Source Title

Best!

Aperiam consequatur quo quis exercitationem reprehenderit suscipit iste placeat.

Someone famous in Source Title
client
client
client
client
client
client

10000+ Happy Clients!