Difference between revisions of "Team:H4Z-Hangzhou"

Line 2: Line 2:
 
<html>
 
<html>
  
−
<h2> Welcome to iGEM 2015! </h2>
+
<!DOCTYPE html>
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
<html lang="en">
 +
<!--[if IE 7]><html lang="en" class="ie7"><![endif]-->
 +
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
 +
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
 +
<!--[if (gt IE 9)|!(IE)]><html lang="en"><![endif]-->
 +
<!--[if !IE]><html lang="en"><![endif]-->
 +
<head>
 +
<meta charset="utf-8">
 +
 +
<script src="js/lib/modernizr.js"></script>
 +
<script src="js/lib/pace.js"></script>
 +
<script>(function(w){var dpr=((w.devicePixelRatio===undefined)?1:w.devicePixelRatio);if(!!w.navigator.standalone){var r=new XMLHttpRequest();r.open('GET','/retinaimages.php?devicePixelRatio='+dpr,false);r.send()}else{document.cookie='devicePixelRatio='+dpr+'; path=/'}})(window)</script>
 +
<noscript><style id="devicePixelRatio" media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)">html{background-image:url("/retinaimages.php?devicePixelRatio=2")}</style></noscript>
 +
 +
<title>Focus - Personal Edition</title>
 +
 +
<meta name="robots" content="index, nofollow">
 +
<meta name="description" content="Your website description here">
 +
<meta name="keywords" content="your, website, keywords, here">
 +
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 +
 +
<link rel="stylesheet" href="css/lib/font-awesome.min.css">
 +
<link rel="stylesheet" href="css/lib/magnific-popup.css">
 +
<link rel="stylesheet" href="css/lib/lite.css">
 +
<link rel="stylesheet" href="css/style.css">
 +
<link rel="stylesheet" href="css/blue.css">
 +
 +
<!--[if lt IE 9]>
 +
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 +
<![endif]-->
 +
 +
<link rel="shortcut icon" href="images/favicon/favicon.ico">
 +
</head>
  
−
<h4>Before you start: </h4>
 
−
<p> Please read the following pages:</p>
 
−
<ul>
 
−
<li>  <a href="https://2015.igem.org/Requirements">Requirements page </a> </li>
 
−
<li> <a href="https://2015.igem.org/Wiki_How-To">Wiki Requirements page</a></li>
 
−
</ul>
 
  
−
<div class="highlightBox">
 
−
<h4> Styling your wiki </h4>
 
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
 
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>
 
−
</div>
 
  
−
<h4> Editing your wiki </h4>
+
<!-- Menu -->
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>  
+
<nav class="menu" id="theMenu">
−
<p> <a href="https://2015.igem.org/wiki/index.php?title=Team:H4Z-Hangzhou&action=edit"> Click here to edit this page! </a></p>
+
<div class="menu-wrap">
−
<p>See tips on how to edit your wiki on the <a href="https://2015.igem.org/TemplatesforTeams_Code_Documentation">Template Documentation</a> page.</p>  
+
<a href="#home"><img src="../../../../../../Desktop/igemlogo.png" longdesc="../../../../../../Desktop/igemlogo.png"></a>
 +
<!--<h1 class="logo"><a href="#home">Focus</a></h1>-->
 +
<!--<i class="icon-remove menu-close"></i>-->
 +
<a href="#home">Home</a>
 +
<a href="#services">OVERVIEW</a>
 +
<a href="#process">Process</a>
 +
<a href="#portfolio">Profile</a>
 +
<a href="#about-me">PROJECT</a>
 +
<a href="#contact">Contact</a>
 +
<a href="#"><i class="icon-facebook"></i></a>
 +
<a href="#"><i class="icon-twitter"></i></a>
 +
<a href="#"><i class="icon-dribbble"></i></a>
 +
<a href="#"><i class="icon-envelope"></i></a>
 +
</div>
 +
 +
<!-- Menu button -->
 +
<div id="menuToggle"><i class="icon-reorder"></i></div>
 +
</nav>
  
  
−
<h4>Templates </h4>
 
−
<p> This year we have created templates for teams to use freely. More information on how to use and edit the templates can be found on the
 
−
<a href="https://2015.igem.org/TemplatesforTeams_Code_Documentation">Template Documentation </a> page.</p>
 
  
 +
  
−
<h4>Tips</h4>
+
<div class="right-menu noprint" id="menubar"></div><!-- end right menubar -->
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
−
<ul>
+
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2015.igem.org/Calendar_of_Events">iGEM 2015 calendar</a> </li>
+
−
<li>Have lots of fun! </li>
+
−
</ul>  
+
  
 +
<!-- Fullscreen slider -->
 +
<div id="home"></div>
 +
