Difference between revisions of "Team:MIT/Team"

Line 40: Line 40:
 
}
 
}
 
</style>
 
</style>
 +
 +
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Heidelberg/css/jasnybootstrapmin?action=raw&amp;ctype=text/css" />
 +
 +
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Heidelberg/css/bootstrapmin?action=raw&amp;ctype=text/css" />
 +
 +
<script type="text/javascript" src="https://2015.igem.org/Template:Heidelberg/js/jasnybootstrapmin?action=raw&amp;ctype=text/javascript"></script>
 +
<!-- Assets -->
 +
<link rel="stylesheet" href="http://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" />
 +
 +
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400|Roboto:300,400,500">
 +
<link rel="stylesheet" href="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/bootstrap/css/bootstrap.min.css">
 +
 +
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css?action=raw&amp;ctype=text/css" type="text/css" rel="stylesheet">
 +
<link rel="stylesheet" href="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/font-awesome/css/font-awesome.min.css">
 +
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2017.igem.org/Template:Heidelberg/general/CSS?action=raw&amp;ctype=text/css" />
 +
 +
 +
                        <!-- Favicon and touch icons -->
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
 +
 +
 +
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Heidelberg/styles2/CSS?action=raw&amp;ctype=text/css">
 +
 +
 +
<script type="text/javascript" src="https://2015.igem.org/Template:Heidelberg/js/jasnybootstrapmin?action=raw&amp;ctype=text/javascript"></script>
 +
 +
                        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
 +
 +
<!-- jQuery CDN -->
 +
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 +
        <!-- Bootstrap Js CDN -->
 +
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
        <!-- jQuery Nicescroll CDN -->
 +
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8-fix/jquery.nicescroll.min.js"></script>
 +
 +
<style>
 +
  body {
 +
    font-family: 'Josefin Sans' !important;
 +
    font-size: 16px;
 +
    font-weight: 300;
 +
    color: #888;
 +
   
 +
    text-align: center;
 +
}
 +
 +
    .textblock > p {font-family: 'Josefin Sans' !important; font-size: 20px !important; color: #444 !important;font-weight: 300 !important;}
 +
 +
      #textblock1 {
 +
          position: absolute;
 +
          top: 100px;
 +
          left: 20px;
 +
          width:500px;
 +
      }     
 +
      #textblock2 {
 +
          position: absolute;
 +
          top: 960px;
 +
          left: 220px;
 +
          width: 450px;
 +
      } 
 +
      #textblock3 {
 +
            position: absolute;
 +
          top: 960px;
 +
          right: 20px;
 +
          width: 500px;
 +
          height: 300px;
 +
         
 +
      }
 +
      #textblock4 {
 +
            position: absolute;
 +
          top: 1500px;
 +
          left: 20px;
 +
          width:450px;
 +
      }
 +
      #textblock5 {
 +
            position: absolute;
 +
          top: 2100px;
 +
          right: 20px;
 +
          width: 550px;
 +
      }
 +
      #textblock6 {
 +
            position: absolute;
 +
          top: 2700px;
 +
          left: 20px;
 +
          width: 500px;
 +
      }
 +
    #textblock7 {
 +
            position: absolute;
 +
          top: 3250px;
 +
          right: 20px;
 +
          width: 600px;
 +
      }
 +
    #textblock8 {
 +
          position: absolute;
 +
          top: 3750px;
 +
          left: 50px;
 +
          width: 400px;
 +
    }
 +
    #textblock9 {
 +
        position: absolute;
 +
          top: 3750px;
 +
          right: 50px;
 +
          width: 400px; 
 +
    }
 +
 +
#textblock1 > p, #textblock3 > p, #textblock5 > p,#textblock2 > p, #textblock4 > p, #textblock6 > p, #textblock7 > p, #textblock8 > p {
 +
    color: white !important;
 +
    text-align: center;
 +
    font-size: 26px !important;
 +
    font-weight: 300 !important;
 +
}
 +
 +
#textblock1 > a {
 +
    color: #F8991D;
 +
    font-size: 60px !important;
 +
    line-height: 60px !important;
 +
}
 +
#textblock1 > a:hover, #textblock2 > a:hover, #textblock3 > a:hover, #textblock4 > a:hover, #textblock5 > a:hover, #textblock6 > a:hover, #textblock7 > a:hover, #textblock9 > a:hover  {
 +
    text-decoration: underline;
 +
}
 +
#textblock2 > a {
 +
    color: #fbb74b;
 +
    font-size: 60px;
 +
    line-height: 60px;
 +
}
 +
 +
#textblock4 > a {
 +
  color:#9D1C20;
 +
    font-size: 60px;
 +
    line-height: 60px;
 +
}
 +
#textblock5 > a {
 +
  color:#Fee000;
 +
    font-size: 50px;
 +
    line-height: 50px;
 +
}
 +
