Difference between revisions of "Team:Valencia UPV/jopegar"

(Undo revision 53301 by Jopegar (talk))
Line 1: Line 1:
−
{{:Team:Valencia_UPV/Templates:styles}}
 
−
{{:Team:Valencia_UPV/Templates:styles2}}
 
−
{{:Team:Valencia_UPV/Templates:stylesigem}}
 
−
{{:Team:Valencia_UPV/Templates:stylesLitebox}}
 
−
{{:Team:Valencia_UPV/Templates:stylesOwl}}
 
−
{{:Team:Valencia_UPV/Templates:stylesCustomCSS}}
 
−
{{:Team:Valencia_UPV/Templates:stylesCustomCSS2}}
 
−
{{:Team:Valencia_UPV/Templates:stylesIcons}}
 
−
 
 
<html lang="en">
 
<html lang="en">
 +
<head>
 +
<meta charset="utf-8" />
 +
<title>ChatterTest</title>
 +
<meta name="description" content="" />
  
−
<head>
+
<!-- mobile settings -->
−
    <meta charset="utf-8">
+
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0" />
−
    <title>Chatter Plant</title>
+
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
−
    <!-- Web Fonts -->
+
−
    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
+
−
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
+
  
−
    <!--[if lte IE 8]>
+
<!-- WEB FONTS : use %7C instead of | (pipe) -->
−
<link rel="stylesheet" type="text/css" href="https://chatterplantwiki.000webhostapp.com/css/fucking-ie-8-and-lower.css" />
+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600%7CRaleway:300,400,500,600,700%7CLato:300,400,400italic,600,700" rel="stylesheet" type="text/css" />
−
<![endif]-->
+
  
 +
<!-- CORE CSS -->
 +
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 +
 +
<!-- THEME CSS -->
 +
<link href="assets/css/essentials.css" rel="stylesheet" type="text/css" />
 +
<link href="assets/css/layout.css" rel="stylesheet" type="text/css" />
  
 +
<!-- PAGE LEVEL SCRIPTS -->
 +
<link href="assets/css/header-1.css" rel="stylesheet" type="text/css" />
 +
<link href="assets/css/color_scheme/green.css" rel="stylesheet" type="text/css" id="color_scheme" />
 +
</head>
  
−
    <!-- 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:// -->
+
AVAILABLE BODY CLASSES:
−
    <!--[if lt IE 9]>
+
−
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+
smoothscroll = create a browser smooth scroll
−
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+
enable-animation = enable WOW animations
−
        <![endif]-->
+
−
</head>
+
  
−
<body onload="init()" id="body">
+
bg-grey = grey background
 +
grain-grey = grey grain background
 +
grain-blue = blue grain background
 +
grain-green = green grain background
 +
grain-blue = blue grain background
 +
grain-orange = orange grain background
 +
grain-yellow = yellow grain background
 +
 +
boxed = boxed layout
 +
pattern1 ... patern11 = pattern background
 +
menu-vertical-hide = hidden, open on click
 +
 +
BACKGROUND IMAGE [together with .boxed class]
 +
data-background="assets/images/_smarty/boxed_background/1.jpg"
 +
-->
 +
<body class="smoothscroll enable-animation">
  
−
    <div id="preloader">
+
<!-- wrapper -->
−
        <div class="spinner">
+
<div id="wrapper">
−
            <div class="cube"></div>
+
−
            <div class="cube"></div>
+
−
            <div class="cube"></div>
+
−
            <div class="cube"></div>
+
−
            <div class="cube"></div>
+
−
            <div class="cube"></div>
+
−
            <div class="cube"></div>
+
−
            <div class="cube"></div>
+
−
            <div class="cube"></div>
+
−
        </div>
+
−
    </div>
+
−
    <!--preloader end-->
+
  
 +
<!--
 +
AVAILABLE HEADER CLASSES
  
−
    <section id="home">
+
Default nav height: 96px
−
        <div data-velocity="-.3" class="home-parallax"></div>
+
.header-md = 70px nav height
−
        <div class="home-overlay"></div>
+
.header-sm = 60px nav height
  
−
        <div class="welcome-text">
+
.b-0 = remove bottom border (only with transparent use)
−
            <div class="container">
+
.transparent = transparent header
−
                <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/8/86/ImagotipoHomeValenciaUPV.png" alt="" />
+
.translucent = translucent header
−
            </div>
+
.sticky = sticky header
−
        </div>
+
.static = static header
−
    </section>
+
.dark = dark header
−
    <!--home section end-->
+
.bottom = header on bottom
 +
 +
shadow-before-1 = shadow 1 header top
 +
