Difference between revisions of "Team:KU Leuven/Journal"

Line 1: Line 1:
−
{{KU_Leuven_Test}}
+
<html>
−
{{KU_Leuven/journal/css}}
+
 
−
<html>
+
<link href='http://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope' rel='stylesheet' type='text/css'>
  
 
<style>
 
<style>
−
#journal{  
+
 
 +
/*********************/
 +
/* General STYLING */
 +
/*********************/
 +
 
 +
/* In this section general styling elements are specified*/
 +
 
 +
.center, #centernav{
 +
position:relative;
 +
        left:50%;
 +
-moz-transform:translateX(-50%);
 +
-ms-transform:translateX(-50%);
 +
-webkit-transform:translateX(-50%);
 +
transform:translateX(-50%);
 +
}
 +
 
 +
 
 +
html,body{
 +
    border-color:white;
 +
    text-align: center;
 +
 
 +
}
 +
 
 +
#globalWrapper {   
 +
    width: 100%;
 +
    height: 100%;
 +
    border: 0px;
 +
    background-color: transparent;
 +
    margin: 0px;
 +
    padding: 0px;
 +
   
 +
  }
 +
 
 +
#content, #bodyContent {   
 +
    width: 100%;
 +
    height: 100%;
 +
    border: 0px;
 +
    background-color: transparent;
 +
    margin: 0px;
 +
    padding: 0px;
 +
   
 +
  }
 +
 
 +
 
 +
html, body, .wrapper {   
 +
    width: 100%;
 +
    height: 100%;
 +
    margin:0 auto;
 +
    background-color: #f3efe7;
 +
    border-color: #f3efe7;
 +
  }
 +
 
 +
 
 +
/*********************/
 +
/* Text STYLING */
 +
/*********************/
 +
 
 +
p, h1, h2, h3, a, img {
 +
    color: #808080;
 +
    font-family: 'Annie Use Your Telescope';
 +
    text-align:center;
 +
   
 +
 
 +
}
 +
 
 +
p, a, span {
 +
    font-size: 1.3em;
 +
    text-align: justify;
 +
}
 +
 
 +
span {
 +
    text-transform: capitalize;
 +
}
 +
 
 +
h2 {
 +
    font-size: 2.2em;
 +
    font-weight: bold;
 +
}
 +
 
 +
/*********************/
 +
/*      PAGES      */
 +
/********************/
 +
 
 +
/* in this section the parts of the page are defined in space and background */
 +
 
 +
 
 +
 
 +
.main-nav {
 +
    position:fixed;
 +
    width:100%;
 +
    height: 30px;
 +
    top: 17px;
 +
    left:0;
 +
    display: block;
 +
    background-color: #ddd1b8;
 +
    z-index: 5;
 +
}
 +
 
 +
#headimg {
 +
    position: relative;
 +
    margin:0 auto;
 +
    border:0;
 +
    top:0;
 +
    padding:0;
 +
    width:100%;
 +
    height:78.5%;
 +
}
 +
 
 +
#summarywrapper {
 +
    position: relative;
 +
    border:0;
 +
    display: block;
 +
    opacity:0.95;
 +
    padding:0;
 +
    width:100%;
 +
    height:40%;
 +
    background-color: #f3efe7;
 +
}
 +
 
 +
.subsections {
 +
    position: relative;
 +
    display: block;
 +
    margin:0 auto;
 +
    border:0;
 +
    padding:0;
 +
    width:100%;
 +
    height:100%;
 +
}
 +
 
 +
 
 +
#footer {
 +
    opacity:0.95;
 +
    position:relative;
 +
    display: block;
 +
    height:250px;
 +
    width:100%;
 +
    background-color: #f3efe7;
 +
}
 +
 
 +
 
 +
/*********************/
 +
/* Nav STYLING */
 +
/*********************/
 +
 
 +
/* All the elements in the navigation bar are defined in this section */
 +
 
 +
#top_menu_under, #top_menu_14 {
 +
    opacity:0.8;
 +
}
 +
 
 +
#top_menu_inside {
 +
left:15%;
 +
}
 +
 
 +
