Difference between revisions of "Team:Mingdao/HP/Silver"

Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
−
<title>Hielo by TEMPLATED</title>
+
<title>iGEM Human Practice</title>
 
<meta charset="utf-8" />
 
<meta charset="utf-8" />
 
<meta name="viewport" content="width=device-width, initial-scale=1" />
 
<meta name="viewport" content="width=device-width, initial-scale=1" />
Line 20: Line 20:
 
         background: #f3f4f4;}
 
         background: #f3f4f4;}
  
−
    </style>
+
</style>
  
−
<style>
+
 
−
@charset "UTF-8";
+
<style>
 +
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
 +
body, html {
 +
    height: 100%;
 +
    color: #777;
 +
    line-height: 1.8;
 +
}
 +
 
 +
/* Create a Parallax Effect */
 +
.bgimg-1, .bgimg-2, .bgimg-3 {
 +
    background-attachment: fixed;
 +
    background-position: center;
 +
    background-repeat: no-repeat;
 +
    background-size: cover;
 +
}
 +
 
 +
/* First image (Logo. Full height) */
 +
.bgimg-1 {
 +
    background-image: url('https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg');
 +
    min-height: 100%;
 +
}
 +
 
 +
/* Second image (Portfolio) */
 +
.bgimg-2 {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg");
 +
    min-height: 400px;
 +
}
 +
 
 +
/* Third image (Contact) */
 +
.bgimg-3 {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/a/a3/MD-trianglify-back-0.png");
 +
    min-height: 200px;
 +
}
 +
 
 +
.w3-wide {letter-spacing: 10px;}
 +
.w3-hover-opacity {cursor: pointer;}
 +
 
 +
/* Turn off parallax scrolling for tablets and phones */
 +
@media only screen and (max-device-width: 1024px) {
 +
    .bgimg-1, .bgimg-2, .bgimg-3 {
 +
        background-attachment: scroll;
 +
    }
 +
}
 +
</style>
 +
 +
 +
 +
 +
<style>
 +
@charset "UTF-8";
 
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);
 
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);
 
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
 
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
Line 4,378: Line 4,427:
 
   <div class="w3-bar-block">
 
   <div class="w3-bar-block">
 
     <a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i>  Close Menu</a>
 
     <a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i>  Close Menu</a>
−
     <a href="#" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fa fa-users fa-fw"></i>  Overview</a>
+
     <a href="#expert" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fa fa-users fa-fw"></i>  Expert<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Outreach</a>
−
     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-eye fa-fw"></i>  Views</a>
+
     <a href="#two" class="w3-bar-item w3-button w3-padding"><i class="fa fa-eye fa-fw"></i>  Enterprise<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Consultation</a>
−
     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-users fa-fw"></i>  Traffic</a>
+
     <a href="#three" class="w3-bar-item w3-button w3-padding"><i class="fa fa-users fa-fw"></i>  Promotion</a>
−
     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-bullseye fa-fw"></i>  Geo</a>
+
     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-bullseye fa-fw"></i>  Seminar</a>
−
     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-camera-retro fa-fw"></i>  Orders</a>
+
     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-camera-retro fa-fw"></i>  Experiment<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tutorial</a>
−
     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-bell fa-fw"></i>  News</a>
+
     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-bell fa-fw"></i>  Meetups</a>
−
     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-bank fa-fw"></i>  General</a>
+
     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-bank fa-fw"></i>  Survey</a>
−
     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-history fa-fw"></i>  History</a>
+
    <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-history fa-fw"></i>  Public Debate</a>
 +
     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-history fa-fw"></i>  Public Debate</a>
 
     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-cog fa-fw"></i>  Settings</a><br><br>
 
     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-cog fa-fw"></i>  Settings</a><br><br>
 
   </div>
 
   </div>
Line 4,398: Line 4,448:
 
 
 
<!-- One -->
 
<!-- One -->
−
<section id="one" class="wrapper style2">
+
<section id="expert" class="wrapper style2">
−
<div class="inner">
+
<div style="margin-left: 20px">
−
<div class="grid-style">
+
<span class="w3-center w3-padding-small w3-black w3-xlarge w3-wide w3-animate-opacity"> <span class="w3-hide-small"></span> </span>
 +
  <span class="w3-center w3-padding-large w3-xlarge w3-wide w3-animate-opacity">Expert Consultation</span>
 +
<br/><br/>
 +
<!-- Box -->
 +
<div class="box" style="background-color: rgba(255, 255, 255, 0)">
 +
<p>Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.</p>
 +
<p>Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.</p>
 +
</div>
 +
</div>
 +
<div class="inner">
 +
<div class="grid-style">
  