<div id="slides">
 +
<ul class="slides-container">
 +
<li>
 +
<!-- Slide -->
 +
<div style="background-image: url('images/placeholder-slide-1.jpg');" class="fullscreen-image"></div>
 +
<div class="header-center fade-in">
 +
<h1 class="fittext white">Meet The Team</h1>
 +
<p class="uppercase white">We are from Hangzhou No.4 High School</p>
 +
<p><a href="#introduction" class="button white-border">LEARN MORE</a></p>
 +
</div>
 +
</li>
 +
<li>
 +
<!-- Slide -->
 +
<div style="background-image: url('images/placeholder-slide-2.jpg');" class="fullscreen-image"></div>
 +
<div class="header-center fade-in">
 +
<h1 class="fittext white">You Are Amazing</h1>
 +
<p class="uppercase white">Work hard, play hard &amp; reap the rewards</p>
 +
<p><a href="#introduction" class="button white-border">Experience more</a></p>
 +
</div>
 +
</li>
 +
<li>
 +
<!-- Slide -->
 +
<div style="background-image: url('images/placeholder-slide-3.jpg');" class="fullscreen-image"></div>
 +
<div class="header-center fade-in">
 +
<h1 class="fittext white">In Every Single Way</h1>
 +
<p class="uppercase white">Keep your fears to yourself, but share your creativity with others</p>
 +
<p>
 +
<a href="#"><i class="icon-twitter medium-icon white-border"></i></a>
 +
<a href="#"><i class="icon-facebook medium-icon white-border"></i></a>
 +
<a href="#"><i class="icon-dribbble medium-icon white-border"></i></a>
 +
</p>
 +
</div>
 +
</li>
 +
<li>
 +
<!-- Slide with a logo - or any other image -->
 +
<div style="background-image: url('images/placeholder-slide-2.jpg');" class="fullscreen-image"></div>
 +
<div class="header-center fade-in">
 +
<img class="preserve margin-bottom" src="images/logo-focus.png" alt="logo-focus">
 +
<p class="uppercase white">An example slide with an image in it</p>
 +
<p><a href="#introduction" class="button white-border">Experience more</a></p>
 +
</div>
 +
</li>
 +
</ul>
 +
<nav class="slides-navigation">
 +
<a href="#" class="prev"><i class="icon-long-arrow-left"></i></a>
 +
<a href="#" class="next"><i class="icon-long-arrow-right"></i></a>
 +
</nav>
 +
</div>
  
−
<h4>Inspiration</h4>
 
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
 
−
<ul>
 
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
 
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
 
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
 
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
 
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
 
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
 
−
</ul>
 
  
−
<h4> Uploading pictures and files </h4>
+
<!-- Introduction -->
−
<p> You can upload your pictures and files to the iGEM 2015 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. <br />
+
<section id="introduction" class="introduction">
−
When you upload, set the "Destination Filename" to <code>Team:YourOfficialTeamName/NameOfFile.jpg</code>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)</p>
+
<div class="row">
 +
<div class="ten columns offset-by-one">
 +
 +
</div>
 +
</div>
 +
</section>
  
−
<a href="https://2015.igem.org/Special:Upload">CLICK HERE TO UPLOAD FILES</a>
 
  
 +
<!-- Services -->
 +
<section id="services" class="services">
 +
 +
<!-- Title -->
 +
<div class="row">
 +
<div class="ten columns offset-by-one title">
 +
<h1>Project</h1>
 +
<h2>This is what We do</h2>
 +
<hr>
 +
</div>
 +
</div>
 +
 +
<!-- Content of the services slider -->
 +
<div class="row">
 +
<div id="services-slider" class="ten columns offset-by-one">
 +
<ul>
 +
<li>
 +
<!-- Service -->
 +
<h3 class="color">I design</h3>
 +
<p>Design often necessitates considering the aesthetic and functional dimensions of both the design object and process. It involves research, thought, modeling, interactive adjustment, and re-design. Diverse kinds of objects may be designed, including clothing, graphical user interfaces and corporate identities.</p>
 +
</li>
 +
<li>
 +
<!-- Service -->
 +
<h3 class="color">I code</h3>
 +
<p>Coding often necessitates considering the aesthetic and functional dimensions of both the design object and process. It involves research, thought, modeling, interactive adjustment, and re-design. Diverse kinds of objects may be designed, including clothing, graphical user interfaces and corporate identities.</p>
 +
</li>
 +
<li>
 +
<!-- Service -->
 +
<h3 class="color">I make illustrations</h3>
 +
<p>Illustration often necessitates considering the aesthetic and functional dimensions of both the design object and process. It involves research, thought, modeling, interactive adjustment, and re-design. Diverse kinds of objects may be designed, including clothing, graphical user interfaces and corporate identities.</p>
 +