#textblock6 > a {
 +
    color: #6698be;
 +
    font-size: 50px;
 +
    line-height: 50px;
 +
}
 +
 +
 +
#textblock7 > a {
 +
    color:#F8991D;
 +
    font-size: 50px;
 +
    line-height: 50px;
 +
}
 +
#textblock9 > a {
 +
    color: white;
 +
    font-size: 60px !important;
 +
    line-height: 60px !important;
 +
}
 +
 +
 +
    #toolbox-icon1 {
 +
position: absolute;
 +
top: 4460px;
 +
left: 430px;
 +
} 
 +
   
 +
    #toolbox-row1 {
 +
        top: 0px;
 +
    }
 +
    #toolbox-row2 {
 +
        top: 180px;
 +
    }
 +
    #toolbox-row3 {
 +
        top: 360px;
 +
    }
 +
    wrapper {
 +
        padding-bottom: 0px;
 +
    }
 +
 +
     
 +
                              .landing-video {
 +
                            position: relative;
 +
                         
 +
                            width: 100%;
 +
                            height: auto;
 +
                            background: url('') no-repeat;
 +
                         
 +
 +
                        }   
 +
      #Icon1 {
 +
            position: absolute;
 +
         
 +
            left: 4%;
 +
      }
 +
      #Icon2 {
 +
          position: absolute;
 +
          width: 400px;
 +
          left: 1%;
 +
 
 +
      }
 +
      #Icon3 {
 +
            position: absolute;
 +
          left: 4%;
 +
          width: 400px;
 +
      }
 +
      #Icon4 {
 +
            position: absolute;
 +
            right: 12%;
 +
          width: 300px;
 +
      }
 +
      #Icon5 {
 +
        position: absolute;
 +
        right: 8%;
 +
          width: 300px;
 +
      }
 +
      #Icon6 {
 +
          position: absolute;
 +
            right: 10%;
 +
          width: 300px;
 +
      }
 +
     
 +
      .icon-text {
 +
          position: relative;
 +
          top: 20px;
 +
          left: 130px;
 +
       
 +
         
 +
      }
 +
     
 +
      .icon-text-right {
 +
          position: relative;
 +
          top: 20px;
 +
          right: 0px;
 +
     
 +
          width: 300px;
 +
      }
 +
     
 +
      #Icon1 > .icon-text  h5 {
 +
          text-transform: uppercase;
 +
          color: #b3dede !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      }
 +
     
 +
      #Icon1:hover > .icon-text  p,#Icon2:hover > .icon-text  p,#Icon3:hover > .icon-text  p,#Icon4:hover > .icon-text-right p,#Icon5:hover > .icon-text-right p,#Icon6:hover > .icon-text-right p {
 +
          opacity: 1 !important;
 +
          text-align: center;
 +
          transition: opacity 1s ease;
 +
      }
 +
      #Icon1 > .icon-text p,#Icon2 > .icon-text p,#Icon3 > .icon-text p,#Icon4 > .icon-text-right p,#Icon5 > .icon-text-right p,#Icon6 > .icon-text-right p  {
 +
          opacity: 0 !important;
 +
          color: white !important;
 +
          font-family: 'Josefin Sans' !important;
 +
          font-size: 25px !important;
 +
      }
 +
      #Icon2 > .icon-text  h5 {
 +
          text-transform: uppercase;
 +
          color: #b2cbdd !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      } 
 +
 +
     
 +
      #Icon3 > .icon-text  h5 {
 +
          text-transform: uppercase;
 +
          color: #fed699!important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      } 
 +
     
 +
 +
     
 +
      #Icon4 > .icon-text-right  h5 {
 +
          text-transform: uppercase;
 +
          color: #d89f9c !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      }
 +
 +
     
 +
      #Icon5 > .icon-text-right  h5 {
 +
          text-transform: uppercase;
 +
          color: #fef39b !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      }
 +
     
 +
 +
     
 +
      #Icon6 > .icon-text-right  h5 {
 +
          text-transform: uppercase;
 +
          color: #9ad5c3 !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      }
 +
     
 +
      .phage-scroller {
 +
              width: 150px;
 +
              height: auto;
 +
          }
 +
     
 +
      #toolbox {
 +
          position: absolute;
 +
          top: 3900px;
 +
          min-height: 600px ;
 +
          width: 100%;
 +
          max-width: 1200px;
 +
          margin: 0 auto;
 +
         
 +
      }
 +
     
 +
      #toolbox-image {
 +
          position: absolute;
 +
          left: 380px;
 +
          width: 500px;
 +
          top: 10%
 +
      }
 +
   
 +
      .icon {
 +
            cursor: pointer;
 +
      }
 +
      .toolbox-icon {
 +
          width: 120px;
 +
          height: 120px;
 +
          border-radius: 100%;
 +
          float: left;
 +
          background-color: white;
 +
          position: absolute;
 +
         
 +
      }
 +
     
 +
      .icon:hover > .toolbox-icon {
 +
         
 +
          transform: scale(1.2,1.2);
 +
          transition: all 1s ease-out;
 +
      }
 +
 +
 +
