Difference between revisions of "Team:Oxford/Assets/Style.css"

Line 1: Line 1:
−
#main-container {
+
<html>
−
                height: auto;
+
    <link href="//2015.igem.org/Team:Oxford/Assets/Bootstrap.css?action=raw&ctype=text/css" rel="stylesheet">
−
                top:0;
+
    <link href="//2015.igem.org/Team:Oxford/Assets/Style.css?action=raw&ctype=text/css" rel="stylesheet">
−
                bottom: 0;
+
    <script type="text/javascript" src="//2015.igem.org/Team:Oxford/Assets/Bootstrap.js?action=raw&ctype=text/javascript"></script>
−
                left:0;
+
−
                right:0;
+
−
overflow:scroll;
+
−
margin: 20 0 0 0;
+
−
                position:fixed;
+
−
background-color: #fff;
+
−
}
+
  
−
.top-spacer {
+
    <div id="main-container">
−
    width: 100%;
+
        <nav class="navbar navbar-default navbar-fixed-top">
 +
            <div class="container-fluid">
 +
                <div class="navbar-header">
 +
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#ox-navbar">
 +
                        <span class="icon-bar"></span>
 +
                        <span class="icon-bar"></span>
 +
                        <span class="icon-bar"></span>
 +
                    </button>
 +
                    <a class="navbar-brand" href="https://2015.igem.org/Team:Oxford"><img alt="brand" src="https://static.igem.org/mediawiki/2015/7/7f/Ox-navbar-brand.png"></a>
 +
                </div>
 +
                <nav class="navbar-collapse collapse" id="ox-navbar">
 +
                    <ul class="nav navbar-nav navbar-right">
 +
                        <li class="active"><a href="https://2015.igem.org/Team:Oxford/Description">PROJECT</a></li>
 +
                        <li><a href="#">MODELING</a></li>
 +
                        <li><a href="#">PARTS</a></li>
 +
                        <li><a href="#">PRACTICES</a></li>
 +
                        <li><a href="#">NOTEBOOK</a></li>
 +
                        <li><a href="#">TEAM</a></li>
 +
                        <li><a href="#">BLOG</a></li>
 +
                    </ul>
 +
                </nav>
 +
            </div>
 +
        </nav>
  
−
}
+
        <div class="page-title-section">
 +
            <!--<div class="title-container">-->
 +
                <img src="https://static.igem.org/mediawiki/2015/f/f8/Ox-utilyse_banner.png"/>
  
−
.navbar  {
+
            <!--</div>-->
−
    margin-top: 16px;
+
        </div>
−
    position: fixed;
+
        <div class="title-spacer container-fluid"></div>
−
    font-size: 13px;
+
        <div  class="container-fluid content-container">
−
    background-color: #fff;
+
            <div class="row">
−
}
+
                <div class="col-md-9" role="main">
−
 
+
                    <h1 id="about" class="page-header">Here is a section header</h1>
−
.navbar-right li {
+
                    <p class="lead">This is the lead paragraph describing the section</p>
−
    font-family: "Avenir",sans-serif;
+
                    <h2 id="The Problem">The problem</h2>
−
    color: #2d2c35;
+
                    <p>Outline the problem we are looking to solve</p>
−
    font-weight: bolder;
+
                    <h1 id="about" class="page-header">Here is a section header</h1>
−
    padding-right: 0;
+
                    <p class="lead">This is the lead paragraph describing the section</p>
−
}
+
                    <h2 id="The Problem">The problem</h2>
−
 
+
                    <p>Outline the problem we are looking to solve</p>
−
.navbar-brand>img {
+
                    <h1 id="about" class="page-header">Here is a section header</h1>
−
    max-width: 100px;
+
                    <p class="lead">This is the lead paragraph describing the section</p>
−
}
+
                    <h2 id="The Problem">The problem</h2>
−
 
+
                    <p>Outline the problem we are looking to solve</p>
−
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav> .active > a:hover {
+
                </div>
−
    background-color: #fff;
+
                <div class="col-md-3" role="main">
−
    border-bottom: 1px solid #fa2963;
+
                    <p>over here I will make a navigator that has all the sections and subheders in so you can easily navigate</p>
−
}
+
                </div>
−
 
+
            </div>
−
.navbar-default .navbar-nav a{
+
        </div>
−
    padding-left: 0;
+
     </div>
−
    padding-right: 10px;
+
</html>
−
    margin-right: 15px;
+
−
    padding-bottom: 3px;
+
−
    border-bottom: 1px solid #cccccc;
+
−
}
+
−
 
+
−
.navbar-default .navbar-nav > .active {
+
−
    background-color: #fff;
+
−
 
+
−
}
+
−
 
+
−
.page-title-section {
+
−
    margin-top: 66px;
+
−
    width: 100%;
+
−
    background-image: url(https://static.igem.org/mediawiki/2015/8/89/Ox_bluedots.jpg);
+
−
    background-size: 8px 56px;
+
−
    background-repeat: repeat;
+
−
    position: fixed;
+
−
    float: left;
+
−
    z-index:-1000;
+
−
    -webkit-transform: translateZ(0);
+
−
}
+
−
 
+
−
.page-title-section img {
+
−
    width: 80%;
+
−
    margin-left:10%;
+
−
    margin-right:10%;
+
−
    padding: 12% 0;
+
−
}
+
−
 
+
−
.title-spacer {
+
−
    margin-top: 66px;
+
−
    width:100%;
+
−
    padding-bottom: 38%;
+
−
    position: relative;
+
−
    float:left;
+
−
}
+
−
 
+
−
.row {
+
−
     background-color: #fff;
+
−
}
+

Revision as of 14:15, 20 July 2015

Here is a section header

This is the lead paragraph describing the section

The problem

Outline the problem we are looking to solve

Here is a section header

This is the lead paragraph describing the section

The problem

Outline the problem we are looking to solve

Here is a section header

This is the lead paragraph describing the section

The problem

Outline the problem we are looking to solve

over here I will make a navigator that has all the sections and subheders in so you can easily navigate