Difference between revisions of "Team:ETH Zurich/Team"
| Line 4: | Line 4: | ||
<head> | <head> | ||
| − | + | <!--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">--> | |
| − | <style> | + | <style> |
| − | .thumbnail_container { | + | .thumbnail_container { |
| − | + | position: relative; | |
| − | + | width: 100%; | |
| − | + | padding-bottom: 100%; <!-- | |
| − | + | matching this to above makes it square --> | |
| − | } | + | float:left; |
| + | } | ||
| − | .thumbnail_container::after, .row::after { | + | .thumbnail_container::after, .row::after { |
| − | + | content: ""; | |
| − | + | clear: both; | |
| − | + | display: table; | |
| − | } | + | } |
| − | .thumbnail { | + | .thumbnail { |
| − | + | position: absolute; | |
| − | + | width: 100%; | |
| − | + | height: 100%; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | img{ | + | .thumbnail img { |
| − | + | position: absolute; | |
| − | + | top: 0; | |
| − | } | + | bottom: 0; |
| + | left: 0; | ||
| + | right: 0; | ||
| + | margin: auto; | ||
| + | } | ||
| − | + | img { | |
| − | + | max-height: 100%; | |
| − | + | max-width: 100%; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | . | + | .thumbnail .img-fun { |
| − | + | display: none; | |
| − | + | position: absolute; | |
| − | + | top: 0; | |
| − | } | + | left: 0; |
| + | margin: auto; | ||
| + | } | ||
| − | + | .thumbnail:hover .img-fun { | |
| − | . | + | display: inline; |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | .section-header | + | .section-header { |
| − | + | white-space: nowrap; | |
| − | + | overflow: inherit; | |
| − | } | + | font-size: 10vh; |
| + | } | ||
| − | .section-header:after { | + | /*.section-header:before, */ |
| − | + | .section-header:after { | |
| − | + | background-color: #000; | |
| − | } | + | content: ''; |
| + | display: inline-block; | ||
| + | clear: both; | ||
| + | height: 10vh; | ||
| + | position: relative; | ||
| + | vertical-align: middle; | ||
| + | } | ||
| − | + | .section-header:before { | |
| − | + | right: 0.3em; | |
| − | + | width: 50px; | |
| − | + | } | |
| − | + | ||
| − | + | .section-header:after { | |
| − | + | left: 0.3em; | |
| − | + | width: 100%; | |
| − | + | } | |
| − | + | ||
| − | + | fieldset { | |
| − | + | border: none; | |
| − | + | margin: 0; | |
| − | + | xmin-width: 0; | |
| − | + | padding: 10px; | |
| − | + | position: relative; | |
| − | + | /*border-radius:4px;*/ | |
| − | + | background-color: white; | |
| − | + | padding-left: 10px !important; | |
| − | + | } | |
| − | + | ||
| − | + | legend { | |
| − | + | font-size: 4vh; | |
| − | </style> | + | font-weight: normal; |
| + | margin-bottom: 0px; | ||
| + | width: auto; | ||
| + | border: none; | ||
| + | /*border-radius: 4px; */ | ||
| + | padding: 5px 5px 5px 10px; | ||
| + | background-color: #ffffff; | ||
| + | } | ||
| + | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
| − | <div class="col-md-12"> | + | <div class="col-md-12"> |
| − | <div class="section-header">Students</div> | + | <div class="section-header">Students</div> |
| − | </div> | + | </div> |
| − | <div class="container-fluid"> <!-- this makes your images scale constantly, between breakpoints as welll. removing -fluid makes then jump in size at breakpoints --> | + | <div class="container-fluid"> |
| + | <!-- this makes your images scale constantly, between breakpoints as welll. removing -fluid makes then jump in size at breakpoints --> | ||
| − | <div class="row"> | + | <div class="row"> |
| − | <fieldset class="col-md-3 col-sm-6 col-xs-12"> | + | <fieldset class="col-md-3 col-sm-6 col-xs-12"> |
| − | + | <legend>Anu - The Engineer</legend> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | <div class="thumbnail_container"> | |
| − | + | <div class="thumbnail"> | |
| − | + | <img src="https://2017.igem.org/wiki/images/1/1c/T--ETH_Zurich--Anubhav_Jain.jpeg"> | |
| − | + | <img src="https://2017.igem.org/wiki/images/1/1f/T--ETH_Zurich--David_Schweingruber.jpeg" class="img-fun"> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | </div> | + | |
| − | </div> | + | |
| − | </div> | + | </fieldset> |
| + | <!--<div class="clearfix"></div>--> | ||
| + | <fieldset class="col-md-3 col-sm-6 col-xs-12"> | ||
| + | <legend>David - The </legend> | ||
| + | |||
| + | <div class="thumbnail_container"> | ||
| + | <div class="thumbnail"> | ||
| + | <img src="https://2017.igem.org/wiki/images/1/1f/T--ETH_Zurich--David_Schweingruber.jpeg"> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </fieldset> | ||
| + | <!--<div class="clearfix"></div>--> | ||
| + | <fieldset class="col-md-3 col-sm-6 col-xs-12"> | ||
| + | <legend>Irma - The Doctor</legend> | ||
| + | |||
| + | <div class="thumbnail_container"> | ||
| + | <div class="thumbnail"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/8/83/T--ETH_Zurich--Irma_Telarovic.jpeg"> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </fieldset> | ||
| + | <!--<div class="clearfix"></div>--> | ||
| + | <fieldset class="col-md-3 col-sm-6 col-xs-12"> | ||
| + | <legend>Lida - </legend> | ||
| + | |||
| + | <div class="thumbnail_container"> | ||
| + | <div class="thumbnail"> | ||
| + | <img src="https://2017.igem.org/wiki/images/8/81/T--ETH_Zurich--Lida_Vadakumchery.jpeg"> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </fieldset> | ||
| + | <!--<div class="clearfix"></div>--> | ||
| + | </div> | ||
| + | |||
| + | <div class="row"> | ||
| + | <fieldset class="col-md-3 col-sm-6 col-xs-12"> | ||
| + | <legend>Nico - The Designer</legend> | ||
| + | |||
| + | <div class="thumbnail_container"> | ||
| + | <div class="thumbnail"> | ||
| + | <img src="https://2017.igem.org/wiki/images/4/4a/T--ETH_Zurich--Nico_Huber.jpeg"> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | </fieldset> | ||
| + | <!--<div class="clearfix"></div>--> | ||
| + | <fieldset class="col-md-3 col-sm-6 col-xs-12"> | ||
| + | <legend>Nikos - The </legend> | ||
| + | |||
| + | <div class="thumbnail_container"> | ||
| + | <div class="thumbnail"> | ||
| + | <img src="https://2017.igem.org/wiki/images/8/87/T--ETH_Zurich--Nikolas_Korasidis.jpeg"> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </fieldset> | ||
| + | <!--<div class="clearfix"></div>--> | ||
| + | <fieldset class="col-md-3 col-sm-6 col-xs-12"> | ||
| + | <legend>Valentin - The Lieutenant</legend> | ||
| + | |||
| + | <div class="thumbnail_container"> | ||
| + | <div class="thumbnail"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/e/e6/T--ETH_Zurich--Valentin_Senlis.jpeg"> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </fieldset> | ||
| + | <!--<div class="clearfix"></div>--> | ||
| + | <fieldset class="col-md-3 col-sm-6 col-xs-12"> | ||
| + | <legend>Vasilis - The Chatter</legend> | ||
| + | |||
| + | <div class="thumbnail_container"> | ||
| + | <div class="thumbnail"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/5/52/T--ETH_Zurich--Vasileios_Cheras.jpeg"> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </fieldset> | ||
| + | <!--<div class="clearfix"></div>--> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
</body> | </body> | ||
</html> | </html> | ||
| − | |||
{{ETH Zurich/jqueryJS}} | {{ETH Zurich/jqueryJS}} | ||
{{ETH_Zurich/BootstrapMinJS}} | {{ETH_Zurich/BootstrapMinJS}} | ||
Revision as of 15:04, 3 September 2017
Students
