Difference between revisions of "Team:Toronto/Project/Team"

(Replaced content with "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.")
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>
+

Revision as of 16:14, 16 October 2018

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.