Difference between revisions of "Team:ICT-Mumbai/Team"

Line 155: Line 155:
 
</div>
 
</div>
  
−
<h2>Slide in Overlay from the Bottom</h2>
+
<div class="row">
−
<p>Hover over the image to see the effect.</p>
+
  <div class="column">
 +
    <div class="card">
 +
      <img src="https://2017.igem.org/File:Aml_photo.jpeg" alt="Arvind" style="width:100%">
 +
      <div class="container">
 +
        <h2>Arvind M. Lali</h2>
 +
        <p class="title">Primary PI</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="container">
+
  <div class="column">
−
  <img src="img_avatar.png" alt="Avatar" class="image">
+
    <div class="card">
−
  <div class="overlay">
+
      <img src="https://2017.igem.org/File:Aml_photo.jpeg" alt="Shalini" style="width:100%">
−
    <div class="text">Hello World</div>
+
      <div class="container">
 +
        <h2>Shalini Deb</h2>
 +
        <p class="title">Secondary PI</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/File:Aml_photo.jpeg" alt="Shamlan" style="width:100%">
 +
      <div class="container">
 +
        <h2>Shamlan M. S. Reshamwala</h2>
 +
        <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>
 +
 +
/* Three columns side by side */
 +
.column {
 +
    float: left;
 +
    width: 33.3%;
 +
    margin-bottom: 16px;
 +
    padding: 0 8px;
 +
}
 +
 +
/* Display the columns below each other instead of side by side on small screens */
 +
@media (max-width: 650px) {
 +
    .column {
 +
        width: 100%;
 +
        display: block;
 +
    }
 +
}
 +
 +
/* Add some shadows to create a card effect */
 +
.card {
 +
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
}
 +
 +
/* Some left and right padding inside the container */
 +
.container {
 +
    padding: 0 16px;
 +
}
 +
 +
/* Clear floats */
 +
.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;
 +
}
  
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 19:41, 31 October 2017

ICT-Mumbai 2017

Team ICT-Mumbai
Arvind

Arvind M. Lali

Primary PI

Some text that describes me lorem ipsum ipsum lorem.

example@example.com

Shalini

Shalini Deb

Secondary PI

Some text that describes me lorem ipsum ipsum lorem.

example@example.com

Shamlan

Shamlan M. S. Reshamwala

Designer

Some text that describes me lorem ipsum ipsum lorem.

example@example.com

/* Three columns side by side */ .column { float: left; width: 33.3%; margin-bottom: 16px; padding: 0 8px; } /* Display the columns below each other instead of side by side on small screens */ @media (max-width: 650px) { .column { width: 100%; display: block; } } /* Add some shadows to create a card effect */ .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } /* Some left and right padding inside the container */ .container { padding: 0 16px; } /* Clear floats */ .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; }