Difference between revisions of "Team:USTC-Software/Team"

(Prototype team page)
 
Line 1: Line 1:
−
{{USTC-Software}}
+
{{USTC-Software/Header2}}
 
<html>
 
<html>
 +
<style>
 +
  .team_members_pic {margin: 20px 40px;}
 +
  .book-mark {width: 20px; height: 45px; top: -1px; right: 20px; padding-top: 20px;}
 +
  .avatar {width: 200px; height: 200px; border-radius: 100px; z-index: 10; background: url("../File/avatar.jpg"); background-size: contain;}
 +
</style>
 +
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Template:USTC-Software/css/common?action=raw&ctype=text/css" />
 +
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Template:USTC-Software/css/default?action=raw&ctype=text/css" />
 +
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Template:USTC-Software/css/bootstrap?action=raw&ctype=text/css" />
 +
<script type="text/javascript" src="https://2019.igem.org/Template:USTC-Software/js/jquery?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2019.igem.org/Template:USTC-Software/js/popper?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2019.igem.org/Template:USTC-Software/js/bootstrap?action=raw&ctype=text/javascript"></script>
 +
<div class="container">
 +
  <div class="team_members_pic">
 +
    <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
 +
      <ol class="carousel-indicators">
 +
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
 +
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
 +
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
 +
      </ol>
 +
      <div class="carousel-inner">
 +
        <div class="carousel-item active">
 +
          <img class="d-block w-100" src="../File/Red%20Appearance.jpg" alt="First slide">
 +
          <div class="carousel-caption d-none d-md-block">
 +
            <h5>Team Pics Here</h5>
 +
          </div>
 +
        </div>
 +
        <div class="carousel-item">
 +
          <img class="d-block w-100" src="../File/Reticular-formation.jpg" alt="Second slide">
 +
          <div class="carousel-caption d-none d-md-block">
 +
            <h5>Team Pics Here</h5>
 +
          </div>
 +
        </div>
 +
        <div class="carousel-item">
 +
          <img class="d-block w-100" src="../File/desktop.jpg" alt="Third slide">
 +
          <div class="carousel-caption d-none d-md-block">
 +
            <h5>Team Pics Here</h5>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
 +
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 +
        <span class="sr-only">Previous</span>
 +
      </a>
 +
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
 +
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
 +
        <span class="sr-only">Next</span>
 +
      </a>
 +
    </div>
  
−
<div class="column two_thirds_size" >
+
  </div>
 +
  <div class="team_members_des">
 +
    <p>
 +
      A brief introduce of members.A brief introduce of members.
 +
      A brief introduce of members.A brief introduce of members.
 +
      A brief introduce of members.A brief introduce of members.
 +
      A brief introduce of members.A brief introduce of members.
 +
      A brief introduce of members.A brief introduce of members.
 +
      A brief introduce of members.A brief introduce of members.
 +
      A brief introduce of members.A brief introduce of members.
 +
      A brief introduce of members.A brief introduce of members.
 +
      A brief introduce of members.A brief introduce of members.
 +
      A brief introduce of members.A brief introduce of members.
 +
      A brief introduce of members.A brief introduce of members.
 +
    </p>
 +
  </div>
 +
  <div class="card position-relative mb-2">
 +
    <div class="card-body position-relative">
 +
      <div class="">
 +
        <div class="card-title">
 +
          <h4>Jack, Member of Front End</h4>
 +
          <div class="small text-dark">Here puts some info.</div>
 +
        </div>
 +
        <div class="book-mark position-absolute bg-primary text-center d-inline-block text-white">1</div>
 +
        <hr>
 +
        <div class="row d-flex">
 +
          <div class="col-4 d-flex justify-content-center align-items-center">
 +
            <div class="">
 +
              <div class="avatar"></div>
 +
            </div>
 +
          </div>
 +
          <div class="col-4">
 +
            <div class="">
 +
              <div class="intro">
 +
                <div class="text-dark card-title font-weight-bold">Member of Front End</div>
 +
                <div>
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                </div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
          <div class="col-4">
 +
            <div class="">
 +
              <div class="skill">
 +
                <div class="row">
 +
                  <div class="col-3">
 +
                    <div class="text-right card-title font-weight-bold">Skills</div>
 +
                  </div>
 +
                </div>
 +
                <div class="row d-flex justify-content-center align-items-center mb-2">
 +
                  <div class="col-3">
 +
                    <div class="text-right">75%</div>
 +
                  </div>
 +
                  <div class="col">
 +
                    <div class="small">HTML</div>
 +
                    <div class="progress mt-1">
 +
                      <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
 +
                    </div>
 +
                  </div>
 +
                </div>
 +
                <div class="row d-flex justify-content-center align-items-center mb-2">
 +
                  <div class="col-3">
 +
                    <div class="text-right">75%</div>
 +
                  </div>
 +
                  <div class="col-9">
 +
                    <div class="small">HTML</div>
 +
                    <div class="progress mt-1">
 +
                      <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
 +
                    </div>
 +
                  </div>
 +
                </div>
 +
                <div class="row d-flex justify-content-center align-items-center">
 +
                  <div class="col-3">
 +
                    <div class="text-right">75%</div>
 +
                  </div>
 +
                  <div class="col-9">
 +
                    <div class="small">HTML</div>
 +
                    <div class="progress mt-1">
 +
                      <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
 +
                    </div>
 +
                  </div>
 +
                </div>
  