shadow-after-1 = shadow 1 header bottom
 +
shadow-before-2 = shadow 2 header top
 +
shadow-after-2 = shadow 2 header bottom
 +
shadow-before-3 = shadow 3 header top
 +
shadow-after-3 = shadow 3 header bottom
  
−
    <section id="project-description">
+
.clearfix = required for mobile menu, do not remove!
−
        <div class="container">
+
−
            <div class="row">
+
−
                <div class="col-md-6 wow animated fadeInUp">
+
−
                    <h2 class="page-title" style="margin-top: 50px; margin-bottom: 30px; color:#cd545b">Project Description</h2>
+
−
                    <p align="justify" style="text-indent:30px; color:#005368">Ensuring regular access to high-quality food for everyone is one of the mainstays of society. Unfortunately, food security is constantly threatened by many unpredictable factors that involve agriculture. Controlling both development and behaviour of the plant could contribute to make crops more productive and sustainable. We, Valencia UPV team, propose <b>ChatterPlant</b>, a SynBio-based solution to communicate with plants. We designed an optogenetic circuit that works as interface between plants and humans. Bearing that in mind, we engineered <b>ChatterBox</b> that regulates precisely plant growth conditions while translating plant information into an intelligible one.</p>
+
  
−
                    <p align="justify" style="text-indent:30px; color:#005368">Plant’s communication ability relies on the plant-human <b>interface</b> comprised by our designed optogenetic circuit. This <b>modular system</b> is triggered by red/far-red light inducible switch, thus allowing users to control expression of any desired pathway easily. Since white light in aerial parts could interfere with the circuit signalling, these light stimuli would be introduced by illuminating plant’s roots. Furthermore, circuit's modularity allows to cover almost any users' necessities, personalizing the final element in the system. As a proof of concept, we resolve to regulate flowering periods in order to provide more control over crops. Thus, we intend to make a positive impact in global <b>food security</b> progress.. However, we do not only intend to give orders to plants but also to acquire relevant information from them. Therefore, we generated a second communication channel that allows plants to send us information about their current status (i.g. metabolites levels, phytohormones levels, pathogen presence…). In our project, we chose to activate the expression of a fluorescent protein when infection occurs, making it easily detectable.</p>
+
Example Usage:  class="clearfix sticky header-sm transparent b-0"
 +
-->
 +
<div id="header" class="navbar-toggleable-md sticky transparent clearfix">
  
−
                    <p align="justify" style="text-indent:30px; margin-bottom: 50px; color:#005368">&nbsp In order to achieve that control, we developed <b>ChatterBox</b> with the aim of translating our orders into light stimuli through roots and also tracking plant growth and development. Controlling external factors and regulating plant’s features allow us to increase plant versatility and adaptative capacity. Furthermore, a <b>detection system</b> is permanently checking for stress signals, so we could immediately actuate in consequence. With this project, our team intends to help in developing a <b>non-climate dependent agriculture</b>, as well as in giving farmers more <b>control</b> over their crops. Thus, we aspire to ensure food security through human-plant interaction.</p>
+
<!-- TOP NAV -->
−
                </div>
+
<header id="topNav">
 +
<div class="container">
  
−
                <div class="col-md-6 wow animated fadeInUp">
+
<!-- Mobile Menu Button -->
−
                    <center>
+
<button class="btn btn-mobile" data-toggle="collapse" data-target=".nav-main-collapse">
−
<img class="img-responsive" src="https://static.igem.org/mediawiki/2017/b/bc/IsotipoProjectDescriptionHomeValencia.png" style="margin-top: 50px; margin-bottom: 50px" alt="" />
+
<i class="fa fa-bars"></i>
−
</center>
+
</button>
 +
 
 +
<!-- Logo -->
 +
<a class="logo float-left" href="index.html">
 +
<img src="assets/images/_smarty/logo_dark.png" alt="" />
 +
</a>
 +
 
 +
<!--
 +
Top Nav
 +
 +
AVAILABLE CLASSES:
 +
submenu-dark = dark sub menu
 +
-->
 +
<div class="navbar-collapse collapse float-right nav-main-collapse">
 +
<nav class="nav-main">
 +
 
 +
<!--
 +
.nav-onepage
 +
Required for onepage navigation links
 +
 +
Add .external for an external link!
 +
-->
 +
<ul id="topMain" class="nav nav-pills nav-main nav-onepage">
 +
<li class="active"><!-- HOME -->
 +
<a href="#slider">
 +
HOME
 +
</a>
 +
</li>
 +
<li><!-- FEATURES -->
 +
<a href="#features">
 +
FEATURES
 +
</a>
 +
</li>
 +
<li><!-- PRICING -->
 +
