Line 2: | Line 2: | ||
<html> | <html> | ||
<head> | <head> | ||
− | <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> | |
− | + | ||
− | @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> | + | <a href="#expert" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fa fa-users fa-fw"></i> Expert<br/> Outreach</a> |
− | <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-eye fa-fw"></i> | + | <a href="#two" class="w3-bar-item w3-button w3-padding"><i class="fa fa-eye fa-fw"></i> Enterprise<br/> Consultation</a> |
− | <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-users fa-fw"></i> | + | <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> | + | <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> | + | <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-camera-retro fa-fw"></i> Experiment<br/> Tutorial</a> |
− | <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-bell fa-fw"></i> | + | <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> | + | <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> | + | <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=" | + | <section id="expert" class="wrapper style2"> |
− | <div class=" | + | <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="box"> | |
− | + | <div class="image fit"> | |
− | + | <img src="https://static.igem.org/mediawiki/2017/a/a3/MD-trianglify-back-0.png" alt="" /> | |
− | + | </div> | |
− | + | <div class="content"> | |
− | + | <header class="align-center"> | |
− | + | <p class="w3-center">maecenas sapien feugiat ex purus</p> | |
− | + | <h2>Lorem ipsum dolor</h2> | |
− | + | </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> | |
− | + | <footer class="align-center"> | |
− | + | <a href="#" class="button alt">Learn More</a> | |
− | + | </footer> | |
+ | </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"> | + | <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
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
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