</li>
 +
<li>
 +
<!-- Service -->
 +
<h3 class="color">I take beautiful pictures</h3>
 +
<p>Photography often necessitates considering the aesthetic and functional dimensions of both the design object and process. It involves research, thought, modeling, interactive adjustment, and re-design. Diverse kinds of objects may be designed, including clothing, graphical user interfaces and corporate identities.</p>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
<!-- Circle controls -->
 +
<div class="row">
 +
<div class="services-buttons">
 +
<a data-rel="1" href="javascript:void(0);" class="servicesLink"><i class="icon-magic"></i></a>
 +
<a data-rel="2" href="javascript:void(0);" class="servicesLink"><i class="icon-beaker"></i></a>
 +
<a data-rel="3" href="javascript:void(0);" class="servicesLink"><i class="icon-pencil"></i></a>
 +
<a data-rel="4" href="javascript:void(0);" class="servicesLink"><i class="icon-camera"></i></a>
 +
</div>
 +
</div>
  
 +
</section>
  
−
</div></div> <!--These are the closing tags for div id="mainContainer" and div id="contentContainer". The corresponding opening tags appear in the template that is {{included}} at the top of this page.-->
 
  
 +
<!-- Process -->
 +
<section id="process" class="process">
 +
 +
<!-- Title -->
 +
<div class="row">
 +
<div class="ten columns offset-by-one title">
 +
<h1>Process</h1>
 +
<h2>How I do it</h2>
 +
<hr>
 +
</div>
 +
</div>
 +
 +
<!-- Process steps -->
 +
<div class="row">
 +
 +
<!-- Process step -->
 +
<div class="desktop-three columns tablet-six columns mobile-six columns">
 +
<i class="icon-lightbulb process-icon"></i>
 +
<h3>Plan</h3>
 +
<p>A business process is a collection of structured activities or tasks that produce a service or product for a particular customer or customers.</p>
 +
</div>
 +
 +
<!-- Process step -->
 +
<div class="desktop-three columns tablet-six columns mobile-six columns">
 +
<i class="icon-cogs process-icon"></i>
 +
<h3>Build</h3>
 +
<p>A business process is a collection of structured activities or tasks that produce a service or product for a particular customer or customers.</p>
 +
</div>
 +
 +
<!-- Process step -->
 +
<div class="desktop-three columns tablet-six columns mobile-six columns">
 +
<i class="icon-check process-icon"></i>
 +
<h3>Test</h3>
 +
<p>A business process is a collection of structured activities or tasks that produce a service or product for a particular customer or customers.</p>
 +
</div>
 +
 +
<!-- Process step -->
 +
<div class="desktop-three columns tablet-six columns mobile-six columns">
 +
<i class="icon-rocket process-icon"></i>
 +
<h3>Launch</h3>
 +
<p>A business process is a collection of structured activities or tasks that produce a service or product for a particular customer or customers.</p>
 +
</div>
 +
 +
</div>
 +
</section>
 +
 +
 +
<!-- Portfolio -->
 +
<section id="portfolio" class="portfolio">
 +
 +
<!-- Title and navigation -->
 +
<div class="row">
 +
<div class="ten columns offset-by-one title">
 +
<h1>Portfolio</h1>
 +
<h2 id="filter-container">I made
 +
<a class="filter" data-order="desc" data-filter="website">websites</a>,
 +
<a class="filter" data-order="desc" data-filter="illustration">illustrations</a>,
 +
<a class="filter" data-order="desc" data-filter="photo">photographs</a> and a few
 +
<a class="filter" data-order="desc" data-filter="movie">movies</a>
 +
<a class="filter light" data-order="desc" data-filter="all">View all</a>
 +
</h2>
 +
<hr>
 +
</div>
 +
</div>
 +
 +
<!-- Portfolio grid with projects -->
 +
<div id="portfolio-grid" class="row">
 +
 +
<!-- Project item -->
 +
<div class="desktop-four columns tablet-six columns mobile-six columns mix illustration project-item">
 +
<a class="popup" href="images/placeholder-thumbnail.jpg">
 +
<span class="project-hover">
 +
<span>Project Title<br>
 +
<b>Illustration</b></span>
 +
</span>
 +
<img src="images/placeholder-thumbnail.jpg" alt="placeholder-thumbnail">
 +
</a>
 +
</div>
 +
 +
<!-- Project item -->
 +
<div class="desktop-four columns tablet-six columns mobile-six columns mix website project-item">
 +
<a class="popup" href="images/placeholder-thumbnail.jpg">
 +
<span class="project-hover">
 +
<span>Company INC<br>
 +
