Difference between revisions of "Team:Groningen/test"

Line 2: Line 2:
 
<html>
 
<html>
 
<body>
 
<body>
−
<body data-spy="scroll" data-target="#myScrollspy" data-offset="90" >
+
<style>
 +
div.bar {
 +
    background-color: #027ad0;
 +
    background-image: linear-gradient(#027ad0, #027ad0);
 +
}
 +
ul.menu, ul.menu ul {
 +
    margin: 0;
 +
    padding: 0;
 +
    list-style: none;
 +
}
 +
ul.menu {
 +
width: 960px;
 +
    width: -moz-fit-content;
 +
    width: -webkit-fit-content;
 +
    width: fit-content;
 +
    text-align: center;
 +
    /*white-space: nowrap;*/
 +
    margin: 0px auto;
 +
    border: 0px solid #222;
 +
    background-color: #027ad0;
 +
    background-image: linear-gradient(#027ad0, #027ad0);
 +
    border-radius: 0px;
 +
}
 +
ul.menu:before,ul.menu:after {
 +
    content: "";
 +
    display: block;
 +
}
 +
ul.menu:after {
 +
    clear: both;
 +
}
 +
ul.menu li {
 +
    float: left;
 +
    box-shadow: none;
 +
    position: relative;
 +
}
 +
ul.menu li.lilast {
 +
    border-right: none;
 +
}
 +
ul.menu a {
 +
    float: left;
 +
    padding: 12px 16px;
 +
    color: #FFFFFF;
 +
    font: 17px Arial, Helvetica;
 +
    text-decoration: none;
 +
    text-shadow: 0 1px 0 #000;
 +
}
 +
ul.menu ul {
 +
    margin: 20px 0 0 0;
 +
    _margin: 0; /*IE6 only*/
 +
    opacity: 0;
 +
    visibility: hidden;
 +
    position: absolute; 
 +
    /* spacing between the menu and the dropdown menu, ideally 28px, or 23px for bordered menu */
 +
    top: 45px;
 +
    left: 0;
 +
    z-index: 1;   
 +
    background: #027ad0; 
 +
    background: linear-gradient(#027ad0, #027ad0);
 +
    border-radius: 0px;
 +
    transition: all .2s ease-in-out;
 +
}
 +
ul.menu li:hover > ul {
 +
    opacity: 1;
 +
    visibility: visible;
 +
    margin: 0;
 +
}
 +
ul.menu ul ul {
 +
    top: 0;
 +
    left: 150px;
 +
    margin: 0 0 0 20px;
 +
    _margin: 0; /*IE6 only*/
 +
    box-shadow: -0px 0 0 rgba(255,255,255,.3);   
 +
}
 +
ul.menu ul li {
 +
    float: none;
 +
    display: block;
 +
    border: 0;
 +
    _line-height: 0; /*IE6 only*/
 +
    box-shadow: 0 0px 0 #111, 0 0px 0 #666;
 +
    text-align: left;
 +
}
 +
ul.menu ul li:last-child { 
 +
    box-shadow: none;   
 +
    border: 0;
 +
}
 +
ul.menu ul a {   
 +
    padding: 10px;
 +
    width: 150px;
 +
    _height: 10px; /*IE6 only*/
 +
    display: block;
 +
    white-space: nowrap;
 +
    float: none;
 +
    text-transform: none;
 +
}
 +
ul.menu ul a:hover {
 +
    background-color: #032c62;
 +
    background-image: linear-gradient(#032c62, #032c62);
 +
}
 +
ul.menu li a:hover {
 +
    background-color: #032c62;
 +
    background-image: linear-gradient(#032c62, #032c62);
 +
}
  
−
<nav id="myScrollspy">
+
/*div.bar li a {display: block;}*/
−
  <ul class="nav">
+
div.bar li.icon {display: none;}
−
    <li class="active"><a href="#nav1">Restriction digestion</a></li>
+
−
  </ul>
+
−
</nav>
+
  
−
<div class="main-col">
+
@media screen and (max-width:800px) {
−
 
+
ul.menu li a {
−
 
+
position: relative;
−
<h1> Protocols</h1>
+
left: 0;
−
 
+
top: 0;
−
 
+
display: block;
−
<!-- header slider -->
+
−
 
+
−
<style>
+
−
.mySlides {display:none}
+
−
.slideshow-container {
+
−
  position: relative;
+
−
  margin: auto;
+
 
}
 
}
−
.slideshow-container img {
+
div.bar li {display: none;}
−
   filter: blur(3px);
+
div.bar li.icon {
−
   width:100%;
+
    position: relative;
−
   height:350px;
+
    left: 0;
−
   object-fit: cover;
+
    top: 0;
 +
    display: block;
 +
}
 +
ul.menu {
 +
   list-style-type: block;
 +
   margin: 0;
 +
   padding: 0;
 +
}
 +
ul.menu li a {
 +
   padding: 12px 14px;
 +
  text-decoration: none;
 +
  font-size: 15px;
 +
}
 +
ul.menu ul a {   
 +
    padding: 10px;
 +
    width: 120px;
 
}
 
}
−
/* Caption text */
 
−
.slidetext {
 
−
  position: absolute;
 
−
  bottom: 150px;
 
−
  height:50px;
 
−
  width: 100%;
 
−
  text-align: center;
 
 
}
 
}
  
−
/* The dots/bullets/indicators */
+
@media screen and (max-width:800px) {
−
.dot {
+
  div.bar.res {position: relative;}
−
   height: 15px;
+
   div.menu.res li.icon {
−
  width: 15px;
+
    position: absolute;
−
  margin: 0 2px;
+
    left: 0;
−
  background-color: #bbb;
+
    top: 0;
−
   border-radius: 50%;
+
float: left;
−
   display: inline-block;
+
   }
−
   transition: background-color 0.6s ease;
+
  div.bar.res li {
 +
    float: none;
 +
    display: block;
 +
   }
 +
  div.bar.res li a {
 +
    display: block;
 +
    text-align: left;
 +
   }
 +
ul.menu.res ul {
 +
    margin: 0px 0 0 0;
 +
    _margin: 0;
 +
    opacity: 1;
 +
    visibility: visible;
 +
    position: absolute; 
 +
    top: 42px;
 +
    left: 0;
 +
    z-index: 1;   
 +
    background: #027ad0; 
 +
    background: linear-gradient(#027ad0, #027ad0);
 +
    border-radius: 0px;
 +
    transition: all .2s ease-in-out;  
 
}
 
}
 +
 +
ul.menu.res li {float: left;}
 +
 
}
 
}
 
</style>
 
</style>
 +
 +
 +
  <section>
 +
  <div class="bar">
 +
<!-- Begin content block -->
 +
  <!--<ul id="menu"> -->
 +
  <ul class="menu">
 +
    <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">≡ Menu</a></li>
 +
  <li><a href="?page=home">Home</a></li>
 +
  <li><a href="#">Symposium</a>
 +
    <ul>
 +
    <li><a href="?page=program" onclick="">Program</a></li>
 +
    <li><a href="?page=daychair" onclick="">Day chair</a></li>
 +
    <li><a href="?page=speakers" onclick="">Speakers</a></li>
 +
    <li><a href="?page=guestspeaker" onclick="">Guest speaker</a></li>
 +
    <li><a href="?page=location" onclick="">Location</a></li>
 +
    </ul>
 +
  </li>
 +
<!--  <li><a href="?page=gallery">Gallery</a></li>-->
 +
  <li><a href="?page=sponsors">Sponsors</a></li>
 +
  <li><a href="#">About us</a>
 +
    <ul>
 +
    <li><a href="?page=nanoscience" onclick="">Nanoscience</a></li>
 +
    <li><a href="?page=topmaster" onclick="">Top Master</a></li>
 +
    <li><a href="?page=recom" onclick="">Recommendations</a></li>
 +
    </ul>
 +
  </li>
 +
  <li><a href="?page=contact">Contact</a></li>
 +
  <li class="lilast"><a href="?page=registration">Registration</a></li>
 +
  </ul>
 +
</div>
 +
</section>
 +
 +
 +
<div class="main-col">
  
  

Revision as of 16:44, 27 October 2017


Sponsors