Difference between revisions of "Team:UCSC/Field"

Line 142: Line 142:
 
<!-- Nina don't touch this or so help me god -->
 
<!-- Nina don't touch this or so help me god -->
  
−
.a {
+
    .a {
−
-webkit-animation:gear_1 4s linear infinite;
+
        -webkit-animation:gear_1 4s linear infinite;
−
    -moz-animation:gear_1 4s linear infinite;
+
        -moz-animation:gear_1 4s linear infinite;
−
    animation:gear_1 4s linear infinite;}
+
        animation:gear_1 4s linear infinite;
 +
    }
  
−
@-moz-keyframes gear_1 { 100% { -moz-transform: rotate(360deg); } }
+
    @-moz-keyframes gear_1 {  
−
@-webkit-keyframes gear_1 { 100% { -webkit-transform: rotate(360deg); } }
+
        100% {  
−
@keyframes gear_1 { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+
            -moz-transform: rotate(360deg);  
 +
        }  
 +
    }
 +
    @-webkit-keyframes gear_1 {  
 +
        100% {  
 +
            -webkit-transform: rotate(360deg);  
 +
        }  
 +
    }
 +
    @keyframes gear_1 {  
 +
        100% {  
 +
            -webkit-transform: rotate(360deg);  
 +
            transform:rotate(360deg);  
 +
        }  
 +
    }
  
−
.c{
+
    .c{
−
-webkit-animation:gear_2 4s linear infinite;
+
        -webkit-animation:gear_2 4s linear infinite;
−
-moz-animation:gear_2 4s linear infinite;
+
        -moz-animation:gear_2 4s linear infinite;
−
animation:gear_2 4s linear infinite;}
+
        animation:gear_2 4s linear infinite;
 +
    }
  
−
 
+
    @-moz-keyframes gear_2 {  
−
 
+
        100% {  
−
@-moz-keyframes gear_2 { 100% { -moz-transform: rotate(-360deg); } }
+
            -moz-transform: rotate(-360deg);  
−
@-webkit-keyframes gear_2 { 100% { -webkit-transform: rotate(-360deg); } }
+
        }  
−
@keyframes gear_2 { 100% { -webkit-transform: rotate(360deg); transform:rotate(-360deg); } }  
+
    }
 +
    @-webkit-keyframes gear_2 {  
 +
        100% {  
 +
            -webkit-transform: rotate(-360deg);  
 +
        }  
 +
    }
 +
    @keyframes gear_2 {  
 +
        100% {  
 +
            -webkit-transform: rotate(360deg);  
 +
            transform:rotate(-360deg);  
 +
        }  
 +
    }  
  
 
     .gear-container {
 
     .gear-container {
Line 166: Line 192:
 
         height: 630px;
 
         height: 630px;
 
     }
 
     }
−
 
−
 
−
 
  
 
     .gear-node {
 
     .gear-node {
Line 174: Line 197:
 
         height: 180px;
 
         height: 180px;
 
         position: absolute;
 
         position: absolute;
−
         cursor: pointer;}
+
         cursor: pointer;
 +
    }
  
 +
    .gear-node .gear {
 +
        width: 180px;
 +
        height: 180px;
 +
        position: absolute;
 +
        top: 0;
 +
        left: 0;
 +
        right: 0;
 +
        bottom: 0;
 +
        z-index: 2;
 +
    }
  
−
 
+
    .gear-node .profile-pictures {
−
.gear-node .gear {
+
 
         width: 180px;
 
         width: 180px;
 
         height: 180px;
 
         height: 180px;
 +
        position: absolute;
 +
        top: 0;
 +
        left: 0;
 +
        right: 0;
 +
        bottom: 0;
 +
        z-index: 3;
 
     }
 
     }
−
     .profile-cont {
+
 
−
         display: none;
+
     .gear-node .line {
 +
         position: absolute;
 +
        height: 10px;
 +
        left: 85px;
 +
        top: 85px;
 +
        background: #bdbec0;
 +
        opacity: 0;
 +
        -webkit-transition: opacity 2s ease-in-out;
 +
        transition: opacity 2s ease-in-out;
 +
        z-index: -1;
 
     }
 
     }
−
     .profile-cont.active {
+
 
−
         display: block;
+
     .gear-node.active .line {
 +
         opacity: 1;
 
     }
 
     }
  
 +
    .profile-cont {
 +
        opacity: 0;
 +
        height: 0;
 +
        overflow: hidden;
 +
        -webkit-transition: opacity 2s ease-in-out;
 +
        transition: opacity 2s ease-in-out;
 +
    }
  
−
@media screen and (max-width: 1024px) {
+
    .profile-cont.active {
−
 
+
         opacity: 1;
−
#salt {width: 100%}
+
         height: auto;
−
 
+
−
#our_content {
+
−
width: 100%;
+
−
}
+
−
 
+
−
#top-section {
+
−
width: 100%;
+
−
}
+
−
 
+
−
#content {width: 100%;}
+
−
 
+
−
#foot {width: 100%}
+
−
 
+
−
.gear {width: 10%; height: 10%;}
+
−
 
+
−
 
+
−
  .gear-container {
+
−
         position: relative;
+
−
         height: 100%;
+
 
     }
 
     }
  
  
 +
    @media screen and (max-width: 1024px) {
  
 +
        #salt {
 +
            width: 100%
 +
        }
  
