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">
 
<style>
 
<style>
−
.grid-container {
+
* {
−
  display: grid;
+
    box-sizing: border-box;
−
  grid-template-columns: auto auto auto;
+
−
  background-color: #2196F3;
+
−
  padding: 0px;
+
 
}
 
}
−
.grid-item {
+
 
−
  background-color: rgba(255, 255, 255, 0.8);
+
body {
−
  border: 1px solid rgba(0, 0, 0, 0.8);
+
    background-color: #f1f1f1;
−
  padding: 0px;
+
    padding: 20px;
−
  font-size: 30px;
+
    font-family: Arial;
−
  text-align: center;
+
}
 +
 
 +
/* Center website */
 +
.main {
 +
    max-width: 1000px;
 +
    margin: auto;
 +
}
 +
 
 +
h1 {
 +
    font-size: 50px;
 +
    word-break: break-all;
 +
}
 +
 
 +
.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>
 
</style>
Line 20: Line 71:
 
<body>
 
<body>
  
−
<h1>Grid Elements</h1>
+
<!-- MAIN (Center website) -->
 +
<div class="main">
 +
 
 +
<h1>MYLOGO.COM</h1>
 +
<hr>
 +
 
 +
<h2>PORTFOLIO</h2>
 +
<p>Resize the browser window to see the responsive effect.</p>
  
−
<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>
+
<!-- Portfolio Gallery Grid -->
 +
<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 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="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="2" 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="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="3" 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="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="4" 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>
  
−
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
+
<div class="content">
 +
  <img src="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="5" 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>
  
−
<div class="grid-container">
+
<!-- END MAIN -->
−
  <div class="grid-item">
+
−
<img style="height:100%; width:100%;" src="https://static.igem.org/mediawiki/2018/7/71/T--Toronto--_Testing_in_Progress.gif" alt="test">
+
−
</div>
+
−
  <div class="grid-item">2</div>
+
−
  <div class="grid-item">3</div> 
+
−
  <div class="grid-item">4</div>
+
−
  <div class="grid-item">5</div>
+
−
  <div class="grid-item">6</div> 
+
−
  <div class="grid-item">7</div>
+
−
  <div class="grid-item">8</div>
+
−
  <div class="grid-item">9</div>
+
 
</div>
 
</div>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 05:45, 16 October 2018

MYLOGO.COM

PORTFOLIO

Resize the browser window to see the responsive effect.

1

My Work

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.

2

My Work

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.

3

My Work

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.

4

My Work

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.

5

Some Other Work

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.

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.