Difference between revisions of "Team:UChile OpenBio-CeBiB/Template/2"

 
(190 intermediate revisions by 2 users not shown)
Line 5: Line 5:
 
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:UChile_OpenBio-CeBiB/CSS-bootstrap?action=raw&ctype=text/css">
 
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:UChile_OpenBio-CeBiB/CSS-bootstrap?action=raw&ctype=text/css">
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:UChile_OpenBio-CeBiB/CSS-estilosPrueba?action=raw&ctype=text/css">
 
  
  
Line 14: Line 13:
  
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
 +
 +
    <script>
 +
        $(document).ready(function () {
 +
            current=null;
 +
            $('.item_actividad-titulo').click(function () {
 +
                current=$(this).siblings('.item_actividad-cuerpo');
 +
                if (current.css('display') == 'none') {
 +
                    $('.item_actividad-cuerpo').slideUp();
 +
                }
 +
                current.slideToggle();
 +
            });
 +
        });
 +
    </script>
 +
 +
  
 
<style>
 
<style>
  
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 +
 +
html,body{
 +
min-height:100%;
 +
}
 +
 +
#container {
 +
  position: relative;
 +
}
 +
 +
@font-face {
 +
  font-family: "Hero";
 +
  src: url(https://static.igem.org/mediawiki/2017/1/14/T--UChile_OpenBio-CeBiB--FontHero.otf) format("truetype");
 +
}
 +
 +
 +
a, a:hover {
 +
color: #ffffff;
 +
text-decoration: none;
 +
-webkit-transition: all .4s ease;
 +
-moz-transition: all .4s ease;
 +
-o-transition: all .4s ease;
 +
transition: all .4s ease-in-out;
 +
}
  
 
#sideMenu,
 
#sideMenu,
Line 27: Line 64:
 
   padding: 0px;
 
   padding: 0px;
 
   width: 100%;
 
   width: 100%;
 +
  background-color: transparent;
 
}
 
}
  
body {
 
  background-color: white;
 
  width: 100%;
 
}
 
  
 
#bodyContent h1,
 
#bodyContent h1,
Line 40: Line 74:
 
#bodyContent h5 {
 
#bodyContent h5 {
 
   margin-bottom: 0px;
 
   margin-bottom: 0px;
 +
  font-family: Hero;
 
}
 
}
  
 
#bodyContent {
 
#bodyContent {
 
   padding-right: 0px;
 
   padding-right: 0px;
 +
  background-color: transparent;
 
}
 
}
  
Line 51: Line 87:
 
   margin: -10px -20px -20px -20px;
 
   margin: -10px -20px -20px -20px;
 
}
 
}
 +
 +
 +
ul, li, h1, h2, h3, h4, h5 {
 +
  font-family: Hero;
 +
}
 +
 +
 +
h1 {
 +
  font-size: 40px;
 +
}
 +
 +
 +
h2 {
 +
  font-size: 36px;
 +
}
 +
 +
h3 {
 +
  font-size: 32px;
 +
}
 +
 +
h4 {
 +
  font-size: 28px;
 +
}
 +
 +
h5 {
 +
  font-size: 24px;
 +
}
 +
  
 
