Difference between revisions of "Team:Oxford"

Line 9: Line 9:
 
     <meta name="author" content="">
 
     <meta name="author" content="">
  
−
     <title>Heroic Features - Start Bootstrap Template</title>
+
     <title>Full Width Pics - Start Bootstrap Template</title>
  
 
     <!-- Bootstrap core CSS -->
 
     <!-- Bootstrap core CSS -->
−
     <link href="https://2018.igem.org/Team:Oxford/css/bootstrapmincss?action=raw&amp;ctype=text/css" rel="stylesheet">
+
     <link href="https://2018.igem.org/Team:Oxford/css/bootstrapmincsss?action=raw&amp;ctype=text/css" rel="stylesheet">
  
 
     <!-- Custom styles for this template -->
 
     <!-- Custom styles for this template -->
−
     <link href="https://2018.igem.org/Team:Oxford/css?action=raw&amp;ctype=text/css" rel="stylesheet">
+
     <link href="https://2018.igem.org/Template:Oxford/css?action=raw&amp;ctype=text/css" rel="stylesheet">
  
 
   </head>
 
   </head>
Line 21: Line 21:
 
   <body>
 
   <body>
  
−
   
+
     <!-- Navigation -->
−
     <!-- Page Content -->
+
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
−
     <div class="container">
+
       <div class="container">
−
 
+
         <a class="navbar-brand" href="#">Start Bootstrap</a>
−
      <!-- Jumbotron Header -->
+
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
−
       <header class="jumbotron my-4">
+
          <span class="navbar-toggler-icon"></span>
−
         <h1 class="display-3">A Warm Welcome!</h1>
+
        </button>
−
         <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ipsam, eligendi, in quo sunt possimus non incidunt odit vero aliquid similique quaerat nam nobis illo aspernatur vitae fugiat numquam repellat.</p>
+
        <div class="collapse navbar-collapse" id="navbarResponsive">
−
        <a href="#" class="btn btn-primary btn-lg">Call to action!</a>
+
          <ul class="navbar-nav ml-auto">
−
      </header>
+
            <li class="nav-item active">
−
 
+
              <a class="nav-link" href="#">Home
−
      <!-- Page Features -->
+
                <span class="sr-only">(current)</span>
−
      <div class="row text-center">
+
              </a>
−
 
+
             </li>
−
        <div class="col-lg-3 col-md-6 mb-4">
+
            <li class="nav-item">
−
          <div class="card">
+
               <a class="nav-link" href="#">About</a>
−
            <img class="card-img-top" src="http://placehold.it/500x325" alt="">
+
            </li>
−
             <div class="card-body">
+
            <li class="nav-item">
−
               <h4 class="card-title">Card title</h4>
+
               <a class="nav-link" href="#">Services</a>
−
               <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
+
             </li>
−
             </div>
+
             <li class="nav-item">
−
             <div class="card-footer">
+
               <a class="nav-link" href="#">Contact</a>
−
               <a href="#" class="btn btn-primary">Find Out More!</a>
+
             </li>
−
             </div>
+
           </ul>
−
           </div>
+
 
         </div>
 
         </div>
 +
      </div>
 +
    </nav>
  
−
        <div class="col-lg-3 col-md-6 mb-4">
+
    <!-- Header - set the background image for the header in the line below -->
−
          <div class="card">
+
    <header class="py-5 bg-image-full" style="background-image: url('https://unsplash.it/1900/1080?image=1076');">
−
            <img class="card-img-top" src="http://placehold.it/500x325" alt="">
+
      <img class="img-fluid d-block mx-auto" src="http://placehold.it/200x200&text=Logo" alt="">
−
            <div class="card-body">
+
    </header>
−
              <h4 class="card-title">Card title</h4>
+
−
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.</p>
+
−
            </div>
+
−
            <div class="card-footer">
+
−
              <a href="#" class="btn btn-primary">Find Out More!</a>
+
−
            </div>
+
−
          </div>
+
−
        </div>
+
  
−
        <div class="col-lg-3 col-md-6 mb-4">
+
    <!-- Content section -->
−
          <div class="card">
+
    <section class="py-5">
−
            <img class="card-img-top" src="http://placehold.it/500x325" alt="">
+
      <div class="container">
−
            <div class="card-body">
+
        <h1>Section Heading</h1>
−
              <h4 class="card-title">Card title</h4>
+
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
−
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
+
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
−
            </div>
+
      </div>
−
            <div class="card-footer">
+
    </section>
−
              <a href="#" class="btn btn-primary">Find Out More!</a>
+
−
            </div>
+
−
          </div>
+
−
        </div>
+
  
−
        <div class="col-lg-3 col-md-6 mb-4">
+
    <!-- Image Section - set the background image for the header in the line below -->
−
          <div class="card">
+
    <section class="py-5 bg-image-full" style="background-image: url('https://unsplash.it/1900/1080?image=1081');">
−
            <img class="card-img-top" src="http://placehold.it/500x325" alt="">
+
      <!-- Put anything you want here! There is just a spacer below for demo purposes! -->
−
            <div class="card-body">
+
      <div style="height: 200px;"></div>
−
              <h4 class="card-title">Card title</h4>
+
    </section>
−
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.</p>
+
−
            </div>
+
−
            <div class="card-footer">
+
−
              <a href="#" class="btn btn-primary">Find Out More!</a>
+
−
            </div>
+
−
          </div>
+
−
        </div>
+
  
 +
    <!-- Content section -->
 +
    <section class="py-5">
 +
      <div class="container">
 +
        <h1>Section Heading</h1>
 +
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 +
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
 
       </div>
 
       </div>
−
      <!-- /.row -->
+
     </section>
−
 
+
−
    </div>
+
−
     <!-- /.container -->
+
  
 
     <!-- Footer -->
 
     <!-- Footer -->
Line 103: Line 88:
 
     <!-- Bootstrap core JavaScript -->
 
     <!-- Bootstrap core JavaScript -->
 
     <script src="vendor/jquery/jquery.min.js"></script>
 
     <script src="vendor/jquery/jquery.min.js"></script>
−
     <script src="https://2018.igem.org/Team:Oxford/scripts/bootstrapminjs"></script>
+
     <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  
 
   </body>
 
   </body>
  
 
</html>
 
</html>

Revision as of 09:53, 19 August 2018

Full Width Pics - Start Bootstrap Template

Section Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.

Section Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.

Copyright © Your Website 2018