Line 115: | Line 115: | ||
.border { border: 5px solid black; } | .border { border: 5px solid black; } | ||
+ | |||
+ | |||
+ | #myImg { | ||
+ | border-radius: 5px; | ||
+ | cursor: pointer; | ||
+ | transition: 0.3s; | ||
+ | } | ||
+ | |||
+ | #myImg:hover {opacity: 0.7;} | ||
+ | |||
+ | /* The Modal (background) */ | ||
+ | .modal { | ||
+ | display: none; /* Hidden by default */ | ||
+ | position: fixed; /* Stay in place */ | ||
+ | z-index: 1; /* Sit on top */ | ||
+ | padding-top: 100px; /* Location of the box */ | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 100%; /* Full width */ | ||
+ | height: 100%; /* Full height */ | ||
+ | overflow: auto; /* Enable scroll if needed */ | ||
+ | background-color: rgb(0,0,0); /* Fallback color */ | ||
+ | background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ | ||
+ | } | ||
+ | |||
+ | /* Modal Content (image) */ | ||
+ | .modal-content { | ||
+ | margin: auto; | ||
+ | display: block; | ||
+ | width: 80%; | ||
+ | max-width: 700px; | ||
+ | } | ||
+ | |||
+ | /* Caption of Modal Image */ | ||
+ | #caption { | ||
+ | margin: auto; | ||
+ | display: block; | ||
+ | width: 80%; | ||
+ | max-width: 700px; | ||
+ | text-align: center; | ||
+ | color: #ccc; | ||
+ | padding: 10px 0; | ||
+ | height: 150px; | ||
+ | } | ||
+ | |||
+ | /* Add Animation */ | ||
+ | .modal-content, #caption { | ||
+ | -webkit-animation-name: zoom; | ||
+ | -webkit-animation-duration: 0.6s; | ||
+ | animation-name: zoom; | ||
+ | animation-duration: 0.6s; | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes zoom { | ||
+ | from {-webkit-transform:scale(0)} | ||
+ | to {-webkit-transform:scale(1)} | ||
+ | } | ||
+ | |||
+ | @keyframes zoom { | ||
+ | from {transform:scale(0)} | ||
+ | to {transform:scale(1)} | ||
+ | } | ||
+ | |||
+ | /* The Close Button */ | ||
+ | .close { | ||
+ | position: absolute; | ||
+ | top: 15px; | ||
+ | right: 35px; | ||
+ | color: #f1f1f1; | ||
+ | font-size: 40px; | ||
+ | font-weight: bold; | ||
+ | transition: 0.3s; | ||
+ | } | ||
+ | |||
+ | .close:hover, | ||
+ | .close:focus { | ||
+ | color: #bbb; | ||
+ | text-decoration: none; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | /* 100% Image Width on Smaller Screens */ | ||
+ | @media only screen and (max-width: 700px){ | ||
+ | .modal-content { | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
</style> | </style> | ||
Line 129: | Line 216: | ||
<script> | <script> | ||
+ | |||
+ | /* Animation for slideshow */ | ||
var myIndex = 0; | var myIndex = 0; | ||
carousel(); | carousel(); | ||
Line 144: | Line 233: | ||
} | } | ||
</script> | </script> | ||
+ | |||
+ | |||
<h1 class= "w3-center" style="color: purple"> Meet the Team!</h2> | <h1 class= "w3-center" style="color: purple"> Meet the Team!</h2> | ||
<p class="w3-center"> The <span style="color: red"> ~brains~ </span> behind the brawn </p> | <p class="w3-center"> The <span style="color: red"> ~brains~ </span> behind the brawn </p> | ||
<br> | <br> | ||
+ | <div class="w3-row"> | ||
+ | <div class="w3-col m4"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/8/8a/T-Northwestern_headshot_chuck.jpeg" width="200px" height="250px" class= "w3-margin-left border"> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="w3-col m3"> | ||
+ | <div class="tcontainer"> | ||
+ | <img src= "https://static.igem.org/mediawiki/2017/c/c6/T-Northwestern-Bradley.jpg" width = "250px" height="250px" class="border"> | ||
+ | <div class="goverlay"> | ||
+ | <div class="text"> Patrick Donahue </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="w3-col m3"> | ||
+ | <div class="tcontainer"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/5/5e/T-Northwestern-Bon.jpeg" width = "250px" height="250px" class="border"> | ||
+ | <div class="goverlay"> | ||
+ | <div class = "text"> Bon Ikwuagwu </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="w3-col m3"> | ||
+ | <div class="tcontainer"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/9/9e/T-Northwestern-Tyler.jpg" width = "250px" height="250px" class="border"> | ||
+ | <div class="goverlay"> | ||
+ | <div class = "text"> Tyler Lazar </div> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
Revision as of 16:55, 26 July 2017
">
Meet the Team!
The ~brains~ behind the brawn