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

 
(56 intermediate revisions by 2 users 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: 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>
 
 
<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