Difference between revisions of "Team:Warwick/notebook"

Line 1: Line 1:
−
<html>
+
<!doctype html>
−
<head>
+
<html lang="en">
−
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Team:warwick/CSS/stylesheet.css">
+
  <head>
−
<link href="https://fonts.googleapis.com/css?family=Simonetta&display=swap" rel="stylesheet">
+
    <!-- Required meta tags -->
 +
    <meta charset="utf-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
−
<style>  
+
    <!-- Bootstrap CSS -->
 +
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  
−
/* fixing igem custom settings */
+
    <title>Bio Website</title>
−
#top_title{
+
    <!--<link rel='stylesheet' type='text/css' href='./css/mainContent.css' />-->
−
  display:none !important;
+
  </head>
−
}
+
  <style>
 +
    /*iGem website CSS*/
 +
    #top-title {
 +
        display: none !important;
 +
    }
 +
    .igem_2019_team_menu {
 +
        display: none !important;
 +
    }
 +
    .clear_extra_space {
 +
        display: none !important;
 +
    }
 +
    .igem_2019_team_content {
 +
        width: 100% !important;
 +
        margin: 0;
 +
        padding: 0;
 +
        background-color: !important;
 +
    }
 +
    #HQ_page p{
 +
        padding: 0;
 +
        margin: 0;
 +
        text-align: inherit !important;
 +
    }
 +
    #content {
 +
        width: 100% !important;
 +
        margin: 0;
 +
        padding: 0;
 +
        background-color: !important;
 +
        line-height: 0;
 +
    }
 +
    .igem_2019_team_column_wrapper {
 +
        width: 100% !important;
 +
    }
 +
    /*iGem website CSS*/
 +
    /*Main Styling*/
 +
    html, body {
 +
        height: 100%;
 +
        display: table;
 +
    }
  
−
#HQ_page p{
+
    .main-content-container {
−
  padding: 0;
+
        position: relative;
−
  margin: 0;
+
        min-height: 100%;
−
  text-align: inherit !important;
+
    }
−
  all:unset;
+
  
−
}
+
    .brand-logo {
 +
        width: 18.75%;
 +
        height: 18.75%;
 +
    }
  
−
#content{
+
    .top-nav li {
−
  width: 100% !important;
+
        margin-left: 10px;
−
  margin: 0;
+
        margin-right: 10px;
−
  padding: 0;
+
    }
−
  background-color: #FFFFFF !important;
+
−
}
+
−
#bodycontent {
+
−
background-color: #FFFFFF !important;
+
−
}
+
−
/* end of igem custom settings */
+
  
−
body {  
+
    .dropdown:hover>.dropdown-menu {
−
background-color: #FFFFFF !important;
+
        display: block;
−
}
+
    }
  
 +
    .top-spacer {
 +
        width: 100%;
 +
    }
  
−
/* NavBar settings and identifiers */
+
    .page-nav {
−
#navbar {  
+
        height: 100vh;
−
list-style-type: none !important;
+
        position: fixed;
−
margin: 0 !important;
+
    }
−
padding: 0 !important;
+
−
overflow: hidden !important;
+
−
background-color:#F5B433 !important;
+
−
list-style-image: none !important;
+
−
}
+
  
−
#navbarbutton {
+
    .page-content-nav .navbar-brand {
−
float: left !important;
+
        margin-left: 20px;
−
}
+
    }
  
−
#navbarbutton:hover {
+
    .page-content-nav li:nth-child(odd) {
−
  background-color: #3B3838;
+
        margin-left: 30px;
−
color:white;
+
    }
−
}
+
  
−
#navbarbuttontext {
+
    .page-content-nav li:nth-child(even) {
−
display: block;
+
        margin-right: 30px;
−
  color: white;
+
    }
−
font-size:15px;
+
−
  text-align: center;
+
−
  padding: 14px 16px;
+
−
  text-decoration: none;
+
−
  font-family: 'Simonetta', serif !important;
+
−
}
+
  
−
/* end of navbar */
+
    .page-content-nav li {
 +
        text-align: center;
 +
        line-height: 0;
 +
        position: relative;
 +
        border-radius: 50%;
 +
        border: 1px solid #383e45;
 +
        height: 0;
 +
        display: inline-block;
 +
        padding: 50% 0;
 +
        width: 100%;
 +
        transition: 0.5s;
 +
        cursor: pointer;
 +
    }
  
−
/*Start of first title screen */
+
    .page-content-nav li:hover {
 +
        transform: scale( 1.1, 1.1);
 +
    }
  