−
    .gear-node {
+
        #our_content {
−
        width: 100%;
+
            width: 100%;
−
        height: 100%;
+
 
         }
 
         }
  
 +
        #top-section {
 +
            width: 100%;
 +
        }
  
−
 
+
         #content {width: 100%;}
−
.gear-node .gear {
+
         #foot {width: 100%;}
−
         width: 100%;
+
−
         height: 100%;
+
  
−
}
+
        .gear {
−
@media screen and (max-width: 980px) {
+
            width: 10%;
 +
            height: 10%;
 +
        }
  
−
#salt {width: 100%}
 
−
#our_content {
 
−
width: 100%;
 
−
}
 
  
−
#top-section {
+
        .gear-container {
−
width: 100%;
+
            position: relative;
−
}
+
            height: 100%;
 +
        }
  
−
#content {width: 100%;}
+
        .gear-node {
−
 
+
            width: 100%;
−
#foot {width: 100%}
+
            height: 100%;
−
 
+
        }
−
.gear {width: 10%; height: 10%;}
+
     
−
}
+
        .gear-node .gear {
−
 
+
            width: 100%;
−
.gear-container {
+
            height: 100%;
−
        position: relative;
+
        }
−
        height: 100%;
+
 
     }
 
     }
  
 +
    @media screen and (max-width: 980px) {
  
 +
        #salt {
 +
            width: 100%;
 +
        }
  
 +
        #our_content {
 +
            width: 100%;
 +
        }
  
−
    .gear-node {
+
        #top-section {
−
        width: 100%;
+
            width: 100%;
−
        height: 100%;
+
 
         }
 
         }
  
 +
        #content {width: 100%;}
 +
        #foot {width: 100%}
  
−
 
+
        .gear {
−
.gear-node .gear {
+
            width: 10%;  
−
        width: 100%;
+
            height: 10%;
−
        height: 100%;
+
        }
  
 +
        .gear-container {
 +
            position: relative;
 +
            height: 100%;
 +
        }
  
−
@media screen and (max-width: 650px) {
+
        .gear-node {
−
 
+
            width: 100%;
−
#salt {width: 100%}
+
            height: 100%;
−
 
+
        }
−
#our_content {
+
     
−
width: 100%;
+
        .gear-node .gear {
−
}
+
            width: 100%;
−
 
+
            height: 100%;
−
#top-section {
+
         }
−
width: 100%;
+
−
}
+
−
 
+
−
#content {width: 100%;}
+
−
 
+
−
#foot {width: 100%}
+
−
 
+
−
.gear {width: 10%; height: 10%;}
+
−
 
+
−
.gear-container {
+
−
        position: relative;
+
−
        height: 100%;
+
−
         width: 100%;
+
 
     }
 
     }
  
  
 +
    @media screen and (max-width: 650px) {
  
 +
        #salt {
 +
            width: 100%;
 +
        }
  
−
    .gear-node {
+
        #our_content {
−
        width: 10%;
+
            width: 100%;
−
        height: 10%;
+
 
         }
 
         }
  
 +
        #top-section {
 +
            width: 100%;
 +
        }
  
−
 
+
        #content {width: 100%;}
−
.gear-node .gear {
+
         #foot {width: 100%}
−
        width: 10%;
+
−
         height: 10%;
+
  
 +
        .gear {
 +
            width: 10%;
 +
            height: 10%;
 +
        }
  
−
}
+
        .gear-container {
−
 
+
            position: relative;
 +
            height: 100%;
 +
            width: 100%;
 +
        }
  
 +
        .gear-node {
 +
            width: 10%;
 +
            height: 10%;
 +
        }
 +
     
 +
        .gear-node .gear {
 +
            width: 10%;
 +
            height: 10%;
 +
        }
 +
    }
  
 
</style>
 
</style>
Line 512: Line 571:
 
                 </table>
 
                 </table>
 
             </div>
 
             </div>
−
           <div class="gear-node" data-node="1" style="top: 0.5px; left: -586px;"><img src="https://static.igem.org/mediawiki/2015/b/bd/Field_-_Andre.png"  /></div>
+
           <div class="gear-node" data-node="1" style="top: 0.5px; left: -586px;"><img class="profile-picture" src="https://static.igem.org/mediawiki/2015/b/bd/Field_-_Andre.png"  /><div class="line" style="-ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg); width: 577px; top: 94px; left: 63px;"></div></div>
