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

Line 1: Line 1:
 
{{Template:Toronto/CSS}}
 
{{Template:Toronto/CSS}}
 
<html>
 
<html>
 +
<head>
 
<style>
 
<style>
−
 
+
.grid-container {
−
<body>
+
  display: grid;
−
.textArial{
+
  grid-template-columns: auto auto auto;
−
font-family: 'Arial Black', Gadget, sans-serif;  
+
  background-color: #2196F3;
−
font-size: 40px;
+
  padding: 10px;
−
line-height: 40px;  
+
 
}
 
}
−
 
+
.grid-item {
−
.textArial a {
+
  background-color: rgba(255, 255, 255, 0.8);
−
    color: white;
+
  border: 1px solid rgba(0, 0, 0, 0.8);
−
    text-decoration: none;
+
  padding: 20px;
 +
  font-size: 30px;
 +
  text-align: center;
 
}
 
}
 +
</style>
 +
</head>
 +
<body>
  
−
#bodyContent h1, #bodyContent h2{
+
<h1>Grid Elements</h1>
−
  margin-bottom: 0px;
+
−
}
+
  
−
</style>
+
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
  
−
<div style="background-color: rgba(0,0,0,1.0);">
+
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
−
<div class="center" style="height: 550px; width: 80%;">
+
 
−
<div class="centerPacker">
+
<div class="grid-container">
−
<h1> Administators </h1>
+
   <div class="grid-item">1</div>
−
<div class="grid-container" style="padding-left: 100px; padding-right:100px; margin-left: auto; margin-right: auto; grid-template-columns: 300px 300px 300px 300px 300px">
+
   <div class="grid-item">2</div>
−
   <div class="item1">
+
  <div class="grid-item">3</div>
−
<h1 class="textArial" style="text-align: center;"><a href="https://2018.igem.org/Team:Toronto/WetLab/ExperimentProtocols">
+
  <div class="grid-item">4</div>
−
<img src="https://static.igem.org/mediawiki/2018/1/11/T--Toronto--chemical_reaction.svg" alt="icon1" style="width:200px;"> </br>
+
  <div class="grid-item">5</div>
−
Protocols </a></h1>
+
   <div class="grid-item">6</div>
−
</div>
+
  <div class="grid-item">7</div>
−
   <div class="item2">
+
   <div class="grid-item">8</div>
−
<h1 class="textArial" style="text-align: center;"><a href="https://2018.igem.org/Team:Toronto/WetLab/Notebook">
+
  <div class="grid-item">9</div>
−
<img src="https://static.igem.org/mediawiki/2018/1/17/T--Toronto--notepad.svg" alt="icon1" style="width:200px;"> </br>
+
−
Notebook</a></h1>
+
−
</div>  
+
−
<div class="item3">
+
−
<h1 class="textArial" style="text-align: center;"><a href="https://2018.igem.org/Team:Toronto/WetLab/Results">
+
−
<img src="https://static.igem.org/mediawiki/2018/b/b6/T--Toronto--m-biology.svg" alt="icon1" style="width:200px;"> </br>
+
−
Results</a></h1>
+
−
</div>
+
−
   <div class="item4">
+
−
    <h1 class="textArial" style="text-align: center;"><a href="https://2018.igem.org/Team:Toronto/WetLab/Parts">
+
−
      <img src="https://static.igem.org/mediawiki/2018/e/eb/T--Toronto--circuit.svg" alt="icon1" style="width:200px;"> </br>
+
−
      Parts </a></h1>
+
−
  </div>
+
−
   <div class="item5" style="background: https://static.igem.org/mediawiki/2018/f/f4/T--Toronto--test-tubes.svg;">
+
−
    <h1 class="textArial" style="text-align: center;"><a href="https://2018.igem.org/Team:Toronto/InterLab">
+
−
      <img src="https://static.igem.org/mediawiki/2018/f/f4/T--Toronto--test-tubes.svg" alt="icon1" style="width:200px;"> </br>
+
−
      Interlab</a></h1>
+
−
  </div>
+
−
</div>
+
−
</div>
+
−
</div>
+
 
</div>
 
</div>
 +
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 05:22, 16 October 2018

Grid Elements

A Grid Layout must have a parent element with the display property set to grid or inline-grid.

Direct child element(s) of the grid container automatically becomes grid items.

1
2
3
4
5
6
7
8
9