Difference between revisions of "Team:ETH Zurich/Team"

Line 6: Line 6:
 
  <!--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">-->
 
  <!--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">-->
 
<style>
 
<style>
−
html {
+
.thumbnail_container {
−
  box-sizing: border-box;
+
    position: relative;
 +
    width: 100%;
 +
    padding-bottom: 100%; <!-- matching this to above makes it square -->
 +
    float:left;
 
}
 
}
  
−
*, *:before, *:after {
+
.thumbnail {
−
  box-sizing: inherit;
+
    position:absolute;
 +
    width:100%;
 +
    height:100%;
 
}
 
}
−
 
+
.thumbnail img {
−
.column {
+
    position: absolute;
−
  float: left;
+
    top: 0;
−
  width: 25%;
+
    bottom: 0;
−
  margin-bottom: 16px;
+
    left: 0;
−
  padding: 0 8px;
+
    right: 0;
 +
    margin: auto;
 
}
 
}
  
−
@media (max-width: 650px) {
+
img{
−
  .column {
+
     max-height:100%;
−
     width: 100%;
+
     max-width:100%;
−
     display: block;
+
−
  }
+
−
}
+
−
 
+
−
.card {
+
−
  box-shadow: none;
+
−
}
+
−
 
+
−
.container {
+
−
  padding: 0 16px;
+
−
}
+
−
 
+
−
.container::after, .row::after {
+
−
  content: "";
+
−
  clear: both;
+
−
  display: table;
+
−
}
+
−
 
+
−
.title {
+
−
  color: grey;
+
−
}
+
−
 
+
−
.button {
+
−
  border: none;
+
−
  outline: 0;
+
−
  display: inline-block;
+
−
  padding: 8px;
+
−
  color: white;
+
−
  background-color: #000;
+
−
  text-align: center;
+
−
  cursor: pointer;
+
−
  width: 100%;
+
−
}
+
−
 
+
−
.button:hover {
+
−
  background-color: #555;
+
 
}
 
}
 
</style>
 
</style>
Line 67: Line 37:
  
 
<h2>Students</h2>
 
<h2>Students</h2>
−
<p>blablabla</p>
 
 
<br>
 
<br>
  
−
<div class="row">
+
<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="column">
+
  <div class="row">
−
    <div class="card">
+
−
      <img src="https://2017.igem.org/wiki/images/1/1c/T--ETH_Zurich--Anubhav_Jain.jpeg" alt="Anu" style="width:100">
+
−
      <div class="container">
+
−
        <h3>Anubhav Jain</h3>
+
−
        <p class="title">Engineer</p>
+
−
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
+
−
        <p>example@example.com</p>
+
−
        <p><button class="button">Contact</button></p>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
  
−
   <div class="column">
+
   <div class="col-md-3 col-sm-4 col-xs-6">
−
     <div class="card">
+
     <div class="thumbnail_container">
−
      <img src="https://2017.igem.org/wiki/images/8/81/T--ETH_Zurich--Lida_Vadakumchery.jpeg" alt="Lida" style="width:100%">
+
       <div class="thumbnail">
−
       <div class="container">
+
          <img src="http://placehold.it/400x600">
−
        <h3>Lida_Vadakumchery</h3>
+
−
        <p class="title">Biochemist</p>
+
−
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
+
−
        <p>example@example.com</p>
+
−
        <p><button class="button">Contact</button></p>
+
 
       </div>
 
       </div>
 
     </div>
 
     </div>
−
  </div>
+
</div>
−
  <div class="column">
+
<div class="col-md-3 col-sm-4 col-xs-6">
−
     <div class="card">
+
     <div class="thumbnail_container">
−
      <img src="https://2017.igem.org/wiki/images/4/4a/T--ETH_Zurich--Nico_Huber.jpeg" alt="Nico Huber" style="width:100%">
+
       <div class="thumbnail">
−
       <div class="container">
+
         <img src="http://placehold.it/600x600">
−
         <h3>Nico Huber</h3>
+
−
        <p class="title">Designer</p>
+
−
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
+
−
        <p>example@example.com</p>
+
−
        <p><button class="button">Contact</button></p>
+
 
       </div>
 
       </div>
−
     </div>
+
     </div>
−
  </div>
+
</div>
−
  <div class="column">
+
<div class="col-md-3 col-sm-4 col-xs-6">
−
     <div class="card">
+
     <div class="thumbnail_container">
−
      <img src="https://2017.igem.org/wiki/images/1/1f/T--ETH_Zurich--David_Schweingruber.jpeg" alt="David" style="width:100%">
+
       <div class="thumbnail">
−
       <div class="container">
+
          <img src="http://placehold.it/600x400">
−
        <h3>David_Schweingruber</h3>
+
−
        <p class="title">Biotech</p>
+
−
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
+
−
        <p>example@example.com</p>
+
−
        <p><button class="button">Contact</button></p>
+
 
       </div>
 
       </div>
 
     </div>
 
     </div>
−
  </div>
 
 
</div>
 
</div>
−
 
+
<div class="col-md-3 col-sm-4 col-xs-6">
−
<div class="row">
+
    <div class="thumbnail_container">
−
  <div class="column">
+
      <div class="thumbnail">
−
    <div class="card">
+
         <img src="no-photo" /> <!-- No Photo, but it still scales -->
−
      <img src="https://static.igem.org/mediawiki/2017/5/52/T--ETH_Zurich--Vasileios_Cheras.jpeg" alt="Vasilis" style="width:100%">
+
−
      <div class="container">
+
−
        <h3>Vasileios_Cheras</h3>
+
−
        <p class="title">Talker</p>
+
−
         <p>Some text that describes me lorem ipsum ipsum lorem.</p>
+
−
        <p>example@example.com</p>
+
−
        <p><button class="button">Contact</button></p>
+
 
       </div>
 
       </div>
−
     </div>
+
     </div>
−
  </div>
+
−
 
+
−
  <div class="column">
+
−
    <div class="card">
+
−
      <img src="https://2017.igem.org/wiki/images/8/87/T--ETH_Zurich--Nikolas_Korasidis.jpeg" alt="Nikos" style="width:100%">
+
−
      <div class="container">
+
−
        <h3>Nikolas_Korasidis</h3>
+
−
        <p class="title">Geek</p>
+
−
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
+
−
        <p>example@example.com</p>
+
−
        <p><button class="button">Contact</button></p>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
−
  <div class="column">
+
−
    <div class="card">
+
−
      <img src="https://static.igem.org/mediawiki/2017/8/83/T--ETH_Zurich--Irma_Telarovic.jpeg" alt="Irma" style="width:100%">
+
−
      <div class="container">
+
−
        <h3>Irma_Telarovic</h3>
+
−
        <p class="title">Doctor</p>
+
−
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
+
−
        <p>example@example.com</p>
+
−
        <p><button class="button">Contact</button></p>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
−
  <div class="column">
+
−
    <div class="card">
+
−
      <img src="https://static.igem.org/mediawiki/2017/e/e6/T--ETH_Zurich--Valentin_Senlis.jpeg" alt="Valentin" style="width:100%">
+
−
      <div class="container">
+
−
        <h3>Valentin_Senlis</h3>
+
−
        <p class="title">Lieutenant</p>
+
−
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
+
−
        <p>example@example.com</p>
+
−
        <p><button class="button">Contact</button></p>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
 
</div>
 
</div>
  

Revision as of 15:38, 1 September 2017



Students