Difference between revisions of "Team:Kent/Attributions"

Line 26: Line 26:
 
         height: 100%;
 
         height: 100%;
 
         border: 0px;
 
         border: 0px;
−
         background: #272e33 url(https://static.igem.org/mediawiki/2017/d/d3/T--Kent--Descriptionbkg.png) no-repeat center center fixed;
+
         background: #272e33 url("https://static.igem.org/mediawiki/2017/d/d0/MeetTeambkg.png") no-repeat center center fixed;
 
         -webkit-background-size: cover;
 
         -webkit-background-size: cover;
 
         -moz-background-size: cover;
 
         -moz-background-size: cover;
Line 38: Line 38:
 
font-family: 'KentExo2';
 
font-family: 'KentExo2';
 
         }
 
         }
 +
 +
#navbox{
 +
width:100%;
 +
text-align:center;
 +
margin-left:-580px;
 +
}
 +
 +
       
  
 
         #navdiv{
 
         #navdiv{
 
         color: #FFFFFF;
 
         color: #FFFFFF;
−
         left:0px;
+
         display:inline-block;
−
        padding: 30px;
+
−
        text-align: center;
+
 
         font-family:KentExo2;
 
         font-family:KentExo2;
 
         position:fixed;
 
         position:fixed;
−
        top:10px;
 
 
         z-index:100;
 
         z-index:100;
 +
 
         }
 
         }
  
Line 60: Line 66:
  
 
         #navdiv ul{
 
         #navdiv ul{
 +
display:inline-block;
 
background: transparent;
 
background: transparent;
−
        text-align: center;
 
 
         list-style: none;
 
         list-style: none;
−
        padding: 0;
+
margin:0;
−
        margin: 0;
+
padding:0;   }
−
        display: block;
+
−
                }
+
  
 
         #navdiv ul a{
 
         #navdiv ul a{
Line 74: Line 78:
 
         }
 
         }
 
         #navdiv ul li{
 
         #navdiv ul li{
−
margin-top: 30px;
+
padding:0;
 
         float: left;
 
         float: left;
 
         width: 169px;
 
         width: 169px;
Line 84: Line 88:
 
         color:#D0FEDC;
 
         color:#D0FEDC;
 
         cursor: pointer;
 
         cursor: pointer;
−
         opacity:0.8;
+
background: #455057;
−
border-radius: 10px;
+
         opacity:0.6;
 +
border-radius: 20px;
 
         }
 
         }
  
 
  #navdiv ul #teamLogo{
 
  #navdiv ul #teamLogo{
−
margin-top:-10px;
+
float: left;
−
margin-left: 20px;
+
−
margin-right: 20px;
+
−
        float: left;
+
 
         width: 150px;
 
         width: 150px;
 
         height: 120px;
 
         height: 120px;
 
         position: relative;
 
         position: relative;
−
         opacity:0.8;
+
         opacity:0.6;
 +
margin-top:-30px;
 +
border-radius:30px;
 
         }
 
         }
  
 
         #navdiv ul li:hover{
 
         #navdiv ul li:hover{
 
border-radius:10px;
 
border-radius:10px;
−
         background: #28AAA1;
+
         background: #F37524;
 
         transition:all 0.3s;
 
         transition:all 0.3s;
 
         opacity:0.9;
 
         opacity:0.9;
Line 109: Line 113:
 
#navdiv ul #teamLogo:hover{
 
#navdiv ul #teamLogo:hover{
 
border-radius:10px;
 
border-radius:10px;
−
         background: #455057;
+
         background: #a3704f;
 
         transition:all 0.3s;
 
         transition:all 0.3s;
 
         opacity:0.8;
 
         opacity:0.8;
Line 135: Line 139:
 
         #navdiv ul.drop-menu li:hover {
 
         #navdiv ul.drop-menu li:hover {
 
color:#455057;
 
color:#455057;
−
         background: #35DBCB;
+
         background: #f79b5d;
  
 
         }
 
         }
 
#navdiv ul.drop-menu li ul{
 
#navdiv ul.drop-menu li ul{
−
         border-radius: 10px;
