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

 
(76 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{East_Chapel_Hill}}
 
{{East_Chapel_Hill}}
 +
 
<html>
 
<html>
 
<head>
 
<head>
<title>East Chapel Hill Team Members</title>
+
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
+
<link href="https://2018.igem.org/Template:East_Chapel_Hill" rel="stylesheet">
 
+
body {
+
    background-color: #f1f1f1;
+
    padding: 20px;
+
    font-family: Arial;
+
}
+
 
+
/* Center website */
+
.main {
+
    max-width: 1000px;
+
}
+
 
+
h1 {
+
    font-size: 50px;
+
    word-break: break-all;
+
}
+
 
+
.row {
+
    margin: 8px -16px;
+
}
+
 
+
/* Add padding BETWEEN each column */
+
.row,
+
.row > .column {
+
    padding: 1%;
+
}
+
 
+
/* Create four equal columns that floats next to each other */
+
.column {
+
    float: left;
+
    width: 24%;
+
}
+
 
+
/* 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: 50%;
+
    }
+
}
+
 
+
/* 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>
 
</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">
 
  <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/lights.jpg" alt="Lights" 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/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>
 
<!-- 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