Difference between revisions of "Team:William and Mary/Team"

Line 6: Line 6:
  
 
<head>
 
<head>
−
<title>About Us</title>
 
  
−
<style type="text/css">
+
<style>
−
.image {  
+
/* Three columns side by side */
−
  position: relative;  
+
.column {
−
  width: 100%; /* for IE 6 */
+
    float: left;
 +
    width: 33.3%;
 +
    margin-bottom: 16px;
 +
    padding: 0 8px;
 
}
 
}
  
−
h1 {
+
/* Display the columns below each other instead of side by side on small screens */
−
  position: absolute;
+
@media screen and (max-width: 650px) {
−
  top: 350px;
+
    .column {
−
  left: 100px;
+
        width: 100%;
−
  width: 100%;  
+
        display: block;
 +
    }
 
}
 
}
−
h1 span {
+
 
−
  color: white;
+
/* Add some shadows to create a card effect */
−
  font: bold 75px/45px Helvetica, Sans-Serif;
+
.card {
−
  letter-spacing: 1px; 
+
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
−
  background: rgb(0, 0, 0); /* fallback color */
+
−
  background: rgba(0, 0, 0, 0.7);
+
−
  padding: 10px;  
+
 
}
 
}
  
−
                   
+
/* Some left and right padding inside the container */
−
    </style>
+
.container {
−
</head>
+
    padding: 0 16px;
−
<body style="height:1300px">
+
}
  
−
<!-- Title -->
+
/* Clear floats */
−
<div class="image">
+
.container::after, .row::after {
−
        <h1><span>About Us</span></h1>
+
    content: "";
 +
    clear: both;
 +
    display: table;
 +
}
  
−
        <img style="z-index: -1;" src="https://static.igem.org/mediawiki/2018/9/96/T--William_and_Mary--team.jpg" alt="team" width="1000" height="500" class="center">
+
.title {
−
</div>
+
    color: grey;
−
<div class="caption">
+
}
−
        <p style="text-align: center; top:550px;"><font size="+2">Meet the William and Mary iGEM team for the 2018 year!</font></p>
+
−
</div>
+
  
−
<!-- carousel that switches through pages of people in our team detailing about us-->
+
.button {
−
<div class="container">
+
    border: none;
−
<br>
+
    outline: 0;
−
<div id="myCarousel" class="carousel slide" data-ride="carousel">
+
    display: inline-block;
−
<!-- Indicators- they are the little dots at the bottom on the carousel-->
+
    padding: 8px;
−
    <ol class="carousel-indicators">
+
    color: white;
−
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
    background-color: #000;
−
      <li data-target="#myCarousel" data-slide-to="1"></li>
+
    text-align: center;
−
      <li data-target="#myCarousel" data-slide-to="2"></li>
+
    cursor: pointer;
−
      <li data-target="#myCarousel" data-slide-to="3"></li>
+
    width: 100%;
−
      <li data-target="#myCarousel" data-slide-to="4"></li>
+
}
−
      <li data-target="#myCarousel" data-slide-to="5"></li>
+
−
      <li data-target="#myCarousel" data-slide-to="6"></li>
+
−
      <li data-target="#myCarousel" data-slide-to="7"></li>
+
−
      <li data-target="#myCarousel" data-slide-to="8"></li>
+
−
      <li data-target="#myCarousel" data-slide-to="9"></li>
+
−
      <li data-target="#myCarousel" data-slide-to="10"></li>
+
−
      <li data-target="#myCarousel" data-slide-to="11"></li>
+
−
    </ol>
+
  
−
    <!-- Wrapper for slides - to limit the size of the slides-->
+
.button:hover {
−
    <div class="carousel-inner" role="listbox">
+
    background-color: #555;
 +
}
 +
</style>
  
−
      <div class="item active">
+
</head>
−
        <img src="https://static.igem.org/mediawiki/2018/c/c6/T--William_and_Mary--black.png" alt="Ethan Jones" width="500" height="500">
+
−
        <div class="carousel-caption">
+
−
          <h3>Ethan Jones</h3>
+
−
          <p>Add info here.</p>
+
−
        </div>
+
−
      </div>
+
  
−
      <div class="item">
+
<body>
−
        <img src="jessica.jpg" alt="Jessica Laury" width="460" height="345">
+
−
        <div class="carousel-caption">
+
−
          <h3>Jessica Laury</h3>
+
−
          <p>Add info here.</p>
+
−
        </div>
+
−
      </div>
+
−
   
+
−
      <div class="item">
+
−
        <img src="yashna.jpg" alt="Yashna Verma" width="460" height="345">
