Konstantinos (Talk | contribs) |
|||
Line 15: | Line 15: | ||
background-position: top; | background-position: top; | ||
} | } | ||
+ | a { | ||
+ | color: #e45245; | ||
+ | } | ||
+ | |||
+ | a:hover { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | /* Team Starts */ | ||
+ | .team-members { | ||
+ | transform: rotate(-45deg); | ||
+ | } | ||
+ | .team-members li > div { | ||
+ | float: left; | ||
+ | width: 20%; | ||
+ | } | ||
+ | |||
+ | .team-members li:nth-child(2) > div:first-child { | ||
+ | margin-left: 20%; | ||
+ | } | ||
+ | |||
+ | .team-members li:last-child > div:first-child { | ||
+ | margin-left: 40%; | ||
+ | } | ||
+ | |||
+ | .member-details > div { | ||
+ | background-color: #ddd; | ||
+ | margin: 5px; | ||
+ | } | ||
+ | .member-details img { | ||
+ | transform: rotate(45deg) translate(0, 15px) scale(1.2); | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | /* hover content - style */ | ||
+ | .member-details > div { | ||
+ | position: relative; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .member-info { | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | transform: rotate(45deg) translate(-12px, 15px); | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | z-index: 2; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .member-info h3, | ||
+ | .member-info p { | ||
+ | margin: 0; | ||
+ | color: #fff; | ||
+ | position: relative; | ||
+ | opacity: 0; | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .member-info h3 { | ||
+ | text-transform: uppercase; | ||
+ | font-size: 14px; | ||
+ | font-weight: 400; | ||
+ | top: -100px; | ||
+ | } | ||
+ | |||
+ | .member-info p { | ||
+ | font-weight: 300; | ||
+ | font-size: 12px; | ||
+ | bottom: -150px; | ||
+ | } | ||
+ | |||
+ | .member-details > div:after { | ||
+ | content: ''; | ||
+ | background-image: linear-gradient(45deg, rgba(228, 82, 69, .8) 50%, transparent 50%); | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | z-index: 1; | ||
+ | opacity: 0; | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | |||
+ | /* hover content - onhover */ | ||
+ | .member-details *, | ||
+ | .member-details > div:after { | ||
+ | cursor: pointer; | ||
+ | transition: all .4s ease; | ||
+ | } | ||
+ | |||
+ | .member-details:hover *, | ||
+ | .member-details:hover > div:after { | ||
+ | opacity: 1; | ||
+ | visibility: visible; | ||
+ | } | ||
+ | |||
+ | .member-details:hover .member-info h3 { | ||
+ | top: 0; | ||
+ | } | ||
+ | |||
+ | .member-details:hover .member-info p { | ||
+ | bottom: 0; | ||
+ | } | ||
+ | |||
+ | /* Team overview */ | ||
+ | .team-overview { | ||
+ | padding-right: 15px; | ||
+ | } | ||
+ | .team-overview h2 { | ||
+ | text-transform: uppercase; | ||
+ | font-size: 22px; | ||
+ | font-weight: 700; | ||
+ | margin-bottom: 5px; | ||
+ | } | ||
+ | |||
+ | .team-overview > a { | ||
+ | margin-bottom: 30px; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .team-overview > a:before { | ||
+ | content: ''; | ||
+ | width: 10px; | ||
+ | height: 2px; | ||
+ | position: relative; | ||
+ | top: -3px; | ||
+ | margin-right: 5px; | ||
+ | background-color: #ccc; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* For centering elements - optional - Can use table,tablecell instead */ | ||
+ | .flex-center { | ||
+ | display: flex; | ||
+ | flex-direction: row; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | } | ||
+ | |||
+ | .flex-center > div:first-child { | ||
+ | order: 2; | ||
+ | } | ||
+ | |||
+ | /* RESPONSIVE */ | ||
+ | @media only screen and (max-width : 992px) { | ||
+ | .sm-no-flex { | ||
+ | display: block; | ||
+ | } | ||
+ | .sm-no-float { | ||
+ | float: none !important; | ||
+ | } | ||
+ | .sm-text-center { | ||
+ | text-align: center; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media only screen and (max-width : 550px) { | ||
+ | .team-members li { | ||
+ | text-align: center; | ||
+ | } | ||
+ | .team-members li > div { | ||
+ | float: none; | ||
+ | display: inline-block; | ||
+ | width: 30%; | ||
+ | margin: 0 !important; | ||
+ | } | ||
+ | .team-members { | ||
+ | transform: rotate(0); | ||
+ | } | ||
+ | .member-details img { | ||
+ | transform: rotate(0) translate(0, 0); | ||
+ | } | ||
+ | .team-overview { | ||
+ | padding: 15px; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | @media only screen and (max-width : 399px) { | ||
+ | .team-members li > div { | ||
+ | width: 48%; | ||
+ | } | ||
+ | } | ||
+ | |||
</style> | </style> | ||
Line 33: | Line 222: | ||
</section> | </section> | ||
<!-- Page Header end--> | <!-- Page Header end--> | ||
− | + | <section> | |
+ | <div class="container"> | ||
+ | <div class="row flex-center sm-no-flex"> | ||
+ | |||
+ | <div class="pull-right sm-no-float col-m12"> | ||
+ | <ul class="team-members"> | ||
+ | <!-- single member row starts --> | ||
+ | <li class="clearfix"> | ||
+ | <div class="member-details"> | ||
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2019/3/32/T--EPFL--dodo.jpeg" alt="UI Designer"> | ||
+ | <div class="member-info"> | ||
+ | <h3> <a href="#Dodo">Junyan</a></h3> | ||
+ | <p>Toehold</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="member-details"> | ||
+ | <div> | ||
+ | <img src="http://gocheckers.com/images/roster/josh_wesley_headshot_1718.png" alt="UI Designer"> | ||
+ | <div class="member-info"> | ||
+ | <h3>John Doe</h3> | ||
+ | <p>UI Designer</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="member-details"> | ||
+ | <div> | ||
+ | <img src="https://axis.org/wp-content/uploads/2014/10/chris-headshot.png" alt="UI Designer"> | ||
+ | <div class="member-info"> | ||
+ | <h3>John Doe</h3> | ||
+ | <p>UI Designer</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li><!-- /single member row ends --> | ||
+ | |||
+ | <!-- single member row starts --> | ||
+ | <li class="clearfix"> | ||
+ | <div class="member-details"> | ||
+ | <div> | ||
+ | <img src="https://axis.org/wp-content/uploads/2015/05/evan-headshot.png" alt="UI Designer"> | ||
+ | <div class="member-info"> | ||
+ | <h3>John Doe</h3> | ||
+ | <p>UI Designer</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="member-details"> | ||
+ | <div> | ||
+ | <img src="http://gocheckers.com/images/roster/andrew_poturalski_headshot_1718.png" alt="UI Designer"> | ||
+ | <div class="member-info"> | ||
+ | <h3>John Doe</h3> | ||
+ | <p>UI Designer</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="member-details"> | ||
+ | <div> | ||
+ | <img src="https://axis.org/wp-content/uploads/2015/12/2015-Dougie-Headshot.png" alt="UI Designer"> | ||
+ | <div class="member-info"> | ||
+ | <h3>John Doe</h3> | ||
+ | <p>UI Designer</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li><!-- /single member row ends --> | ||
+ | |||
+ | <!-- single member row starts --> | ||
+ | <li class="clearfix"> | ||
+ | <div class="member-details"> | ||
+ | <div> | ||
+ | <img src="https://axis.org/wp-content/uploads/2014/10/chris-headshot.png" alt="UI Designer"> | ||
+ | <div class="member-info"> | ||
+ | <h3>John Doe</h3> | ||
+ | <p>UI Designer</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="member-details"> | ||
+ | <div> | ||
+ | <img src="https://axis.org/wp-content/uploads/2014/12/jeremiah-e1418073411753.png" alt="UI Designer"> | ||
+ | <div class="member-info"> | ||
+ | <h3>John Doe</h3> | ||
+ | <p>UI Designer</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="member-details"> | ||
+ | <div> | ||
+ | <img src="http://gocheckers.com/images/roster/josh_wesley_headshot_1718.png" alt="UI Designer"> | ||
+ | <div class="member-info"> | ||
+ | <h3>John Doe</h3> | ||
+ | <p>UI Designer</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li><!-- /single member row ends --> | ||
+ | |||
+ | </ul><!-- /end team-photos --> | ||
+ | </div><!-- /end col-md-8 --> | ||
+ | </div><!-- /end row --> | ||
+ | </div><!-- /end container --> | ||
+ | </section> | ||
+ | |||
Revision as of 21:02, 13 October 2019
Team
-
Junyan
Toehold
John Doe
UI Designer
John Doe
UI Designer
-
John Doe
UI Designer
John Doe
UI Designer
John Doe
UI Designer
-
John Doe
UI Designer
John Doe
UI Designer
John Doe
UI Designer
Dana Mozaffari
Mission: Create a colorimetric signal
Studies: Master in Chemical Engineering
Fun fact: He once found a giant pickle jar for the whole team
Favourite wine: Les Portes de Novembre
Laura Kvedarauskaite
Mission: Team Leader
Studies: Bachelor in Life Sciences engineering
Fun fact: Likes to spray ethanol on gloves
Favourite wine: Primitivo
Leonard Karsunky
Mission: Toehold switches, grammar corrector
Studies: Bachelor in Life Sciences engineering
Fun fact: He always has a debate idea to share at 8am
Favourite wine: Les Portes de Novembre
Theo Nass
Mission: Make amplification by RPA work
Studies: Bachelor in Life Sciences engineering
Fun fact: Puts his hands into ice when it’s too hot outside
Favourite wine: Champagne
Stefania Konstantinidi
Mission: DNA Extraction and wiki creation
Studies: Master in Medical Orientated Robotics
Fun fact: He once found a giant pickle jar for the whole team
Favourite wine: Sociando
Hana Samet
Mission: DNA extraction and wiki creation
Studies: Master in microengineering
Fun fact:
Favourite wine:
Luc Gabel
Mission: Make amplification by RPA work
Studies: Bachelor in Life Sciences
Fun fact: He has a baby face on most of his pictures
Favourite wine: Pinot gris
Konstantinos Ragios
Mission: Make amplification by RPA work
Studies: Master in Life Science engineering
Fun fact: He is too old for this sh*t.
Favourite wine: Xinomavro
Junyan Qian
Mission: Toehold switches
Studies: Bachelor in Microengineering
Fun fact: Can’t pronounce “all in all”
Favourite wine: Chinese rice wine