Difference between revisions of "Template:Michigan Software"

 
(15 intermediate revisions by 2 users not shown)
Line 7: Line 7:
 
       <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
       <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
−
     
 
−
<!-- Latest compiled and minified CSS -->
 
−
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
−
 
−
<!-- jQuery library -->
 
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
−
 
−
<!-- Latest compiled JavaScript -->
 
−
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
−
 
 
       <!-- Comfortaa Import -->
 
       <!-- Comfortaa Import -->
 
       <link href='https://fonts.googleapis.com/css?family=Comfortaa:300,400,700' rel='stylesheet' type='text/css'>
 
       <link href='https://fonts.googleapis.com/css?family=Comfortaa:300,400,700' rel='stylesheet' type='text/css'>
−
       <link rel="stylesheet" href="styling.css">
+
        
 
       <!-- https://work.smarchal.com/twbscolor/css/00274c0a436cecf0f1ffffff0 -->
 
       <!-- https://work.smarchal.com/twbscolor/css/00274c0a436cecf0f1ffffff0 -->
 
       <style>
 
       <style>
Line 51: Line 41:
 
                 #HQ_page h1 {
 
                 #HQ_page h1 {
 
                         font-family: 'Comfortaa';
 
                         font-family: 'Comfortaa';
 +
                        font-weight: normal;
 
                 }
 
                 }
 
                  
 
                  
Line 181: Line 172:
 
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
 
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
 
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
 
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
−
  .navbar-default .navbar-nav .
+
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
 +
color: #ffffff;
 +
background-color: #0a436c;
 +
  }
 +
}
 +
 
 +
.navig_bar .navbar-right img {
 +
height:10px;
 +
}
 +
.navig_bar {
 +
font-size:16px;
 +
margin-top: 10px;
 +
}
 +
.navig_bar_left_button {
 +
margin: 0 2px;
 +
border-left: 1px solid #000;
 +
border-right: 1px solid #000;
 +
}
 +
.navig_bar_button {
 +
margin: 0 2px;
 +
border-right: 1px solid #000;
 +
}
 +
 
 +
.navbar {
 +
margin-bottom: 0;
 +
}
 +
 
 +
.banner {
 +
padding-bottom: 50px;
 +
padding-top:0px;
 +
margin: 0px;
 +
}
 +
 +
#index_title {
 +
font-family: 'Comfortaa';
 +
font-style: normal;
 +
font-size: 300%;
 +
text-align: center;
 +
float: none;
 +
color: #6792A0;
 +
margin-top: 20px;
 +
padding-top: 0px;
 +
padding-bottom: 0px;
 +
}
 +
.Banner_img {
 +
margin: auto;
 +
margin-bottom: 0px;
 +
margin-top: 0px;
 +
width: 50%;
 +
padding: 0px;
 +
display: block;
 +
}
 +
 
 +
.HumanPractices-img {
 +
width: 960px;
 +
height: 460px;
 +
}
 +
 
 +
.Header-img {
 +
width: 100%;
 +
height: 400px;
 +
background-repeat: no-repeat;
 +
background-size: contain;
 +
position: absolute !important;
 +
                      border: none;
 +
 
 +
}
 +
 +
#headerImage {
 +
width:100%;
 +
height:300px;
 +
min-height: 400px;
 +
    min-width:100%;
 +
position: relative;
 +
}
 +
 +
#headerImage h1 {
 +
margin: 0;
 +
color: white;
 +
position: absolute;
 +
top: 50%;
 +
left: 50%;
 +
margin-right: -50%;
 +
transform: translate(-50%, -50%);
 +
                        font-size: 50px;
 +
}
 +
 
 +
 +
 
 +
.flip3D{
 +
            width:315px; height:315px; 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:275px; height:275px;
 +
            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{
 +
            overflow: hidden;
 +
            margin-bottom: 0px;
 +
            margin-top: 0px;
 +
            border-radius: 5px;
 +
            border-color: #00274c;
 +
            background: rgba(0,0,0,0.0);
 +
            border-style: solid;
 +
            position:absolute;
 +
            -webkit-transform: perspective( 700px ) rotateY( 180deg );
 +
                    transform: perspective( 700px ) rotateY( 180deg );
 +
            width:275px; height:275px;
 +
            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( 700px ) rotateY( -180deg );
 +
                    transform: perspective( 700px ) rotateY( -180deg );
 +
        }
 +
        .flip3D:hover > .back{
 +
            -webkit-transform: perspective( 700px ) rotateY( 0deg );
 +
                    transform: perspective( 700px ) rotateY( 0deg );
 +
        }
 +
.vertical-center {
 +
            position: relative;
 +
            top: 50%;
 +
            -webkit-transform: translateY(-50%);
 +
                    transform: translateY(-50%);
 +
        }
 +
  img.board-img {
 +
height: 220px;
 +
width: 220px;
 +
border-radius: 5px;
 +
  }
 +
 
 +
      h3.name-tag {
 +
        font-family: 'Comfortaa', cursive !important;
 +
        font-size: 15px;
 +
        margin-top: 0px;
 +
        font-weight: bold;
 +
        margin-left: 10px;
 +
        margin-right: 10px;
 +
      }
 +
      p.desc{
 +
        font-family: 'Comfortaa', cursive !important;
 +
        font-size: 11px !important;
 +
        margin-left: 10px;
 +
        margin-right: 10px;
 +
      }
 +
      p.teamText{
 +
      font-family: 'Comfortaa', cursive !important;
 +
            font-weight: bold;
 +
      font-size: 12px;
 +
            margin-left: 10px;
 +
            margin-bottom: 0px;
 +
  }
 +
 
 +
#doubleSpace {
 +
line-height: 30px;
 +
}
 +
 
 +
  ul.teamTextList{
 +
            font-family: 'Comfortaa', cursive !important;
 +
      font-size: 11px;
 +
            margin-top: 0px;
 +
            padding-top: 0px;
 +
  }
 +
 
 +
