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

Line 5: Line 5:
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<style>
 
<style>
−
* {
+
<div class="col-sm-3" style='padding-left: px;'></div>
−
    box-sizing: border-box;
+
  <div class="col-sm-9" style='padding-top: 40px; font-size: 30px; font-family: "Optima";'>Michael DeFig</div>
−
}
+
</div>
  
−
body {
 
−
    background-color: #f1f1f1;
 
−
    padding: 10px;
 
−
    font-family: Arial;
 
−
}
 
  
−
/* Center website */
+
<div class="row">
−
.main {
+
  <div class="col-sm-3" style='padding-left: px;'><center><IMG SRC="https://static.igem.org/mediawiki/2018/3/30/T--East_Chapel_Hill--MichaelPicture.jpg" width=220px></center></div>
−
    max-width: 1000px;
+
  <div class="col-sm-9"style='padding-top: 15px; padding-right: 75px; font-size: 22px; font-family: "Optima";text-align: justify;'>Michael's bio</div>
−
    margin: auto;
+
</div>
−
}
+
  
−
h1 {
 
−
    font-size: 50px;
 
−
    word-break: break-all;
 
−
}
 
  
−
.row {
+
<div class="row">
−
    margin: 8px -16px;
+
  <div class="col-sm-9" style='padding-top: 80px; font-size: 30px;font-family: "Optima";'><span class="pull-right">Caroline Zhao</span></div>
−
}
+
  <div class="col-sm-3" style='padding-left: 75px;'></div>
 +
</div>
  
  
−
/* Create four equal columns that floats next to each other */
+
<div class="row">
−
.column {
+
  <div class="col-sm-9" style='padding-top: 15px; padding-left: 10%; font-size: 22px; font-family: "Optima";text-align: justify;'>Caroline's bio</div>
−
    float: right;
+
  <div class="col-sm-3" style='padding-right: px;'><center><IMG SRC="https://static.igem.org/mediawiki/2018/f/f8/T--East_Chapel_Hill--CarolinePicture.jpg" width=220px></center></div>
−
    width: 21%;
+
</div>
−
}
+
  
−
/* Clear floats after rows */
 
−
.row:after {
 
−
    content: "";
 
−
    display: table;
 
−
    clear: both;
 
−
}
 
  
−
/* Content */
+
<div class="row">
−
.content {
+
<div class="col-sm-3" style='padding-left: px;'></div>
−
    background-color: white;
+
  <div class="col-sm-9" style='padding-top: 80px; font-size: 30px; font-family: "Optima";'>Annie Qin</div>
−
    padding: 10px;
+
</div>
−
}
+
  
−
/* 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 */
+
<div class="row">
−
@media screen and (max-width: 600px) {
+
  <div class="col-sm-3" style='padding-left: px;'><center><IMG SRC="https://static.igem.org/mediawiki/2018/4/4e/T--East_Chapel_Hill--AnniePicture.jpg" width=220px></center></div>
−
    .column {
+
  <div class="col-sm-9"style='padding-top: 15px; padding-right: 10%; font-size: 22px; font-family: "Optima";text-align: justify;'>Annie's bio</div>
−
        width: 100%;
+
</div>
−
    }
+
−
}
+
−
</style>
+
−
</head>
+
−
<body>
+
  
−
<!-- MAIN (Center website) -->
+
<!--Wukun Liu
−
<div class="main">
+
-->
  
−
<h1>East Chapel Hill iGem Team</h1>
+
<div class="row">
−
<hr>
+
  <div class="col-sm-9" style='padding-top: 80px; font-size: 30px;font-family: "Optima";'><span class="pull-right">Ananth Murthy</span></div>
 +
  <div class="col-sm-3" style='padding-left: px;'></div>
 +
</div>
  
  
−
<!-- Portfolio Gallery Grid -->
+
<div class="row">
−
 
+
  <div class="col-sm-9" style='padding-top: 15px; padding-left: 10%; font-size: 22px; font-family: "Optima";text-align: justify;'>Ananth's bio</div>
−
  </div>
+
   <div class="col-sm-3" style='padding-right: px;'><center><IMG SRC="https://static.igem.org/mediawiki/2018/b/be/T--East_Chapel_Hill--AnanthPicture.jpg" width=220px></center></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>
  
−
<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>
 
</html>

Revision as of 00:58, 12 July 2018

East Chapel Hill