−
           <div class="gear-node" data-node="2" style="top: 68px; left: -429px;"><img src="https://static.igem.org/mediawiki/2015/9/92/Field_-_Ray.png" /></div>
+
           <div class="gear-node" data-node="2" style="top: 68px; left: -429px;"><img class="profile-picture"  src="https://static.igem.org/mediawiki/2015/9/92/Field_-_Ray.png" /><div class="line" style="-ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg); width: 433px; top: 94px; left: 63px;"></div></div>
−
           <div class="gear-node a" data-node="3" style="top: 200px; left: -534px;"><img src="https://static.igem.org/mediawiki/2015/7/75/Field_-_Tina.png" /></div>
+
           <div class="gear-node a" data-node="3" style="top: 200px; left: -534px;"><img class="profile-picture"  src="https://static.igem.org/mediawiki/2015/7/75/Field_-_Tina.png" /><div class="line" style="-ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); width: 559px; top: 31px; left: 39px;"></div></div>
−
             <div class="gear-node" data-node="4" style="top: 270px; left: -375px;"><img src="https://static.igem.org/mediawiki/2015/7/75/Field_-_Adriana.png" /></div>
+
             <div class="gear-node" data-node="4" style="top: 270px; left: -375px;"><img class="profile-picture" src="https://static.igem.org/mediawiki/2015/7/75/Field_-_Adriana.png" /><div class="line" style="-ms-transform: rotate(-26deg); -webkit-transform: rotate(-26deg); transform: rotate(-26deg); width: 476px; top: -15px; left: 39px;"></div></div>
−
             <div class="gear-node" data-node="5" style="top: 405px; left: -480px;"><img src="https://static.igem.org/mediawiki/2015/3/38/Field_-_Sofia.png" /></div>
+
             <div class="gear-node" data-node="5" style="top: 405px; left: -480px;"><img class="profile-picture" src="https://static.igem.org/mediawiki/2015/3/38/Field_-_Sofia.png" /></div>
−
             <div class="gear-node" data-node="6" style="top: 470px; left: -315px;"><img src="https://static.igem.org/mediawiki/2015/5/51/Field_-_Henry.png" /></div>
+
             <div class="gear-node" data-node="6" style="top: 470px; left: -315px;"><img class="profile-picture" src="https://static.igem.org/mediawiki/2015/5/51/Field_-_Henry.png" /></div>
−
             <div class="gear-node " data-node="7" style="top: 630px; left: -244px;"><img src="https://static.igem.org/mediawiki/2015/1/1e/Field_-_Jocelyn.png" /></div>
+
             <div class="gear-node " data-node="7" style="top: 630px; left: -244px;"><img class="profile-picture" src="https://static.igem.org/mediawiki/2015/1/1e/Field_-_Jocelyn.png" /></div>
  
 
       </div>
 
       </div>

Revision as of 05:38, 16 September 2015

Field

Andre Baxter

  • Biomolecular Engineering
    Bioinformatics minor
    Merrill College (UCSC)
    5th Year
    Grant, Social Media, &
    Website Team
    From: Napa, CA 

Ray Bryan

  • Neuroscience
    Bioinformatics minor
    College Eight (UCSC)
    5th Year
    Programming Team
    From: Victorville, CA

Tina DeLeon

  • Biomolecular Engineering
    Crown College (UCSC)
    5th Year
    From: Fairfield, CA 

Adriana Landeros

  • Molecular, Cell, &
    Developmental Biology
  • College Ten (UCSC)
    • 4th Year
  • Grant Team
  • From: Salinas, CA

Sofia Menendez

  • Biology
    Sociology minor
    Stevenson College (UCSC)
    4th Year
    Grant & Social Media Team
    From: San Ramon, CA

"Participating in UCSC iGEM has been one of the most rewarding and life-changing experiences I have had to date. Prior to iGEM I had little hands-on experience in a laboratory setting, which was very structured and did not allow me to have the independence or freedom I craved in a lab. Since then, I have helped design protocols, learned different wet and dry lab techniques, and have gotten familiar with using different kinds of laboratory equipment. iGEM has given me such a different and unconventional lab experience; it has given me the confidence and leadership skills to attend meet-ups, give oral presentations, take my laboratory skills to a whole other level, and motivate me to follow my passions in science. All in all, iGEM has given me more than I would have ever expected and I am so glad I took advantage of all the opportunities and valuable well-rounded skills iGEM offered me"

Henry Vilas

  • Biomolecular Engineering
    College 8 (UCSC)
    4th Year
    From: Aliso Viejo, CA 

Jocelyn Simlick

  • Microbiology
    Hartnell College
    4th Year
    Grant & Video Team
    From: Yuba, CA