Difference between revisions of "Team:Oxford/Team"

(Prototype team page)
 
Line 1: Line 1:
 
{{Oxford}}
 
{{Oxford}}
−
<html>
+
<html lang="en">
  
−
<div class="column two_thirds_size" >
+
  <head>
  
−
<h1>Team</h1>
+
    <meta charset="utf-8">
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 +
    <meta name="description" content="">
 +
    <meta name="author" content="">
  
 +
    <title>Full Width Pics - Start Bootstrap Template</title>
  
−
<h3>What should this page contain?</h3>
+
    <!-- Bootstrap core CSS -->
−
<ul>
+
    <link href="https://2018.igem.org/Team:Oxford/css/bootstrapmincss?action=raw&amp;ctype=text/css" rel="stylesheet">
−
<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>
+
    <!-- Custom styles for this template -->
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
    <link href="https://2018.igem.org/Team:Oxford/css?action=raw&amp;ctype=text/css" rel="stylesheet">
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
−
</ul>
+
 
 +
  </head>
 +
 
 +
  <body>
 +
 
 +
    <!-- Header - set the background image for the header in the line below -->
 +
    <header class="py-5 background-img" style="background-image: url('https://media.istockphoto.com/photos/green-turquoise-wall-background-picture-id614848416?k=6&m=614848416&s=612x612&w=0&h=EAI75hD3sCfZ7kCTK5fTd07oyddtoDJKdCreJClE540=');">
 +
      <div class="translucent-back" style="height: 500px;">
 +
<h1 class="header-text">Team</h1>
 
</div>
 
</div>
 +
    </header>
  
 +
    <section id="about">
 +
      <div class="container">
 +
        <div class="row">
 +
          <div class=".col-md-8 .offset-md-2">
 +
            <h2>Section 1</h2>
 +
            <p class="lead">This is a great place to talk about your webpage. This template is purposefully unstyled so you can use it as a boilerplate or starting point for you own landing page designs! This template features:</p>
 +
            <ul>
 +
              <li>Clickable nav links that smooth scroll to page sections</li>
 +
              <li>Responsive behavior when clicking nav links perfect for a one page website</li>
 +
              <li>Bootstrap's scrollspy feature which highlights which section of the page you're on in the navbar</li>
 +
              <li>Minimal custom CSS so you are free to explore your own unique design options</li>
 +
            </ul>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </section>
  
 +
    <section id="services">
 +
      <div class="container">
 +
        <div class="row">
 +
          <div class=".col-md-8 .offset-md-2 .bg-light">
 +
            <h2>Section 2</h2>
 +
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </section>
  
−
<div class="column third_size" >
+
    <section id="contact">
−
<div class="highlight decoration_A_full">
+
      <div class="container">
−
<h3>Inspiration</h3>
+
        <div class="row">
−
<p>You can look at what other teams did to get some inspiration! <br />
+
          <div class=".col-md-8 .offset-md-2">
−
Here are a few examples:</p>
+
            <h2>Section 3</h2>
−
<ul>
+
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odio fugiat voluptatem dolor, provident officiis, id iusto! Obcaecati incidunt, qui nihil beatae magnam et repudiandae ipsa exercitationem, in, quo totam.</p>
−
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">2014 METU Turkey </a></li>
+
          </div>
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">2014 Colombia</a></li>
+
        </div>
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">2014 Stony Brook</a></li>
+
      </div>
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">2014 OUC-China</a></li>
+
    </section>
−
</ul>
+
 
−
</div>
+
    <!-- Footer -->
 +
 
 +
<div class="footer-social-icons">
 +
    <ul class="social-icons">
 +
        <li><a href="https://www.facebook.com/oxfordigem/" class="social-icon"> <i class="fab fa-facebook"></i></a></li>
 +
        <li><a href="https://twitter.com/oxfordigem?lang=en" class="social-icon"> <i class="fab fa-twitter"></i></a></li>
 +
        <li><a href="https://www.instagram.com/oxfordigem/?hl=en" class="social-icon"> <i class="fab fa-instagram"></i></a></li>
 +
    </ul>
 
</div>
 
</div>
 +
    </footer>
 +
 +
 +
    <!-- Bootstrap core JavaScript -->
 +
    <script src="vendor/jquery/jquery.min.js"></script>
 +
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 +
 +
  </body>
 +
 
</html>
 
</html>

Revision as of 19:14, 20 August 2018

Full Width Pics - Start Bootstrap Template

Team

Section 1

This is a great place to talk about your webpage. This template is purposefully unstyled so you can use it as a boilerplate or starting point for you own landing page designs! This template features:

  • Clickable nav links that smooth scroll to page sections
  • Responsive behavior when clicking nav links perfect for a one page website
  • Bootstrap's scrollspy feature which highlights which section of the page you're on in the navbar
  • Minimal custom CSS so you are free to explore your own unique design options

Section 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.

Section 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odio fugiat voluptatem dolor, provident officiis, id iusto! Obcaecati incidunt, qui nihil beatae magnam et repudiandae ipsa exercitationem, in, quo totam.