−
<h1>Team</h1>
+
              </div>
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <div class="card position-relative mb-2">
 +
    <div class="card-body position-relative">
 +
      <div class="">
 +
        <div class="card-title">
 +
          <h4>Jack, Member of Front End</h4>
 +
          <div class="small text-dark">Here puts some info.</div>
 +
        </div>
 +
        <div class="book-mark position-absolute bg-primary text-center d-inline-block text-white">1</div>
 +
        <hr>
 +
        <div class="row d-flex">
 +
          <div class="col-4 d-flex justify-content-center align-items-center">
 +
            <div class="">
 +
              <div class="avatar"></div>
 +
            </div>
 +
          </div>
 +
          <div class="col-4">
 +
            <div class="">
 +
              <div class="intro">
 +
                <div class="text-dark card-title font-weight-bold">Member of Front End</div>
 +
                <div>
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                </div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
          <div class="col-4">
 +
            <div class="">
 +
              <div class="skill">
 +
                <div class="row">
 +
                  <div class="col-3">
 +
                    <div class="text-right card-title font-weight-bold">Skills</div>
 +
                  </div>
 +
                </div>
 +
                <div class="row d-flex justify-content-center align-items-center mb-2">
 +
                  <div class="col-3">
 +
                    <div class="text-right">75%</div>
 +
                  </div>
 +
                  <div class="col">
 +
                    <div class="small">HTML</div>
 +
                    <div class="progress mt-1">
 +
                      <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
 +
                    </div>
 +
                  </div>
 +
                </div>
 +
                <div class="row d-flex justify-content-center align-items-center mb-2">
 +
                  <div class="col-3">
 +
                    <div class="text-right">75%</div>
 +
                  </div>
 +
                  <div class="col-9">
 +
                    <div class="small">HTML</div>
 +
                    <div class="progress mt-1">
 +
                      <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
 +
                    </div>
 +
                  </div>
 +
                </div>
 +
                <div class="row d-flex justify-content-center align-items-center">
 +
                  <div class="col-3">
 +
                    <div class="text-right">75%</div>
 +
                  </div>
 +
                  <div class="col-9">
 +
                    <div class="small">HTML</div>
 +
                    <div class="progress mt-1">
 +
                      <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
 +
                    </div>
 +
                  </div>
 +
                </div>
  
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <div class="card position-relative mb-2">
 +
    <div class="card-body position-relative">
 +
      <div class="">
 +
        <div class="card-title">
 +
          <h4>Jack, Member of Front End</h4>
 +
          <div class="small text-dark">Here puts some info.</div>
 +
        </div>
 +
        <div class="book-mark position-absolute bg-primary text-center d-inline-block text-white">1</div>
 +
        <hr>
 +
        <div class="row d-flex">
 +
          <div class="col-4 d-flex justify-content-center align-items-center">
 +
            <div class="">
 +
              <div class="avatar"></div>
 +
            </div>
 +
          </div>
 +
          <div class="col-4">
 +
            <div class="">
 +
              <div class="intro">
 +
                <div class="text-dark card-title font-weight-bold">Member of Front End</div>
 +
                <div>
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                  This is some information about the member.
 +
                </div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
          <div class="col-4">
 +
            <div class="">
 +
              <div class="skill">
 +
                <div class="row">
 +
                  <div class="col-3">
 +
                    <div class="text-right card-title font-weight-bold">Skills</div>
 +
                  </div>
 +
                </div>
 +
                <div class="row d-flex justify-content-center align-items-center mb-2">
 +
                  <div class="col-3">
 +
                    <div class="text-right">75%</div>
 +
                  </div>
 +
                  <div class="col">
 +
                    <div class="small">HTML</div>
 +
                    <div class="progress mt-1">
 +
                      <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
 +
                    </div>
 +
                  </div>
 +
                </div>
 +
                <div class="row d-flex justify-content-center align-items-center mb-2">
 +
                  <div class="col-3">
 +
                    <div class="text-right">75%</div>
 +
                  </div>
 +
                  <div class="col-9">
 +
                    <div class="small">HTML</div>
 +
                    <div class="progress mt-1">
 +
                      <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
 +
                    </div>
 +
                  </div>
 +
                </div>
 +
                <div class="row d-flex justify-content-center align-items-center">
 +
                  <div class="col-3">
 +
                    <div class="text-right">75%</div>
 +
                  </div>
 +
                  <div class="col-9">
 +
                    <div class="small">HTML</div>
 +
                    <div class="progress mt-1">
 +
                      <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
 +
                    </div>
 +
                  </div>
 +
                </div>
 +
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
  