<b>Webdesign</b></span>
 +
</span>
 +
<img src="images/placeholder-thumbnail.jpg" alt="placeholder-thumbnail">
 +
</a>
 +
</div>
 +
 +
<!-- Project item -->
 +
<div class="desktop-four columns tablet-six columns mobile-six columns mix photo project-item">
 +
<a class="popup" href="images/placeholder-thumbnail.jpg">
 +
<span class="project-hover">
 +
<span>Autumn<br>
 +
<b>Photography</b></span>
 +
</span>
 +
<img src="images/placeholder-thumbnail.jpg" alt="placeholder-thumbnail">
 +
</a>
 +
</div>
 +
 +
<!-- Project item -->
 +
<div class="desktop-four columns tablet-six columns mobile-six columns mix photo project-item">
 +
<a class="popup" href="images/placeholder-thumbnail.jpg">
 +
<span class="project-hover">
 +
<span>Traveling<br>
 +
<b>Photography</b></span>
 +
</span>
 +
<img src="images/placeholder-thumbnail.jpg" alt="placeholder-thumbnail">
 +
</a>
 +
</div>
 +
 +
<!-- Project item -->
 +
<div class="desktop-four columns tablet-six columns mobile-six columns mix website project-item">
 +
<a href="portfolio-personal.html">
 +
<span class="project-hover">
 +
<span>Details Page<br>
 +
<b>Webdesign &amp; Branding</b></span>
 +
</span>
 +
<img src="images/placeholder-thumbnail.jpg" alt="placeholder-thumbnail">
 +
</a>
 +
</div>
 +
 +
<!-- Project item -->
 +
<div class="desktop-four columns tablet-six columns mobile-six columns mix photo project-item">
 +
<a class="popup" href="images/placeholder-thumbnail.jpg">
 +
<span class="project-hover">
 +
<span>Portraits<br>
 +
<b>Photography</b></span>
 +
</span>
 +
<img src="images/placeholder-thumbnail.jpg" alt="placeholder-thumbnail">
 +
</a>
 +
</div>
 +
 +
        <!-- Project item -->
 +
<div class="desktop-four columns tablet-six columns mobile-six columns mix photo project-item">
 +
<a class="popup" href="images/placeholder-thumbnail.jpg">
 +
<span class="project-hover">
 +
<span>Portraits<br>
 +
<b>Photography</b></span>
 +
</span>
 +
<img src="images/placeholder-thumbnail.jpg" alt="placeholder-thumbnail">
 +
</a>
 +
</div>
 +
       
 +
            <!-- Project item -->
 +
<div class="desktop-four columns tablet-six columns mobile-six columns mix photo project-item">
 +
<a class="popup" href="images/placeholder-thumbnail.jpg">
 +
<span class="project-hover">
 +
<span>Portraits<br>
 +
<b>Photography</b></span>
 +
</span>
 +
<img src="images/placeholder-thumbnail.jpg" alt="placeholder-thumbnail">
 +
</a>
 +
</div>
 +
           
 +
            <!-- Project item -->
 +
<div class="desktop-four columns tablet-six columns mobile-six columns mix photo project-item">
 +
<a class="popup" href="images/placeholder-thumbnail.jpg">
 +
<span class="project-hover">
 +
<span>Portraits<br>
 +
<b>Photography</b></span>
 +
</span>
 +
<img src="images/placeholder-thumbnail.jpg" alt="placeholder-thumbnail">
 +
</a>
 +
</div>
 +
           
 +
            <!-- Project item -->
 +
<div class="desktop-four columns tablet-six columns mobile-six columns mix photo project-item">
 +
<a class="popup" href="images/placeholder-thumbnail.jpg">
 +
<span class="project-hover">
 +
<span>Portraits<br>
 +
<b>Photography</b></span>
 +
</span>
 +
<img src="images/placeholder-thumbnail.jpg" alt="placeholder-thumbnail">
 +
</a>
 +
</div>
 +
           
 +
           
 +
            <!-- Project item -->
 +
<div class="desktop-four columns tablet-six columns mobile-six columns mix photo project-item">
 +
<a class="popup" href="images/placeholder-thumbnail.jpg">
 +
<span class="project-hover">
 +
<span>Portraits<br>
 +
<b>Photography</b></span>
 +
</span>
 +
<img src="images/placeholder-thumbnail.jpg" alt="placeholder-thumbnail">
 +
</a>
 +
</div>
 +
           
 +
            <!-- Project item -->
 +
<div class="desktop-four columns tablet-six columns mobile-six columns mix photo project-item">
 +
<a class="popup" href="images/placeholder-thumbnail.jpg">
 +
<span class="project-hover">
 +
<span>Portraits<br>
 +
