Difference between revisions of "Team:East Chapel Hill/Team"

 
(36 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
<head>
 
<head>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
+
<link href="https://2018.igem.org/Template:East_Chapel_Hill" rel="stylesheet">
* {
+
</head>
    box-sizing: border-box;
+
}
+
  
body {
 
    background-color: #f1f1f1;
 
    padding: 10px;
 
    font-family: Arial;
 
}
 
 
/* Center website */
 
.main {
 
    max-width: 1000px;
 
    margin: auto;
 
}
 
 
h1 {
 
    font-size: 50px;
 
    word-break: break-all;
 
}
 
 
.row {
 
    margin: 8px -16px;
 
}
 
 
 
/* Create four equal columns that floats next to each other */
 
.column {
 
    float: right;
 
    width: 21%;
 
}
 
 
/* Clear floats after rows */
 
.row:after {
 
    content: "";
 
    display: table;
 
    clear: both;
 
}
 
 
/* Content */
 
.content {
 
    background-color: white;
 
    padding: 10px;
 
}
 
 
/* Responsive layout - makes a two column-layout instead of four columns */
 
@media screen and (max-width: 900px) {
 
    .column {
 
        width: 46%;
 
    }
 
}
 
 
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
 
@media screen and (max-width: 600px) {
 
    .column {
 
        width: 100%;
 
    }
 
}
 
</style>
 
</head>
 
 
<body>
 
<body>
  
<!-- MAIN (Center website) -->
+
<img src="https://static.igem.org/mediawiki/2018/e/e7/T--East_Chapel_Hill--ECHHSMEETtHETEAMP2.png" id="HomeImage1"" />
<div class="main">
+
 
+
<h1>East Chapel Hill iGem Team</h1>
+
<hr>
+
 
+
 
+
<!-- Portfolio Gallery Grid -->
+
<div class="row">
+
   
+
      <img src="https://static.igem.org/mediawiki/2018/3/30/T--East_Chapel_Hill--MichaelPicture.jpg" style="width:200px">
+
      <h3>Michael De Figueiredo</h3>
+
      <p>I have always been interested in living things and how DNA determines the makeup of all organisms. Manipulating DNA to change the makeup of organisms is fascinating.
+
</p>
+
  </div>
+
  <div class="column">
+
 
+
    <img src="https://static.igem.org/mediawiki/2018/f/f8/T--East_Chapel_Hill--CarolinePicture.jpg" style="width:300px">
+
      <h3>Caroline Zhao</h3>
+
      <p>I joined iGEM because I am interested in learning more about genetic engineering and delving into biology deeper than a just a surface level class. It is an opportunity to get hands on experience and explore a field I have an interest in.</p>
+
  </div>
+
</div>
+
  <div class="column">
+
 
+
    <img src="https://static.igem.org/mediawiki/2018/4/4e/T--East_Chapel_Hill--AnniePicture.jpg" style="width:350px"> class= "bio_pic">
+
      <h3>Annie Qin</h3>
+
      <p>iGEM gives me a hands-on experience on how to solve real world problems. It allows me to provide real solutions to real problems, with a close-knit team. </p>
+
  </div>
+
  <div class="column">
+
  
    <img src="https://static.igem.org/mediawiki/2018/b/be/T--East_Chapel_Hill--AnanthPicture.jpg" style="width:355px"> class= "bio_pic">
 
      <h3>Ananth Murthy</h3>
 
      <p>I’m really interested in synthetic biology because it’s a growing field and its applications can help the world. In the future I’m interested in pursuing a career in medicine.
 
</p>
 
  </div>
 
  <div class="column">
 
    <div class="content">
 
    <img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
 
      <h3>My Work</h3>
 
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
 
    </div>
 
  </div>
 
  <div class="column">
 
    <div class="content">
 
    <img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
 
      <h3>My Work</h3>
 
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
 
    </div>
 
  </div>
 
<div class="column">
 
    <div class="content">
 
    <img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
 
      <h3>My Work</h3>
 
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
 
    </div>
 
  </div>
 
<div class="column">
 
    <div class="content">
 
    <img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
 
      <h3>My Work</h3>
 
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
 
    </div>
 
  </div>
 
<!-- END GRID -->
 
</div>
 
  
<div class="content">
 
  <img src="/w3images/p3.jpg" alt="Bear" style="width:100%">
 
  <h3>Some Other Work</h3>
 
  <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
 
  <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
 
</div>
 
  
<!-- END MAIN -->
 
</div>
 
  
 
</body>
 
</body>
</html>
 

Latest revision as of 02:00, 17 October 2018