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