|
|
| (39 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 class="row">
| |
| − | <div class="image_container">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/3/30/T--East_Chapel_Hill--MichaelPicture.jpg" style="width:200px">
| |
| − | <h3>Michael De Figueiredo</h3>
| |
| − | <p>I have always been interested in living things and how DNA determines the makeup of all organisms. Manipulating DNA to change the makeup of organisms is fascinating.
| |
| − | </p>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <div class="image_container">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/f/f8/T--East_Chapel_Hill--CarolinePicture.jpg" style="width:300px"> class= "bio_pic">
| |
| − | <h3>Caroline Zhao</h3>
| |
| − | <p>I joined iGEM because I am interested in learning more about genetic engineering and delving into biology deeper than a just a surface level class. It is an opportunity to get hands on experience and explore a field I have an interest in.</p>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <div class="image_container">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/4/4e/T--East_Chapel_Hill--AnniePicture.jpg" style="width:350px"> class= "bio_pic">
| |
| − | <h3>Annie Qin</h3>
| |
| − | <p>iGEM gives me a hands-on experience on how to solve real world problems. It allows me to provide real solutions to real problems, with a close-knit team. </p>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <div class="image_container">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/b/be/T--East_Chapel_Hill--AnanthPicture.jpg" style="width:355px"> class= "bio_pic">
| |
| − | <h3>Ananth Murthy</h3>
| |
| − | <p>I’m really interested in synthetic biology because it’s a growing field and its applications can help the world. In the future I’m interested in pursuing a career in medicine.
| |
| − | </p>
| |
| − | </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>
| |
