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.