|
|
| (17 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | {{Rice/Template2}} | + | {{Rice/Template3}} |
| | | | |
| − | <html>
| |
| − | <style>
| |
| − | body{
| |
| − | font-family: 'Open Sans', arial, sans-serif;
| |
| − | background:rgb(255, 255, 255);
| |
| | | | |
| − | }
| |
| − | *{
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | }
| |
| − | #categories{
| |
| − | overflow:hidden;
| |
| − | width:90%;
| |
| − | margin:0 auto;
| |
| − | }
| |
| − | .clr:after{
| |
| − | content:"";
| |
| − | display:block;
| |
| − | clear:both;
| |
| − | }
| |
| | | | |
| − | #categories li{
| + | <html> |
| − | position:relative;
| + | <head> |
| − | /* z-index: -10; */
| + | <style> |
| − | | + | .firstrow { |
| − | list-style-type:none;
| + | position: relative; |
| − | width: 27.85714285714286%; /* = (100-2.5) / 3.5 */
| + | float: right; |
| − | padding-bottom: 33.4%; /* 32.16760145166612%; = width /0.866 */
| + | width: 100%; |
| − | float:left;
| + | height: 100%; |
| − | overflow:hidden;
| + | background: white; |
| − | visibility:hidden;
| + | } |
| − |
| + | |
| − | -webkit-transform: rotate(-60deg) skewY(30deg);
| + | |
| − | -ms-transform: rotate(-60deg) skewY(30deg);
| + | |
| − | transform: rotate(-60deg) skewY(30deg);
| + | |
| − | }
| + | |
| − | #categories li:nth-child(3n+2){
| + | |
| − | margin:0 1%;
| + | |
| − | }
| + | |
| − | #categories li:nth-child(6n+4){
| + | |
| − | margin-left:0.5%;
| + | |
| − | }
| + | |
| − | #categories li:nth-child(6n+4), #categories li:nth-child(6n+5), #categories li:nth-child(6n+6) {
| + | |
| − | margin-top: -6.9285714285%;
| + | |
| − | margin-bottom: -6.9285714285%;
| + | |
| − |
| + | |
| − | -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
| + | |
| − | -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
| + | |
| − | transform: translateX(50%) rotate(-60deg) skewY(30deg);
| + | |
| − | }
| + | |
| − | #categories li:nth-child(6n+4):last-child, #categories li:nth-child(6n+5):last-child, #categories li:nth-child(6n+6):last-child{
| + | |
| − | margin-bottom:0%;
| + | |
| − | }
| + | |
| − | #categories li *{
| + | |
| − | position:absolute;
| + | |
| − | visibility:visible;
| + | |
| − | }
| + | |
| − | #categories li > div{
| + | |
| − | width:100%;
| + | |
| − | height:100%;
| + | |
| − | text-align:center;
| + | |
| − | color:#fff;
| + | |
| − | overflow:hidden;
| + | |
| − |
| + | |
| − | -webkit-transform: skewY(-30deg) rotate(60deg);
| + | |
| − | -ms-transform: skewY(-30deg) rotate(60deg);
| + | |
| − | transform: skewY(-30deg) rotate(60deg);
| + | |
| − |
| + | |
| − | -webkit-backface-visibility:hidden;
| + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | /* HEX CONTENT */
| + | |
| − | #categories li img{
| + | |
| − | left:-100%; right:-100%;
| + | |
| − | width: auto; height:100%;
| + | |
| − | margin:0 auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | #categories div h1, #categories div p{
| + | |
| − | width:90%;
| + | |
| − | padding:0 5%;
| + | |
| − | background-color:#008080; background-color: rgba(0, 128, 128, 0.8);
| + | |
| − | font-family: 'Raleway', sans-serif;
| + | |
| − |
| + | |
| − | -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
| + | |
| − | -ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
| + | |
| − | transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
| + | |
| − | }
| + | |
| − | #categories li h1{
| + | |
| − | bottom:110%;
| + | |
| − | font-style:italic;
| + | |
| − | font-weight:normal;
| + | |
| − | font-size:1.5em;
| + | |
| − | padding-top:100%;
| + | |
| − | padding-bottom:100%;
| + | |
| − | }
| + | |
| − | #categories li h1:after{
| + | |
| − | content:'';
| + | |
| − | display:block;
| + | |
| − | position:absolute;
| + | |
| − | bottom:-1px; left:45%;
| + | |
| − | width:10%;
| + | |
| − | text-align:center;
| + | |
| − | z-index:1;
| + | |
| − | border-bottom:2px solid #fff;
| + | |
| − | }
| + | |
| − | #categories li p{
| + | |
| − | padding-top:50%;
| + | |
| − | top:110%;
| + | |
| − | padding-bottom:50%;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* HOVER EFFECT */
| + | |
| − | | + | |
| − | #categories li div:hover h1 {
| + | |
| − | bottom:73.4%;
| + | |
| − | padding-bottom:10%;
| + | |
| − | }
| + | |
| − | | + | |
| − | #categories li div:hover p{
| + | |
| − | top:25%;
| + | |
| − | padding-top:10%;
| + | |
| − | }
| + | |
| − | #fork{
| + | |
| − | position:fixed;
| + | |
| − | top:0;
| + | |
| − | left:0;
| + | |
| − | color:#000;
| + | |
| − | text-decoration:none;
| + | |
| − | border:1px solid #000;
| + | |
| − | padding:.5em .7em;
| + | |
| − | margin:1%;
| + | |
| − | transition: color .5s;
| + | |
| − | overflow:hidden;
| + | |
| − | }
| + | |
| − | #fork:before {
| + | |
| − | content: '';
| + | |
| − | position: absolute;
| + | |
| − | top: 0; left: 0;
| + | |
| − | width: 120%; height: 100%;
| + | |
| − | background: #000;
| + | |
| − | z-index: -1;
| + | |
| − | transform-origin:0 0 ;
| + | |
| − | transform:translateX(-100%) skewX(-45deg);
| + | |
| − | transition: transform .5s;
| + | |
| − | } | + | |
| − | #fork:hover {
| + | |
| − | color: #fff;
| + | |
| − | }
| + | |
| − | #fork:hover:before {
| + | |
| − | transform: translateX(0) skewX(-45deg);
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | | + | |
| − | <body>
| + | |
| − | <link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700,800' rel='stylesheet' type='text/css'>
| + | |
| − | <link href='https://fonts.googleapis.com/css?family=Raleway:400,700,300,200,100,900' rel='stylesheet' type='text/css'>
| + | |
| − | <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
| + | |
| − | | + | |
| − | <ul id="categories" class="clr">
| + | |
| − | <li class="pusher"></li>
| + | |
| − |
| + | |
| − | <li>
| + | |
| − | <div>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/6/6a/Rice_University_Catherine_Dunaway.jpeg" alt=""/>
| + | |
| − | <h1>Catherine Dunaway</h1>
| + | |
| − | <p>Catherine is a rising senior from Montgomery, Texas majoring in Biochemistry and Cell Biology and minoring in Global Health Technologies. Catherine’s primary contribution to the Rice iGEM team has been in the wet lab, but she thinks human practices is pretty rad as well. In her spare time you might find Catherine baking pies or singing show tunes with much gusto but slightly off-key.</p>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | | + | |
| − | <li>
| + | |
| − | <div>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/9/91/Rice_University_John_Luke_Garcia.jpeg" alt=""/>
| + | |
| − | <h1>John Luke Garcia</h1>
| + | |
| − | <p>John Luke is a rising senior from McAllen, Texas, and is pursuing a B.S. in Biochemistry and Cell Biology. He joined Rice iGEM just in time to head off to Hong Kong for the 2015 Rice-HKUST collaboration. Since then, his lasting contribution was to make Rice iGEM an official student club to help it continue growing after he graduates!</p>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | | + | |
| − | <li>
| + | |
| − | <div>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/a/a9/Rice_University_Anna_Guseva.jpeg" alt=""/>
| + | |
| − | <h1>Anna Guseva</h1>
| + | |
| − | <p>Anna is a sophomore from Saint Petersburg, Russia majoring in Bioengineering. She helps mainly with wet lab and is also learning about modeling and wiki. Apart from science, she enjoys hiking and taking random online courses.</p>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | | + | |
| − | <li>
| + | |
| − | <div>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/8/8f/Rice_University_Jessica_Lee.jpeg" alt=""/>
| + | |
| − | <h1>Jessica Lee</h1>
| + | |
| − | <p>Jessica is a junior from Houston, Texas majoring in Biochemistry and Cell Biology, minoring in Business, and following a pre-medical track. All of the work she does for iGEM can be done on her laptop whether that be designing graphics, coding the wiki, or curating our social media platforms. If she’s not working on iGEM, she’s probably working one of her three jobs this summer: tour guide, stem cell researcher, or life sciences startup intern.</p>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | | + | |
| − | <li>
| + | |
| − | <div>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/3/38/Rice_University_Jonathan_Pan.jpeg" alt=""/>
| + | |
| − | <h1>Jonathan Pan</h1>
| + | |
| − | <p>Jonathan is a junior from Hsinchu, Taiwan majoring in Chemical Engineering and minoring in Biochemistry and Cell Biology. He is a wild card of sorts in iGEM, participating in all areas of the project. Outside of iGEM, he is involved in metabolic engineering research and has a great passion for cellular agriculture. In his free time, he nerds out over linguistics and tries to emulate Extreme Couponing.</p>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| | | | |
| − | <li class="pusher"></li>
| + | .headshot { |
| | + | position: relative; |
| | + | width: 30%; |
| | + | display:inline-block !important; |
| | + | text-align: left; |
| | + | margin: 1%; |
| | + | margin-right: 2%; |
| | + | margin-bottom: 40%; |
| | + | box-sizing: border-box; |
| | + | padding: 1%; |
| | + | } |
| | | | |
| − | <li>
| + | .headshot img { |
| − | <div>
| + | position: absolute; |
| − | <img src="https://static.igem.org/mediawiki/2017/b/bc/Rice_University_Jack_Terrell.jpeg" alt=""/>
| + | width: 100%; |
| − | <h1>Jack Terrell</h1>
| + | height: auto; |
| − | <p>Jack is a senior from Whitehouse, Texas majoring in Bioengineering and minoring in Computational and Applied Mathematics. He focuses specifically on modeling for iGEM. He has taught computational engineering for four semesters, and currently researches models for single-cell stochastic processes. In his spare time, he likes to play modded Minecraft and Cities Skylines.</p>
| + | -webkit-transition: opacity 1s ease-in-out; |
| − | </div>
| + | -moz-transition: opacity 1s ease-in-out; |
| − | </li>
| + | -o-transition: opacity 1s ease-in-out; |
| | + | transition: opacity 1s ease-in-out; |
| | + | } |
| | | | |
| − | <li>
| + | .headshot img.overlay:hover { |
| − | <div>
| + | width: 100%; |
| − | <img src="https://static.igem.org/mediawiki/2017/1/11/Rice_University_Soohyun_Yoon.jpeg" alt=""/>
| + | height: auto; |
| − | <h1>Soohyun Yoon</h1>
| + | opacity: 0; |
| − | <p>Soohyun is a rising sophomore from Yorktown, Virginia. She intends to major in Bioengineering with a minor in Global Health Technologies. She discovered iGEM at the end of her freshman year and has been hooked ever since. She helps mostly with the wiki. In her free time, she likes to learn new languages and fix bikes.</p>
| + | } |
| − | </div>
| + | |
| − | </li>
| + | |
| | | | |
| − | </ul> | + | </style> |
| − | </body> | + | </head> |
| | + | <body> |
| | + | <div class="firstrow"> |
| | + | <div class="headshot"> |
| | + | <img src="https://static.igem.org/mediawiki/2017/4/46/Catherine_Dunaway_Text.jpg"/> |
| | + | <img class="overlay" src="https://static.igem.org/mediawiki/2017/a/a5/Catherine_Dunaway_Hexagonized.jpg"/> |
| | + | </div> |
| | + | <div class="headshot"> |
| | + | <img src="https://static.igem.org/mediawiki/2017/6/60/John_Luke_Garcia_Text.jpg"/> |
| | + | <img class="overlay" src="https://static.igem.org/mediawiki/2017/2/2a/John_Luke_Garcia_Hexagonized.jpg"/> |
| | + | </div> |
| | + | <div class="headshot"> |
| | + | <img src="https://static.igem.org/mediawiki/2017/6/65/Anna_Guseva_Text.jpg"/> |
| | + | <img class="overlay" src="https://static.igem.org/mediawiki/2017/9/9a/Anna_Guseva_Hexagonized.jpg"/> |
| | + | </div> |
| | + | <div class="headshot"> |
| | + | <img src="https://static.igem.org/mediawiki/2017/1/16/Jessica_Lee_Text.jpg"/> |
| | + | <img class="overlay" src="https://static.igem.org/mediawiki/2017/8/8b/Jessica_Lee_Hexagonized.jpg"/> |
| | + | </div> |
| | + | <div class="headshot"> |
| | + | <img src="https://static.igem.org/mediawiki/2017/6/68/Emma_McCormick_Text.jpg"/> |
| | + | <img class="overlay" src="https://static.igem.org/mediawiki/2017/3/36/Emma_McCormick_Hexagonized.jpg"/> |
| | + | </div> |
| | + | <div class="headshot"> |
| | + | <img src="https://static.igem.org/mediawiki/2017/c/cb/Jonathan_Pan_Text.jpg"/> |
| | + | <img class="overlay" src="https://static.igem.org/mediawiki/2017/6/62/Jonathan_Pan_Hexagonized.jpg"/> |
| | + | </div> |
| | + | <div class="headshot"> |
| | + | <img src="https://static.igem.org/mediawiki/2017/4/44/Jack_Terrell_Text.jpg"/> |
| | + | <img class="overlay" src="https://static.igem.org/mediawiki/2017/b/b2/Jack_Terrell_Hexagonized.jpg"/> |
| | + | </div> |
| | + | <div class="headshot"> |
| | + | <img src="https://static.igem.org/mediawiki/2017/2/21/Albert_Truong_Text.jpg"/> |
| | + | <img class="overlay" src="https://static.igem.org/mediawiki/2017/6/65/Albert_Truong_Hexagonized.jpg"/> |
| | + | </div> |
| | + | <div class="headshot"> |
| | + | <img src="https://static.igem.org/mediawiki/2017/d/de/Soohyun_Yoon_Text.jpg"/> |
| | + | <img class="overlay" src="https://static.igem.org/mediawiki/2017/4/46/Soohyun_Yoon_Hexagonized.jpg"/> |
| | + | </div> |
| | + | </div> |
| | + | </body> |
| | + | </html> |