li {
 +
color: #00274c;
 +
}
 +
 +
a {
 +
color: white;
 +
}
 +
                       
 +
                      a:visited
 +
                      {
 +
                              color: #ecf0f1;
 +
                      }
 +
           
 +
                      p > a:visited {
 +
                              color: black;
 +
                        }
 +
 
 +
ul.Content {
 +
    width: 400px;
 +
    margin:0 auto;
 +
    text-align:left;
 +
}
 +
 
 +
h3 {
 +
color: #00274c;
 +
}
 +
 +
h1 {
 +
color: #00274c;
 +
}
 +
 +
#h3Header {
 +
color: grey;
 +
}
 +
 +
#h1Header {
 +
color: white;
 +
}
 +
 +
#h1MaizeHeader {
 +
color: #ffc72C;
 +
}
 +
 +
.Footer-Table {
 +
                                border-collapse: collapse;
 +
                                border-spacing: 2px;
 +
}
 +
 +
                        #HQ_page td {
 +
                                padding: 3px;
 +
                                border: none;
 +
                        }
 +
.overlay {
 +
  position:absolute;
 +
  z-index:12;
 +
  top:50%;
 +
  left:0;
 +
  width:100%;
 +
  text-align:center;
 +
  vertical-align: top;
 +
}
 +
 +
@media (min-width: 768px) {
 +
 
 +
  /* Navbar positioning foo */
 +
  .navbar-wrapper {
 +
margin-top: 0;
 +
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
 +
  }
 +
  /* The navbar becomes detached from the top, so we round the corners */
 +
  .navbar-wrapper .navbar {
 +
border-radius: 4px;
 +
  }
 +
 
 +
  /* Special class on .container surrounding .navbar, used for positioning it into place. */
 +
.navbar-wrapper {
 +
  background-color: #00274c;
 +
  position: relative;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  z-index: 10;
 +
}
 +
 +
.container-footer {
 +
padding-top: 50px;
 +
padding-bottom: 50px;
 +
background-color: #00274c;
 +
 
 +
}
 +
 +
.Banner_img {
 +
margin: auto;
 +
margin-bottom: 0px;
 +
margin-top: 0px;
 +
width: 50%;
 +
padding: 0px;
 +
display: block;
 +
}
 +
 
 +
.HumanPractices-img {
 +
width: 960px;
 +
height: 460px;
 +
}
 +
 +
 +
}
 +
 +
#ProtoCat4Button {
 +
background-color: #00274c;
 +
border: none;
 +
color: white;
 +
padding: 8px 18px;
 +
text-align: center;
 +
text-decoration: none;
 +
display: inline-block;
 +
font-size: 16px;
 +
}
 +
 
 +
 
 +
        .flip3D_HP{
 +
        width:200px; height:200px; margin:10px; float:center; margin: auto;
 +
        border-weight: 10px;
 +
        cursor: pointer;
 +
        }
 +
        .flip3D_HP > .front{
 +
        border-radius: 5px;
 +
        border-color: #72c9b6;
 +
        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_HP > .back{
 +
        padding-top:20px;
 +
        padding-bottom:20px;
 +
        border-radius: 5px;
 +
        border-color: #72c9b6;
 +
        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_HP:hover > .front{
 +
        -webkit-transform: perspective( 600px ) rotateY( -180deg );
 +
        transform: perspective( 600px ) rotateY( -180deg );
 +
        }
 +
        .flip3D_HP:hover > .back{
 +
        -webkit-transform: perspective( 600px ) rotateY( 0deg );
 +
        transform: perspective( 600px ) rotateY( 0deg );
 +
        }
 +
      </style>
 +
  </head>
 +
  <body>
 +
      <div class="navbar-wrapper">
 +
        <div class="container">
 +
            <div class="navbar  navbar-static-top">
 +
              <ul class="nav navbar-nav">
 +
                  <li class="navig_bar_button"><a  href="https://2017.igem.org/Team:Michigan_Software">Home</a></li>
 +
                  <li class="dropdown navig_bar_button">
 +
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Project <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2017.igem.org/Team:Michigan_Software/Contribution">Overview</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Michigan_Software/Improve">Improvements</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Michigan_Software/Results">Results</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Michigan_Software/Installation">Installation</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Michigan_Software/Demonstrate">Demonstrate</a></li>
 +
                    </ul>
 +
                  </li>
 +
                  <li class="dropdown navig_bar_button">
 +
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Outreach <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2017.igem.org/Team:Michigan_Software/Collaborations">Collaboration</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Michigan_Software/HP/Silver">HP Silver</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Michigan_Software/HP/Gold_Integrated">HP Gold</a></li>
 +
                    </ul>
 +
                  </li>
 +
                  <li class="navig_bar_button">
 +
                    <a href="https://2017.igem.org/Team:Michigan_Software/Measurement">Measurement</a>
 +
                  </li>
 +
                  <li class="navig_bar_button">
 +
                    <a href="https://2017.igem.org/Team:Michigan_Software/Attributions">Attributions</a>
 +
                  </li>
 +
              </ul>
 +
            </div>
 +
        </div>
 +
      </div>

Latest revision as of 20:20, 1 November 2017