−
#titlescreen {
+
    .full-footer {
−
height:50vh;
+
        display: table-row;
−
}
+
    }
  
−
#fattitle {  
+
    .footer-top {
−
color:#F5B433 !important;
+
        background-color: #383e45;
−
font-size: 100px !important;
+
        height: 50px;
−
font-family: 'Simonetta', serif !important;
+
    }
−
position: relative;
+
−
left:70px;
+
−
top:100px;
+
−
overflow: visible;
+
−
}
+
  
−
#bottomtitle {
+
    .footer-top p {
−
position: relative;
+
        font-size: 16px;
−
left:70px;
+
    }
−
top:60px;
+
−
color:#A5B994 !important;
+
−
font-family: 'Simonetta', serif !important;
+
−
display: block !important;
+
−
overflow: visible;
+
−
}
+
  
−
/* end of title screen */
+
    .footer-bottom {
 +
        height: 35px;
 +
    }
  
−
/* start of "body" section */
+
    .footer-bottom p {
 +
        font-size: 16px;
 +
    }
  
−
#bodysectiontitle {
+
    .social-media {
−
color:#F5B433;
+
        background-color: #383e45;
−
font-size: 50px;
+
    }
−
font-family: 'Simonetta', serif !important;
+
−
overflow: visible;
+
−
}
+
  
−
#paragraphtext {
+
    @keyframes sm-rotation {
−
color:#A5B994 !important;
+
        from {transform: rotateY(0deg)}
−
font-family: 'Simonetta', serif !important;
+
        to {transform: rotateY(360deg)}
−
font-size: 20px !important;
+
    }
−
word-wrap: break-word !important;
+
−
text-align: inter-word !important;
+
−
}
+
  
−
#paragraph {
+
    .circle-1, .circle-2, .circle-3, .circle-4, .circle-5 {
−
background-color: ;
+
        position: relative;
−
position: relative;
+
        width: 45px;
−
left:10%;
+
        height: 45px;
−
width: 900px;
+
        margin: 10px;
−
padding-right: 1.5%;
+
        padding: 0;
−
text-align: inter-word !important;
+
        background-color: #edc13b;
−
}
+
        border-radius: 50px;
 +
        line-height: 0;
 +
    }
  
 +
    .social-media img {
 +
        height: 45px;
 +
        width: 45px;
 +
        margin: 0;
 +
        transition: 0.3s;
 +
        border-radius: 50px;
 +
    }
  
−
#imagebox {
+
    .social-media img:hover {
−
background-color: ;
+
        animation-name: sm-rotation;
−
position: relative;
+
        animation-duration: 1s;
−
left:0%;
+
    }
−
padding-right: 1.5%;
+
−
border: 5px white;
+
−
}
+
  
−
#button  {
+
    .sponsors {
−
background-color: #A5B994 !important;
+
        background-color: #343a40;
−
height:20vh !important;
+
    }
−
width:20% !important;
+
−
float:left !important;
+
−
position: relative;
+
−
left: 20%;
+
−
}
+
  
−
/*end of body section */
+
    .sponsors img {
 +
        width: 6.25%;
 +
        height: 6.25%;
 +
        margin: 15px;
 +
    }
 +
  </style>
 +
  <body>
  
−
</style>
+
    <!--NAVBAR-->
−
</head>
+
     
 +
    <nav class='navbar navbar-expand-lg navbar-dark bg-dark sticky-top'>
 +
      <a class='navbar-brand' href='./index.html'>
 +
        <img class='brand-logo' src='./assets/brandLogo.png' />
 +
      </a>
  
−
<body>
+
      <button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarSupportedContent'>
 +
        <span class='navbar-toggler-icon'> </span>
 +
      </button>
  
−
<div id="titlescreen">
+
      <div class='collapse navbar-collapse' id='navbarSupportedContent'>
−
<div>
+
−
<ul id="navbar">
+
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="https://2019.igem.org/Team:Warwick/Overview">Home</a></li>
+
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="news.asp">Team</a></li>
+
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="contact.asp">Design</a></li>
+
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="about.asp">Experiments</a></li>
+
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="https://2019.igem.org/Team:Warwick/notebook">Notebook</a></li>
+
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="news.asp">Results</a></li>
+
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="contact.asp">Parts</a></li>
+
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="https://2019.igem.org/wiki/index.php?title=Team:Warwick/Safety">Safety</a></li>
+
−
                        <li id="navbarbutton"><a id="navbarbuttontext" href="about.asp">Human Practices</a></li>
+
−
                        <li id="navbarbutton"><a id="navbarbuttontext" href="about.asp">Attributions</a></li>
