Difference between revisions of "Team:East Chapel Hill/Team"

Revision as of 00:48, 15 October 2017

East Chapel Hill Highschool iGem

Responsive "Meet The Team" Section

Resize the browser window to see the effect.

Jane Doe

CEO & Founder

Some text that describes me lorem ipsum ipsum lorem.

example@example.com

Mike Ross

Art Director

Some text that describes me lorem ipsum ipsum lorem.

example@example.com

John Doe

Designer

Some text that describes me lorem ipsum ipsum lorem.

example@example.com

     <map name="homepage">
        <area shape="circle" coords=450,450,150" href="Project.html" >
        <area shape="circle" coords="750,150,150" href="Results.html">
     </map>

</div>

@@ Line 69: / Line 69: @@
        .row.content {height:auto;}
      }
-.column {
-    float: left;
-    width: 33.3%;
-    margin-bottom: 16px;
-    padding: 0 8px;
-}
-/* Display the columns below each other instead of side by side on small screens */
-@media (max-width: 650px) {
-    .column {
-        width: 100%;
-        display: block;
-    }
-}
-/* Add some shadows to create a card effect */
-.card {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-}
-/* Some left and right padding inside the container */
-.container {
-    padding: 0 16px;
-}
-/* Clear floats */
-.container::after, .row::after {
-    content: "";
-    clear: both;
-    display: table;
-}
-.title {
-    color: grey;
-}
-.button {
-    border: none;
-    outline: 0;
-    display: inline-block;
-    padding: 8px;
-    color: white;
-    background-color: #000;
-    text-align: center;
-    cursor: pointer;
-    width: 100%;
-}
-.button:hover {
-    background-color: #555;
-}
    </style>
@@ Line 167: / Line 111: @@
-<div id="mainbanner">
+<!DOCTYPE html>
+<html>
-      <img align="middle" style="width:1000" src="https://static.igem.org/mediawiki/2017/d/d2/Ezgif.com-add-text.gif" usemap="#homepage"></img>
+<head>
+<style>
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+.column {
+  float: left;
+  width: 33.3%;
+  margin-bottom: 16px;
+  padding: 0 8px;
+}
+@media (max-width: 650px) {
+  .column {
+    width: 100%;
+    display: block;
+  }
+}
+.card {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+}
+.container {
+  padding: 0 16px;
+}
+.container::after, .row::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+.title {
+  color: grey;
+}
+.button {
+  border: none;
+  outline: 0;
+  display: inline-block;
+  padding: 8px;
+  color: white;
+  background-color: #000;
+  text-align: center;
+  cursor: pointer;
+  width: 100%;
+}
+.button:hover {
+  background-color: #555;
+}
+</style>
+</head>
+<body>
+<h2>Responsive "Meet The Team" Section</h2>
+<p>Resize the browser window to see the effect.</p>
+<br>
-div class="row">
+<div class="row">
    <div class="column">
      <div class="card">
-       <img src="img1.jpg" alt="Jane" style="width:100%">
+       <img src="/w3images/team1.jpg" alt="Jane" style="width:100%">
        <div class="container">
          <h2>Jane Doe</h2>
-         <p class="title">CEO &amp; Founder</p>
+         <p class="title">CEO & Founder</p>
          <p>Some text that describes me lorem ipsum ipsum lorem.</p>
          <p>example@example.com</p>
@@ Line 188: / Line 194: @@
    <div class="column">
      <div class="card">
-       <img src="img2.jpg" alt="Mike" style="width:100%">
+       <img src="/w3images/team2.jpg" alt="Mike" style="width:100%">
        <div class="container">
          <h2>Mike Ross</h2>
@@ Line 198: / Line 204: @@
      </div>
    </div>
    <div class="column">
      <div class="card">
-       <img src="img3.jpg" alt="John" style="width:100%">
+       <img src="/w3images/team3.jpg" alt="John" style="width:100%">
        <div class="container">
          <h2>John Doe</h2>
@@ Line 212: / Line 217: @@
    </div>
 </div>
+</body>
+</html>