<a href="#pricing">
 +
PRICING
 +
</a>
 +
</li>
 +
<li><!-- TESTIMONIALS -->
 +
<a href="#testimonials">
 +
TESTIMONIALS
 +
</a>
 +
</li>
 +
<li><!-- PURCHASE -->
 +
<a class="external" href="#purchase">
 +
PURCHASE
 +
</a>
 +
</li>
 +
</ul>
 +
 
 +
</nav>
 +
</div>
 +
 
 +
</div>
 +
</header>
 +
<!-- /Top Nav -->
 +
 
 +
</div>
 +
 
 +
 
 +
<!-- HOME -->
 +
<section id="slider" class="fullheight" style="background:url('demo_files/images/1200x800/36-min.jpg')">
 +
<div class="overlay dark-5"><!-- dark overlay [1 to 9 opacity] --></div>
 +
 
 +
<div class="display-table">
 +
<div class="display-table-cell vertical-align-middle">
 +
 +
<div class="container text-center">
 +
 +
<h1 class="m-0 fs-50 fw-300 wow fadeInUp" data-wow-delay="0.4s">Unlimited Easy Landing Pages</h1>
 +
<p class="lead font-lato fs-30 wow fadeInUp" data-wow-delay="0.7s">Building a Landing Page was never so Easy &amp; Interactive.</p>
 +
 +
<div class="mt-30">
 +
<a href="#" class="btn btn-3d btn-lg btn-teal"><i class="glyphicon glyphicon-th-large"></i>FREE TRIAL</a>
 +
<span class="fs-17 hidden-xs-down btn btn-lg">&nbsp; OR &nbsp;</span>
 +
<a href="#" class="btn btn-3d btn-lg btn-red"><i class="glyphicon glyphicon-user"></i>START FOR A SIBSCRIPTION</a>
 +
</div>
 +
 
 +
</div>
 +
 
 +
</div>
 
</div>
 
</div>
−
            </div>
+
</section>
−
        </div>
+
<!-- /HOME -->
−
    </section>
+
  
−
  <!--scripts and plugins -->
 
−
        <!--must need plugin jquery-->
 
−
        <script src="https://chatterplantwiki.000webhostapp.com/js/jquery.min.js"></script>       
 
−
        <!--bootstrap js plugin-->
 
−
        <script src="https://chatterplantwiki.000webhostapp.com/includes/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
 
−
<!--easying scroll effect-->
 
−
<script src="https://chatterplantwiki.000webhostapp.com/js/jquery.easing.1.3.min.js" type="text/javascript"></script>
 
−
<script src="https://chatterplantwiki.000webhostapp.com/js/jquery.sticky.js" type="text/javascript"></script>
 
−
<script src="https://chatterplantwiki.000webhostapp.com/js/jquery.nav.js" type="text/javascript"></script>
 
−
<!--owl carousel-->
 
−
<script src="https://chatterplantwiki.000webhostapp.com/includes/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
 
−
<!--wow animation-->
 
−
<script src="https://chatterplantwiki.000webhostapp.com/includes/wow-js/wow.min.js" type="text/javascript"></script>
 
−
 
−
<!--Activating WOW Animation only for modern browser-->
 
−
<!--[if !IE]><!-->
 
−
<script type="text/javascript">new WOW().init();</script>
 
−
<!--<![endif]-->
 
−
 
−
<!--Oh Yes, IE 9+ Supports animation, lets activate for IE 9+-->
 
−
<!--[if gte IE 9]>
 
−
<script type="text/javascript">new WOW().init();</script>
 
−
<![endif]-->
 
−
 
−
<!--Opacity & Other IE fix for older browser-->
 
−
<!--[if lte IE 8]>
 
−
<script type="text/javascript" src="https://chatterplantwiki.000webhostapp.com/js/ie-opacity-polyfill.js"></script>
 
−
<![endif]-->
 
  
 +
 +
 +
<!-- FEATURES -->
 +
<section id="features">
 +
<div class="container">
 +
 +
<header class="text-center mb-60">
 +
<h2>Our Features</h2>
 +
<p class="lead font-lato">Lorem ipsum dolor sit amet adipiscium elit</p>
 +
<hr />
 +
</header>
 +
 +
<!-- FEATURED BOXES 3 -->
 +
<div class="row">
 +
<div class="col-md-3 col-xs-6">
 +
<div class="text-center">
 +
<i class="ico-light ico-lg ico-rounded ico-hover et-circle-compass"></i>
 +
<h4>Pixel Perfect</h4>
 +
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
 +
</div>
 +
</div>
 +
<div class="col-md-3 col-xs-6">
 +