#logoiGEM {
 +
    position:absolute;
 +
    display:inline-block;
 +
    height:30px;
 +
    width:36px;
 +
    left:2.5%;
 +
    top:0px;
 +
}
 +
 
 +
#logoiGEM a{
 +
    position:absolute;
 +
    height:100%;
 +
    width:100%;
 +
    z-index:1;
 +
}
 +
 
 +
#logoKUL {
 +
    position:absolute;
 +
    display:inline-block;
 +
    height:30px;
 +
    right:2.5%;
 +
    top:0px;
 +
}
 +
 
 +
.nav-item {
 +
    position:relative;
 +
    display: inline-block;
 +
    height:100%;
 
     background-color: transparent;
 
     background-color: transparent;
 +
    top:3px;
 
     border-style: solid;
 
     border-style: solid;
 
     border: 0px solid transparent;
 
     border: 0px solid transparent;
−
     border-bottom: 5px solid #8b7a57;     
+
     border-bottom: 5px solid transparent;     
 
}
 
}
  
−
#centernav:hover #journal {  /* this is active when your mouse moves is over the item */
+
.nav-item a:link, a:visited { /* this is active when the link is visited or when it is active (i think ;) */
 +
    display: block;
 +
    width: 120px;
 +
    font-weight: bold;
 +
    color: #8b7a57;
 +
    background-color: #ddd1b8;
 +
    text-align: center;
 +
    padding-bottom: 1%;
 +
    text-decoration: none;
 +
    text-transform: uppercase;
 +
}
 +
 
 +
.nav-item:hover {  /* this is active when your mouse moves is over the item */
 
     border-style: solid;
 
     border-style: solid;
−
     border-bottom: 0px solid transparent;
+
     border-bottom: 5px solid #8b7a57;
 
}
 
}
  
−
</style>
 
  
 +
/*********************/
 +
/*      Head        */
 +
/*********************/
  
−
<div id="headimg">
+
#topimg {
−
<div id="topimg">
+
    position:fixed;
−
</div>
+
    top:0;
−
</div>
+
    left:0;
 +
    z-index: 0;
 +
    width: 100%;
 +
    height:100%;
 +
    background: url(https://static.igem.org/mediawiki/2015/6/68/KULeuven2015Zebra_spots.png)no-repeat center center fixed;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
}
  
−
<div id="summarywrapper">
+
/*********************/
 +
/*    Summary      */
 +
/********************/
  
−
<div id="scrolldown">
 
−
<img src="https://static.igem.org/mediawiki/2015/1/1d/KU_Leuven_Arrows_wiki.png" alt="Scroll down" height="100%" >
 
−
</div>
 
  
−
<div id="logoiGEMKUL">
+
#scrolldown {
−
  <img src="https://static.igem.org/mediawiki/2015/2/23/Team_KU_Leuven_banner.jpg"  alt="Logo" height="100%" >
+
    position:absolute;
−
</div>
+
    top:0;
 +
    left:0;
 +
    display: block;
 +
    width:100%;
 +
    height:30%;
 +
    color: #FFFFFF;     
 +
}
  
−
<div class="summary">
+
#scrolldown img {
−
<text class="center">
+
    position:absolute;
−
<h2>Journal</h2>
+
    height:80%;
−
<p> Rincewind had generally been considered by his tutors to be a natural wizard in the same way that fish are natural mountaineers. He probably would have been thrown out of Unseen University anyway--he couldn't remember spells and smoking made him feel ill. -- Terry Pratchett, "The Light Fantastic"
+
    top:15%;
−
</p>
+
    left:50%;
−
</text>
+
-moz-transform:translateX(-50%);
−
</div>
+
-ms-transform:translateX(-50%);
−
</div>
+
-webkit-transform:translateX(-50%);
 +
transform:translateX(-50%);
 +
}
  
−
<div class="subsections">
+
#logoiGEMKUL {  /*this is our logo*/
 +
       
 +
    z-index:1;
 +
    position:absolute;
 +
    margin: 0 auto;
 +
    top:2.5%;
 +
    left:1%;
 +
    display: block;
 +
    height:35%;
 +
    opacity: 0.95;
 +
}
 +
     
 +