<b>Photography</b></span>
 +
</span>
 +
<img src="images/placeholder-thumbnail.jpg" alt="placeholder-thumbnail">
 +
</a>
 +
</div>
 +
           
 +
<!-- Project item -->
 +
<div class="desktop-four columns tablet-six columns mobile-six columns mix movie project-item">
 +
<a class="popup-youtube" href="https://www.youtube.com/watch?v=Ycv5fNd4AeM">
 +
<span class="project-hover">
 +
<span>Project Title<br>
 +
<b>YouTube Video</b></span>
 +
</span>
 +
<img src="images/placeholder-thumbnail.jpg" alt="placeholder-thumbnail">
 +
</a>
 +
</div>
 +
 +
<!-- Project item -->
 +
<div class="desktop-four columns tablet-six columns mobile-six columns mix website project-item">
 +
<a class="popup" href="images/placeholder-thumbnail.jpg">
 +
<span class="project-hover">
 +
<span>Focus<br>
 +
<b>Webdesign &amp; Branding</b></span>
 +
</span>
 +
<img src="images/placeholder-thumbnail.jpg" alt="placeholder-thumbnail">
 +
</a>
 +
</div>
 +
 +
<!-- Project item -->
 +
<div class="desktop-four columns tablet-six columns mobile-six columns mix movie project-item">
 +
<a class="popup-vimeo" href="http://vimeo.com/50522981">
 +
<span class="project-hover">
 +
<span>Project Title<br>
 +
<b>Vimeo Video</b></span>
 +
</span>
 +
<img src="images/placeholder-thumbnail.jpg" alt="placeholder-thumbnail">
 +
</a>
 +
</div>
 +
 +
</div>
 +
<div class="clear"></div>
 +
</section>
 +
 +
 +
<!-- Call to Action -->
 +
<section class="call-to-action">
 +
<div class="row">
 +
<div class="twelve columns">
 +
<h3>A fast, effective &amp; responsive template for you and your portfolio</h3>
 +
<p>
 +
<a href="business.html" class="button white-border">View business version</a>
 +
<a href="#" class="button dark-bg">Buy this template</a>
 +
</p>
 +
</div>
 +
</div>
 +
</section>
 +
 +
 +
<!-- About me -->
 +
<section id="about-me" class="about-me">
 +
 +
<!-- Header with text ticker -->
 +
<div class="header" style="background-image: url('images/placeholder-slide-1.jpg');">
 +
<div class="text-ticker">
 +
<ul>
 +
<li class="fitticker">I am Cool</li>
 +
<li class="fitticker">I am Creative</li>
 +
<li class="fitticker">I am Nice</li>
 +
<li class="fitticker">I am Awesome</li>
 +
<li class="fitticker">I am Focus</li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
<!-- Title -->
 +
<div class="row">
 +
<div class="ten columns offset-by-one title">
 +
<h1>Project details</h1>
 +
<h2>HOW WE DO IT</h2>
 +
<hr>
 +
</div>
 +
</div>
 +
<div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >免费模板</a></div>
 +
<!-- About me introduction -->
 +
<div class="row">
 +
<div class="ten columns offset-by-one margin-bottom">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lectus elit, tincidunt nec turpis sed, accumsan iaculis ipsum. Nulla at augue auctor, tristique erat in, ultricies nunc. Mauris eget metus leo. Ut in mi lacinia, mattis nisl non, ultrices risus. Vestibulum aliquet aliquam ipsum ut ullamcorper. Pellentesque fringilla, massa vel rutrum consequat, nulla velit fermentum dolor, sed scelerisque mauris mauris non lectus.</p>
 +
<img src="images/placeholder-avatar.jpg" alt="placeholder-avatar" class="image-center image-circle margin-bottom">
 +
</div>
 +
</div>
 +
 +
<!-- About me facts -->
 +
<div class="row text-left">
 +
<div class="one column">
 +
<i class="icon-camera column-icon"></i>
 +
</div>
 +
<div class="five columns">
 +
<h3>I love photography</h3>
 +
<p>Etiam dictum gravida nibh at accum san. Quisque aliquam risus bibendum diam elementum, et tempus enim suscipit. Duis sit amet euismod.</p>
 +
</div>
 +
 +
<div class="one column">
 +
<i class="icon-headphones column-icon"></i>
 +
</div>
 +
<div class="five columns">
 +
<h3>I'm a big music fan</h3>
 +
<p>Etiam dictum gravida nibh at accum san. Quisque aliquam risus bibendum diam elementum, et tempus enim suscipit. Duis sit amet euismod.</p>
 +
</div>
 +
 +
<div class="one column">
 +
<i class="icon-pencil column-icon"></i>
 +