.navbar-collapse {
 
.navbar-collapse {
Line 75: Line 139:
 
.navbar .dropdown-menu {
 
.navbar .dropdown-menu {
 
   margin-top: 0;
 
   margin-top: 0;
 +
  background-color: #48ba5b;
 +
  border-radius:10px;
 +
}
 +
 +
.nabar-nav .dropdown-menu li:hover,
 +
.navbar .dropdown-menu li:hover {
 +
  background-color: #2c3e50
 +
}
 +
 +
 +
}.color2{
 +
background: #2c3e50;
 +
}
 +
 +
.navbar-brand,
 +
.navbar-nav li a {
 +
    line-height: 80px;
 +
    height: 80px;
 +
    padding-top: 10;
 +
}
 +
 +
.nav-item{
 +
    font-family: 'Hero';
 +
    src="Hero.otf";
 +
    font-size: 20px;
 +
    }
 +
 +
.navbar-nav > li{
 +
  padding-left: 10px;
 +
  padding-right: 10px;
 +
}
 +
 +
.dropdown-toggle::after {
 +
    display:none;
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
.header {
 +
background: transparent;
 +
color: #fff;
 +
        position:relative;
 +
        width:100%;
 +
}
 +
 +
.main {
 +
background: transparent;
 +
}
 +
 +
.color1 {
 +
background: transparent;
 +
color: #fff;
 +
}
 +
 +
aside{
 +
background: transparent;
 +
color: #fff;
 +
}
 +
 +
footer{
 +
background: transparent;
 +
color: #fff;
 +
}
 +
 +
 +
a.dropdown-item:hover{
 +
    background-color:#00590e;
 +
    color: #fff;
 +
}
 +
 +
a.dropdown-item{
 +
    color: #000000;
 +
}
 +
 +
 +
p {
 +
  font-family:Hero;
 +
  text-align:justify;
 +
  background-color:transparent;
 +
  font-size: 20px;
 
}
 
}
  
Line 85: Line 239:
 
.content_wrapper {
 
.content_wrapper {
 
   width: 85%;
 
   width: 85%;
   margin-left: 150px;
+
   margin-left: 0px;
 
   padding: 0px;
 
   padding: 0px;
 
   float: left;
 
   float: left;
   background-color: white;
+
   background-color: none;
 
}
 
}
  
Line 97: Line 251:
 
   padding: 10px 0px;
 
   padding: 10px 0px;
 
   float: left;
 
   float: left;
   background-color: white;
+
   background-color: none;
 
}
 
}
  
Line 178: Line 332:
 
   font-weight: bold;
 
   font-weight: bold;
 
   text-decoration: underline;
 
   text-decoration: underline;
   text-decoration-color: #72c9b6;
+
   text-decoration-color: #515e3d;
   color: #72c9b6;
+
   color: #515e3d;
 
   -webkit-transition: all 0.4s ease;
 
   -webkit-transition: all 0.4s ease;
 
   -moz-transition: all 0.4s ease;
 
   -moz-transition: all 0.4s ease;
Line 268: Line 422:
 
   background-color: #000000;
 
   background-color: #000000;
 
   color: #72c9b6;
 
   color: #72c9b6;
 +
 
}
 
}
  
Line 405: Line 560:
  
  
<body>
 
  
  
  
<!--NAVBAR BEGIN-->
 
  
<nav class="navbar navbar-default">
 
  <div class="container-fluid">
 
    <!-- Brand and toggle get grouped for better mobile display -->
 
    <div class="navbar-header">
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 
        <span class="sr-only">Toggle navigation</span>
 
        <span class="icon-bar"></span>
 
        <span class="icon-bar"></span>
 
        <span class="icon-bar"></span>
 
      </button>
 
      <a class="navbar-brand" href="#">Brand</a>
 
    </div>
 
  
    <!-- Collect the nav links, forms, and other content for toggling -->
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
      <ul class="nav navbar-nav">
 
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
 
        <li><a href="#">Link</a></li>
 
        <li class="dropdown">
 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
 
          <ul class="dropdown-menu">
 
            <li><a href="#">Action</a></li>
 
            <li><a href="#">Another action</a></li>
 
            <li><a href="#">Something else here</a></li>
 
            <li role="separator" class="divider"></li>
 
            <li><a href="#">Separated link</a></li>
 
            <li role="separator" class="divider"></li>
 
            <li><a href="#">One more separated link</a></li>
 
          </ul>
 
        </li>
 
      </ul>
 
      <form class="navbar-form navbar-left">
 
        <div class="form-group">
 
          <input type="text" class="form-control" placeholder="Search">
 
        </div>
 
        <button type="submit" class="btn btn-default">Submit</button>
 
      </form>
 
      <ul class="nav navbar-nav navbar-right">
 
        <li><a href="#">Link</a></li>
 
        <li class="dropdown">
 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
 
          <ul class="dropdown-menu">
 
            <li><a href="#">Action</a></li>
 
            <li><a href="#">Another action</a></li>
 
            <li><a href="#">Something else here</a></li>
 
            <li role="separator" class="divider"></li>
 
            <li><a href="#">Separated link</a></li>
 
          </ul>
 
        </li>
 
      </ul>
 
    </div><!-- /.navbar-collapse -->
 
  </div><!-- /.container-fluid -->
 