.summary {
 +
    position: relative;
 +
    margin: 2% 15% auto;
 +
    border:0;
 +
    top:30%;
 +
    padding:0;
 +
    width:70%;
 +
    height:70%;
 +
    display: block;
 +
    background-color: #f3efe7;
 +
}
  
−
<div class="subsectionswrapper">
+
.summary text {
−
<div Class="subsection">
+
    position:absolute;
−
<div class="subimg">
+
    width:70%;
−
<img src="https://static.igem.org/mediawiki/2015/9/9d/KU_Leuven_test_Kasia.jpg" width="100%" height="100%" >
+
    top: 5%;
−
</div>
+
}
−
<div class="subtext">
+
.summary h2 {
−
<h2>Newsfeed</h2>
+
−
<p>Abilities or he perfectly pretended so strangers be exquisite. Oh to another chamber pleased imagine do in. Went me rank at last loud shot an draw. Excellent so to no sincerity smallness. Removal request delight if on he we.</p>
+
−
<div class="readmorebutton">
+
−
<a href="https://2015.igem.org/Team:KU_Leuven/Journal/Newsfeed"><img src="" alt="Read more" width="100%" height="100%" ></a>
+
−
</div>
+
−
</div>
+
−
</div>
+
  
 +
}
  
−
<div class="whitespace">
+
.summary p {
−
</div>
+
  
−
<div Class="subsection">
+
}
−
<div class="subimg">
+
−
<img src="https://static.igem.org/mediawiki/2015/d/de/KU_Leuven_test_Laurens.jpg" width="100%" height="100%" >
+
−
</div>
+
−
<div class="subtext">
+
−
<h2>Timeline</h2>
+
−
<p>Sportsman do offending supported extremity breakfast by listening. Decisively advantages nor expression unpleasing she led met. Estate was tended ten boy nearer seemed.</p>
+
−
<div class="readmorebutton">
+
−
<a href="https://2015.igem.org/Team:KU_Leuven/Journal/Timeline"><img src="" alt="Read more" width="100%" height="100%" ></a>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
  
−
<div class="center" id="footer">
+
 
−
<div class="sponsorsleft">
+
/*********************/
−
  <div id="kuleuven">
+
/* subsections references */
−
  <a href="http://www.kuleuven.be/bioscenter/">
+
/*********************/
−
  <img src="https://static.igem.org/mediawiki/2015/0/08/KULEUVEN_groot.png" alt="bioSCENTer" width="100%">
+
 
−
  </a>
+
 
−
  </div>
+
.subsectionswrapper {
−
  <div id="youreca">
+
    position: relative;
−
  <a href="http://www.kuleuven.be/bioscenter/">
+
    display: block;
−
  <img src="https://static.igem.org/mediawiki/2015/4/4f/KU_Leuven_YOURECA.png" alt="YOURECA" width="100%">
+
    margin:0 auto;
−
   </a>
+
    border:0;
−
  </div>
+
    padding:0;
−
</div>
+
    opacity:0.9;
−
<div id="footercenter" >
+
    width:80%;
−
  <div id="bioscenter">
+
    height:80%;
−
  <a href="http://www.kuleuven.be/bioscenter/">
+
    top:50%;
−
     <img src="https://static.igem.org/mediawiki/2015/3/3c/KU_Leuven_Logo_BioSCENTer.png" alt="bioSCENTer" width="100%">
+
    -moz-transform:translateY(-50%);
−
  </a> 
+
    -ms-transform:translateY(-50%);
−
  </div>
+
    -webkit-transform:translateY(-50%);
−
  <div id="footerimg">
+
    transform:translateY(-50%);
−
  <img src="https://static.igem.org/mediawiki/2015/b/b9/KU_Leuven_Zebra_spots_wiki_footer_main.png" width="100%">
+
     
−
  </div>
+
}
−
</div>
+
 
