Difference between revisions of "Team:UST Beijing"

Line 1: Line 1:
−
 
+
<!DOCTYPE html>
 
<html lang="en" dir="ltr" class="client-nojs">
 
<html lang="en" dir="ltr" class="client-nojs">
 
<head>
 
<head>
 
<meta charset="UTF-8" />
 
<meta charset="UTF-8" />
−
<title>Team:UST Beijing- 2018.igem.org</title>
+
<title>Team:UST Beijing - 2018.igem.org</title>
−
<meta name="generator" content="MediaWiki 1.24.1" />
+
<meta name="generator" content="MediaWiki 1.24.1" />
−
<link rel="shortcut icon" href="/favicon.ico" />
+
<meta name="description" content="">
−
<link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="2017.igem.org (en)" />
+
<meta name="author" content="">
−
<link rel="EditURI" type="application/rsd+xml" href="https://2017.igem.org/wiki/api.php?action=rsd" />
+
−
<link rel="alternate" hreflang="x-default" href="/Team:UST_Beijing/Basic_Part" />
+
−
<link rel="copyright" href="http://creativecommons.org/licenses/by/3.0/" />
+
−
<link rel="alternate" type="application/atom+xml" title="2017.igem.org Atom feed" href="/wiki/index.php?title=Special:RecentChanges&amp;feed=atom" />
+
−
<link rel="stylesheet" href="https://2017.igem.org/wiki/load.php?debug=false&amp;lang=en&amp;modules=mediawiki.legacy.commonPrint%2Cshared%7Cmediawiki.skinning.content.externallinks%7Cmediawiki.skinning.interface%7Cmediawiki.ui.button%7Cskins.igem.styles&amp;only=styles&amp;skin=igem&amp;*" />
+
−
<!--[if IE 6]><link rel="stylesheet" href="/wiki/skins/Igem/IE60Fixes.css?303" media="screen" /><![endif]-->
+
−
<!--[if IE 7]><link rel="stylesheet" href="/wiki/skins/Igem/IE70Fixes.css?303" media="screen" /><![endif]--><meta name="ResourceLoaderDynamicStyles" content="" />
+
−
<style>a:lang(ar),a:lang(kk-arab),a:lang(mzn),a:lang(ps),a:lang(ur){text-decoration:none}
+
−
/* cache key: 2017_igem_org:resourceloader:filter:minify-css:7:faeec198b704588e6c9afc1a44274438 */</style>
+
−
<script src="https://2017.igem.org/wiki/load.php?debug=false&amp;lang=en&amp;modules=startup&amp;only=scripts&amp;skin=igem&amp;*"></script>
+
−
<script>if(window.mw){
+
−
mw.config.set({"wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Team:UST_Beijing/Basic_Part","wgTitle":"Team:UST Beijing/Basic Part","wgCurRevisionId":493284,"wgRevisionId":493284,"wgArticleId":5340,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":"Pjr1998","wgUserGroups":["*","user","autoconfirmed"],"wgCategories":[],"wgBreakFrames":false,"wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgMonthNamesShort":["","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"wgRelevantPageName":"Team:UST_Beijing/Basic_Part","wgUserId":3325,"wgUserEditCount":10,"wgUserRegistration":1501150035000,"wgUserNewMsgRevisionId":null,"wgIsProbablyEditable":false,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgWikiEditorEnabledModules":{"toolbar":false,"dialogs":false,"hidesig":true,"preview":false,"previewDialog":false,"publish":false}});
+
−
}</script><script>if(window.mw){
+
−
mw.loader.implement("user.options",function($,jQuery){mw.user.options.set({"ccmeonemails":0,"cols":80,"date":"default","diffonly":0,"disablemail":0,"editfont":"default","editondblclick":0,"editsectiononrightclick":0,"enotifminoredits":0,"enotifrevealaddr":0,"enotifusertalkpages":1,"enotifwatchlistpages":1,"extendwatchlist":0,"fancysig":0,"forceeditsummary":0,"gender":"unknown","hideminor":0,"hidepatrolled":0,"imagesize":2,"math":1,"minordefault":0,"newpageshidepatrolled":0,"nickname":"","norollbackdiff":0,"numberheadings":0,"previewonfirst":0,"previewontop":1,"rcdays":7,"rclimit":50,"rows":25,"showhiddencats":0,"shownumberswatching":1,"showtoolbar":1,"skin":"igem","stubthreshold":0,"thumbsize":5,"underline":2,"uselivepreview":0,"usenewrc":1,"watchcreations":1,"watchdefault":1,"watchdeletion":0,"watchlistdays":3,"watchlisthideanons":0,"watchlisthidebots":0,"watchlisthideliu":0,"watchlisthideminor":0,"watchlisthideown":0,"watchlisthidepatrolled":0,"watchmoves":0,"watchrollback":0,
+
−
"wllimit":250,"useeditwarning":1,"prefershttps":1,"language":"en","variant-gan":"gan","variant-iu":"iu","variant-kk":"kk","variant-ku":"ku","variant-shi":"shi","variant-sr":"sr","variant-tg":"tg","variant-uz":"uz","variant-zh":"zh","searchNs0":true,"searchNs1":false,"searchNs2":false,"searchNs3":false,"searchNs4":false,"searchNs5":false,"searchNs6":false,"searchNs7":false,"searchNs8":false,"searchNs9":false,"searchNs10":false,"searchNs11":false,"searchNs12":false,"searchNs13":false,"searchNs14":false,"searchNs15":false});},{},{});mw.loader.implement("user.tokens",function($,jQuery){mw.user.tokens.set({"editToken":"b71038f80997df51a3eb27b236b3f76a+\\","patrolToken":"c22be01013df88299c1e37b29fc61576+\\","watchToken":"b170e66fa5b38605ec0c4ed825e002d3+\\"});},{},{});
+
−
/* cache key: 2017_igem_org:resourceloader:filter:minify-js:7:1a22578ccee1a3e4551dc974226777c7 */
+
−
}</script>
+
−
<script>if(window.mw){
+
−
mw.loader.load(["mediawiki.page.startup","mediawiki.legacy.wikibits","mediawiki.legacy.ajax"]);
+
−
}</script>
+
−
</head>
+
−
<body class="mediawiki ltr sitedir-ltr ns-0 ns-subject page-Team_UST_Beijing_Basic_Part skin-igem action-view">
+
  
−
        <script type='text/javascript'        src ='/common/tablesorter/jquery.tablesorter.min.js'></script>
+
<!-- Google Fonts -->
−
        <link rel='stylesheet' type='text/css' href='/common/tablesorter/themes/groupparts/style.css' />
+
<link href='http://fonts.useso.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
−
        <link rel='stylesheet' type='text/css' href='/common/table_styles.css' />
+
<!--[if IE]>
 +
<link href="http://fonts.useso.com/css?family=Lato" rel="stylesheet" type="text/css">
 +
<link href="http://fonts.useso.com/css?family=Lato:400" rel="stylesheet" type="text/css">
 +
<link href="http://fonts.useso.com/css?family=Lato:700" rel="stylesheet" type="text/css">
 +
<link href="http://fonts.useso.com/css?family=Lato:300" rel="stylesheet" type="text/css">
 +
<![endif]-->
  
−
        <script type='text/javascript'        src ='/wiki/skins/Igem/resources/2017_skin.js'></script>
+
<link href="css/bootstrap.css" rel="stylesheet">
−
 
+
<link href="css/font-awesome.min.css" rel="stylesheet">
−
 
+
<link href="css/theme.css" rel="stylesheet">
−
    <div id='globalWrapper'>
+
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css"/>
−
        <div id='top_menu_under' class='noprint'></div>
+
<link href="css/zocial.css" rel="stylesheet" type="text/css"/>
−
        <div id='top_menu_14' class='noprint'>Loading menubar.....</div> <!-- Will be replaced with the jQuery.load -->
+
<link href="css/settings.css" rel="stylesheet" type="text/css"/>
−
<script>jQuery('#top_menu_14').load('https://2017.igem.org/cgi/top_menu_14/menubar_reply.cgi',
+
−
    {  t:"Team%3AUST%20Beijing%2FBasic%20Part",
+
−
a:"View+%2FTeam%3AUST_Beijing%2FBasic_Part++View source+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3AUST_Beijing%2FBasic_Part%26action%3Dedit++History+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3AUST_Beijing%2FBasic_Part%26action%3Dhistory++Watch+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3AUST_Beijing%2FBasic_Part%26action%3Dwatch%26token%3D5ab295f8e4aa90cd5c97058972cb69ac%252B%255C++Page+%2FTeam%3AUST_Beijing%2FBasic_Part++Discussion+%2Fwiki%2Findex.php%3Ftitle%3DTalk%3ATeam%3AUST_Beijing%2FBasic_Part%26action%3Dedit%26redlink%3D1++" });
+
−
</script>
+
−
 
+
−
        <!-- Content div contains HQ_page for HQ styles, Logo and title div, and USER CONTENT -->
+
−
<div id="content" class="mw-body" role="main">
+
−
    <a id="top"></a>
+
−
 
+
−
            <div id="top_title">
+
−
                <div class="logo_2017">
+
−
                    <a href="https://2017.igem.org">
+
−
                    <img src="https://static.igem.org/mediawiki/2017/8/8b/HQ_page_logo.jpg" width="100px">
+
−
                    </a>
+
−
                </div>
+
−
 
+
−
        <h1 id="firstHeading" class="firstHeading">
+
−
            <span dir="auto">Team:UST Beijing/Basic Part</span>
+
−
        </h1>
+
−
            </div>
+
−
 
+
−
            <div id="HQ_page">
+
−
                <div id="bodyContent">
+
−
            <div id="mw-content-text" lang="en" dir="ltr" class="mw-content-ltr"><p>
+
−
<head>
+
−
<meta charset="utf-8">
+
−
<meta name="viewport" content="width=device-width, maximum-scale=1">
+
−
<meta name="render" content="webkit">
+
−
<meta name="keywords" content="USTBeijing' wiki">
+
−
<title>USTB-Beijing | Welcome</title>
+
−
<!-- restyle the iGEM original template -->
+
−
        <style type="text/css">
+
−
        #top_title{display: none;}
+
−
        #sideMenu{display: none;}
+
−
        #content{width:inherit;margin:0;padding:0;}
+
−
        #HQ_page p {
+
−
          font-family: 'SourceSansPro-E5dbf24a02165f3';
+
−
          font-size: 20px;
+
−
          text-align: -webkit-auto;
+
−
        }
+
−
        #HQ_page h1 {
+
−
          font-family: 'Gotham5dbe91ec4165f3';
+
−
        }