−
<h3>What should this page contain?</h3>
 
−
<ul>
 
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
 
−
<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>
 
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
 
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
 
−
</ul>
 
 
</div>
 
</div>
  
−
 
−
 
−
<div class="column third_size" >
 
−
<div class="highlight decoration_A_full">
 
−
<h3>Inspiration</h3>
 
−
<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">2014 METU Turkey </a></li>
 
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">2014 Colombia</a></li>
 
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">2014 Stony Brook</a></li>
 
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">2014 OUC-China</a></li>
 
−
</ul>
 
−
</div>
 
−
</div>
 
 
</html>
 
</html>

Revision as of 13:05, 17 September 2019

A brief introduce of members.A brief introduce of members. A brief introduce of members.A brief introduce of members. A brief introduce of members.A brief introduce of members. A brief introduce of members.A brief introduce of members. A brief introduce of members.A brief introduce of members. A brief introduce of members.A brief introduce of members. A brief introduce of members.A brief introduce of members. A brief introduce of members.A brief introduce of members. A brief introduce of members.A brief introduce of members. A brief introduce of members.A brief introduce of members. A brief introduce of members.A brief introduce of members.

Jack, Member of Front End

Here puts some info.
1
Member of Front End
This is some information about the member. This is some information about the member. This is some information about the member. This is some information about the member. This is some information about the member. This is some information about the member. This is some information about the member.
Skills
75%
HTML
75%
HTML
75%
HTML

Jack, Member of Front End

Here puts some info.
1
Member of Front End
This is some information about the member. This is some information about the member. This is some information about the member. This is some information about the member. This is some information about the member. This is some information about the member. This is some information about the member.
Skills
75%
HTML
75%
HTML
75%
HTML

Jack, Member of Front End

Here puts some info.
1
Member of Front End
This is some information about the member. This is some information about the member. This is some information about the member. This is some information about the member. This is some information about the member. This is some information about the member. This is some information about the member.
Skills
75%
HTML
75%
HTML
75%
HTML