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