+
−
        #bodyContent h1, #bodyContent h2, #bodyContent h3{
+
−
          font-family: 'Gotham5dbe91ec4165f3';
+
−
          font-weight: bold;
+
−
        }
+
−
        a:visited{
+
−
          color:#ffffff;
+
−
        }
+
−
        </style>
+
−
<link rel="icon" href="https://static.igem.org/mediawiki/2017/6/67/T--UST_Beijing--xfavicon.png" type="image/png">
+
−
<link href="https://2017.igem.org/Team:UST_Beijing/css/bootstrapmincss?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css">
+
−
<link rel="stylesheet" href="https://2017.igem.org/Team:UST_Beijing/js/fancybox?action=raw&amp;ctype=text/css" type="text/css" media="screen" >
+
−
<link href="https://2017.igem.org/Team:UST_Beijing/css/style2?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css">
+
−
<link href="https://2017.igem.org/Team:UST_Beijing/css/fontasm?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css">
+
−
<link href="https://2017.igem.org/Team:UST_Beijing/css/animate?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css">
+
−
<link rel="stylesheet" href="https://2017.igem.org/Team:UST_Beijing/css/main?action=raw&amp;ctype=text/css">
+
−
<script type="text/javascript" src="https://2017.igem.org/Team:UST_Beijing/js/jquery?action=raw&amp;ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="https://2017.igem.org/Team:UST_Beijing/js/jquerydanmu?action=raw&amp;ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="https://2017.igem.org/Team:UST_Beijing/js/main?action=raw&amp;ctype=text/javascript"></script>
+
−
 
+
−
<meta name="diaoyong" DanmuPlayer="..//github.com/chiruom/danmuplayer/ - Licensed under the MIT" >
+
 
