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

(Prototype team page)
 
Line 1: Line 1:
−
{{East_Chapel_Hill}}
 
−
 
 
<html>
 
<html>
  
 +
<style>
 +
#top_title {display: none;}
 +
#sideMenu  {display: none;}
 +
#content  {margin: auto; padding: 0; width: 60%;}
 +
</style>
  
 +
<center>
  
−
<div class="column full_size" >
 
  
−
<h1>Team</h1>
 
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
 
−
</div>
 
  
−
<div class="clear"></div>
+
<head>
 +
  <title>East Chapel Hill Highschool iGem</title>
 +
  <meta charset="utf-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 +
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 +
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
−
<div class="column half_size" >
 
−
<h5>Inspiration</h5>
 
−
<p>You can look at what other teams did to get some inspiration! <br />
 
−
Here are a few examples:</p>
 
−
<ul>
 
−
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">METU Turkey </a></li>
 
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">Colombia</a></li>
 
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">Stony Brook</a></li>
 
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">OUC-China</a></li>
 
−
</ul>
 
  
−
</div>
+
  <style>
 +
    /* Remove the navbar's default margin-bottom and rounded borders */
 +
   
 +
    .navbar {
 +
      margin-bottom: 0;
 +
      margin-right: 0;
 +
      border-radius: 0;
 +
      width: 100%;
 +
      /*background-color: #ffcccc;*/
 +
    }
 +
 
 +
body {
 +
background-color: black;
 +
}
 +
 +
*/
 +
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
 +
    .row.content {height: 450px}
 +
   
 +
    /* Set gray background color and 100% height */
 +
    .sidenav {
 +
      padding-top: 20px;
 +
      background-color:  black;
 +
      height: 100%;
 +
    }
 +
   
 +
  ul.yourclass
 +
  { display: inline-block;
 +
   
 +
    padding-rigth: 15px;
 +
  }
 +
 
 +
   
 +
   
 +
    /* Set black background color, white text and some padding */
 +
    footer {
 +
      background-color: #555;
 +
      color: white;
 +
      padding: 15px;
 +
    }
 +
   
 +
    /* On small screens, set height to 'auto' for sidenav and grid */
 +
    @media screen and (max-width: 767px) {
 +
      .sidenav {
 +
        height: auto;
 +
        padding: 15px;
 +
      }
 +
      .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>
 +
 
 +
 
 +
</head>
 +
<body>
 +
 
 +
 
 +
 
 +
<nav class="navbar navbar-inverse">
 +
  <div class="container-fluid">
 +
  <div class="navbar-header">
 +
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
      </button>
 +
  </div>
 +
  <div class="collapse navbar-collapse" id="myNavbar">
 +
    <ul class="nav navbar-nav">
 +
    <li><img align="middle" style="width:100%" height="50px" src="https://static.igem.org/mediawiki/2017/8/89/T--East_Chapel_Hill--Icon0.png"></img> </li>
 +
    </ul>
 +
    <ul class="nav navbar-nav navbar-right">
 +
        <li class="active"><a href="https://2017.igem.org/Team:East_Chapel_Hill/test">Home</a></li>
 +
        <li class="dropdown">
 +
          <a class="dropdown-toggle" data-toggle="dropdown" href="Team.html">Team
 +
          <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="#">Team-part-1</a></li>
 +
            <li><a href="#">Team-part-2</a></li>
 +
            <li><a href="#">Team-part-3</a></li>
 +
          </ul>
 +
        </li>
 +
        <li><a href="Project.html">Project</a></li>
 +
        <li><a href="Results.html">Results</a></li>
 +
        <li><a href="Notebook.html">Notebook</a></li>
 +
<li><a <href="https://2017.igem.org/Team:East_Chapel_Hill/testHumanPractices">Human Practices </a></li>
 +
        <li><a <href="https://2017.igem.org/Team:East_Chapel_Hill/Attributions">Sponsors</a></li>
 +
      </ul>
 +
  </div>
 +
</nav>
 +
 
 +
 
 +
<div id="mainbanner">
 +
     
 +
      <img align="middle" style="width:1000" src="https://static.igem.org/mediawiki/2017/d/d2/Ezgif.com-add-text.gif" usemap="#homepage"></img>
 +
 
 +
 
 +
div class="row">
 +
  <div class="column">
 +
    <div class="card">
 +
      <img src="img1.jpg" alt="Jane" style="width:100%">
 +
      <div class="container">
 +
        <h2>Jane Doe</h2>
 +
        <p class="title">CEO &amp; Founder</p>
 +
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
 +
        <p>example@example.com</p>
 +
        <p><button class="button">Contact</button></p>
 +
      </div>
 +
    </div>
 +
  </div>
 +
 
 +
  <div class="column">
 +
    <div class="card">
 +
      <img src="img2.jpg" alt="Mike" style="width:100%">
 +
      <div class="container">
 +
        <h2>Mike Ross</h2>
 +
        <p class="title">Art Director</p>
 +
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
 +
        <p>example@example.com</p>
 +
        <p><button class="button">Contact</button></p>
 +
      </div>
 +
    </div>
 +
  </div>
  
−
<div class="column half_size" >
+
  <div class="column">
−
<h5>What should this page contain?</h5>
+
    <div class="card">
−
<ul>
+
      <img src="img3.jpg" alt="John" style="width:100%">
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
      <div class="container">
−
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
+
        <h2>John Doe</h2>
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
        <p class="title">Designer</p>
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
−
</ul>
+
        <p>example@example.com</p>
 +
        <p><button class="button">Contact</button></p>
 +
      </div>
 +
    </div>
 +
  </div>
 
</div>
 
</div>
  
 +
     
 +
      <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>
 
</div>
−
</html>
 

Revision as of 00:46, 15 October 2017

East Chapel Hill Highschool iGem
div class="row">
Jane

Jane Doe

CEO & Founder

Some text that describes me lorem ipsum ipsum lorem.

example@example.com

Mike

Mike Ross

Art Director

Some text that describes me lorem ipsum ipsum lorem.

example@example.com

John

John Doe

Designer

Some text that describes me lorem ipsum ipsum lorem.

example@example.com