|
|
| (29 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>
| |
| − | <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>
| |