<!--[if lt IE 9]>
 
<!--[if lt IE 9]>
−
<script type="text/javascript" src="https://2017.igem.org/Team:UST_Beijing/js/respond?action=raw&amp;ctype=text/javascript"></script>
+
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
−
<script type="text/javascript" src="https://2017.igem.org/Team:UST_Beijing/js/html5shiv?action=raw&amp;ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="https://2017.igem.org/Team:UST_Beijing/js/html5element?action=raw&amp;ctype=text/javascript"></script>
+
 
<![endif]-->
 
<![endif]-->
−
<style type="text/css">
 
−
.demo{width:95%;margin:50px auto 10px auto;padding:10px;}
 
−
</style>
 
 
</head>
 
</head>
 +
 
<body>
 
<body>
 +
<!--header-->
 +
<div class="header">
 +
<div class="container">
 +
<!--logo-->
 +
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 +
<i class="fa fa-bars"></i></button>
 +
<div class="logo">
 +
<a href="index.html"><img src="img/logo.png" alt="" class="animated bounceInDown" /></a> 
 +
</div>
 +
<!--menu-->
 +
  <nav id="main_menu">
 +
<div class="nav-collapse collapse">
 +
<ul class="nav nav-pills">
 +
<li class="dropdown active"><a href="javascript:{}">Home</a>
 +
<ul class="dropdown-menu">
 +
<li><a href="index.html">Slider Revolution</a></li>
 +
<li><a href="index2.html">Nerve Slider</a></li>
 +
<li><a href="index3.html">NivoSlider</a></li>
 +
<li><a href="index4.html">Slides</a></li>
 +
</ul>
 +
</li>
 +
<li class="dropdown"><a href="javascript:{}">Team</a>
 +
<ul class="dropdown-menu">
 +
<li><a href="team.html">The Team</a></li>
 +
<li><a href="about.html">About</a></li>
 +
<li><a href="services.html">Services</a></li>
 +
<li><a href="testimonials.html">Testimonials</a></li>
 +
<li><a href="timeline.html">Timeline</a></li>
 +
<li><a href="full.html">Full Width</a></li>
 +
<li><a href="left_sidebar.html">Left Sidebar</a></li>
 +
<li><a href="right_sidebar.html">Right Sidebar</a></li>
 +
</ul>
 +
</li>
 +
<li class="dropdown"><a href="javascript:{}">Project</a>
 +
<ul class="dropdown-menu">
 +
<li><a href="portfolio_2columns.html">2 Columns</a></li>
 +
<li><a href="portfolio_3columns.html">3 Columns</a></li>
 +
<li><a href="portfolio_4columns.html">4 Columns</a></li>
 +
<li><a href="portfolio_masonry.html">Masonry</a></li>
 +
<li><a href="gallery.html">Paginated Gallery</a></li>
 +
<li><a href="video_gallery.html">Video Gallery</a></li>
 +
<li><a href="single_portfolio.html">Single Slider</a></li>
 +
<li><a href="single_video.html">Single Video</a></li>
 +
<li><a href="single_image.html">Single Image</a></li>
 +
<li><a href="full_slider.html">Full Slider</a></li>
 +
<li><a href="full_video.html">Full Video</a></li>
 +
</ul>
 +
</li>
 +
<li class="dropdown"><a href="javascript:{}">Style</a>
 +
<ul class="dropdown-menu">
 +
<li><a href="scaffolding.html">Scaffolding</a></li>
 +
<li><a href="typography.html">Typography</a></li>
 +
<li><a href="shortcodes.html">Shortcodes</a></li>
 +
<li><a href="icons.html">Icons</a></li>
 +
<li><a href="javascript:{}">Colours</a>
 +
<ul class="dropdown-menu sub-menu">
 +
<li><a href="../blue/index.html">Blue</a></li>
 +
<li><a href="../orange/index.html">Orange</a></li>
 +
<li><a href="../green/index.html">Green</a></li>
 +
<li><a href="../red/index.html">Red</a></li>
 +
</ul>
 +
<li><a href="script_examples.html">JS Examples</a></li>
 +
</ul>
 +
</li>
 +
<li class="dropdown"><a href="javascript:{}">Extras</a>
 +
<ul class="dropdown-menu">
 +
<li><a href="dribbble_stream.html">Dribbble Stream</a></li>
 +
<li><a href="alt_footer.html">Alt. Footer & Boxes</a></li>
 +
<li><a href="pricing_table.html">Pricing Table</a></li>
 +
<li><a href="404.html">404 Page</a></li>
 +
</ul>
 +
</li>
 +
<li class="dropdown"><a href="javascript:{}">Blog</a>
 +
<ul class="dropdown-menu">
 +
<li><a href="blog.html">Blog</a></li>
 +
<li><a href="blog_two.html">Blog II</a></li>
 +
<li><a href="blog_post.html">Blog Post</a></li>
 +
<li><a href="blog_post2.html">Blog Post II</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="contact.html">Contact</a></li>
 +
                            <li><a href="">More theme</a></li>
 +
</ul>
 +
</div>
 +
</nav>
 +
</div>
 +
</div>
 +
<!--//header-->
 +
<div class="copyrights">Collect from <a href="/" >免费模板</a></div>
 +
<!--page-->
 +
<!-- REVOLUTION SLIDER -->
 +
        <div class="fullwidthbanner-container">
 +
        <div class="fullwidthbanner">
 +
<ul>
 +
<!-- Slide 1 -->
 +
<li data-transition="slideright">
 +
<img src="https://static.igem.org/mediawiki/2018/8/8b/T--UST_Beijing--Web_slider_1.png" alt="" />
 +
 +
<!-- Caption -->
 +
<div class="tp-caption lfr" data-x="left" data-y="195" data-speed="2400" data-start="800" data-easing="easeOutExpo">
 +
<img src="https://static.igem.org/mediawiki/2018/a/a3/T--UST_Beijing--Web_robot_1.png" alt="" />
 +
</div>
 +
 +
<!-- Caption -->
 +
<div class="tp-caption lfb" data-x="870" data-y="140" data-speed="1400" data-start="1800" data-easing="easeOutExpo">
 +
<img src="img/slider/rocket.png" alt="" />
 +
</div>
 +
 +