<div class="text-center">
 +
<i class="ico-light ico-lg ico-rounded ico-hover et-piechart"></i>
 +
<h4>Graphs</h4>
 +
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
 +
</div>
 +
</div>
 +
<div class="col-md-3 col-xs-6">
 +
<div class="text-center">
 +
<i class="ico-light ico-lg ico-rounded ico-hover et-strategy"></i>
 +
<h4>Startegy</h4>
 +
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
 +
</div>
 +
</div>
 +
<div class="col-md-3 col-xs-6">
 +
<div class="text-center">
 +
<i class="ico-light ico-lg ico-rounded ico-hover et-streetsign"></i>
 +
<h4>SEO Optimized</h4>
 +
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus. </p>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- /FEATURED BOXES 3 -->
 +
 +
<!-- FEATURED BOXES 3 -->
 +
<div class="row">
 +
<div class="col-md-3 col-xs-6">
 +
<div class="text-center">
 +
<i class="ico-light ico-lg ico-rounded ico-hover et-trophy"></i>
 +
<h4>Winners</h4>
 +
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
 +
</div>
 +
</div>
 +
<div class="col-md-3 col-xs-6">
 +
<div class="text-center">
 +
<i class="ico-light ico-lg ico-rounded ico-hover et-gears"></i>
 +
<h4>Responsive</h4>
 +
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
 +
</div>
 +
</div>
 +
<div class="col-md-3 col-xs-6">
 +
<div class="text-center">
 +
<i class="ico-light ico-lg ico-rounded ico-hover et-tools"></i>
 +
<h4>Costomizable</h4>
 +
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
 +
</div>
 +
</div>
 +
<div class="col-md-3 col-xs-6">
 +
<div class="text-center">
 +
<i class="ico-light ico-lg ico-rounded ico-hover et-layers"></i>
 +
<h4>Easy to Modify</h4>
 +
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus. </p>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- /FEATURED BOXES 3 -->
 +
 +
</div>
 +
</section>
 +
<!-- /FEATURES -->
 +
 +
 +
 +
 +
<!-- PRICING -->
 +
<section id="pricing">
 +
<div class="container">
 +
 +
<header class="text-center mb-60">
 +
<h2>Our Pricing</h2>
 +
<p class="lead font-lato">Lorem ipsum dolor sit amet adipiscium elit</p>
 +
<hr />
 +
</header>
 +
 +
<div class="row">
 +
 +
<div class="col-md-3 col-sm-3">
 +
 +
<div class="price-clean">                               
 +
<h4>
 +
<sup>$</sup>15<em>/month</em>
 +
</h4>
 +
<h5> Starter </h5>
 +
<hr />
 +
<p>For individuals looking for something simple to get started.</p>
 +
<hr />
 +
<a href="#" class="btn btn-3d btn-teal">Learn More</a>
 +
</div>
 +
 +
</div>
 +
 +
<div class="col-md-3 col-sm-3">
 +
 +
<div class="price-clean">                               
 +
<h4>
 +
<sup>$</sup>25<em>/month</em>
 +
</h4>
 +
<h5> BUSINESS </h5>
 +
<hr />
 +
<p>For individuals looking for something simple to get started.</p>
 +
<hr />
 +
<a href="#" class="btn btn-3d btn-teal">Learn More</a>
 +
</div>
 +
 +
</div>
 +
 +
<div class="col-md-3 col-sm-3">
 +
 +
<div class="price-clean price-clean-popular">
 +
<div class="ribbon">
 +
<div class="ribbon-inner">POPULAR</div>
 +
</div>
 +
 +
<h4>
 +
<sup>$</sup>35<em>/month</em>
 +
</h4>
 +
<h5> DEVELOPER </h5>
 +
<hr />
 +
<p>For individuals looking for something simple to get started.</p>
 +
<hr />
 +
<a href="#" class="btn btn-3d btn-primary">Learn More</a>
 +
</div>
 +
 +
</div>
 +
 +
<div class="col-md-3 col-sm-3">
 +
 +
<div class="price-clean">                               
 +
<h4>
 +
<sup>$</sup>50<em>/month</em>
 +
</h4>
 +
<h5> VIP </h5>
 +
<hr />
 +
<p>For individuals looking for something simple to get started.</p>
 +
<hr />
 +
<a href="#" class="btn btn-3d btn-teal">Learn More</a>
 +
</div>
 +
 +
</div>
 +
 +
</div>
 +
 +
</div>
 +
</section>
 +
<!-- /PRICING -->
 +
 +
 +
 +
<!-- TESTIMONIALS -->
 +
<section id="testimonials" class="alternate">
 +
<div class="container">
 +
 +
