Difference between revisions of "Team:British Columbia/Project/S-Layer/Laccases"

m
m
Line 1: Line 1:
 
{{British_Columbia_2}}
 
{{British_Columbia_2}}
 
{{British_Columbia_Navbar}}
 
{{British_Columbia_Navbar}}
 +
{{British_Columbia_Sidebar}}
 +
<html lang="en">
 +
<head>
 +
    <title>Laccases</title>
  
−
<html>
 
 
<style>
 
<style>
−
body {
+
        .cover{
−
   background-color: blue
+
            background: url("https://static.igem.org/mediawiki/2016/6/60/T--British_Columbia--header-mountains.jpg");
−
}
+
            background-size: cover; background-repeat: no-repeat;
 +
        }
 +
 
 +
        @media screen and (min-width: 768px) {
 +
            .cover{
 +
                background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0) 100%),   url("https://static.igem.org/mediawiki/2016/6/60/T--British_Columbia--header-mountains.jpg");
 +
                background-size: cover; background-repeat: no-repeat;
 +
                background-position: 0 0, 0 -220px;
 +
            }
 +
        }
 +
 
 +
        #previous img{
 +
            width: 100%; min-width: 100%; height: auto;
 +
            top: -250px;
 +
            transition: all 1s ease;
 +
        }
 +
 
 +
        #next img{
 +
            width: 100%; min-width: 100%; height: auto;
 +
            top: -250px;
 +
            transition: all 1s ease;
 +
        }
 +
 
 
</style>
 
</style>
−
<head> </head>
+
<script>
 +
 
 +
$(document).ready(function() {
 +
$('.sidebar-nav').affix({
 +
  offset: { top: $('#breadcrumbs').offset().top }
 +
});
 +
 
 +
/*set appropriate width on page load */
 +
if ($(window).width() >= 768) {
 +
  $('.sidebar-nav').css('width', $('.col-sm-3').width());
 +
} else {
 +
  $('.sidebar-nav').css('width', 'auto');
 +
}
 +
 
 +
});
 +
 
 +
/* adjust width on window resize */
 +
$(window).resize(function() {
 +
if ($(window).width() >= 768) {
 +
  $('.sidebar-nav ').css('width', $('.col-sm-3').width());
 +
} else {
 +
  $('.sidebar-nav ').css('width', 'auto');
 +
}
 +
});
 +
 
 +
</script>
 +
</head>
 +
 
 +
<body data-spy="scroll" data-target="#side-menu" data-offset="255">
 +
 
 +
<div class="cover">
 +
    <div class="container-fluid">
 +
        <div class="row" id="title">
 +
            <div class="col-sm-12">
 +
                <strong><p style="font-size: 3em">Laccase <br>S-Layer Engineering</p></strong>
 +
            </div>
 +
        </div><!--title-->
 +
    </div><!--container-fluid-->
 +
</div><!--cover-->
 +
 
 +
<div id="breadcrumbs">
 +
<strong>
 +
<a href="https://2016.igem.org/Team:British_Columbia">Home</a> / <a href="">Project</a> / <a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer/Laccases">Laccase S-Layer Engineering</a></strong>
 +
</div><!--#breadcrumbs-->
 +
 
  
−
<body>
 
−
<h1> Laccases </h1>
 
 
<div class="content-wrap">
 
<div class="content-wrap">
−
<p>Write here</p>
+
        <div class="row">
−
</div>
+
            <nav class="col-sm-3" id="side-menu">
−
</body>
+
                <ul class="nav sidebar-nav nav-pills nav-stacked">
 +
                    <li class="active"><a href="#section-1">Section 1</a></li>
 +
                    <li><a href="#section-2">Section 2</a></li>
 +
                    <li><a href="#section-3">Section 3</a></li>
 +
                </ul>
 +
            </nav>
  
 +
            <div class="col-sm-9">
 +
                <section id="section-1" class="anchor">
 +
                    <h2>Section 1 </h2>
 +
                    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
 +
                </section>
 +
 +
</div><!--.content-wrap-->
 +
</body>
 
</html>
 
</html>

Revision as of 05:12, 17 October 2016

Main CSS Navbar CSS

Sidebar CSS Laccases

Laccase
S-Layer Engineering

Section 1

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."