+
−
                        <li id="navbarbutton"><a id="navbarbuttontext" href="about.asp">Description</a></li>
+
−
        </ul>
+
−
</div>
+
  
−
<div style="height:100px;"></div>
+
        <ul class='navbar-nav ml-auto'>
  
−
<div id="paragraph">
+
          <li class='nav-item dropdown'>
−
    <h1 id="bodysectiontitle">Notebook</h1>
+
            <a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-toggle='dropdown'
 +
                aria-haspopup="true" aria-expanded="false">Team</a>
  
−
<p id="paragraphtext"> books </p>
+
            <div class='dropdown-menu' aria-labelledby="navbarDropdown">
 +
              <a class='dropdown-item' href='./members'>Members</a>
 +
              <a class='dropdown-item' href='./attributions'>Attributions</a>
 +
              <a class='dropdown-item' href='./collaborations'>Collaborations</a>
 +
              <a class='dropdown-item' href='./gallery'>Gallery</a>
 +
            </div>
  
−
<p id="paragraphtext"> books
+
          </li>
−
</p>
+
  
−
<h1 id="bodysectiontitle">books</h1>
+
          <li class='nav-item dropdown'>
 +
            <a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-toggle='dropdown'
 +
            aria-haspopup="true" aria-expanded="false">Project</a>
  
−
<p id="paragraphtext">In terms of our project.</p>
+
            <div class='dropdown-menu' aria-labelledby="navbarDropdown">
 +
              <a class='dropdown-item' href='./description'>Description</a>
 +
              <a class='dropdown-item' href='./design'>Design</a>
 +
              <a class='dropdown-item' href='./experiments'>Experiments</a>
 +
              <a class='dropdown-item' href='./notebook'>Notebook</a>
 +
              <a class='dropdown-item' href='./safety'>Safety</a>
 +
              <a class='dropdown-item' href='./modelling'>Modelling</a>
 +
              <a class='dropdown-item' href='./brainstorm'>Brainstorm</a>
 +
            </div>
 +
          </li>
  
 +
          <li class='nav-item dropdown'>
 +
            <a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-toggle='dropdown'
 +
            aria-haspopup="true" aria-expanded="false">Parts</a>
  
−
</div>
+
            <div class='dropdown-menu' aria-labelledby="navbarDropdown">
 +
              <a class='dropdown-item' href='./Overview'>Overview</a>
 +
              <a class='dropdown-item' href='./basic-parts'>Basic Parts</a>
 +
              <a class='dropdown-item' href='./composite-parts'>Composite Parts</a>
 +
              <a class='dropdown-item' href='./parts-collection'>Parts Collection</a>
 +
            </div>
 +
          </li>
  
−
<div style="height:100px;"></div>
+
          <li class='nav-item dropdown'>
 +
            <a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-toggle='dropdown'
 +
            aria-haspopup="true" aria-expanded="false">Results</a>
  
 +
            <div class='dropdown-menu' aria-labelledby="navbarDropdown">
 +
              <a class='dropdown-item' href='./results'>Results</a>
 +
              <a class='dropdown-item' href='./demonstrate'>Demonstrate</a>
 +
              <a class='dropdown-item' href='./improved'>Improved</a>
 +
            </div>
 +
        </li>
  
 +
          <li class='nav-item dropdown'>
 +
            <a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-toggle='dropdown'
 +
            aria-haspopup="true" aria-expanded="false">Human Practices</a>
  
 +
            <div class='dropdown-menu' aria-labelledby="navbarDropdown">
 +
              <a class='dropdown-item' href='./integrated-human-practices'>Integrated Human Practices</a>
 +
              <a class='dropdown-item' href='./public-engagement'>Public Engagement</a>
 +
            </div>
 +
          </li>
  
 +
          <li class='nav-item dropdown'>
 +
            <a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-toggle='dropdown'
 +
            aria-haspopup="true" aria-expanded="false">Awards</a>
  