<header class="text-center mb-60">
 +
<h2>Testimonials</h2>
 +
<p class="lead font-lato">Lorem ipsum dolor sit amet adipiscium elit</p>
 +
<hr />
 +
</header>
 +
 +
<!--
 +
Note: remove class="rounded" from the img for squared image!
 +
-->
 +
<div class="row mb-60">
 +
<div class="col-md-4">
 +
<div class="testimonial testimonial-bordered p-15">
 +
<figure class="float-left">
 +
<img class="rounded" src="demo_files/images/people/300x300/2-min.jpg" alt="" />
 +
</figure>
 +
<div class="testimonial-content">
 +
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero!</p>
 +
<cite>
 +
Felicia Doe
 +
<span>Company Ltd.</span>
 +
</cite>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-md-4">
 +
<div class="testimonial testimonial-bordered p-15">
 +
<figure class="float-left">
 +
<img class="rounded" src="demo_files/images/people/300x300/1-min.jpg" alt="" />
 +
</figure>
 +
<div class="testimonial-content">
 +
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero!</p>
 +
<cite>
 +
Joana Doe
 +
<span>Company Ltd.</span>
 +
</cite>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-md-4">
 +
<div class="testimonial testimonial-bordered p-15">
 +
<figure class="float-left">
 +
<img class="rounded" src="demo_files/images/people/300x300/6-min.jpg" alt="" />
 +
</figure>
 +
<div class="testimonial-content">
 +
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero!</p>
 +
<cite>
 +
Melissa Doe
 +
<span>Company Ltd.</span>
 +
</cite>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<!--
 +
Note: remove class="rounded" from the img for squared image!
 +
-->
 +
<ul class="row clearfix testimonial-dotted list-unstyled">
 +
<li class="col-md-4">
 +
<div class="testimonial">
 +
<figure class="float-left">
 +
<img class="rounded" src="demo_files/images/people/300x300/2-min.jpg" alt="" />
 +
</figure>
 +
<div class="testimonial-content">
 +
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
 +
<cite>
 +
Joana Doe
 +
<span>Company Ltd.</span>
 +
</cite>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="col-md-4">
 +
<div class="testimonial">
 +
<figure class="float-left">
 +
<img class="rounded" src="demo_files/images/people/300x300/6-min.jpg" alt="" />
 +
</figure>
 +
<div class="testimonial-content">
 +
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
 +
<cite>
 +
Melissa Doe
 +
<span>Company Ltd.</span>
 +
</cite>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="col-md-4">
 +
<div class="testimonial">
 +
<figure class="float-left">
 +
<img class="rounded" src="demo_files/images/people/300x300/7-min.jpg" alt="" />
 +
</figure>
 +
<div class="testimonial-content">
 +
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
 +
<cite>
 +
Stephany Doe
 +
<span>Company Ltd.</span>
 +
</cite>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="col-md-4">
 +
<div class="testimonial">
 +
<figure class="float-left">
 +
<img class="rounded" src="demo_files/images/people/300x300/8-min.jpg" alt="" />
 +
</figure>
 +
<div class="testimonial-content">
 +
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
 +
<cite>
 +
Pamela Doe
 +
<span>Company Ltd.</span>
 +
</cite>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="col-md-4">
 +
<div class="testimonial">
 +
<figure class="float-left">
 +
<img class="rounded" src="demo_files/images/people/300x300/11-min.jpg" alt="" />
 +
</figure>
 +
<div class="testimonial-content">
 +
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
 +
<cite>
 +
Simina Doe
 +
<span>Company Ltd.</span>
 +
</cite>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="col-md-4">
 +
<div class="testimonial">
 +
<figure class="float-left">
 +
<img class="rounded" src="demo_files/images/people/300x300/12-min.jpg" alt="" />
 +
</figure>
 +
<div class="testimonial-content">
 +
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
 +
<cite>
 +
Mihaela Doe
 +
<span>Company Ltd.</span>
 +
</cite>
 +
</div>
 +
</div>
 +
</li>
 +
</ul>
 +
 +
</div>
 +
</section>
 +
<!-- /TESTIMONIALS -->
 +
 +
 +
 +
 +
<!-- -->
 +
<section>
 +
<div class="container">
 +
 +
<div class="row">
 +
 +
<div class="col-lg-4">
 +
 +
<div class="heading-title heading-border-bottom">
 +
<h3>Smarty Vision</h3>
 +
</div>
 +
 +
<div class="toggle toggle-transparent-body toggle-accordion">
 +
 +
<div class="toggle active">
 +
<label>Who we are?</label>
 +
<div class="toggle-content">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
 +