−
<div class="w3-half w3-centered">
+
<div class="w3-half w3-centered">
−
<div class="box">
+
<div class="box">
−
<div class="image fit">
+
<div class="image fit">
−
<img src="https://static.igem.org/mediawiki/2017/a/a3/MD-trianglify-back-0.png" alt="" />
+
<img src="https://static.igem.org/mediawiki/2017/a/a3/MD-trianglify-back-0.png" alt="" />
−
</div>
+
</div>
−
<div class="content">
+
<div class="content">
−
<header class="align-center">
+
<header class="align-center">
−
<p class="w3-center">maecenas sapien feugiat ex purus</p>
+
<p class="w3-center">maecenas sapien feugiat ex purus</p>
−
<h2>Lorem ipsum dolor</h2>
+
<h2>Lorem ipsum dolor</h2>
−
</header>
+
</header>
−
<p class="w3-center"> Cras aliquet urna ut sapien tincidunt, quis malesuada elit facilisis. Vestibulum sit amet tortor velit. Nam elementum nibh a libero pharetra elementum. Maecenas feugiat ex purus, quis volutpat lacus placerat malesuada.</p>
+
<p class="w3-center"> Cras aliquet urna ut sapien tincidunt, quis malesuada elit facilisis. Vestibulum sit amet tortor velit. Nam elementum nibh a libero pharetra elementum. Maecenas feugiat ex purus, quis volutpat lacus placerat malesuada.</p>
−
<footer class="align-center">
+
<footer class="align-center">
−
<a href="#" class="button alt">Learn More</a>
+
<a href="#" class="button alt">Learn More</a>
−
</footer>
+
</footer>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
</div>
 
  
 
<div class="w3-half w3-centered">
 
<div class="w3-half w3-centered">
Line 4,483: Line 4,543:
 
</div>
 
</div>
 
</section>
 
</section>
−
 
+
<!--four-->
 +
<section>
 +
<div class="bgimg-3 w3-display-container w3-opacity-min">
 +
<div class="w3-display-middle">
 +
    <span class="w3-xxlarge w3-text-white w3-wide">INTRODUCTION</span>
 +
  </div>
 +
</div>
 +
<div style="margin-left: 20px; margin-top: 20px">
 +
<span class="w3-center w3-padding-small w3-black w3-xlarge w3-wide w3-animate-opacity"> <span class="w3-hide-small"></span> </span>
 +
  <span class="w3-center w3-padding-large w3-xlarge w3-wide w3-animate-opacity">Expert Consultation</span>
 +
<br/><br/>
 +
<!-- Box -->
 +
<div class="box" style="background-color: rgba(255, 255, 255, 0)">
 +
<p>Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.</p>
 +
<p>Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.</p>
 +
</div>
 +
<div class="gallery">
 +
<div>
 +
<div class="image fit">
 +
<a href="#"><img src="https://static.igem.org/mediawiki/2017/a/a3/MD-trianglify-back-0.png" alt="" /></a>
 +
</div>
 +
</div>
 +
<div>
 +
<div class="image fit">
 +
<a href="#"><img src="https://static.igem.org/mediawiki/2017/a/a3/MD-trianglify-back-0.png" alt="" /></a>
 +
</div>
 +
</div>
 +
</div>
 +
</section>
 +
<!--pre footre-->
 
  <div class="w3-container w3-black w3-padding-16">
 
  <div class="w3-container w3-black w3-padding-16">
 
     <div class="w3-row">
 
     <div class="w3-row">
Line 4,497: Line 4,586:
 
         <p class=" w3-wide">Enterprise...</p>
 
         <p class=" w3-wide">Enterprise...</p>
 
         <p class=" w3-wide">Experts...</p>
 
         <p class=" w3-wide">Experts...</p>
−
         <p class=" w3-wide">[ More details ]</p>
+
         <p class=" w3-wide">More</p>
 
       </div>
 
       </div>
 
       <div class="w3-container w3-quarter">
 
       <div class="w3-container w3-quarter">

Revision as of 04:35, 25 September 2017

iGEM Human Practice

Home Judging Team Project Human-Practice Notebook Brainstorm
Expert Consultation

Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.

Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.

maecenas sapien feugiat ex purus

Lorem ipsum dolor

Cras aliquet urna ut sapien tincidunt, quis malesuada elit facilisis. Vestibulum sit amet tortor velit. Nam elementum nibh a libero pharetra elementum. Maecenas feugiat ex purus, quis volutpat lacus placerat malesuada.

mattis elementum sapien pretium tellus

Vestibulum sit amet

Cras aliquet urna ut sapien tincidunt, quis malesuada elit facilisis. Vestibulum sit amet tortor velit. Nam elementum nibh a libero pharetra elementum. Maecenas feugiat ex purus, quis volutpat lacus placerat malesuada.

Nam vel ante sit amet libero scelerisque facilisis eleifend vitae urna

Morbi maximus justo

Nam vel ante sit amet libero scelerisque facilisis eleifend vitae urna

Morbi maximus justo

INTRODUCTION
Expert Consultation

Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.

Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.

Project

Research

Design

Modeling

Human Practice

Collaboration

Enterprise...

Experts...

More

Something

Users

Active

Geo

Interests

Brainstorm

Debate

About us