</nav>
 
  
<!--NAVBAR END-->
+
<style>
 +
.dropdown-submenu {
 +
    position: relative;
 +
}
  
 +
.dropdown-submenu>.dropdown-menu {
 +
    top: 0;
 +
    left: 100%;
 +
    margin-top: -6px;
 +
    margin-left: -1px;
 +
    -webkit-border-radius: 0 6px 6px 6px;
 +
    -moz-border-radius: 0 6px 6px;
 +
    border-radius: 0 6px 6px 6px;
 +
}
  
 +
.dropdown-submenu:hover>.dropdown-menu {
 +
    display: block;
 +
}
  
 +
.dropdown-submenu>a:after {
 +
    display: block;
 +
    content: " ";
 +
    float: right;
 +
    width: 0;
 +
    height: 0;
 +
    border-color: transparent;
 +
    border-style: solid;
 +
    border-width: 5px 0 5px 5px;
 +
    border-left-color: #ccc;
 +
    margin-top: 5px;
 +
    margin-right: -10px;
 +
}
  
 +
.dropdown-submenu:hover>a:after {
 +
    border-left-color: #fff;
 +
}
  
<header>
+
.dropdown-submenu.pull-left {
<div class="container-fluid"> <!--Container centra el contenido. fluid usa todo el espacio-->
+
    float: none;
<h1>Header</h1>
+
}
</div>
+
</header>
+
<div class="container-fluid">
+
<section class="main row"> <!--Establecer fila-->
+
<article class="col-xs-12 col-sm-8 col-md-9 col-lg-9"> <!--Establecer columna y tamaño-->
+
<p>
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam adipisci blanditiis, molestias at sit unde. Aspernatur, praesentium dolorem ipsa autem, neque omnis fugiat labore nulla minus ab harum natus temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam adipisci blanditiis, molestias at sit unde. Aspernatur, praesentium dolorem ipsa autem, neque omnis fugiat labore nulla minus ab harum natus temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam adipisci blanditiis, molestias at sit unde. Aspernatur, praesentium dolorem ipsa autem, neque omnis fugiat labore nulla minus ab harum natus temporibus.
+
</p>
+
</article>
+
<aside class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam adipisci blanditiis, molestias at sit unde. Aspernatur, praesentium dolorem ipsa autem, neque omnis fugiat labore nulla minus ab harum natus temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam adipisci blanditiis, molestias at sit unde. Aspernatur, praesentium dolorem ipsa autem, neque omnis fugiat labore nulla minus ab harum natus temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam adipisci blanditiis, molestias at sit unde. Aspernatur, praesentium dolorem ipsa autem, neque omnis fugiat labore nulla minus ab harum natus temporibus.
+
</aside>
+
</section>
+
<div class="row">
+
<div class="color col-xs-12 col-sm-6 col-md-3">
+
<h3>Columna</h3>
+
<p>
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam adipisci blanditiis, molestias at sit unde. Aspernatur, praesentium dolorem ipsa autem, neque omnis fugiat labore nulla minus ab harum natus temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+
</p>
+
<p>
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam adipisci blanditiis, molestias at sit unde. Aspernatur, praesentium dolorem ipsa autem, neque omnis fugiat labore nulla minus ab harum natus temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+
</p>
+
</div>
+
  
<div class="col-xs-12 col-sm-6 col-md-3">
+
.dropdown-submenu.pull-left>.dropdown-menu {
<h3>Columna</h3>
+
    left: -100%;
<p>
+
    margin-left: 10px;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam adipisci blanditiis, molestias at sit unde. Aspernatur, praesentium dolorem ipsa autem, neque omnis fugiat labore nulla minus ab harum natus temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+
    -webkit-border-radius: 6px 0 6px 6px;
</p>
+
    -moz-border-radius: 6px 0 6px 6px;
</div>
+
    border-radius: 6px 0 6px 6px;
 +
}
 +