@media (max-width: 1200px) {
 +
         
 +
          #wrapper {
 +
              padding-bottom: 600px;
 +
          }
 +
         
 +
         
 +
         
 +
              #textblock1 {
 +
          position: absolute;
 +
          top: 50px;
 +
          left: 0px;
 +
          width: 400px;
 +
      }     
 +
          #textblock1 > p, #textblock2 > p, #textblock3 > p,#textblock4 > p, #textblock5 > p,#textblock6 > p,#textblock7 > p,#textblock8 > p,#textblock9 > p {
 +
    color: white !important;
 +
   
 +
 
 +
    font-size: 24px !important;
 +
    font-weight: 300 !important;
 +
}
 +
         
 +
    #textblock1 > a, #textblock2 > a,#textblock3 > a, #textblock4 > a,#textblock5 > a,#textblock6 > a,#textblock7 > a,#textblock8 > a,#textblock9 > a      {
 +
    line-height: 50px !important;
 +
    font-size: 50px !Important;
 +
}
 +
         
 +
      #textblock2 {
 +
          position: absolute;
 +
          top: 800px;
 +
          left: 150px;
 +
          width: 500px;
 +
      } 
 +
       
 +
      #textblock3 {
 +
            position: absolute;
 +
          top: 780px;
 +
          right: 0px;
 +
          width: 300px;
 +
          height: 220px;
 +
      }
 +
      #textblock4 {
 +
            position: absolute;
 +
          top: 1250px;
 +
          left: 0px;
 +
          width: 400px;
 +
      }
 +
      #textblock5 {
 +
            position: absolute;
 +
          top: 1700px;
 +
          right: 0px;
 +
          width: 500px;
 +
      }
 +
      #textblock6 {
 +
            position: absolute;
 +
          top: 2220px;
 +
          left: 0px;
 +
          width: 450px;
 +
      }
 +
         
 +
          #textblock7 {
 +
              position: absolute;
 +
              top: 2700px;
 +
              right: 0px;
 +
              width: 550px;
 +
          }
 +
          #textblock8 {
 +
              position: absolute;
 +
              top: 3200px;
 +
              left: 0px;
 +
              width: 400px;
 +
          }
 +
          #textblock9 {
 +
              position: absolute;
 +
              top: 3200px;
 +
              right: 0px;
 +
              width: 400px;
 +
          }
 +
          #toolbox {
 +
              position: absolute;
 +
              top: 3700px;
 +
          }
 +
          #toolbox-image {
 +
              position: relative;
 +
              left: 30px !important;
 +
          }
 +
          #Icon1 {
 +
              left: 100px;
 +
          }
 +
          #Icon2 {
 +
              left: 100px;
 +
          }
 +
          #Icon3 {
 +
              left: 100px;
 +
          }
 +
          #Icon4 {
 +
              right: 200px;
 +
          }
 +
          #Icon5 {
 +
              right: 200px;
 +
                       
 +
          }
 +
          #Icon6 {
 +
              right: 200px;
 +
          }
 +
  }
 +
       
 +
    .sublink {
 +
        font-weight: 400 !important;
 +
    }
 +
 +
    .sublink:hover {
 +
       
 +
        text-decoration: underline !important;
 +
    }
 +
   
 +
    .aligner-left {
 +
        text-align: center !important;
 +
    }
 +
     
 +
      .aligner-right {
 +
        text-align: center !important;
 +
    }
 +
       
 +
  #overall-wrapper {
 +
        min-width: 1000px;
 +
  }
 +
 +
  @media (max-width: 960px) {
 +
    body {
 +
      width: 1000px;
 +
      overflow-x: scroll;
 +
    }
 +
  }
 +
  @media screen and (max-width: 960px) {
 +
    .t-container {
 +
      width: 1000px ! important;
 +
      max-width: 1200px !important;
 +
      min-width: 980px !important;
 +
    }
 +
  }
 +
 +
                    </style>
 +
</head>
 +
<body class="t-body">
 +
    <!-- Top menu -->
 +
 +
</p><p>
 +
 +
<!-- Start of CSS-->
 +
<style type="text/css">
 +
 +
/* WIKI SETTINGS*/
 +
 +
/* Hide first heading */
 +
.firstHeading {
 +
display: none;
 +
}
 +
 +
/*-- Remove borders, float content left and remove padding/margin */
 +
#globalWrapper, #content{
 +
background-color: transparent;
 +
border: 0px;
 +
float: left;
 +
margin:0px;
 +
padding: 0px;
 +
}
 +
 +
/*left align Black Menu Bar */
 +
#top_menu_inside {
 +
margin-left: 20px;
 +
}
 +
</style>
 +
 +
<head>
 +
</head>
 
</html>
 
</html>

Revision as of 20:11, 26 June 2018