m |
|||
(142 intermediate revisions by 3 users not shown) | |||
Line 2: | Line 2: | ||
<html> | <html> | ||
− | < | + | <head> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <link href='https://fonts.googleapis.com/css?family=Comfortaa:300,400,700' rel='stylesheet' type='text/css'> | |
− | < | + | <style> |
+ | .top-buffer { margin-top:40px; } | ||
− | + | .vertical-center { | |
− | + | position: relative; | |
− | + | top: 50%; | |
+ | -webkit-transform: translateY(-50%); | ||
+ | transform: translateY(-50%); | ||
+ | } | ||
− | + | .flip3D{ | |
+ | width:250px; height:250px; margin:10px; float:center; margin: auto; | ||
+ | border-weight: 10px; | ||
+ | cursor: pointer; | ||
+ | |||
+ | } | ||
+ | .flip3D > .front{ | ||
+ | border-radius: 5px; | ||
+ | border-color: #00274c; | ||
+ | background: rgba(0,0,0,0.0); | ||
+ | border-style: solid; | ||
+ | position:absolute; | ||
+ | -webkit-transform: perspective( 600px ) rotateY( 0deg ); | ||
+ | transform: perspective( 600px ) rotateY( 0deg ); | ||
+ | width:250px; height:250px; | ||
+ | backface-visibility: hidden; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | -webkit-transition:-webkit-transform .5s linear 0s; | ||
+ | transition:-webkit-transform .5s linear 0s; | ||
+ | transition:transform .5s linear 0s; | ||
+ | transition: transform .5s linear 0s, -webkit-transform .5s linear 0s; | ||
+ | box-shadow: 0 15px 50px rgba(0,0,0,0.0); | ||
+ | float: center; | ||
+ | } | ||
+ | .flip3D > .back{ | ||
+ | padding-top:20px; | ||
+ | padding-bottom:20px; | ||
+ | border-radius: 5px; | ||
+ | border-color: #00274c; | ||
+ | background: rgba(0,0,0,0.0); | ||
+ | border-style: solid; | ||
+ | position:absolute; | ||
+ | -webkit-transform: perspective( 600px ) rotateY( 180deg ); | ||
+ | transform: perspective( 600px ) rotateY( 180deg ); | ||
+ | width:250px; height:250px; | ||
+ | backface-visibility: hidden; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | -webkit-transition:-webkit-transform .5s linear 0s; | ||
+ | transition:-webkit-transform .5s linear 0s; | ||
+ | transition:transform .5s linear 0s; | ||
+ | transition: transform .5s linear 0s, -webkit-transform .5s linear 0s; | ||
+ | box-shadow: 0 15px 50px rgba(0,0,0,0.0); | ||
+ | } | ||
+ | .flip3D:hover > .front{ | ||
+ | -webkit-transform: perspective( 600px ) rotateY( -180deg ); | ||
+ | transform: perspective( 600px ) rotateY( -180deg ); | ||
+ | } | ||
+ | .flip3D:hover > .back{ | ||
+ | -webkit-transform: perspective( 600px ) rotateY( 0deg ); | ||
+ | transform: perspective( 600px ) rotateY( 0deg ); | ||
+ | } | ||
− | + | .carousel-indicators li { visibility: hidden; } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | p{ | |
− | + | color: #00274c; | |
− | + | font-weight: 350; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | </ | + | </style> |
+ | </head> | ||
+ | <body> | ||
+ | <div class="container text-center"> | ||
+ | |||
+ | <div class="row"> | ||
+ | <div class="col-xs-12 col-lg-9"> | ||
+ | <div class="row" style="border-bottom:thin solid;"> | ||
+ | <div class="col-xs-12" style="font-family: 'Comfortaa', cursive; color:#00274c !important; padding-bottom:30px"> | ||
+ | <h1>Michigan Software Team<br>ProtoCat 3.0</h1> | ||
+ | </div> | ||
+ | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | </div> | + | <div class="row top-buffer"> |
+ | <div class="col-xs-12 col-sm-6 col-md-4 top-buffer"> | ||
+ | |||
+ | <div class="flip3D" onclick="location.href='https://2016.igem.org/Team:Michigan_Software/Description'"> | ||
+ | <div class="back"> | ||
+ | <p class="vertical-center" style="font-size:14pt">Click to learn about ProtoCat 3.0!</p> | ||
+ | </div> | ||
+ | <div class="front"> | ||
+ | <img width="160" height="160" class="center-block vertical-center" src="https://static.igem.org/mediawiki/2016/8/83/T--Michigan_Software--testTubeBlue.png"> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-xs-12 col-sm-6 col-md-4 top-buffer"> | ||
+ | |||
+ | <div class="flip3D" onclick="location.href='https://2016.igem.org/Team:Michigan_Software/Attributions'"> | ||
+ | <div class="back"> | ||
+ | <p class="vertical-center" style="font-size:14pt">Click to meet the team!</p> | ||
+ | </div> | ||
+ | <div class="front"> | ||
+ | <img width="160" height="160" class="center-block vertical-center" src="https://static.igem.org/mediawiki/2016/a/ae/T-Michigan_Software--teamBlue.png"> | ||
+ | </div> | ||
+ | </div> | ||
− | <div | + | </div> |
− | < | + | <div class="col-xs-12 col-sm-6 col-md-4 top-buffer"> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <div class="flip3D" onclick="location.href='https://2016.igem.org/Team:Michigan_Software/Human_Practices'"> | ||
+ | <div class="back"> | ||
+ | <p class="vertical-center" style="font-size:14pt">Click to learn more about our human practices!</p> | ||
+ | </div> | ||
+ | <div class="front"> | ||
+ | <img width="160" height="160" class="center-block vertical-center" src="https://static.igem.org/mediawiki/2016/8/80/T--Michigan_Software--globeBlue.png"> | ||
+ | </div> | ||
+ | </div> | ||
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </div> | + | |
+ | <div class="col-xs-12 col-sm-6 col-md-4 top-buffer"> | ||
+ | |||
+ | <div class="flip3D" onclick="location.href='https://2016.igem.org/Team:Michigan_Software/Results'"> | ||
+ | <div class="back"> | ||
+ | <p class="vertical-center" style="font-size:14pt">Click to see our results!</p> | ||
+ | </div> | ||
+ | <div class="front"> | ||
+ | <img width="160" height="160" class="center-block vertical-center" src="https://static.igem.org/mediawiki/2016/3/38/T--Michigan_Software--usbBlue.png"> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-xs-12 col-sm-6 col-md-4 top-buffer"> | ||
+ | |||
+ | <div class="flip3D" onclick="location.href='https://2016.igem.org/Team:Michigan_Software/UserGuide'"> | ||
+ | <div class="back"> | ||
+ | <p class="vertical-center" style="font-size:14pt">Click to learn how to use ProtoCat 3.0!</p> | ||
+ | </div> | ||
+ | <div class="front"> | ||
+ | <img width="160" height="160" class="center-block vertical-center" src="https://static.igem.org/mediawiki/2016/c/cc/T--Michigan_Software--manualBlue.png"> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-xs-12 col-sm-6 col-md-4 top-buffer"> | ||
+ | <div class="flip3D" | ||
+ | onclick="location.href='http://protocat.org'"> | ||
+ | <div class="back"> | ||
+ | <p class="vertical-center" style="font-size:14pt">Click to visit our website!</p> | ||
+ | </div> | ||
+ | <div class="front"> | ||
+ | <img width="200" height="200" class="center-block vertical-center" src="https://static.igem.org/mediawiki/2016/5/5c/T--Michigan_Software--blueCat.png"> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <footer class="container-fluid text-center"> | ||
+ | |||
+ | </footer> | ||
+ | </body> | ||
</html> | </html> |
Latest revision as of 23:37, 17 October 2016
Michigan Software Team
ProtoCat 3.0
Click to learn about ProtoCat 3.0!
![](https://static.igem.org/mediawiki/2016/8/83/T--Michigan_Software--testTubeBlue.png)
Click to meet the team!
![](https://static.igem.org/mediawiki/2016/a/ae/T-Michigan_Software--teamBlue.png)
Click to learn more about our human practices!
![](https://static.igem.org/mediawiki/2016/8/80/T--Michigan_Software--globeBlue.png)
Click to see our results!
![](https://static.igem.org/mediawiki/2016/3/38/T--Michigan_Software--usbBlue.png)
Click to learn how to use ProtoCat 3.0!
![](https://static.igem.org/mediawiki/2016/c/cc/T--Michigan_Software--manualBlue.png)
Click to visit our website!
![](https://static.igem.org/mediawiki/2016/5/5c/T--Michigan_Software--blueCat.png)