Difference between revisions of "Team:Michigan Software"

m
 
(93 intermediate revisions by 3 users not shown)
Line 3: Line 3:
  
 
<head>
 
<head>
 +
 +
   
 +
 +
    <link href='https://fonts.googleapis.com/css?family=Comfortaa:300,400,700' rel='stylesheet' type='text/css'>
 +
 
<style>
 
<style>
  
−
        body{
 
−
            background-color:#e4e1df;
 
−
        }
 
−
        .container{
 
−
            background-color:#e4e1df;
 
−
        }
 
  
 
         .top-buffer { margin-top:40px; }
 
         .top-buffer { margin-top:40px; }
  
−
         .flip3D{ width:250px; height:250px; margin:10px; float:center; margin: auto;}
+
        .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{
 
         .flip3D > .front{
 +
            border-radius: 5px;
 +
            border-color: #00274c;
 +
            background: rgba(0,0,0,0.0);
 +
            border-style: solid;
 
             position:absolute;
 
             position:absolute;
−
             transform: perspective( 600px ) rotateY( 0deg );
+
             -webkit-transform: perspective( 600px ) rotateY( 0deg );
−
            background:#ffcb05; width:250px; height:250px; border-radius: 0px;
+
                    transform: perspective( 600px ) rotateY( 0deg );
 +
            width:250px; height:250px;
 
             backface-visibility: hidden;
 
             backface-visibility: hidden;
−
             transition: transform .5s linear 0s;
+
             -webkit-backface-visibility: hidden;
−
             box-shadow: 0 15px 50px rgba(0,0,0,0.2);
+
            -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;
 
             float: center;
 
         }
 
         }
 
         .flip3D > .back{
 
         .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;
 
             position:absolute;
−
             transform: perspective( 600px ) rotateY( 180deg );
+
             -webkit-transform: perspective( 600px ) rotateY( 180deg );
−
            background: #00274c; width:250px; height:250px; border-radius: 0px;
+
                    transform: perspective( 600px ) rotateY( 180deg );
 +
            width:250px; height:250px;
 
             backface-visibility: hidden;
 
             backface-visibility: hidden;
−
             transition: transform .5s linear 0s;
+
             -webkit-backface-visibility: hidden;
−
             box-shadow: 0 15px 50px rgba(0,0,0,0.2);
+
            -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{
 
         .flip3D:hover > .front{
−
             transform: perspective( 600px ) rotateY( -180deg );
+
             -webkit-transform: perspective( 600px ) rotateY( -180deg );
 +
                    transform: perspective( 600px ) rotateY( -180deg );
 
         }
 
         }
 
         .flip3D:hover > .back{
 
         .flip3D:hover > .back{
−
             transform: perspective( 600px ) rotateY( 0deg );
+
             -webkit-transform: perspective( 600px ) rotateY( 0deg );
 +
                    transform: perspective( 600px ) rotateY( 0deg );
 
         }
 
         }
  
 
         .carousel-indicators li { visibility: hidden; }
 
         .carousel-indicators li { visibility: hidden; }
 +
 +
        p{
 +
            color: #00274c;
 +
            font-weight: 350;
 +
        }
 +
  
 
</style>
 
</style>
Line 47: Line 86:
  
 
     <div class="container text-center">
 
     <div class="container text-center">
−
 
+
       
 
         <div class="row">
 
         <div class="row">
−
            <div class="col-xs-2"></div>
+
        <div class="col-xs-12 col-lg-9">
−
             <div class="col-xs-5" style="font-family:'Lucida Console'">
+
 
−
                 <h3>Michigan Software Team<br>Protocat 3.0</h3>
+
        <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>
  
−
        <br><br>
 
  
 
         <div class="row top-buffer">
 
         <div class="row top-buffer">
−
             <div class="col-xs-3">
+
             <div class="col-xs-12 col-sm-6 col-md-4 top-buffer">
 
                  
 
                  
−
                 <div class="flip3D">
+
                 <div class="flip3D" onclick="location.href='https://2016.igem.org/Team:Michigan_Software/Description'">
−
                     <div class="back">Project Stuff</div>
+
                     <div class="back">
−
                     <div class="front">Project</div>
+
                        <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>
 
             </div>
−
             <div class="col-xs-3">
+
             <div class="col-xs-12 col-sm-6 col-md-4 top-buffer">
 
                  
 
                  
−
                 <div class="flip3D">
+
                 <div class="flip3D" onclick="location.href='https://2016.igem.org/Team:Michigan_Software/Attributions'">
−
                     <div class="back">Team Stuff</div>
+
                     <div class="back">
−
                     <div class="front">Team</div>
+
                        <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>
−
             <div class="col-xs-3">
+
             <div class="col-xs-12 col-sm-6 col-md-4 top-buffer">
  
−
                 <div class="flip3D">
+
                 <div class="flip3D" onclick="location.href='https://2016.igem.org/Team:Michigan_Software/Human_Practices'">
−
                     <div class="back">Outreach Stuff</div>
+
                     <div class="back">
−
                     <div class="front">Outreach</div>
+
                        <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>
−
        </div>
+
 
−
        <div class="row top-buffer">
+
             <div class="col-xs-12 col-sm-6 col-md-4 top-buffer">
−
             <div class="col-xs-3">
+
 
                  
 
                  
−
                 <div class="flip3D">
+
                 <div class="flip3D" onclick="location.href='https://2016.igem.org/Team:Michigan_Software/Results'">
−
                     <div class="back">Project Stuff</div>
+
                     <div class="back">
−
                     <div class="front">Project</div>
+
                        <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>
 
             </div>
−
             <div class="col-xs-3">
+
             <div class="col-xs-12 col-sm-6 col-md-4 top-buffer">
 
                  
 
                  
−
                 <div class="flip3D">
+
                 <div class="flip3D" onclick="location.href='https://2016.igem.org/Team:Michigan_Software/UserGuide'">
−
                     <div class="back">Team Stuff</div>
+
                     <div class="back">
−
                     <div class="front">Team</div>
+
                        <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>
 
             </div>
−
             <div class="col-xs-3">
+
             <div class="col-xs-12 col-sm-6 col-md-4 top-buffer">
  
−
                 <div class="flip3D">
+
                 <div class="flip3D"
−
                     <div class="back">Outreach Stuff</div>
+
                onclick="location.href='http://protocat.org'">
−
                     <div class="front">Outreach</div>
+
                     <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>
 
     </div>
 
    
 
    
  
 
<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!