<!-- Caption -->
 +
<div class="tp-caption lfb" data-x="825" data-y="330" data-speed="1500" data-start="1900" data-easing="easeOutExpo">
 +
<img src="img/slider/flames.png" alt="" />
 +
</div>
 +
 +
<!-- Caption -->
 +
<div class="caption sft stl" data-x="center" data-y="105" data-speed="1000" data-start="700" data-easing="easeOutExpo">
 +
<h3 class="rev-title bold">Natrual RE-Lease</h3>
 +
</div>
 +
 +
<!-- Caption -->
 +
<div class="caption lfl stl rev-title-sub" data-x="center" data-y="240" data-speed="800" data-start="1100" data-easing="easeOutExpo">
 +
CREATE - DESIGN - CODE
 +
</div>
 +
 +
<!-- Caption -->
 +
<div class="caption sfb" data-x="center" data-y="320" data-speed="1100" data-start="1500" data-easing="easeOutExpo">
 +
<a href="#" class="btn btn-primary btn-custom">OUR PORTFOLIO</a>               
 +
</div>
 +
</li>
 +
 +
<!-- Slide 2 -->
 +
<li data-transition="slideleft">
 +
<img src="img/slider/slider2.jpg" alt="" />
 +
 +
<!-- Caption -->
 +
<div class="tp-caption lfl" data-x="right" data-y="35" data-speed="1000" data-start="800" data-easing="easeOutExpo">
 +
<img src="img/slider/iMac.png" alt="" />
 +
</div>
 +
 +
<!-- Caption -->
 +
<div class="caption lfl stl bg" data-x="20" data-y="60" data-speed="800" data-start="700" data-easing="easeOutExpo">
 +
<h2 class="rev-title big white">Creative Slider<br>It's a Revolution!</h2>
 +
</div>
 +
 +
<!-- Caption -->
 +
<div class="caption lfl stl rev-text rev-left" data-x="left" data-y="190" data-speed="800" data-start="1100" data-easing="easeOutExpo">
 +
<p class="hidden-phone">Turn simple HTML code into a responsive sliderwith must-see-effects,<br />
 +
it's Slider Revolution! All elements are included in the download,<br/>
 +
plus a psd file of the iMac to add your own screenshot to.
 +
<br/>Get Creative!</p>
 +
</div>
 +
 +
<!-- Caption -->
 +
<div class="caption sfb stb rev-left" data-x="left" data-y="380" data-speed="1100" data-start="1500" data-easing="easeOutExpo">
 +
<a href="#" class="btn btn-inverse btn-custom mobile">SERVICES</a>  &nbsp;&nbsp;
 +
<a href="#" class="btn btn-inverse btn-custom mobile">CONTACT</a>                   
 +
</div>
 +
</li>
 +
 +
<!-- Slide 3 -->
 +
<li data-transition="slideleft" >
 +
<img src="img/slider/slider3.jpg" alt="" />
 +
 +
<!-- Caption -->
 +
<div class="tp-caption lfl" data-x="right" data-y="35" data-speed="1000" data-start="800" data-easing="easeOutExpo">
 +
<img src="img/slider/robot2.png" alt="" />
 +
</div>
 +
 +
<!-- Caption -->
 +
<div class="caption lfl stl bold bg rev-left" data-x="left" data-y="80" data-speed="800" data-start="1500" data-easing="easeOutExpo">
 +
<h3 class="rev-title big bold">hire us today</h3>
 +
</div>
  
 +
<!-- Caption -->
 +
<div class="caption lfl stl rev-text rev-left" data-x="left" data-y="200" data-speed="800" data-start="1700" data-easing="easeOutExpo">
 +
<p class="white hidden-phone">This plugin features tons of unique transition effects,<br />
 +
an image preloader, video embedding, autoplay that stops on user interaction<br />
 +
and lots of easy to set options to create your own effects.</p>
 +
</div>
 +
 +
<!-- Caption -->
 +
<div class="caption sfb rev-left" data-x="left" data-y="350" data-speed="800" data-start="1900" data-easing="easeOutExpo">
 +
<h3 class="rev-title2 bold">info@flatistudios.com</h3>
 +
</div>
 +
</li>
 +
 +
<!-- Slide 4 -->
 +
<li data-transition="slidedown">
 +
<img src="img/slider/slider4.jpg" alt="" />
 +
 +
<!-- Caption -->
 +
<div class="caption fade fullscreenvideo" data-autoplay="false"  data-speed="500" data-start="500" data-easing="easeOutBack">
 +
<iframe src="http://player.vimeo.com/video/55026049?title=0&amp;byline=0&amp;portrait=0"></iframe>
 +
</div>
 +
 +
<div class="caption big_white sft stt" data-x="center" data-y="25" data-speed="300" data-start="500" data-easing="easeOutExpo" data-end="4000"
 +
data-endspeed="300" data-endeasing="easeInSine">
 +
Have Fun Watching the Video
 +
</div>
 +
</li>
 +
</ul>
 +
<div class="tp-bannertimer tp-bottom"></div>
 +
            </div>
 +
        </div>
 +
        <!-- // END REVOLUTION SLIDER -->
  
−
 
+
<div id="banner">
−
 
+
<div class="container intro_wrapper">
−
 
+
<div class="inner_content">
 
 
−
 
+
<!--welcome-->
−
<div class="container" align="center">
+
<div class="welcome_index">
−
<div class="panel-body">
+
I think most <a href="#"><span class="hue_block white normal">programmers</span></a> spend the first 5 years of their career mastering
−
        <br /><br /><br />
+
<span class="hue">complexity</span> and the rest of their lives learning <span>simplicity</span>
−
          <h2 style="font-family:Arial">页面名称</h2><br />
+
- Buzz Andersen
−
          <p class="text-justify" style="width:700px;text-indent:1em; text-align: left;font-size:18px;line-height:28px;font-family:Arial">
+
</div>
−
这里可以有一段话   
+
<!--//welcome-->
−
</p>
+
</div>
−
          <br /><br /><br /><br /><br />
+
</div>
−
        <h2 style="font-family:Arial">标题</h2><br />
+
</div>
−
          <p class="text-justify" style="width:700px;text-indent:1em;text-align: left; font-size:18px;line-height:28px;font-family:Arial" >