</div>
 +
<div class="five columns">
 +
<h3>Illustrating is my passion</h3>
 +
<p>Etiam dictum gravida nibh at accum san. Quisque aliquam risus bibendum diam elementum, et tempus enim suscipit. Duis sit amet euismod.</p>
 +
</div>
 +
 +
<div class="one column">
 +
<i class="icon-film column-icon"></i>
 +
</div>
 +
<div class="five columns">
 +
<h3>I love watching comedies</h3>
 +
<p>Etiam dictum gravida nibh at accum san. Quisque aliquam risus bibendum diam elementum, et tempus enim suscipit. Duis sit amet euismod.</p>
 +
</div>
 +
</div>
 +
</section>
 +
 +
 +
<!-- Resume -->
 +
<section id="resume" class="resume">
 +
 +
<div class="row">
 +
<div class="ten columns offset-by-one title">
 +
<h1>Resume</h1>
 +
<h2>My work experiences</h2>
 +
<hr>
 +
</div>
 +
</div>
 +
 +
<!-- Work experience -->
 +
<div class="row margin">
 +
<div class="two columns offset-by-one text-right">
 +
<h2 class="years">2011 - 2013</h2>
 +
</div>
 +
<div class="eight columns text-left column-border">
 +
<h3>Function at A Huge Company</h3>
 +
<p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words et cetera.</p>
 +
</div>
 +
</div>
 +
 +
<!-- Work experience -->
 +
<div class="row margin">
 +
<div class="two columns offset-by-one text-right">
 +
<h2 class="years">2008 - 2010</h2>
 +
</div>
 +
<div class="eight columns text-left column-border">
 +
<h3>Function at A Big Company</h3>
 +
<p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words et cetera.</p>
 +
</div>
 +
</div>
 +
 +
<!-- Work experience -->
 +
<div class="row margin">
 +
<div class="two columns offset-by-one text-right">
 +
<h2 class="years">2007</h2>
 +
</div>
 +
<div class="eight columns text-left column-border">
 +
<h3>Function at Company X</h3>
 +
<p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words et cetera.</p>
 +
</div>
 +
</div>
 +
 +
<!-- Download button -->
 +
<div class="row no-spacing">
 +
<div class="eight columns offset-by-three text-left">
 +
<p><a href="#" class="button no-margin"><i class="icon-file icon-left"></i>Download resume</a></p>
 +
</div>
 +
</div>
 +
</section>
 +
 +
 +
<!-- Quotes -->
 +
<section class="quote">
 +
<div class="row">
 +
<div id="quote-slider" class="eight columns offset-by-two">
 +
<ul>
 +
<li>
 +
<!-- Quote -->
 +
<i class="icon-star rating"></i>
 +
<i class="icon-star rating"></i>
 +
<i class="icon-star rating"></i>
 +
<i class="icon-star rating"></i>
 +
<i class="icon-star rating"></i>
 +
<h2></h2>
 +
 +
<img src="images/placeholder-avatar.jpg" alt="placeholder-avatar" class="image-center image-circle">
 +
</li>
 +
<li>
 +
<!-- Quote -->
 +
<p class="quote-symbol">&ldquo;</p>
 +
<h2>&nbsp;</h2>
 +
<img src="images/placeholder-avatar.jpg" alt="placeholder-avatar" class="image-center image-circle">
 +
</li>
 +
<li>
 +
<!-- Quote -->
 +
<p class="quote-symbol">&ldquo;</p>
 +
<h2>&nbsp;</h2>
 +
<img src="images/placeholder-avatar.jpg" alt="placeholder-avatar" class="image-center image-circle">
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
</section>
 +
 +
 +
<!-- Contact -->
 +
<section id="contact" class="contact">
 +
<div class="header-inherited" style="background-image: url('images/placeholder-slide-1.jpg');">
 +
<div class="row">
 +
<div class="eight columns offset-by-two">
 +
<div id="contact-slider">
 +
<ul>
 +
<li> <a href="#"><i class="icon-facebook medium-icon white-border"></i></a>
 +
<a href="#"><i class="icon-google-plus medium-icon white-border"></i></a>
 +
<a href="#"><i class="icon-dribbble medium-icon white-border"></i></a>
 +
</li>
 +
<li>
 +
<!-- Contact form -->
 +
<form class="contact-form" novalidate id="contactForm">
 +
<div class="form-column">
 +
<input type="text" id="contactName" name="name" placeholder="Name" class="text">
 +
<input type="email" id="contactEmail" name="email" placeholder="E-Mail" class="email">
 +
<input type="text" id="contactPhone" name="phonenumber" placeholder="Phone" class="text">
 +
</div>
 +
<div class="form-column">
 +