−
<div class="sponsorsright">
+
.subsection {
−
  <div id="medicine">
+
    position: relative;
−
  <a href="http://www.kuleuven.be/bioscenter/">
+
    display: inline-block;
−
  <img src="https://static.igem.org/mediawiki/2015/2/22/KU_Leuven_Medicine.png" alt="Faculty of Medicine" width="100%">
+
    width:18%;
−
  </a>
+
    height:80%;
−
  </div>
+
}
−
  <div id="solvay">
+
 
−
  <a href="http://www.kuleuven.be/bioscenter/">
+
.whitespace {
−
  <img src="https://static.igem.org/mediawiki/2015/8/89/KU_Leuven_Solvay_Transparant.png" alt="SOLVAY" width="100%">
+
    position: relative;
−
   </a>
+
    display: inline-block;
−
  </div>
+
    width:5%;
−
</div>
+
    height:80%;
−
<div id="fixer">
+
}
−
</div>
+
 
−
</div>
+
.subimg {
 +
    position: absolute;
 +
    width:100%;
 +
    height:30%;    
 +
}
 +
 
 +
.subtext {
 +
    position: absolute;
 +
    top:30%;
 +
    height:70%;
 +
    width:80%;
 +
    padding: 10%;
 +
    background-color: #FFFFFF;
 +
    color: #000000;
 +
    font-family: 'Annie Use Your Telescope', cursive;
 +
}
 +
 
 +
.readmorebutton {
 +
     position: absolute;
 +
    bottom: 5%;
 +
    height:5%;
 +
}
 +
 
 +
 
 +
 
 +
/*********************/
 +
/* Footer */
 +
/*********************/
 +
 
 +
.sponsorsleft {
 +
    position:absolute;
 +
    height:60%;
 +
    width:35%;
 +
    display: inline;
 +
    left:0;
 +
    bottom:0;
 +
}
 +
 
 +
#kuleuven {
 +
    position:absolute;
 +
    width:30%;
 +
    display: inline;
 +
    left:20%;
 +
    bottom:14%;
 +
}
 +
 
 +
#youreca {
 +
    position:absolute;
 +
    width:30%;
 +
    display: inline;
 +
    right:5%;
 +
    bottom:15%;
 +
}
 +
 
 +
#footercenter {
 +
    position:absolute;
 +
    height:60%;
 +
    display: inline;
 +
    left:35%;
 +
    right:35%;
 +
    bottom:0;
 +
}
 +
 
 +
 
 +
#bioscenter {
 +
    position:absolute;
 +
    width:50%;
 +
    display: inline;
 +
    left:15%;
 +
    bottom:50%;
 +
    z-index:2;
 +
}
 +
 
 +
#footerimg {
 +
    position:absolute;
 +
    height:75%;
 +
    display: inline;
 +
    left:0;
 +
    right:0;
 +
    bottom:0;
 +
}
 +
 
 +
#footerimg img{
 +
    position:absolute;
 +
    bottom:-30px;
 +
    left:0;
 +
    opacity: 0.5;
 +
    z-index:1;
 +
 
 +
}
 +
 
 +
.sponsorsright {
 +
    position:absolute;
 +
    height:60%;
 +
    width:35%;
 +
    display: inline;
 +
    right:0;
 +
    bottom:0;
 +
}
 +
 
 +
#medicine {
 +
    position:absolute;
 +
    width:25%;
 +
    display: inline;
 +
    right:20%;
 +
    bottom:0;
 +
}
 +
 
 +
#solvay {
 +
    position:absolute;
 +
    width:40%;
 +
    display: inline;
 +
    left:5%;
 +
    bottom:0;
 +
}
 +
 
 +
#fixer {
 +
    position:absolute;
 +
    height:30px;
 +
    width:100%;
 +
    bottom:-30px;
 +
    background-color: #f3efe7;
 +
    opacity:0.95;
 +
}
 +
 
 +
/************/
 +
/* LINKS */
 +
/***********/
 +
 
 +
a:link {
 +
    
 +
}
 +
 
 +
 
 +
a:visited {
 +
   
 +
}
 +
 
 +
a:hover {
 +
   
 +
}
 +
 
 +
a:active {
 +
 
 +
 +
}
 +
 
 +
</style>
  
 
</html>
 
</html>

Revision as of 15:27, 9 July 2015