+
<!--//banner-->
−
这里可以有一段话
+
−
 
+
<div class="container wrapper">
−
      </p>
+
<div class="inner_content">
−
          <br />  
+
<div class="pad45"></div>
−
          <img src="https://static.igem.org/mediawiki/2018/8/8b/T--UST_Beijing--interlabfigure1.png" style="width:600px">
+
−
          <br /><br />
+
<!--info boxes-->
−
          <p class="text-justify" style="width:700px;text-indent:1em;text-align: left; font-size:18px;line-height:28px;font-family:Arial" >
+
<div class="row">
−
这可以有一段话
+
<div class="span3">
−
      </p>
+
<div class="tile">
−
          <br /><br /><br /><br /><br /><br />
+
<div class="intro-icon-disc cont-large"><i class="fa fa-wrench intro-icon-large"></i></div>
−
          <h2 style="font-family:Arial">标题</h2><br />
+
<h6><small>DESIGN</small>
−
          <p class="text-justify" style="width:700px;text-indent:1em;text-align: left; font-size:18px;line-height:28px;font-family:Arial" >
+
<br><a href="#"><span>built for &amp; by nerds</span></a></h6>
−
这里可以有一段话
+
<p>Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. </p>
−
      </p>
+
</div>  
−
          <br />
+
<div class="pad25"></div>
−
            <table height="200" border="5" style="text-align: center;font-size:25px;font-weight: 700;font-family: Times New Roman">
+
</div>  
−
                      <p class="text-justify" style="width:700px;text-indent:1em;text-align: left; font-size:18px;line-height:28px;font-family:Arial" >
+
−
这里可以有一段话
+
<div class="span3">
−
      </p>
+
<div class="tile">
−
          <br />
+
<div class="intro-icon-disc cont-large"><i class="fa fa-rocket intro-icon-large"></i></div>
−
          <img src="https://static.igem.org/mediawiki/2018/8/8b/T--UST_Beijing--interlabfigure1.png" style="width:600px">
+
<h6><small>CODE</small>
−
          <br /><br />
+
<br><a href="#"><span>12-column grid</span></a></h6>
−
          <img src="https://static.igem.org/mediawiki/2018/8/8b/T--UST_Beijing--interlabfigure1.png" style="width:600px">
+
<p>Bootstrap is designed to help people of all skill levels - designer or developer, huge nerd or early beginner.  
−
          <br /><br />
+
Use it as a complete kit or use to start something.</p>
−
          <p class="text-justify" style="width:700px;text-indent:1em;text-align: left; font-size:18px;line-height:28px;font-family:Arial" >
+
</div>
−
一段话
+
<div class="pad25"></div>
−
      </p>
+
</div>  
−
        <p class="text-justify" style="width:700px;text-indent:1em;text-align: left; font-size:18px;line-height:28px;font-family:Arial" >
+
−
一段话
+
<div class="span3">
−
      </p>
+
<div class="tile">
−
          <br />
+
<div class="intro-icon-disc cont-large"><i class="fa fa-flask intro-icon-large"></i></div>
−
            <table height="200" border="5" style="text-align: center;font-size:25px;font-weight: 700;font-family: Times New Roman">
+
<h6><small>CREATE</small>
−
                        <br />
+
<br><a href="#"><span>responsive</span></a></h6>
−
          <p class="text-justify" style="width:700px;text-indent:1em;text-align: left; font-size:18px;line-height:28px;font-family:Arial" >
+
<p>Bootstrap have gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent
−
一段话
+
experience.</p>
−
      </p>
+
</div>  
−
          <br />
+
<div class="pad25"></div>
−
            <img src="https://static.igem.org/mediawiki/2018/8/8b/T--UST_Beijing--interlabfigure1.png" style="width:600px">
+
</div>  
−
            <br /><br />
+
−
            <img src="https://static.igem.org/mediawiki/2018/8/8b/T--UST_Beijing--interlabfigure1.png" style="width:600px">
+
<div class="span3">
−
            <br /><br />
+
<div class="tile tile-hot">
−
          <p class="text-justify" style="width:700px;text-indent:1em;text-align: left; font-size:18px;line-height:28px;font-family:Arial" >
+
<div class="intro-icon-disc cont-large"><i class="fa fa-book  intro-icon-large"></i></div>
−
一段话
+
<h6> <small>SUPPORT</small>
−
      </p>
+
<br><a href="#"><span>growing library</span></a></h6>
−
          <p class="text-justify" style="width:700px;text-indent:1em;text-align: left; font-size:18px;line-height:28px;font-family:Arial" >
+
<p>Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components.</p>
−
一段话
+
</div>
−
      </p>
+
<div class="pad25"></div>
−
        <br /><br /><br /><br /><br /><br />
+
</div>
−
        <h2 style="font-family:Arial">标题</h2><br />
+
</div>
−
          <p class="text-justify" style="width:700px;text-indent:1em;text-align: left; font-size:18px;line-height:28px;font-family:Arial" >
+
−
一段话.
+
<!--//info boxes-->
−
      </p>
+
<div class="row">
−
        <br />  
+
<!--col 1-->
−
          <img src="https://static.igem.org/mediawiki/2018/8/8b/T--UST_Beijing--interlabfigure1.png" style="width:700px">
+
<div class="span12">
−
          <br /><br />  
+
<div class="row">
−
          <p class="text-justify" style="width:700px;text-indent:1em;text-align: left; font-size:18px;line-height:28px;font-family:Arial" >
+
<div class="pad25 hidden-phone"></div>
−
一段话
+
−
      </p>
+
<div class="span4">
−
          <br />
+
<h1>Recent Work</h1>
−
          <img src="https://static.igem.org/mediawiki/2018/8/8b/T--UST_Beijing--interlabfigure1.png" style="width:700px">
+
<h4>Lorem ipsum dolor sit amet, rebum putant recusabo in ius, pri simul tempor ne, his ei summo virtute.</h4>
−
          <br /><br />  
+
<p>Nam ea labitur pericula. Meis tamquam pro te, cibo mutat necessitatibus id vim. An his tamquam postulant, pri id mazim nostrud diceret
−
          <p class="text-justify" style="width:700px;text-indent:1em;text-align: left; font-size:18px;line-height:28px;font-family:Arial" >
