Difference between revisions of "Team:Toronto/Project/Team"
| Line 2: | Line 2: | ||
<html> | <html> | ||
<head> | <head> | ||
| − | <meta name="viewport" content="width=device-width, initial-scale=1"> | + | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| − | <style> | + | <style> |
| − | * { | + | * { |
| − | + | box-sizing: border-box; | |
| − | } | + | } |
| − | + | ||
| − | /* Center website */ | + | /* Center website */ |
| − | .main { | + | .main { |
| − | + | max-width: 1000px; | |
| − | + | margin: auto; | |
| − | } | + | background-color: black; |
| − | + | } | |
| − | h1 { | + | |
| − | + | h1 { | |
| − | + | font-size: 50px; | |
| − | } | + | word-break: break-all; |
| − | + | } | |
| − | .row { | + | |
| − | + | .row { | |
| − | } | + | margin: 8px -16px; |
| − | + | } | |
| − | /* Add padding BETWEEN each column */ | + | |
| − | .row, | + | /* Add padding BETWEEN each column */ |
| − | .row > .column { | + | .row, |
| − | + | .row > .column { | |
| − | } | + | padding: 8px; |
| − | + | } | |
| − | /* Create four equal columns that floats next to each other */ | + | |
| − | .column { | + | /* Create four equal columns that floats next to each other */ |
| − | + | .column { | |
| − | + | float: left; | |
| − | } | + | width: 25%; |
| − | + | } | |
| − | /* Clear floats after rows */ | + | |
| − | .row:after { | + | /* Clear floats after rows */ |
| − | + | .row:after { | |
| − | + | content: ""; | |
| − | + | display: table; | |
| − | } | + | clear: both; |
| − | + | } | |
| − | /* Content */ | + | |
| − | .content { | + | /* Content */ |
| − | + | .content { | |
| − | + | background-color: white; | |
| − | } | + | padding: 10px; |
| − | + | } | |
| − | /* Responsive layout - makes a two column-layout instead of four columns */ | + | |
| − | @media screen and (max-width: 900px) { | + | /* 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) { | + | /* 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> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
| − | + | <div class="main"> | |
| − | + | ||
| − | <div class="main"> | + | <h1>Team Members</h1> |
| − | + | <hr> | |
| − | <h1>Team Members</h1> | + | |
| − | <hr> | + | <h2>Admin Team</h2> |
| − | + | <p>Responsible for leading the team</p> | |
| − | <h2>Admin Team</h2> | + | <div class="row"> |
| − | <p>Responsible for leading the team</p> | + | <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%"> | |
| − | <div class="row"> | + | <h3>My Pic</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="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="2" style="width:100%"> | |
| − | + | <h3>My Pic</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="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="3" style="width:100%"> | |
| − | + | <h3>My Pic</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="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="4" style="width:100%"> | |
| − | + | <h3>My Pic</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> | |
| − | + | ||
| − | + | <hr> | |
| − | <!-- END GRID --> | + | |
| − | </div> | + | <h2>Wetlab Team</h2> |
| − | + | <div class="row"> | |
| − | <hr> | + | <div class="column"> |
| − | + | <div class="content"> | |
| − | <h2>Wetlab Team</h2> | + | <img src="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="1" style="width:100%"> |
| − | <div class="row"> | + | <h3>My Pic</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="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="2" style="width:100%"> | |
| − | + | <h3>My Pic</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="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="3" style="width:100%"> | |
| − | + | <h3>My Pic</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> | |
| − | + | <!-- END MAIN --> | |
| − | + | </div> | |
| − | <!-- END GRID --> | + | |
| − | </div> | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <!-- END MAIN --> | + | |
| − | </div> | + | |
| − | + | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 05:52, 16 October 2018
Team Members
Admin Team
Responsible for leading the team
My Pic
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.
My Pic
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.
My Pic
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.
My Pic
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.
Wetlab Team
My Pic
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.
My Pic
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.
My Pic
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.