<textarea id="contactMessage" placeholder="Message" name="message" class="textarea"></textarea>
 +
</div>
 +
<button class="button white-border"></button>
 +
</form>
 +
<br class="clear">
 +
<p class="script no-margin-top"><a data-rel="1" href="#" class="contactLink"><i class="icon-long-arrow-left"></i> Return to contact details</a></p>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</section>
 +
 +
<div id="modalOverlay" class="modal-overlay hide"></div>
 +
<div id="modal" class="modal hide">
 +
<h1 id="modalTitle">Thanks!</h1>
 +
<p id="modalContent">We'll be in touch real soon!</p>
 +
<p id="modalClose" class="modal-close">(Close this thing)</p>
 +
</div>
 +
 +
<div id="loader">
 +
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABNVJREFUeNrcWt1x4jAQVjx5j1PBkQrCVRCnAqACoAJgknfgnRmgAisVYCrAqSBOBfgqOKeCOznz7bFZZGN+7dzO7CRYtrzf/mm18tXT05M6EbmGPcN1w/fst6TIcGL4Ff+H+H0QTSaTz7/OCQB0DC8M/zY8NHxjeGl4bPjW8JXggeE5nu3huQXmOZiuj9B+H4LEECwVsAaL1MDcIiHuDfE7YHM1MdcUc832tdIhFkkBrA0/GNZwjyGuDeFWkm4w9gYL+MwCCeb5abiFedf7Wmgfi9QhgAvhSesBBIiExers7wdiYonxHxkWCMEe3tXG3MmpLJJqZ8WES6lr+A4uFWFsyrQ+hbCcUms1MF8NrtaDBUbCDX9ifI25j7bICG5BGWfA/JxA9iCYtoznWdiD1ut4RwMKoszWhSVXmFcfCoT78lhojcxPY3rPWIvAM8w1xF8ptGayqKz3XO+wRAeaaQktTzE2hiDHkowNKbRm741EPOYC6UBDKYhH9qALjSnmw6ckio08MCvEZrIr2Clos0BEZwKhWDpuQXAfa4xiYAIsoDuzFmkiC0RXXYa6YB+JhIgW3k4ekD4sMhB+uLgwCG4BzZSrWDabsqXgCxAXcRGIzDDC2ECVQ2NYoCliKYLit4D0mUl5vAxxLSkJSAIwUwvAng1ID+VCItLs2JbuSnAxJeLiswh9fn7ucCB0w0wsePUTrROncrG2uDZHNaCusLFasCDiAf4uVvMyyUXdxVO/i7ru1mH7gbl4qHlA2XHuWAlF0NM1z4ELxSIOmshesaoWLbFf4ZQWlXUHcSCr1QfcUDWKLCV9eu3BgdDvYtCrQKbKAlKzuJzrsBs41QruKcqgmFtlMpmE5FqeiIV6iYtfUSBuVtEYi4wVqW9GjvpP6DsCqXHXNyWKmwUksWSGqgGJREyHDi56O1JcVcizLNKfycmhPJyX4ipEtsU77ZW9O7TEF1hBq0C2iuNz8SbXstUvjQrGBtWA3EI1ihHqJ3H3CizXyqYO5ErEZjAwq/u/GAlEeUzVcLNCe5FexlZjydPvUm03nF/UpudbNvXV5nTrS4/BWENzIFptH8zY9sllZaqh6OJsWcgR+19pgQGuuSW6lG9pgPiyx8CBzNSm1c+DPi7Rxah1OxJB3wS4xAYkgQV8YYEuHr60i/lQbEu4GXXkZ3lFo4YFpiKDUQ/WvzCIR6b19PeKKXdn9duC6TrCxcgyizPGTJpw3nJAUOs2KgKEjhOmAowGmCZe5p0hxb6pzRlJwkoQApF5MubkbPIpXmxg6JhhdQJA6fxrpNOWSLMjBkKrnGZh3tGbZpmD/9YA6gMEdVxe1KZLXqQcp9Pd2KJpD++lwnWsdnQ8dx2GktArFJYDmJxOrUZqc6LbVl9Pf1MBf4nKlc7daZV+FMA9zEHH4JRJ9S7NFDmeTl90hyB/g2uFzPQz9fVzjhB9MlckhTlTQiJSapvVdTHGKVsWaoQU3bNTAhgDEI8NWrBuIawLtxjCCjdMYA+gfczxh2XBgG3o5rB44W7Ovs0HDeu8Mgt1mOYpGdxCkBT4h2Wed4zRPXXM84r59z7KOOTrILLACC9vQMOh2nyDRV3ymLmhyzZC92rzxUMAC+hjUt/1kalTg/lHZz0mtKSQ7UDH6siPzjj9FWAA4gh/kLD8SJ0AAAAASUVORK5CYII=" alt="loader">
 +