+
sapientem eloquentiam sea cu, sea ut exerci delicata. Corrumpit vituperata.</p>
−
一段话
+
−
      </p>
+
<a href="#" class="btn btn-primary  btn-custom btn-rounded">view portfolio</a>
−
          <p class="text-justify" style="width:700px;text-indent:1em;text-align: left; font-size:18px;line-height:28px;font-family:Arial" >
+
<div class="pad45"></div>
−
一段话
+
</div>
−
      </p>
+
<!--column 2 slider-->
−
        <br /><br /><br /><br /><br /><br />
+
<div class="span8 pad15 col_full2">
−
        <div class="container" align="center">
+
−
              </div>  
+
<div id="slider_home">
−
</div>
+
            <div class="slider-item">
−
</div>
+
<div class="slider-image">
−
</section>
+
<div class="hover_colour">
−
 
+
<a href="img/large/s1.jpg" data-rel="prettyPhoto">
−
</body>
+
<img src="img/small/s1.jpg" alt="" /></a>
−
 
+
</div>
−
<style>
+
</div>
 +
<div class="slider-title">
 +
<h3><a href="#">catalogue</a></h3>
 +
<p>An his tamquam postulant, pri id mazim nostrud diceret.</p>
 +
</div>
 +
</div>
 +
 +
<div class="slider-item">
 +
<div class="slider-image">
 +
<div class="hover_colour">
 +
<a href="img/large/s2.jpg" data-rel="prettyPhoto">
 +
<img src="img/small/s2.jpg" alt="" /></a>
 +
</div>
 +
</div>
 +
<div class="slider-title">
 +
<h3><a href="#">loupe</a></h3>
 +
<p>An his tamquam postulant, pri id mazim nostrud diceret.</p>
 +
</div>
 +
</div>
 +
 +
<div class="slider-item">
 +
<div class="slider-image">
 +
<div class="hover_colour">
 +
<a href="img/large/s3.jpg" data-rel="prettyPhoto">
 +
<img src="img/small/s3.jpg" alt="" /></a>
 +
</div>
 +
</div>
 +
<div class="slider-title">
 +
<h3><a href="#">retro rocket</a></h3>
 +
<p>An his tamquam postulant, pri id mazim nostrud diceret.</p>
 +
</div>
 +
</div>
 +
 +
<div class="slider-item">
 +
<div class="slider-image">
 +
<div class="hover_colour">
 +
<a href="img/large/s4.jpg" data-rel="prettyPhoto">
 +
<img src="img/small/s4.jpg" alt="" /></a>
 +
</div>
 +
</div>
 +
<div class="slider-title">
 +
<h3><a href="#">infographics</a></h3>
 +
<p>An his tamquam postulant, pri id mazim nostrud diceret.</p>
 +
</div>
 +
</div>
 +
 +
<div class="slider-item">
 +
<div class="slider-image">
 +
<div class="hover_colour">
 +
<a href="img/large/s5.jpg" data-rel="prettyPhoto">
 +
<img src="img/small/s5.jpg" alt="" /></a>
 +
</div>
 +
</div>
 +
<div class="slider-title">
 +
<h3><a href="#">mock up</a></h3>
 +
<p>An his tamquam postulant, pri id mazim nostrud diceret.</p>
 +
</div>
 +
</div>
 +
 +
<div class="slider-item">
 +
<div class="slider-image">
 +
<div class="hover_colour">
 +
<a href="img/large/s6.jpg" data-rel="prettyPhoto">
 +
<img src="img/small/s6.jpg" alt="" /></a>
 +
</div>
 +
</div>
 +
<div class="slider-title">
 +
<h3><a href="#">retro badges</a></h3>
 +
<p>An his tamquam postulant, pri id mazim nostrud diceret.</p>
 +
</div>
 +
</div>
 +
 +
<div class="slider-item">
 +
<div class="slider-image">
 +
<div class="hover_colour">
 +
<a href="img/large/s7.jpg" data-rel="prettyPhoto">
 +
<img src="img/small/s7.jpg" alt="" /></a>
 +
</div>
 +
</div>
 +
<div class="slider-title">
 +
<h3><a href="#">details</a></h3>
 +
<p>An his tamquam postulant, pri id mazim nostrud diceret.</p>
 +
</div>
 +
</div>
 +
 +
<div class="slider-item">
 +
<div class="slider-image">
 +
<div class="hover_colour">
 +
<a href="img/large/s8.jpg" data-rel="prettyPhoto">
 +
<img src="img/small/s8.jpg" alt="" /></a>
 +
</div>
 +
</div>
 +
<div class="slider-title">
 +
<h3><a href="#">vintage form</a></h3>
 +
<p>An his tamquam postulant, pri id mazim nostrud diceret.</p>
 +
</div>
 +
</div>
 +
</div>
 +
<div id="sl-prev" class="widget-scroll-prev"><i class="fa fa-chevron-left white"></i></div>
 +
<div id="sl-next" class="widget-scroll-next"><i class="fa fa-chevron-right white but_marg"></i></div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!--//page-->
 +
 +
<div class="pad25 hidden-desktop"></div>
 +