</div>
 +
</div>
 +
 +
<div class="toggle">
 +
<label>Our long-term vison</label>
 +
<div class="toggle-content">
 +
<p>Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.</p>
 +
</div>
 +
</div>
 +
 +
<div class="toggle">
 +
<label>How can we help you?</label>
 +
<div class="toggle-content">
 +
<p>Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
 +
</div>
 +
</div>
 +
 +
</div>
 +
 +
</div>
 +
 +
<div class="col-lg-4">
 +
 +
<div class="heading-title heading-border-bottom">
 +
<h3>Smarty Skills</h3>
 +
</div>
 +
 +
<div class="progress progress-lg"><!-- progress bar -->
 +
<div class="progress-bar progress-bar-warning progress-bar-striped active text-left" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%; min-width: 2em;">
 +
<span>WEB DESIGN 90%</span>
 +
</div>
 +
</div><!-- /progress bar -->
 +
 +
<div class="progress progress-lg"><!-- progress bar -->
 +
<div class="progress-bar progress-bar-danger progress-bar-striped active text-left" role="progressbar" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100" style="width: 98%; min-width: 2em;">
 +
<span>HTML/CSS 98%</span>
 +
</div>
 +
</div><!-- /progress bar -->
 +
 +
<div class="progress progress-lg"><!-- progress bar -->
 +
<div class="progress-bar progress-bar-success progress-bar-striped active text-left" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; min-width: 2em;">
 +
<span>JAVASCRIPT 60%</span>
 +
</div>
 +
</div><!-- /progress bar -->
 +
 +
<div class="progress progress-lg"><!-- progress bar -->
 +
<div class="progress-bar progress-bar-info progress-bar-striped active text-left" role="progressbar" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100" style="width: 88%; min-width: 2em;">
 +
<span>PHP/MYSQL 88%</span>
 +
</div>
 +
</div><!-- /progress bar -->
 +
 +
</div>
 +
 +
<div class="col-lg-4">
 +
 +
<div class="heading-title heading-border-bottom">
 +
<h3>Smarty Special</h3>
 +
</div>
 +
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis aliquam id pariatur accusantium perspiciatis deserunt officiis similique nihil dolor blanditiis dignissimos iure praesentium vero suscipit doloribus aperiam unde hic non sint neque molestiae consectetur voluptatum beatae ratione corporis.</p>
 +
 +
<a href="#" class="btn btn-default btn-block btn-lg">Join Us Now</a>
 +
 +
</div>
 +
 +
</div>
 +
 +
</div>
 +
</section>
 +
<!-- / -->
 +
 +
 +
 +
<!-- -->
 +
<section class="alternate">
 +
<div class="container">
 +
 +
<div class="text-center">
 +
<h2 class="wow fadeInUp m-0" data-wow-delay="0.3s">DOES SMARTY CONVINCED YOU?</h2>
 +
 +
<p class="lead font-lato fs-30 wow fadeInUp mb-60" data-wow-delay="0.5s">Building a Landing Page was never so Easy &amp; Interactive.</p>
 +
 +
<div class="mt-30">
 +
<a href="#" class="btn btn-3d btn-lg wow fadeInUp btn-teal" data-wow-delay="0.7"><i class="glyphicon glyphicon-th-large"></i>FREE TRIAL</a>
 +
<span class="fs-17 hidden-xs-down wow fadeInUp" data-wow-delay="1s">&nbsp; OR &nbsp;</span>
 +
<a href="#" class="btn btn-3d btn-lg wow fadeInUp btn-red" data-wow-delay="0.59"><i class="glyphicon glyphicon-user"></i>START FOR A SIBSCRIPTION</a>
 +
</div>
 +
</div>
 +
 +
</div>
 +
</section>
 +
<!-- / -->
 +
 +
 +
 +
 +
 +
<!-- FOOTER -->
 +
<footer id="footer">
 +
<div class="container">
 +
 +
<div class="row">
 +
 +
<div class="col-md-3">
 +
<!-- Footer Logo -->
 +
<img class="footer-logo" src="assets/images/_smarty/logo-footer.png" alt="" />
 +
 +
<!-- Small Description -->
 +
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
 +
 +
<!-- Contact Address -->
 +
<address>
 +
<ul class="list-unstyled">
 +
<li class="footer-sprite address">
 +
PO Box 21132<br>
 +
Here Weare St, Melbourne<br>
 +
Vivas 2355 Australia<br>
 +
</li>
 +
<li class="footer-sprite phone">
 +
Phone: 1-800-565-2390
 +
</li>
 +
<li class="footer-sprite email">
 +
<a href="mailto:support@yourname.com">support@yourname.com</a>
 +