+
         border-radius: 20px;
 
         }
 
         }
 
        
 
        
Line 155: Line 159:
 
         text-align: center;
 
         text-align: center;
 
         }
 
         }
 +
  
 
#title{
 
#title{
 
margin-top:170px;
 
margin-top:170px;
 +
text-align:center;
 +
margin-bottom:150px;
 
}
 
}
  
 +
       
 
         #title img{
 
         #title img{
 
display:inline-block;
 
display:inline-block;
−
        margin-left:12%;
+
         width:300px;
−
margin-right:12%;
+
−
margin-bottom:100px;
+
−
         width:200px;
+
 
         }
 
         }
  
Line 171: Line 176:
 
position:absolute:
 
position:absolute:
 
margin-top:500px;
 
margin-top:500px;
 +
margin-left: 100px;
 +
margin-right:100px;
 
display: inline-block;
 
display: inline-block;
−
color:#28AAA1;
+
color:#F37524;
 
font-size:50px;
 
font-size:50px;
 
}
 
}
 +
 +
.faces {
 +
margin: 20px 0 0 0;
 +
padding: 0;
 +
list-style: none;
 +
display: block;
 +
text-align: center;
 +
width: 100%;
 +
}
 +
.bubble {
 +
width: 100%;
 +
height: 100%;
 +
border-radius: 50%;
 +
position: relative;
 +
cursor: default;
 +
box-shadow:
 +
inset 0 0 0 0 rgba(200,95,66, 0.4),
 +
inset 0 0 0 16px rgba(255,255,255,0.6),
 +
0 1px 2px rgba(0,0,0,0.1);
 +
transition: all 0.4s ease-in-out;
 +
}
 +
 +
.face-1 {
 +
background-image: url(../images/4.jpg);
 +
}
 +
 +
.face-2 {
 +
background-image: url(../images/5.jpg);
 +
}
 +
 +
.face-3 {
 +
background-image: url(../images/6.jpg);
 +
}
 +
.face-4 {
 +
background-image: url(../images/4.jpg);
 +
}
 +
 +
.face-5 {
 +
background-image: url(../images/5.jpg);
 +
}
 +
 +
.face-6 {
 +
background-image: url(../images/6.jpg);
 +
}
 +
.face-7 {
 +
background-image: url(../images/5.jpg);
 +
}
 +
 +
.face-8 {
 +
background-image: url(../images/6.jpg);
 +
}
 +
 +
 +
.bubble:hover {
 +
box-shadow:
 +
inset 0 0 0 110px rgba(200,95,66, 0.4),
 +
outset 0 0 0 16px rgba(255,255,255,0.8),
 +
0 1px 2px rgba(0,0,0,0.1);
 +
}
 +
 +
 +
.faces:after,
 +
.bubble:before {
 +
content: '';
 +
    display: table;
 +
}
 +
 +
.faces:after {
 +
clear: both;
 +
}
 +
 +
.faces li {
 +
width: 400px;
 +
height: 400px;
 +
display: inline-block;
 +
margin: 20px;
 +
}
 +
 +
.subName h3 {
 +
color: #fff;
 +
text-transform: uppercase;
 +
position: relative;
 +
letter-spacing: 2px;
 +
font-size: 22px;
 +
margin: 0 30px;
 +
padding: 65px 0 0 0;
 +
height: 110px;
 +
}
 +
 +
.subName p {
 +
color: #fff;
 +
padding: 10px 5px;
 +
font-style: italic;
 +
margin: 0 30px;
 +
font-size: 12px;
 +
border-top: 1px solid rgba(255,255,255,0.5);
 +
}
 +
  
 
         .droptext {
 
         .droptext {
−
box-shadow: 0px 0px 0px 5px #28AAA1;
+
box-shadow: 0px 0px 0px 5px #F37524;
 
border-radius:10px;
 
border-radius:10px;
 
         margin: auto;
 
         margin: auto;
Line 209: Line 314:
 
border: 3px solid #455057;
 
border: 3px solid #455057;
 
border-style:solid;
 
border-style:solid;
−
border-bottom-color: #28AAA1;
+
border-bottom-color: #F37524;
 
background: #455057;
 
background: #455057;
 
z-index: 50;
 
z-index: 50;
Line 219: Line 324:
 
font-weight: normal;
 
font-weight: normal;
 
font-size: 25pt;
 
font-size: 25pt;
−
color: #28AAA1;
+
color: #F37524;
 
cursor: initial;
 
cursor: initial;
  
 
}
 
}
 
