Difference between revisions of "Team:Michigan Software"

m
m
 
(124 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{Michigan_Software}}
 
{{Michigan_Software}}
 
<html>
 
<html>
−
+
 
 
<head>
 
<head>
 +
 +
   
 +
 +
    <link href='https://fonts.googleapis.com/css?family=Comfortaa:300,400,700' rel='stylesheet' type='text/css'>
 +
 
<style>
 
<style>
  
−
.jumbotron{
 
−
background-color: #ffff99;
 
−
border-color: #002080;
 
−
border-size: 5px;
 
−
border-style: solid;
 
−
}
 
  
−
                 .carousel-indicators li { visibility: hidden; }
+
        .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>
 
</style>
 
</head>
 
</head>
 +
<body>
  
−
<div class="container">
 
−
<div class="row">
 
  
−
<div class="col-xs-5">
+
    <div class="container text-center">
−
<img src="https://static.igem.org/mediawiki/2016/2/2e/T--Michigan_Software--CatCropped.extension.png">
+
       
−
</div>
+
        <div class="row">
 +
        <div class="col-xs-12 col-lg-9">
  
−
<div class="col-xs-7">
+
        <div class="row" style="border-bottom:thin solid;">
−
<h2>Michigan Software</h2>
+
            <div class="col-xs-12" style="font-family: 'Comfortaa', cursive; color:#00274c !important; padding-bottom:30px">
−
<h1>Protocat 3.0<h1>
+
                <h1>Michigan Software Team<br>ProtoCat 3.0</h1>
−
</div>
+
            </div>
 +
        </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 class="column full_size" >
+
            </div>
−
<h2>Project</h2>
+
            <div class="col-xs-12 col-sm-6 col-md-4 top-buffer">
−
<p>ProtoCat 3.0 is a free, open-source online catalog of laboratory protocols with improvements upon last year’s project including a larger protocol database and a website with more advanced features. By using ProtoCat 3.0, users can find tested, reliable protocols from across the globe all in one place.</p>
+
  
−
</div>
+
                <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>
  
−
<br>
+
            </div>
−
<br>
+
−
<br>
+
−
<br>
+
−
<br>
+
−
<br>
+
  
−
<div id="myCarousel" class="carousel slide" data-ride="carousel">
+
            <div class="col-xs-12 col-sm-6 col-md-4 top-buffer">
−
    <!-- Indicators -->
+
               
−
    <ol class="carousel-indicators">
+
                <div class="flip3D" onclick="location.href='https://2016.igem.org/Team:Michigan_Software/Results'">
−
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
                    <div class="back">
−
      <li data-target="#myCarousel" data-slide-to="1"></li>
+
                        <p class="vertical-center" style="font-size:14pt">Click to see our results!</p>
−
    </ol>
+
                    </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>
  
−
    <!-- Wrapper for slides -->
+
            </div>
−
    <div class="carousel-inner" role="listbox">
+
            <div class="col-xs-12 col-sm-6 col-md-4 top-buffer">
−
      <div class="item active">
+
               
−
        <img src="https://static.igem.org/mediawiki/2016/2/2e/T--Michigan_Software--CatCropped.extension.png" alt="Image">
+
                <div class="flip3D" onclick="location.href='https://2016.igem.org/Team:Michigan_Software/UserGuide'">
−
        <div class="carousel-caption">
+
                    <div class="back">
−
          <h3>Sell $</h3>
+
                        <p class="vertical-center" style="font-size:14pt">Click to learn how to use ProtoCat 3.0!</p>
−
          <p>Money Money.</p>
+
                    </div>
−
        </div>
+
                    <div class="front">
−
      </div>
+
                        <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 class="item">
+
            </div>
−
        <img src="http://placehold.it/1200x400?text=Another Image Maybe" alt="Image">
+
            <div class="col-xs-12 col-sm-6 col-md-4 top-buffer">
−
        <div class="carousel-caption">
+
 
−
          <h3>More Sell $</h3>
+
                <div class="flip3D"
−
          <p>Lorem ipsum...</p>
+
                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>
−
      </div>
+
   
 
     </div>
 
     </div>
−
 
+
 
−
    <!-- Left and right controls -->
+
−
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
+
−
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+
−
      <span class="sr-only">Previous</span>
+
−
    </a>
+
−
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
+
−
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+
−
      <span class="sr-only">Next</span>
+
−
    </a>
+
−
</div>
+
−
 
+
−
<div class="container text-center">
+
−
  <h3>What We Do</h3><br>
+
−
  <div class="row">
+
−
    <div class="col-sm-4">
+
−
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
+
−
      <p>Current Project</p>
+
−
    </div>
+
−
    <div class="col-sm-4">
+
−
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
+
−
      <p>Project 2</p>
+
−
    </div>
+
−
    <div class="col-sm-4">
+
−
      <div class="well">
+
−
      <p>Some text..</p>
+
−
      </div>
+
−
      <div class="well">
+
−
      <p>Some text..</p>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
−
</div><br>
+
  
 
<footer class="container-fluid text-center">
 
<footer class="container-fluid text-center">
−
   <p>Footer Text</p>
+
    
 
</footer>
 
</footer>
  
 
</body>
 
</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!

Click to meet the team!

Click to learn more about our human practices!

Click to see our results!

Click to learn how to use ProtoCat 3.0!

Click to visit our website!