</div>
 
 
−
  ul ul {
+
<!-- footer -->
−
    background:#E4EAF1;
+
<div id="footer">
−
    border-radius:0;
+
<h1>get in touch</h1>
−
    position:absolute;
+
<h3 class="center follow">
−
    top:100%;
+
We're social and we'd love to hear from you! Feel free to send us an email, find us on Google Plus, follow us on Twitter and join us on Facebook.</h3>
−
    padding:0;
+
 +
<div class="follow_us">
 +
<a href="#" class="zocial twitter"></a>
 +
<a href="#" class="zocial facebook"></a>
 +
<a href="#" class="zocial linkedin"></a>
 +
<a href="#" class="zocial googleplus"></a>
 +
<a href="#" class="zocial vimeo"></a>
 +
</div>
 +
</div>
 +
 +
<!-- footer 2 -->
 +
<div id="footer2">
 +
<div class="container">
 +
<div class="row">
 +
<div class="span12">
 +
<div class="copyright">
 +
FLATI
 +
&copy;
 +
<script type="text/javascript">
 +
//<![CDATA[
 +
var d = new Date()
 +
document.write(d.getFullYear())
 +
//]]>
 +
</script>
 +
- All Rights Reserved :
 +
More Templates
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<!-- up to top -->
 +
<a href="#"><i class="go-top hidden-phone hidden-tablet fa fa-angle-double-up"></i></a>
 +
<!--//end-->
 +
<!-- SCRIPTS -->
  
−
}
+
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
−
ul  {
+
<script src="js/bootstrap.min.js"></script>
−
    float:none;
+
<script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>
−
    border-top:1px solid #6b727c;
+
<script type="text/javascript" src="js/jquery.themepunch.plugins.min.js"></script>
−
    border-bottom:1px solid #575f6a;
+
<!-- slider settings -->
−
 
+
<script>
−
 
+
//<![CDATA[
−
}
+
    $(document).ready(function() {
−
body{
+
if ($.fn.cssOriginal!=undefined)
−
font-family:Arial;
+
$.fn.css = $.fn.cssOriginal;
−
}
+
$('.fullwidthbanner').revolution(
−
.scroll-link{
+
{
−
font-size: 14px;
+
delay:9000,
−
}
+
startwidth:1170,
−
ul ul li a {
+
startheight:550,
−
    color:#FFF;
+
onHoverStop:"on",
−
 
+
navigationType:"none",
−
}
+
soloArrowLeftHOffset:0,
−
 
+
soloArrowLeftVOffset:0,
−
ul ul li a:hover {
+
soloArrowRightHOffset:0,
−
    background:#FFFFFF;
+
soloArrowRightVOffset:0,
−
 
+
touchenabled:"on",
−
}
+
fullWidth:"on",
−
 
+
shadow:0
−
ul ul ul {
+
});
−
width: 100%;
+
});
−
position: absolute;
+
//]]>
−
left: 100%;
+
−
top: 50%;
+
−
}
+
−
</style>
+
−
<script type="text/javascript">
+
−
$(document).ready(function (){
+
−
$('#csy1').hide(); //打开页面隐藏下拉列表
+
−
$('#cs1').hover( //鼠标滑过导航栏目时
+
−
function(){
+
−
$('#csy1').show(); //显示下拉列表
+
−
 
+
−
},
+
−
function(){
+
−
$('#csy1').hide(); //鼠标移开后隐藏下拉列表
+
−
}
+
−
);
+
−
$('#csy1').hover( //鼠标滑过下拉列表自身也要显示，防止无法点击下拉列表
+
−
function(){
+
−
$('#csy1').show();
+
−
},
+
−
function(){
+
−
$('#csy1').hide();
+
−
 
+
−
}
+
−
);
+
−
$('cs1').hover( //鼠标滑过下拉列表是改变当前栏目样式
+
−
);
+
−
});
+
 
</script>
 
</script>
 +
<script src="js/jquery.touchSwipe.min.js"></script>
 +
<script src="js/jquery.mousewheel.min.js"></script>
 +
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
 +
<script type="text/javascript" src="js/scripts.js"></script>
 +
<!-- carousel -->
 +
<script type="text/javascript" src="js/jquery.carouFredSel-6.2.1-packed.js"></script>
 
<script type="text/javascript">
 
<script type="text/javascript">
−
$(document).ready(function (){
+
//<![CDATA[
−
$('#csy2').hide(); //打开页面隐藏下拉列表
+
jQuery(document).ready(function($) {
−
$('#cs2').hover( //鼠标滑过导航栏目时
+
$("#slider_home").carouFredSel({ width : "100%", height : "auto",
−
function(){
+
responsive : true,  circular : true, infinite : false, auto : false,
−
$('#csy2').show(); //显示下拉列表
+
items : { width : 231, visible: { min: 1, max: 3 }
−
 
+
},
−
},
+
swipe : { onTouch : true, onMouse : true },
−
function(){
+
scroll: { items: 3, },
−
$('#csy2').hide(); //鼠标移开后隐藏下拉列表
+
prev : { button : "#sl-prev", key : "left"},
−
}
+
next : { button : "#sl-next", key : "right" }
−
);
+
});
−
$('#csy2').hover( //鼠标滑过下拉列表自身也要显示，防止无法点击下拉列表
+
});
−
function(){
+
//]]>
−
$('#csy2').show();
+
</script>
−
},
+
</body>
−
function(){
+
−
$('#csy2').hide();
+
−
 
+
−
}
+
−
);
+
−
$('cs2').hover( //鼠标滑过下拉列表是改变当前栏目样式
+
−
);
+
−
});
+
−
</script>
+
−
<script type="text/javascript">
+
−
$(document).ready(function (){
+
−
$('#csy3').hide(); //打开页面隐藏下拉列表
+
−
$('#cs3').hover( //鼠标滑过导航栏目时
+
−
function(){
+
−
$('#csy3').show(); //显示下拉列表
+
−
 
+
−
},
+
−
function(){
+
−
$('#csy3').hide(); //鼠标移开后隐藏下拉列表
+
−
}
+
−
);
+
−
$('#csy3').hover( //鼠标滑过下拉列表自身也要显示，防止无法点击下拉列表
+
−
function(){
+
−
$('#csy3').show();
+
−
},
+
−
function(){
+
−
$('#csy3').hide();
+
−
 
+
−
}
+
−
);
+
−
$('cs3').hover( //鼠标滑过下拉列表是改变当前栏目样式
+
−
);
+
−
});
+
−
</script>
+
−
<script type="text/javascript">
+
−
$(document).ready(function (){
+
−
$('#csy4').hide(); //打开页面隐藏下拉列表
+
−
$('#cs4').hover( //鼠标滑过导航栏目时
+
−
function(){
+
−
$('#csy4').show(); //显示下拉列表
+
−
 
+
−
},
+
−
function(){
+
−
$('#csy4').hide(); //鼠标移开后隐藏下拉列表
+
−
}
+
−
);
+
−
$('#csy4').hover( //鼠标滑过下拉列表自身也要显示，防止无法点击下拉列表
+
−
function(){
+
−
$('#csy4').show();
+
−
},
+
−
function(){
+
−
$('#csy4').hide();
+
−
 
+
−
}
+
−
);
+
−
$('cs4').hover( //鼠标滑过下拉列表是改变当前栏目样式
+
−
);
+
−
});
+
−
</script>
+
−
<script type="text/javascript">
+
−
$(document).ready(function (){
+
−
$('#csy5').hide(); //打开页面隐藏下拉列表
+
−
$('#cs5').hover( //鼠标滑过导航栏目时
+
−
function(){
+
−
$('#csy5').show(); //显示下拉列表
+
−
 
+
−
},
+
−
function(){
+
−
$('#csy5').hide(); //鼠标移开后隐藏下拉列表
+
−
}
+
−
);
+
−
$('#csy5').hover( //鼠标滑过下拉列表自身也要显示，防止无法点击下拉列表
+
−
function(){
+
−
$('#csy5').show();
+
−
},
+
−
function(){
+
−
$('#csy5').hide();
+
−
 
+
−
}
+
−
);
+
−
$('cs5').hover( //鼠标滑过下拉列表是改变当前栏目样式
+
−
);
+
−
});
+
−
</script>
+
−
 