</style>
  
<div class="color col-xs-12 col-sm-6 col-md-3">
+
<body>
<h3>Columna</h3>
+
<p>
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam adipisci blanditiis, molestias at sit unde. Aspernatur, praesentium dolorem ipsa autem, neque omnis fugiat labore nulla minus ab harum natus temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+
</p>
+
</div>
+
  
<div class="col-xs-12 col-sm-6 col-md-3">
 
<h3>Columna</h3>
 
<p>
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam adipisci blanditiis, molestias at sit unde. Aspernatur, praesentium dolorem ipsa autem, neque omnis fugiat labore nulla minus ab harum natus temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 
</p>
 
</div>
 
  
<div class="clearfix visible-sm-block"></div>
 
</div>
 
</div>
 
  
<footer>
+
<!--NAVBAR BEGIN-->
<div class="container">
+
<header>
<h3>Footer</h3>
+
<nav class="navbar top fixed-top navbar-expand-lg navbar-light" style="background-color: #acd7a4" role="navigation">
</div>
+
  <a class="navbar-brand" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB" style="padding-left:0px;">
</footer>
+
  <img src="https://static.igem.org/mediawiki/2017/9/9d/T--UChile_OpenBio-CeBiB--logo1.png" width="200" height="55" alt="">
+
  </a>
 +
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
 +
    <span class="navbar-toggler-icon"></span>
 +
  </button>
  
 +
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
 +
    <ul class="navbar-nav ml-auto">
 +
      <li class="nav-item dropdown">
 +
        <a class="nav-link dropdown-toggle" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Description" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 +
          Project
 +
        </a>
 +
        <div class="dropdown-menu item2" aria-labelledby="navbarDropdownMenuLink">
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Description">Description</a>
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Parts">Parts</a>
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Experiments">Procedures</a>
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Results">Results</a>
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Attributions">Attributions</a>
 +
        </div>
 +
      </li>
 +
      <li class="nav-item dropdown">
 +
        <a class="nav-link dropdown-toggle" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/HP" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 +
          HP
 +
        </a>
 +
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/HP">HP Overview</a>
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Collaborations">Collaborations</a>
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/HP/Silver">Silver</a>
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/HP/Gold_Integrated">Gold</a>
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Engagement">Engagement</a>
 +
        </div>
 +
      </li>
 +
      <li class="nav-item dropdown">
 +
        <a class="nav-link dropdown-toggle" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Model" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 +
          Modelling
 +
        </a>
 +
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Model">Modelling Overview</a>
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Model/Procedure">Procedure</a>
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Model/Results">Results</a>
 +
        </div>
 +
      </li>
 +
      <li class="nav-item dropdown">
 +
        <a class="nav-link dropdown-toggle" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Safety" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 +
          Safety
 +
        </a>
 +
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Safety/Biosafety">Biosafety</a>
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Safety/LabProtocols">Lab Protocols</a>
 +
        </div>
 +
      </li>
 +
      <li class="nav-item">
 +
        <a class="nav-link" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Notebook">Notebook<span class="sr-only">(current)</span></a>
 +
      </li>
 +
      <li class="nav-item">
 +
        <a class="nav-link" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Team">Team<span class="sr-only">(current)</span></a>
 +
      </li>
 +
      <li class="nav-item dropdown">
 +
        <a class="nav-link dropdown-toggle" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Jamboree" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Giant Jamboree </a>
 +
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Jamboree/OurExperience">Our experience</a>
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Jamboree/JudgingFeedback">Judging Feedback</a>
 +
          <a class="dropdown-item" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB/Jamboree/Photos">Photos</a>
 +
        </div>
 +
      </li>
 +
      <li class="nav-item">
 +
        <a class="nav-link" href="https://2017.igem.org/Team:UChile_OpenBio-CeBiB">Home<span class="sr-only">(current)</span></a>
 +
      </li>
 +
    </ul>
 +
  </div>
 +
<ng-view></ng-view>
 +
</nav>
 +
</header>
 +
 +
<!--NAVBAR END-->
  
  

Latest revision as of 22:59, 15 December 2017

Document