</li>
 +
</ul>
 +
</address>
 +
<!-- /Contact Address -->
 +
 +
</div>
 +
 +
<div class="col-md-3">
 +
 +
<!-- Latest Blog Post -->
 +
<h4 class="letter-spacing-1">LATEST NEWS</h4>
 +
<ul class="footer-posts list-unstyled">
 +
<li>
 +
<a href="#">Donec sed odio dui. Nulla vitae elit libero, a pharetra augue</a>
 +
<small>29 June 2017</small>
 +
</li>
 +
<li>
 +
<a href="#">Nullam id dolor id nibh ultricies</a>
 +
<small>29 June 2017</small>
 +
</li>
 +
<li>
 +
<a href="#">Duis mollis, est non commodo luctus</a>
 +
<small>29 June 2017</small>
 +
</li>
 +
</ul>
 +
<!-- /Latest Blog Post -->
 +
 +
</div>
 +
 +
<div class="col-md-2">
 +
 +
<!-- Links -->
 +
<h4 class="letter-spacing-1">EXPLORE SMARTY</h4>
 +
<ul class="footer-links list-unstyled">
 +
<li><a href="#">Home</a></li>
 +
<li><a href="#">About Us</a></li>
 +
<li><a href="#">Our Services</a></li>
 +
<li><a href="#">Our Clients</a></li>
 +
<li><a href="#">Our Pricing</a></li>
 +
<li><a href="#">Smarty Tour</a></li>
 +
<li><a href="#">Contact Us</a></li>
 +
</ul>
 +
<!-- /Links -->
 +
 +
</div>
 +
 +
<div class="col-md-4">
 +
 +
<!-- Newsletter Form -->
 +
<h4 class="letter-spacing-1">KEEP IN TOUCH</h4>
 +
<p>Subscribe to Our Newsletter to get Important News &amp; Offers</p>
 +
 +
<form class="validate" action="php/newsletter.php" method="post" data-success="Subscribed! Thank you!" data-toastr-position="bottom-right">
 +
<div class="input-group">
 +
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
 +
<input type="email" id="email" name="email" class="form-control required" placeholder="Enter your Email">
 +
<span class="input-group-btn">
 +
<button class="btn btn-success" type="submit">Subscribe</button>
 +
</span>
 +
</div>
 +
</form>
 +
<!-- /Newsletter Form -->
 +
 +
<!-- Social Icons -->
 +
<div class="mt-20">
 +
<a href="#" class="social-icon social-icon-border social-facebook float-left" data-toggle="tooltip" data-placement="top" title="Facebook">
 +
 +
<i class="icon-facebook"></i>
 +
<i class="icon-facebook"></i>
 +
</a>
 +
 +
<a href="#" class="social-icon social-icon-border social-twitter float-left" data-toggle="tooltip" data-placement="top" title="Twitter">
 +
<i class="icon-twitter"></i>
 +
<i class="icon-twitter"></i>
 +
</a>
 +
 +
<a href="#" class="social-icon social-icon-border social-gplus float-left" data-toggle="tooltip" data-placement="top" title="Google plus">
 +
<i class="icon-gplus"></i>
 +
<i class="icon-gplus"></i>
 +
</a>
 +
 +
<a href="#" class="social-icon social-icon-border social-linkedin float-left" data-toggle="tooltip" data-placement="top" title="Linkedin">
 +
<i class="icon-linkedin"></i>
 +
<i class="icon-linkedin"></i>
 +
</a>
 +
 +
<a href="#" class="social-icon social-icon-border social-rss float-left" data-toggle="tooltip" data-placement="top" title="Rss">
 +
<i class="icon-rss"></i>
 +
<i class="icon-rss"></i>
 +
</a>
 +
 +
</div>
 +
<!-- /Social Icons -->
 +
 +
</div>
 +
 +
</div>
 +
 +
</div>
 +
 +
<div class="copyright">
 +
<div class="container">
 +
<ul class="float-right m-0 list-inline mobile-block">
 +
<li><a href="#">Terms &amp; Conditions</a></li>
 +
<li>&bull;</li>
 +
<li><a href="#">Privacy</a></li>
 +
</ul>
 +
&copy; All Rights Reserved, Company LTD
 +
</div>
 +
</div>
 +
</footer>
 +
<!-- /FOOTER -->
 +
 +
</div>
 +
<!-- /wrapper -->
 +
 +
 +
<!-- SCROLL TO TOP -->
 +
<a href="#" id="toTop"></a>
 +
 +
 +
<!-- PRELOADER -->
 +
<div id="preloader">
 +
<div class="inner">
 +
<span class="loader"></span>
 +