.hull-title {
 
.hull-title {
−
color:#def7f5;
+
color:#f4ccb2;
 
font-size: 20px;
 
font-size: 20px;
 
width: calc(100% - 40px);
 
width: calc(100% - 40px);
Line 253: Line 358:
 
height: auto;
 
height: auto;
 
color:#455057;
 
color:#455057;
−
background:#def7f5;
+
background:#f4ccb2;
−
border-top: 2.5px solid #28AAA1;
+
border-top: 2.5px solid #F37524;
  
 
}
 
}
Line 264: Line 369:
 
input:checked + .hull .hull-close {
 
input:checked + .hull .hull-close {
 
display: inline-block;
 
display: inline-block;
−
border-bottom: 2.5px solid #28AAA1;
+
border-bottom: 2.5px solid #F37524;
 
}
 
}
  
Line 282: Line 387:
 
left: 20px;
 
left: 20px;
 
top: 17px;
 
top: 17px;
−
color: #28AAA1;
+
color: #F37524;
 
transition: transform .5s ease-in-out;
 
transition: transform .5s ease-in-out;
 
 
Line 288: Line 393:
 
input:checked + section.hull .hull-title:before {
 
input:checked + section.hull .hull-title:before {
 
transform: rotate(270deg);
 
transform: rotate(270deg);
−
 
 
}
 
}
 +
 +
       
 
         #foot ul{
 
         #foot ul{
 
         display: flex;
 
         display: flex;
Line 358: Line 464:
 
         #foot ul li:nth-child(6) span:before{
 
         #foot ul li:nth-child(6) span:before{
 
         background: #5BBBF7;
 
         background: #5BBBF7;
 +
        }
 +
 +
#ScrollUp img{
 +
width:30px;
 +
}
 +
#ScrollUp {
 +
  display:none;
 +
  position: fixed;
 +
  bottom: 55px;
 +
  right: 10px;
 +
  z-index: 299;
 +
border-style: solid;
 +
    border-color: #F37524;
 +
  outline: none;
 +
opacity:0.8;
 +
  background-color: #455057;
 +
  color: #E61B5F;
 +
  cursor: pointer;
 +
  padding: 15px;
 +
  border-radius: 30px;
 +
}
 +
 +
#ScrollUp:hover {
 +
  background-color: #F37524;
 +
}
 +
        #foot ul li span:hover .fa
 +
        {
 +
        color:#25343D;
 +
        transform: rotateY(360deg);
 +
        }
 +
        #foot ul li span:before
 +
        {
 +
        content:'';
 +
        position: absolute;
 +
        top:100%;
 +
        left:0;
 +
        width:100%;
 +
        height:100%;
 +
        background: #1AE195;
 +
        transition: 0.5s;
 
         }
 
         }
  
 
#sponsors{
 
#sponsors{
 +
padding-top:100px;
 +
text-align:center;
 
margin-left:50px;
 
margin-left:50px;
 
}
 
}
 
#sponsors img{
 
#sponsors img{
−
width:150px;
+
width:130px;
 +
 
 +
}
 +
#sponsorstop{
 +
display:inline-block;
 +
padding-right:450px;
 
}
 
}
  
−
#sponsorsdown #snapg img{
+
#sponsorsdown {
−
margin-left:750px;
+
display:inline-block;
 +
padding-left:200px;
 
}
 
}
  
Line 376: Line 530:
  
 
     <body>
 
     <body>
 +
<div id="navbox">
 
         <nav id="navdiv">
 
         <nav id="navdiv">
 
             <ul>
 
             <ul>
Line 438: Line 593:
 
             </ul>
 
             </ul>
 
         </nav>
 
         </nav>
 +
</div>
 
         <div id ="title">
 
         <div id ="title">