−
</body>
+
            <div class='dropdown-menu' aria-labelledby="navbarDropdown">
 +
              <a class='dropdown-item' href='./medals'>Medals</a>
 +
              <a class='dropdown-item' href='./judging-form'>Judging Form</a>
 +
            </div>
 +
          </li>
 +
 
 +
        </ul>
 +
 
 +
      </div>
 +
 
 +
    </nav>
 +
 
 +
    <!--NAVBAR END-->
 +
 
 +
    <!--MAIN CONTENT-->
 +
    <div class='container-fluid main-content-container'>
 +
 
 +
      <div class='top-spacer d-flex p-4 flex-row'></div>
 +
 
 +
      <div class='d-flex flex-row all-content'>
 +
 
 +
          <div class='d-flex flex-column col-md-2 page-nav align-content-center'>
 +
         
 +
            <nav class='navbar page-content-nav justify-content-center' >
 +
              <a class='navbar-brand text-secondary'>Go To Section</a>
 +
              <ul class='navbar-nav'>
 +
                <li class='navbar-item page-content-item-to-top'>
 +
                  <a class='nav-link go-to-top text-dark' href='#'>Go To Top</a>
 +
                </li>
 +
                <li class='navbar-item page-content-item-contact'>
 +
                  <a class='nav-link go-to-contacts text-dark' href='#'>Contacts</a>
 +
                </li>
 +
              </ul>
 +
            </nav>
 +
 
 +
            <iframe src="https://giphy.com/embed/B17JxNP2XT3kA" width="200" height="200" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
 +
            <p><a href="https://giphy.com/gifs/reaction-chemical-loading-icon-B17JxNP2XT3kA"></a></p>
 +
          </div>
 +
 
 +
          <div class='d-flex flex-column col-md-10 page-content ml-auto'>
 +
            <h1>Notebook</h1>
 +
          </div>
 +
 
 +
      </div>
 +
 
 +
     
 +
    </div>
 +
 
 +
    <!--MAIN CONTENT END-->
 +
 
 +
 
 +
    <!--FOOTER-->
 +
    <div class='full-footer'>
 +
 
 +
      <div class='d-flex flex-row p-3 justify-content-center footer-top'>
 +
        <!--<h5 class='text-uppercase text-secondary'>Contact Us</h5>-->
 +
        <p class='lead text-uppercase text-secondary'>Contact Us</p>
 +
      </div>
 +
      <div class='d-flex flex-row justify-content-center align-items-center social-media'>
 +
        <div class='circle-1'><img src='./assets/facebook.png' /></div>
 +
        <div class='circle-2'><img src='./assets/instagram.png' /></div>
 +
        <div class='circle-3'><img src='./assets/twitter.png' /></div>
 +
        <div class='circle-4'><img src='./assets/website.png' /></div>
 +
        <div class='circle-5'><img src='./assets/mail.png' /></div>
 +
      </div>
 +
 
 +
      <div class='d-flex flex-row p-3 bg-dark justify-content-center footer-bottom'>
 +
        <!--<h5 class='text-uppercase text-secondary'>Sponsors</h5>-->
 +
        <p class='lead text-secondary text-uppercase'>Sponsors</p>
 +
      </div>
 +
      <div class='d-flex flex-row flex-wrap justify-content-center align-items-center sponsors'>
 +
        <img src='./assets/sponsor/BBSRC.png' />
 +
        <img src='./assets/sponsor/EPSRC.png' />
 +
        <img src='./assets/sponsor/IDT.png' />
 +
        <img src='./assets/sponsor/NEB.png' />
 +
        <img src='./assets/sponsor/Nanopore.png' />
 +
        <img src='./assets/sponsor/Qiagen.png' />
 +
        <img src='./assets/sponsor/WISB.png' />
 +
        <img src='./assets/sponsor/Warwick-SLS-logo.png' />
 +
        <img src='./assets/sponsor/Warwick-logo.png' />
 +
        <img src='./assets/sponsor/Wellcome-trust.png' />
 +
        <img src='./assets/sponsor/snapgene.png' />
 +
        <img src='./assets/sponsor/twist-bioscience.png' />
 +
      </div>
 +
    </div>
 +
    <!--FOOTER END-->
 +
 
 +
 
 +
 
 +
 
 +
    <!-- Optional JavaScript -->
 +
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 +
    <!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->
 +
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
 +
    <!--<script src='./js/brainstorm.js'></script>-->
 +
 
 +
    <script>
 +
        //Main JQuery
 +
        $(document).ready(function() {
 +
 
 +
            $('li.page-content-item-contact').click(function() {
 +
                $('html, body').animate({scrollTop: $(document).height()}, 'slow');
 +
                return false;
 +
            })
 +
 
 +
            $('li.page-content-item-to-top').click(function() {
 +
                $('html, body').animate({scrollTop:0}, 'slow');
 +
            })
 +
 
 +
 
 +
 
 +
        })
 +
    </script>
 +
 
 +
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
 +
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 +
  </body>
 
</html>
 
</html>

Revision as of 19:23, 24 September 2019

<!doctype html> Bio Website

Notebook

Contact Us

Sponsors