</div>
 +
</div><!-- /PRELOADER -->
 +
 +
 +
<!-- JAVASCRIPT FILES -->
 +
<script type="text/javascript">var plugin_path = 'assets/plugins/';</script>
 +
<script type="text/javascript" src="assets/plugins/jquery/jquery-3.2.1.min.js"></script>
 +
 +
<script type="text/javascript" src="assets/js/scripts.js"></script>
 
 
−
<!--parallax-->
+
<!-- STYLESWITCHER - REMOVE -->
−
<script src="https://chatterplantwiki.000webhostapp.com/js/jquery.scrolly.js" type="text/javascript"></script>
+
<script async type="text/javascript" src="demo_files/styleswitcher/styleswitcher.js"></script>
−
<!--portfolio-filter-->
+
</body>
−
<script src="https://chatterplantwiki.000webhostapp.com/js/isotope.pkgd.min.js" type="text/javascript"></script>
+
−
<!--lightbox-->
+
−
<script src="https://chatterplantwiki.000webhostapp.com/includes/litebox/images-loaded.min.js" type="text/javascript"></script>
+
−
<script src="https://chatterplantwiki.000webhostapp.com/includes/litebox/litebox.min.js" type="text/javascript"></script>
+
−
<!--project count-->
+
−
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
+
−
<script src="https://chatterplantwiki.000webhostapp.com/js/jquery.counterup.min.js" type="text/javascript"></script>
+
−
<!--custom scrollbar-->
+
−
<script src="https://2017.igem.org/Template:Valencia_UPV/Scroll?action=raw&ctype=text/javascript"></script>
+
−
<script src="https://chatterplantwiki.000webhostapp.com/includes/contact-form/validatr.js" type="text/javascript"></script>
+
−
+
−
<!--customizable plugin edit according to your needs-->
+
−
<script src="https://chatterplantwiki.000webhostapp.com/js/custom.js" type="text/javascript"></script>
+
−
    </body>
+
 
</html>
 
</html>

Revision as of 14:43, 19 July 2017

ChatterTest

Unlimited Easy Landing Pages

Building a Landing Page was never so Easy & Interactive.

FREE TRIAL   OR   START FOR A SIBSCRIPTION

Our Features

Lorem ipsum dolor sit amet adipiscium elit

Pixel Perfect

Donec id elit non mi porta gravida at eget metus. Fusce dapibus.

Graphs

Donec id elit non mi porta gravida at eget metus. Fusce dapibus.

Startegy

Donec id elit non mi porta gravida at eget metus. Fusce dapibus.

SEO Optimized

Donec id elit non mi porta gravida at eget metus. Fusce dapibus.

Winners

Donec id elit non mi porta gravida at eget metus. Fusce dapibus.

Responsive

Donec id elit non mi porta gravida at eget metus. Fusce dapibus.

Costomizable

Donec id elit non mi porta gravida at eget metus. Fusce dapibus.

Easy to Modify

Donec id elit non mi porta gravida at eget metus. Fusce dapibus.

Our Pricing

Lorem ipsum dolor sit amet adipiscium elit

$15/month

Starter

For individuals looking for something simple to get started.

Learn More

$25/month

BUSINESS

For individuals looking for something simple to get started.

Learn More
POPULAR

$35/month

DEVELOPER

For individuals looking for something simple to get started.

Learn More

$50/month

VIP

For individuals looking for something simple to get started.

Learn More

Testimonials

Lorem ipsum dolor sit amet adipiscium elit

Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero!

Felicia Doe Company Ltd.

Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero!

Joana Doe Company Ltd.

Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero!

Melissa Doe Company Ltd.

  • Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!

    Joana Doe Company Ltd.

  • Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!

    Melissa Doe Company Ltd.

  • Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!

    Stephany Doe Company Ltd.

  • Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!

    Pamela Doe Company Ltd.

  • Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!

    Simina Doe Company Ltd.

  • Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!

    Mihaela Doe Company Ltd.

Smarty Vision

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.

Ut enim massa, sodales tempor convallis et, iaculis ac massa.

Smarty Skills

WEB DESIGN 90%
HTML/CSS 98%
JAVASCRIPT 60%
PHP/MYSQL 88%

Smarty Special

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis aliquam id pariatur accusantium perspiciatis deserunt officiis similique nihil dolor blanditiis dignissimos iure praesentium vero suscipit doloribus aperiam unde hic non sint neque molestiae consectetur voluptatum beatae ratione corporis.

Join Us Now

DOES SMARTY CONVINCED YOU?

Building a Landing Page was never so Easy & Interactive.

FREE TRIAL   OR   START FOR A SIBSCRIPTION