</div>
 +
 +
<!-- Credits and back to top button -->
 +
<div class="contact-bottom">
 +
<p class="credit">&nbsp;</p>
 +
<a href="#home" class="back-to-top"><i class="icon-angle-up"></i></a>
 +
</div>
 +
<!-- The end -->
 +
 +
 +
<!-- Scripts -->
 +
<script src="js/lib/jquery.min.js"></script>
 +
<script src="js/lib/classie.js"></script>
 +
<script src="js/lib/smoothscroll.js"></script>
 +
<script src="js/lib/jquery.fittext.js"></script>
 +
<script src="js/lib/jquery.superslides.min.js"></script>
 +
<script src="js/lib/jquery.sudoslider.min.js"></script>
 +
<script src="js/lib/jquery.mixitup.min.js"></script>
 +
<script src="js/lib/jquery.magnific-popup.min.js"></script>
 +
<script src="js/main.js"></script>
 +
</body>
 
</html>
 
</html>

Revision as of 11:50, 5 September 2015

Focus - Personal Edition

  • Meet The Team

    We are from Hangzhou No.4 High School

    LEARN MORE

  • You Are Amazing

    Work hard, play hard & reap the rewards

    Experience more

  • In Every Single Way

    Keep your fears to yourself, but share your creativity with others

  • logo-focus

    An example slide with an image in it

    Experience more

Project

This is what We do

  • I design

    Design often necessitates considering the aesthetic and functional dimensions of both the design object and process. It involves research, thought, modeling, interactive adjustment, and re-design. Diverse kinds of objects may be designed, including clothing, graphical user interfaces and corporate identities.

  • I code

    Coding often necessitates considering the aesthetic and functional dimensions of both the design object and process. It involves research, thought, modeling, interactive adjustment, and re-design. Diverse kinds of objects may be designed, including clothing, graphical user interfaces and corporate identities.

  • I make illustrations

    Illustration often necessitates considering the aesthetic and functional dimensions of both the design object and process. It involves research, thought, modeling, interactive adjustment, and re-design. Diverse kinds of objects may be designed, including clothing, graphical user interfaces and corporate identities.

  • I take beautiful pictures

    Photography often necessitates considering the aesthetic and functional dimensions of both the design object and process. It involves research, thought, modeling, interactive adjustment, and re-design. Diverse kinds of objects may be designed, including clothing, graphical user interfaces and corporate identities.

Process

How I do it

Plan

A business process is a collection of structured activities or tasks that produce a service or product for a particular customer or customers.

Build

A business process is a collection of structured activities or tasks that produce a service or product for a particular customer or customers.

Test

A business process is a collection of structured activities or tasks that produce a service or product for a particular customer or customers.

Launch

A business process is a collection of structured activities or tasks that produce a service or product for a particular customer or customers.

Portfolio

I made websites, illustrations, photographs and a few movies View all

A fast, effective & responsive template for you and your portfolio

View business version Buy this template

  • I am Cool
  • I am Creative
  • I am Nice
  • I am Awesome
  • I am Focus

Project details

HOW WE DO IT

Collect from 免费模板

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lectus elit, tincidunt nec turpis sed, accumsan iaculis ipsum. Nulla at augue auctor, tristique erat in, ultricies nunc. Mauris eget metus leo. Ut in mi lacinia, mattis nisl non, ultrices risus. Vestibulum aliquet aliquam ipsum ut ullamcorper. Pellentesque fringilla, massa vel rutrum consequat, nulla velit fermentum dolor, sed scelerisque mauris mauris non lectus.

placeholder-avatar

I love photography

Etiam dictum gravida nibh at accum san. Quisque aliquam risus bibendum diam elementum, et tempus enim suscipit. Duis sit amet euismod.

I'm a big music fan

Etiam dictum gravida nibh at accum san. Quisque aliquam risus bibendum diam elementum, et tempus enim suscipit. Duis sit amet euismod.

Illustrating is my passion

Etiam dictum gravida nibh at accum san. Quisque aliquam risus bibendum diam elementum, et tempus enim suscipit. Duis sit amet euismod.

I love watching comedies

Etiam dictum gravida nibh at accum san. Quisque aliquam risus bibendum diam elementum, et tempus enim suscipit. Duis sit amet euismod.

Resume

My work experiences

2011 - 2013

Function at A Huge Company

All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words et cetera.

2008 - 2010

Function at A Big Company

All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words et cetera.

2007

Function at Company X

All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words et cetera.

Download resume

  • placeholder-avatar

  • “

     

    placeholder-avatar

  • “

     

    placeholder-avatar
loader