−
                 <img src = "https://static.igem.org/mediawiki/2017/thumb/5/50/T--Kent--DescriptionHeader.png/605px-T--Kent--DescriptionHeader.png">  
+
                 <img src = "https://static.igem.org/mediawiki/2017/thumb/8/84/T--Kent--TeamHeader.png/604px-T--Kent--TeamHeader.png" id="header1">  
−
<span>Description </span>
+
<span>Meet the Team</span>
−
<img src = "https://static.igem.org/mediawiki/2017/thumb/0/0b/T--Kent--DescriptionHeader2.png/467px-T--Kent--DescriptionHeader2.png">
+
<img src = "https://static.igem.org/mediawiki/2017/thumb/3/3d/T--Kent--TeamHeader2v2.png/800px-T--Kent--TeamHeader2v2.png" id="header2">
 
         </div>
 
         </div>
 +
 +
<ul class="faces">
 +
<li>
 +
<div class="bubble face-1">
 +
<div class="subName">
 +
<h3>Abdul</h3>
 +
<p>Physicist Question</p>
 +
</div>
 +
</div>
 +
</li>
 +
<li>
 +
<div class="bubble face-2">
 +
<div class="subName">
 +
<h3>Dan</h3>
 +
<p>Test 123 Test 123</p>
 +
</div>
 +
</div>
 +
</li>
 +
<li>
 +
<div class="bubble face-3">
 +
<div class="subName">
 +
<h3>Ivy</h3>
 +
<p>Test </p>
 +
</div>
 +
</div>
 +
</li>
 +
<li>
 +
<div class="bubble face-4">
 +
<div class="subName">
 +
<h3>Ivy</h3>
 +
<p>Test </p>
 +
</div>
 +
</div>
 +
</li>
 +
<li>
 +
<div class="bubble face-5">
 +
<div class="subName">
 +
<h3>Ivy</h3>
 +
<p>Test </p>
 +
</div>
 +
</div>
 +
</li>
 +
<li>
 +
<div class="bubble face-6">
 +
<div class="subName">
 +
<h3>Ivy</h3>
 +
<p>Test </p>
 +
</div>
 +
</div>
 +
</li>
 +
<li>
 +
<div class="bubble face-7">
 +
<div class="subName">
 +
<h3>Ivy</h3>
 +
<p>Test </p>
 +
</div>
 +
</div>
 +
</li>
 +
<li>
 +
<div class="bubble face-8">
 +
<div class="subName">
 +
<h3>Ivy</h3>
 +
<p>Test </p>
 +
</div>
 +
</div>
 +
</li>
 +
</ul>
 +
 
         <nav class="droptext arrows">
 
         <nav class="droptext arrows">
 
<header class="hull">
 
<header class="hull">
Line 537: Line 761:
 
             </ul>
 
             </ul>
 
         </div>
 
         </div>
 +
 +
<button onclick="topFunction()" id="ScrollUp" title="Return to Top"><img src="https://static.igem.org/mediawiki/2017/thumb/c/c6/T--Kent--ScrollV2.png/101px-T--Kent--ScrollV2.png"></button>
 +
 
<div id="sponsors">
 
<div id="sponsors">
 
<div id="sponsorstop">
 
<div id="sponsorstop">
Line 559: Line 786:
 
</div>
 
</div>
 
</div>
 
</div>
 +
<script>
 +
 +
window.onscroll = function() {scrollFunction()};
 +
 +
function scrollFunction() {
 +
    if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
 +
        document.getElementById("ScrollUp").style.display = "block";
 +
    } else {
 +
        document.getElementById("ScrollUp").style.display = "none";
 +
    }
 +
}
 +
 +
function topFunction() {
 +
    document.body.scrollTop = 0;
 +
    document.documentElement.scrollTop = 0;
 +
}
 +
</script>
 
     </body>
 
     </body>
 
</html>
 
</html>

Revision as of 17:38, 1 November 2017


Meet the Team

  • Abdul

    Physicist Question

  • Dan

    Test 123 Test 123

  • Ivy

    Test

  • Ivy

    Test

  • Ivy

    Test

  • Ivy

    Test

  • Ivy

    Test

  • Ivy

    Test