+
−
 
+
−
<script type="text/javascript" src="https://2017.igem.org/Team:UST_Beijing/js/bootstrapmin?action=raw&amp;ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="https://2017.igem.org/Team:UST_Beijing/js/jqueryscrolltofixed?action=raw&amp;ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="https://2017.igem.org/Team:UST_Beijing/js/jquerynav?action=raw&amp;ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="https://2017.igem.org/Team:UST_Beijing/js/jqueryeasing?action=raw&amp;ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="https://2017.igem.org/Team:UST_Beijing/js/jqueryisotope?action=raw&amp;ctype=text/javascript"></script>
+
−
<script src="https://2017.igem.org/Team:UST_Beijing/js/fancyboxjs?action=raw&amp;ctype=text/javascript" type="text/javascript"></script>
+
−
<script type="text/javascript" src="https://2017.igem.org/Team:UST_Beijing/js/custom?action=raw&amp;ctype=text/javascript"></script>
+
−
 
+
−
<script type="text/javascript" src="https://2017.igem.org/Team:UST_Beijing/js/jqshCircle?action=raw&amp;ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="https://2017.igem.org/Team:UST_Beijing/js/jqdanmu?action=raw&amp;ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="https://2017.igem.org/Team:UST_Beijing/js/main?action=raw&amp;ctype=text/javascript"></script>
+
−
 
+
−
 
+
−
 
+
−
</p>
+
−
<!--
+
−
NewPP limit report
+
−
CPU time usage: 0.002 seconds
+
−
Real time usage: 0.002 seconds
+
−
Preprocessor visited node count: 4/1000000
+
−
Preprocessor generated node count: 24/1000000
+
−
Post‐expand include size: 0/2097152 bytes
+
−
Template argument size: 0/2097152 bytes
+
−
Highest expansion depth: 2/40
+
−
Expensive parser function count: 0/100
+
−
-->
+
−
 
+
−
<!-- Saved in parser cache with key 2017_igem_org:pcache:idhash:5340-0!*!*!*!*!*!* and timestamp 20180906061553 and revision id 493284
+
−
-->
+
−
</div>             <div class="visualClear"></div>
+
−
            </div>
+
−
    </div>
+
−
 
+
−
        </div>
+
−
 
+
−
        <!-- Side Menubar -->
+
−
        <div id="sideMenu">
+
−
            <a href="https://2017.igem.org">
+
−
                <div id="home_logo" >
+
−
                <img src="https://static.igem.org/mediawiki/2017/b/bf/HQ_menu_logo.jpg">
+
−
                </div>
+
−
            </a>
+
−
 
+
−
            <div style="clear:both; height:5px;"></div>
+
−
 
+
−
            <div id="menuDisplay"></div>  <!- Menu will be loaded here ->
+
−
        </div>
+
−
 
+
−
        <!-- Pop_Why Div is definded here -->
+
−
        <div class="pop_why_cover"></div>
+
−
 
+
−
        <div class="pop_why_box" >
+
−
            <div class="pop_close">× </div>
+
−
            <div class="pop_why_content"><h3> Loading ... </h3></div>
+
−
        </div>
+
−
 
+
−
    </div>
+
 
</html>
 
</html>

Revision as of 08:44, 6 September 2018

<!DOCTYPE html> Team:UST Beijing - 2018.igem.org

Collect from 免费模板

  • Natrual RE-Lease

    CREATE - DESIGN - CODE
    OUR PORTFOLIO

  • Creative Slider
    It's a Revolution!

    Turn simple HTML code into a responsive sliderwith must-see-effects,
    it's Slider Revolution! All elements are included in the download,
    plus a psd file of the iMac to add your own screenshot to.
    Get Creative!

    SERVICES    CONTACT

  • hire us today

    This plugin features tons of unique transition effects,
    an image preloader, video embedding, autoplay that stops on user interaction
    and lots of easy to set options to create your own effects.

    info@flatistudios.com

  • Have Fun Watching the Video
DESIGN
built for & by nerds

Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster.

CODE
12-column grid

Bootstrap is designed to help people of all skill levels - designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something.

CREATE
responsive

Bootstrap have gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience.

SUPPORT
growing library

Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components.

Recent Work

Lorem ipsum dolor sit amet, rebum putant recusabo in ius, pri simul tempor ne, his ei summo virtute.

Nam ea labitur pericula. Meis tamquam pro te, cibo mutat necessitatibus id vim. An his tamquam postulant, pri id mazim nostrud diceret sapientem eloquentiam sea cu, sea ut exerci delicata. Corrumpit vituperata.

view portfolio

catalogue

An his tamquam postulant, pri id mazim nostrud diceret.

loupe

An his tamquam postulant, pri id mazim nostrud diceret.

retro rocket

An his tamquam postulant, pri id mazim nostrud diceret.

infographics

An his tamquam postulant, pri id mazim nostrud diceret.

mock up

An his tamquam postulant, pri id mazim nostrud diceret.

retro badges

An his tamquam postulant, pri id mazim nostrud diceret.

details

An his tamquam postulant, pri id mazim nostrud diceret.

vintage form

An his tamquam postulant, pri id mazim nostrud diceret.

FLATI © - All Rights Reserved : More Templates