team.html

{% extends "layout.html" %}

{% block title %}Our Team{% endblock %}
{% block lead %}Meet the minds behind Natronaut{% endblock %}
{% block page_content %}

<style type="text/css">

  h1 {
    text-align: center;
    color: #222;
    padding-top: 20px;
  }
  .team-container {
    width: 1200px;
    height: 100%;
    margin: auto;
  }
  .card {
    width: 300px;
    height: 450px;
    background: transparent;
    border-radius: 10px;
    margin-top: 40px; 
    margin-left: 100px; 
    position: relative; 
    float: left; 
    text-align: center;
  }
  .card:hover {
    box-shadow: 0px 0px 20px 1px #9592927a;
  }
  .bg-pos {
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 50px; 
    left: 60px; 
    z-index: -1; 
    background-image: url("https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/background_images/splash_bg_pos_1.png?ref_type=heads");
    background-size: cover;
  }
  .card:hover .bg-pos, .card h3:hover ~ .bg-pos, .card h4:hover ~ .bg-pos, .one:hover ~ .bg-pos {
    background-image: url("https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/background_images/splash_bg_pos_0.png?ref_type=heads");
    top: 25px; left: 50px
  }
  .one {
    width: 160%;
    position: absolute; 
    top: 20px; 
    left: 60px;
  }
  .card h3, card h4 {
    cursor: pointer; 
  }
</style>
<div class="team-container">
  <div class="row justify-content-center">
    <div class="card col-md-3">
      <div class="bg-pos"></div>
      <img class="one" src="https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/profile_images/profile_image_Devyani.png?ref_type=heads" alt="Profile picture Dveyani">
      <h3>Devyani Ravi</h3>
      <h4>Role</h4>
    </div>
    <!-- Add more cards here -->
    <div class="card col-md-3">
      <div class="bg-pos"></div>
      <img class="one" src="https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/profile_images/profile_image_Devyani.png?ref_type=heads" alt="Profile picture Dveyani">
      <h3>Devyani Ravi</h3>
      <h4>Role</h4>
    </div>
    <div class="card col-md-3">
      <div class="bg-pos"></div>
      <img class="one" src="https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/profile_images/profile_image_Devyani.png?ref_type=heads" alt="Profile picture Dveyani">
      <h3>Devyani Ravi</h3>
      <h4>Role</h4>
    </div>
    <div class="card col-md-3">
      <div class="bg-pos"></div>
      <img class="one" src="https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/profile_images/profile_image_Devyani.png?ref_type=heads" alt="Profile picture Dveyani">
      <h3>Devyani Ravi</h3>
      <h4>Role</h4>
    </div>
    <div class="card col-md-3">
      <div class="bg-pos"></div>
      <img class="one" src="https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/profile_images/profile_image_Devyani.png?ref_type=heads" alt="Profile picture Dveyani">
      <h3>Devyani Ravi</h3>
      <h4>Role</h4>
    </div>
    <div class="card col-md-3">
      <div class="bg-pos"></div>
      <img class="one" src="https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/profile_images/profile_image_Devyani.png?ref_type=heads" alt="Profile picture Dveyani">
      <h3>Devyani Ravi</h3>
      <h4>Role</h4>
    </div>
    <div class="card col-md-3">
      <div class="bg-pos"></div>
      <img class="one" src="https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/profile_images/profile_image_Devyani.png?ref_type=heads" alt="Profile picture Dveyani">
      <h3>Devyani Ravi</h3>
      <h4>Role</h4>
    </div>
    <div class="card col-md-3">
      <div class="bg-pos"></div>
      <img class="one" src="https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/profile_images/profile_image_Devyani.png?ref_type=heads" alt="Profile picture Dveyani">
      <h3>Devyani Ravi</h3>
      <h4>Role</h4>
    </div>
    <div class="card col-md-3">
      <div class="bg-pos"></div>
      <img class="one" src="https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/profile_images/profile_image_Devyani.png?ref_type=heads" alt="Profile picture Dveyani">
      <h3>Devyani Ravi</h3>
      <h4>Role</h4>
    </div>
    <div class="card col-md-3">
      <div class="bg-pos"></div>
      <img class="one" src="https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/profile_images/profile_image_Devyani.png?ref_type=heads" alt="Profile picture Dveyani">
      <h3>Devyani Ravi</h3>
      <h4>Role</h4>
    </div>
    <div class="card col-md-3">
      <div class="bg-pos"></div>
      <img class="one" src="https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/profile_images/profile_image_Devyani.png?ref_type=heads" alt="Profile picture Dveyani">
      <h3>Devyani Ravi</h3>
      <h4>Role</h4>
    </div>
    <div class="card col-md-3">
      <div class="bg-pos"></div>
      <img class="one" src="https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/profile_images/profile_image_Devyani.png?ref_type=heads" alt="Profile picture Dveyani">
      <h3>Devyani Ravi</h3>
      <h4>Role</h4>
    </div>
    <div class="card col-md-3">
      <div class="bg-pos"></div>
      <img class="one" src="https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/profile_images/profile_image_Devyani.png?ref_type=heads" alt="Profile picture Dveyani">
      <h3>Devyani Ravi</h3>
      <h4>Role</h4>
    </div>
    <div class="card col-md-3">
      <div class="bg-pos"></div>
      <img class="one" src="https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/profile_images/profile_image_Devyani.png?ref_type=heads" alt="Profile picture Dveyani">
      <h3>Devyani Ravi</h3>
      <h4>Role</h4>
    </div>
    <div class="card col-md-3">
      <div class="bg-pos"></div>
      <img class="one" src="https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/profile_images/profile_image_Devyani.png?ref_type=heads" alt="Profile picture Dveyani">
      <h3>Devyani Ravi</h3>
      <h4>Role</h4>
    </div>
    <div class="card col-md-3">
      <div class="bg-pos"></div>
      <img class="one" src="https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/profile_images/profile_image_Devyani.png?ref_type=heads" alt="Profile picture Dveyani">
      <h3>Devyani Ravi</h3>
      <h4>Role</h4>
    </div>
  </div>
</div>
{% endblock %}