Difference between revisions of "Team:Sheffield/Team"

Line 2: Line 2:
  
 
<html>
 
<html>
 +
<style>
  
  
 +
 +
 +
 +
 +
 +
/* 01. GENERAL SETTINGS ============================================ */
 +
 +
* {margin: 0; padding: 0;}
 +
 +
p {line-height: 160%;}
 +
 +
a {text-decoration: none; color: #fff; transition: all 0.1s ease-in;}
 +
img {border: 0;}
 +
 +
body {
 +
background: #fff;
 +
color: #fff;
 +
font-family: 'PT Sans Narrow', sans-serif;
 +
font-size: 13px;
 +
font-weight: 300;
 +
}
 +
 +
.clear {clear: both;}
 +
 +
/* Buttons */
 +
.btn {
 +
display: inline-block;
 +
margin-top: 20px;
 +
padding: 10px 40px;
 +
color: rgba(255,255,255, 0.95);
 +
font-size: 18px;
 +
font-weight: 700;
 +
text-transform: uppercase;
 +
border: none;
 +
border-radius: 20px;
 +
outline: 0;
 +
transition: all 0.1s ease-in;
 +
}
 +
 +
.btn-transparent {background: rgba(0,0,0, 0.2);}
 +
.btn-transparent:hover {background: rgba(0,0,0, 0.4);}
 +
 +
/* Separators */
 +
.separator {
 +
margin: 0 auto;
 +
background: rgba(0, 0, 0, 0.2);
 +
width: 30px;
 +
height: 5px;
 +
}
 +
 +
/* 02. FONT FACE ============================================ */
 +
 +
@font-face {
 +
    font-family: 'norwester';
 +
src: url('../fonts/norwester/norwester.eot');
 +
    src: url('../fonts/norwester/norwester.eot?iefix') format('embedded-opentype'),
 +
url('../fonts/norwester/norwester.ttf');
 +
    font-weight: normal;
 +
}
 +
 +
/* 03. SPEAKERS SETTINGS ============================================ */
 +
 +
#speakers {
 +
padding: 60px 0;
 +
background: #4593e3;
 +
text-align: center;
 +
}
 +
 +
#speakers p {
 +
padding: 20px 0 60px;
 +
color: rgba(255,255,255, 0.85);
 +
font-family: 'Open Sans', sans-serif;
 +
font-size: 16px;
 +
letter-spacing: 0.2px;
 +
}
 +
 +
#speakers h3 {
 +
padding: 0 0 15px;
 +
font-family: 'norwester';
 +
font-size: 36px;
 +
text-transform: uppercase;
 +
}
 +
 +
#speakers h4  {
 +
margin-top: -20px;
 +
font-size: 32px;
 +
font-weight: 700;
 +
}
 +
 +
#speakers h4 span {
 +
display: block;
 +
position: relative;
 +
left: -40px;
 +
top: 10px;
 +
font-size: 20px;
 +
background: none;
 +
padding: 0;
 +
}
 +
 +
#speakers img {
 +
width: 100%;
 +
max-width: 240px;
 +
border-radius: 50%;
 +
border: 15px solid transparent;
 +
box-shadow: 2px 2px 0px rgba(0,0,0, 0.18);
 +
transition: all 0.1s ease-in;
 +
}
 +
 +
#speakers img:hover {
 +
border: 15px solid #3980C9;
 +
position: relative;
 +
z-index: 10;
 +
transition: all 0.1s ease-in;
 +
}
 +
 +
#speakers span {
 +
padding: 8px 20px;
 +
position: relative;
 +
top: -64px;
 +
left: -42px;
 +
display: inline-block;
 +
background: #4593e3;
 +
border-radius: 0 16px 16px 0;
 +
font-size: 16px;
 +
}
 +
 +
/* Member Image Hover Effect */
 +
.hover_img {
 +
  display: none
 +
}
 +
 +
.member-profile:hover .unhover_img{
 +
  display: none;
 +
}
 +
 +
.member-profile:hover .hover_img {
 +
  display: block;
 +
}
 +
 +
/* Social Networks Meta */
 +
#speakers li {display: inline-block; padding: 0 6px; font-size: 18px;}
 +
#speakers li a {color: rgba(0,0,0, 0.3); transition: all 0.1s ease-in;}
 +
#speakers li a:hover {color: rgba(0,0,0, 0.7);}
 +
 +
/* Rows Optimization */
 +
.row2 {
 +
display: none;
 +
}
 +
 +
.row1 .col-md-3, .row2 .col-md-3 {
 +
padding-bottom: 40px;
 +
}
 +
 +
/* Mobile Devices Optimization */
 +
@media (min-width: 568px) and (max-width: 992px) {
 +
 +
.row1 .col-md-3, .row2 .col-md-3 {
 +
display: inline-block;
 +
max-width: 50%;
 +
}
 +
 +
#speakers img {max-width: 300px;}
 +
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
</style>
 
<div class="container-fluid" >
 
<div class="container-fluid" >
  

Revision as of 10:25, 1 August 2017

Team

In this page you can introduce your team members, instructors, and advisors.

Inspiration

You can look at what other teams did to get some inspiration!
Here are a few examples:

What should this page contain?
  • Include pictures of your teammates, don’t forget instructors and advisors!
  • You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.
  • Take team pictures! Show us your school, your lab and little bit of your city.
  • Remember that image galleries can help you showcase many pictures while saving space.