+
−
        <div class="carousel-caption">
+
−
          <h3>Yashna Verma</h3>
+
−
          <p>Add info here.</p>
+
−
        </div>
+
−
      </div>
+
  
−
      <div class="item">
+
<div class="row">
−
        <img src="tinh.jpg" alt="Tinh Son" width="460" height="345">
+
  <div class="column">
−
        <div class="carousel-caption">
+
    <div class="card">
−
          <h3>Tinh Son</h3>
+
      <img src="img1.jpg" alt="Jane" style="width:100%">
−
          <p>Add info here.</p>
+
      <div class="container">
−
        </div>
+
        <h2>Jane Doe</h2>
−
      </div>
+
        <p class="title">CEO &amp; Founder</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="item">
+
  <div class="column">
−
        <img src="https://static.igem.org/mediawiki/2018/8/84/T--William_and_Mary--xiangyi.jpg" alt="Xiangyi Fang" width="800" height="533">
+
    <div class="card">
−
        <div class="carousel-caption">
+
      <img src="img2.jpg" alt="Mike" style="width:100%">
−
          <h3>Xiangyi Fang</h3>
+
      <div class="container">
−
        </div>
+
        <h2>Mike Ross</h2>
−
      </div>
+
        <p class="title">Art Director</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="item">
+
  <div class="column">
−
        <img src="chengwu.jpg" alt="Chengwu Shen" width="460" height="345">
+
    <div class="card">
−
        <div class="carousel-caption">
+
      <img src="img3.jpg" alt="John" style="width:100%">
−
          <h3>Chengwu Shen</h3>
+
      <div class="container">
−
          <p>Add info here.</p>
+
        <h2>John Doe</h2>
−
        </div>
+
        <p class="title">Designer</p>
−
      </div>
+
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
−
 
+
        <p>example@example.com</p>
−
      <div class="item">
+
        <p><button class="button">Contact</button></p>
−
        <img src="hanmi.jpg" alt="Hanmi Zou" width="460" height="345">
+
      </div>
−
        <div class="carousel-caption">
+
    </div>
−
          <h3>Hanmi Zou</h3>
+
  </div>
−
          <p>Add info here.</p>
+
</div>
−
        </div>
+
−
      </div>
+
−
 
+
−
      <div class="item">
+
−
        <img src="adam.jpg" alt="Adam Oliver" width="460" height="345">
+
−
        <div class="carousel-caption">
+
−
          <h3>Adam Oliver</h3>
+
−
          <p>Add info here.</p>
+
−
        </div>
+
−
      </div>
+
−
 
+
−
      <div class="item">
+
−
        <img src="julia.jpg" alt="Julia Urban" width="460" height="345">
+
−
        <div class="carousel-caption">
+
−
          <h3>Julia Urban</h3>
+
−
          <p>Add info here.</p>
+
−
        </div>
+
−
      </div>
+
−
 
+
−
      <div class="item">
+
−
        <img src="lillian.jpg" alt="Lillian Parr" width="460" height="345">
+
−
        <div class="carousel-caption">
+
−
          <h3>Lillian Parr</h3>
+
−
          <p>Add info here.</p>
+
−
        </div>
+
−
      </div>
+
  
−
      <div class="item">
+
</body>
−
        <img src="stephanie.jpg" alt="Stephanie Do" width="460" height="345">
+
−
        <div class="carousel-caption">
+
−
          <h3>Stephanie Do</h3>
+
−
          <p>Add info here.</p>
+
−
        </div>
+
−
      </div>
+
−
 
+
−
    </div>
+
  
−
<!-- Left and right controls -->
 
−
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
 
−
      <span class="glyphicon glyphicon-chevron-left"></span>
 
−
      <span class="sr-only">Previous</span>
 
−
    </a>
 
−
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
 
−
      <span class="glyphicon glyphicon-chevron-right"></span>
 
−
      <span class="sr-only">Next</span>
 
−
    </a>
 
−
  </div>
 
−
</div>
 
  
−
</html>
+
</html>
 
{{William_and_Mary/SOURCE JS}}
 
{{William_and_Mary/SOURCE JS}}
 
{{William_and_Mary/FOOTER}}
 
{{William_and_Mary/FOOTER}}

Revision as of 15:07, 15 October 2018

Jane

Jane Doe

CEO & Founder

Some text that describes me lorem ipsum ipsum lorem.

example@example.com

Mike

Mike Ross

Art Director

Some text that describes me lorem ipsum ipsum lorem.

example@example.com

John

John Doe

Designer

Some text that describes me lorem ipsum ipsum lorem.

example@example.com