|
|
Line 1: |
Line 1: |
− | {{Template:Toronto/CSS}}
| + | 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. |
− | <html>
| + | |
− | <head>
| + | |
− | <meta name="viewport" content="width=device-width, initial-scale=1">
| + | |
− | <style>
| + | |
− | * {
| + | |
− | box-sizing: border-box;
| + | |
− | }
| + | |
− |
| + | |
− | /* Center website */
| + | |
− | .main {
| + | |
− | max-width: 1000px;
| + | |
− | margin: auto;
| + | |
− | }
| + | |
− |
| + | |
− | h1 {
| + | |
− | font-size: 50px;
| + | |
− | word-break: break-all;
| + | |
− | }
| + | |
− | h3 {
| + | |
− | font-size: 40px;
| + | |
− | word-break: break-all;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | h4 {
| + | |
− | font-size: 25px;
| + | |
− | line-height: 25px;
| + | |
− | word-break: break-all;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− |
| + | |
− | .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>
| + | |
− | <body>
| + | |
− | <div class="main">
| + | |
− | <h1 style="width: 500px">Team Members</h1>
| + | |
− | <hr>
| + | |
− |
| + | |
− | <h2>Admin Team</h2>
| + | |
− | <h4>Responsible for leading the team</h4>
| + | |
− | <div class="row">
| + | |
− | <div class="column">
| + | |
− | <div class="content">
| + | |
− | <img src="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="1" style="width:100%">
| + | |
− | <h3>President</h3>
| + | |
− | <h4>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.</h4>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="column">
| + | |
− | <div class="content">
| + | |
− | <img src="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="2" style="width:100%">
| + | |
− | <h3>My Pic</h3>
| + | |
− | <h4>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.</h4>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="column">
| + | |
− | <div class="content">
| + | |
− | <img src="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="3" style="width:100%">
| + | |
− | <h3>My Pic</h3>
| + | |
− | <h4>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.</h4>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="column">
| + | |
− | <div class="content">
| + | |
− | <img src="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="4" style="width:100%">
| + | |
− | <h3>My Pic</h3>
| + | |
− | <h4>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.</h4>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <!-- END GRID -->
| + | |
− | </div>
| + | |
− |
| + | |
− | <hr>
| + | |
− |
| + | |
− | <h2>Wetlab Team</h2>
| + | |
− | <div class="row">
| + | |
− | <div class="column">
| + | |
− | <div class="content">
| + | |
− | <img src="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="1" style="width:100%">
| + | |
− | <h3>My Pic</h3>
| + | |
− | <h4>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.</h4>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="column">
| + | |
− | <div class="content">
| + | |
− | <img src="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="2" style="width:100%">
| + | |
− | <h3>My Pic</h3>
| + | |
− | <h4>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.</h4>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="column">
| + | |
− | <div class="content">
| + | |
− | <img src="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="3" style="width:100%">
| + | |
− | <h3>My Pic</h3>
| + | |
− | <h4>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.</h4>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <!-- END GRID -->
| + | |
− | </div>
| + | |
− | <!-- END MAIN -->
| + | |
− | </div>
| + | |
− | </body>
| + | |
− | </html>
| + | |
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.