Difference between revisions of "Template:KU Leuven/main/css"

(Created page with "{{KU_Leuven_Test}} {{KU_Leuven_Test/css}} <html> <style> #main{ background-color: transparent; border-style: solid; border: 0px solid transparent; border-botto...")
 
Line 1: Line 1:
−
{{KU_Leuven_Test}}
+
<html>
−
{{KU_Leuven_Test/css}}
+
 
−
<html>
+
<link href='http://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope' rel='stylesheet' type='text/css'>
  
 
<style>
 
<style>
−
#main{  
+
 
 +
/*********************/
 +
/* 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;
 +
   
 +
  }
 +
 
 +
#bodyContent p, .printfooter, .visualClear {
 +
    display:hidden;
 +
}
 +
 
 +
 
 +
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';
 +
    margin:0;
 +
    padding:0;
 +
    border:0;
 +
 
 +
}
 +
 
 +
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:150%;
 +
    background-color: #f3efe7;
 +
    overflow:hidden;
 +
}
 +
 
 +
.subsections {
 +
    position: relative;
 +
    display: block;
 +
    margin:0 auto;
 +
    border:0;
 +
    padding:0;
 +
    width:100%;
 +
    height:100%;
 +
    opacity:0.95;
 +
    background-color: #f3efe7;
 +
}
 +
 
 +
 
 +
#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 #main {  /* 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>
 
  
−
<div id="headimg">
+
/*********************/
−
<div id="topimg">
+
/*      Head        */
−
</div>
+
/*********************/
−
</div>
+
  
−
<div id="summarywrapper">
+
#topimg {
 +
    position:fixed;
 +
    top:0;
 +
    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="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">
+
/*********************/
−
  <img src="https://static.igem.org/mediawiki/2015/2/23/Team_KU_Leuven_banner.jpg"  alt="Logo" height="100%" >
+
/*    Summary      */
−
</div>
+
/********************/
  
−
<div class="summary">
 
−
<text class="center">
 
−
<h2>Our Project</h2>
 
−
<p>Their could can widen ten she any. As so we smart those money in. Am wrote up whole so tears sense oh. Absolute required of reserved in offering no. How sense found our those gay again taken the. Had mrs outweigh desirous sex overcame. Improved property reserved disposal do offering me.</p>
 
−
</text>
 
−
</div>
 
  
 +
#scrolldown {
 +
    position:absolute;
 +
    margin: 0 auto;
 +
    top:0;
 +
    left:0;
 +
    width:100%;
 +
    display: block;
 +
    height:8%;
 +
    color: #FFFFFF;     
 +
}
  
−
<div class="summary">
 
−
<text class="center">
 
−
<h2>Recent activity</h2>
 
−
<p>In no impression assistance contrasted. Manners she wishing justice hastily new anxious. At discovery discourse departure objection we. Few extensive add delighted tolerably sincerity her. Law ought him least enjoy decay one quick court. Expect warmly its tended garden him esteem had remove off. Effects dearest staying now sixteen nor improve.</p>
 
−
</text>
 
−
</div>
 
  
−
<div class="summary">
+
#scrolldown img {
−
<text class="center">
+
    position:absolute;
−
<h2>Accomplishments</h2>
+
    height:80%;
−
<p>Able an hope of body. Any nay shyness article matters own removal nothing his forming. Gay own additions education satisfied the perpetual. If he cause manor happy. Without farther she exposed saw man led. Along on happy could cease green oh.</p>
+
    top:15%;
−
</text>
+
    left:50%;
−
</div>
+
-moz-transform:translateX(-50%);
 +
-ms-transform:translateX(-50%);
 +
-webkit-transform:translateX(-50%);
 +
transform:translateX(-50%);
 +
}
  
−
<div class="summary">
 
−
<text class="center">
 
−
<h2>Future</h2>
 
−
<p>She who arrival end how fertile enabled. Brother she add yet see minuter natural smiling article painted. Themselves at dispatched interested insensible am be prosperous reasonably it. In either so spring wished. Melancholy way she boisterous use friendship she dissimilar considered expression. Sex quick arose mrs lived. Mr things do plenty others an vanity myself waited to. Always parish tastes at as mr father dining at</p>
 
−
</text>
 
−
</div>
 
−
</div>
 
  
−
<div class="subsections">
+
.summaryimg {
 +
    position:absolute;
 +
    width:100%;
 +
    opacity:0.5;
 +
    left:50%;
 +
   
 +
}
  
−
<div class="subsectionswrapper">
+
#logoiGEMKUL {  /*this is our logo*/
−
<div Class="subsection">
+
    top:0.4%;   
−
<a href="https://2015.igem.org/Team:KU_Leuven/Team">
+
    z-index:1;
−
<div class="subimg">
+
    position:absolute;
−
<img src="https://static.igem.org/mediawiki/2015/9/9d/KU_Leuven_test_Kasia.jpg" width="100%" height="100%" >
+
    margin: auto;
−
</div>
+
    left:1%;
−
<div class="subtext">
+
    display: block;
−
<h2>Team</h2>
+
    height:9.35%;
−
</div>
+
    opacity: 0.95;
−
</a>
+
}
−
</div>
+
   
 +
.summary {
 +
    position: relative;
 +
    margin: 2% 15% auto;
 +
    border:0;
 +
    top:8%;
 +
    padding:0;
 +
    width:70%;
 +
    height:15%;
 +
    display: block;
 +
    background-color: #f3efe7;
 +
}
  
−
<div class="whitespace">
+
.summary text {
−
</div>
+
    position:absolute;
 +
    width:70%;
 +
    top: 5%;
 +
}
 +
.summary h2 {
  
−
<div Class="subsection">
+
}
−
<a href="https://2015.igem.org/Team:KU_Leuven/Wetlab">
+
−
<div class="subimg">
+
−
<img src="https://static.igem.org/mediawiki/2015/8/8a/KU_Leuven_test_Astrid.jpg" width="100%" height="100%" >
+
−
</div>
+
−
<div class="subtext">
+
−
<h2>Wet Lab</h2>
+
−
</div>
+
−
</a>
+
−
</div>
+
  
−
<div class="whitespace">
+
.summary p {
−
</div>
+
  
−
<div Class="subsection">
+
}
−
<a href="https://2015.igem.org/Team:KU_Leuven/Modeling">
+
−
<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>Modeling</h2>
+
−
</div>
+
−
</a>
+
−
</div>
+
  
−
<div class="whitespace">
+
/*********************/
−
</div>
+
/* subsections references */
 +
/*********************/
  
−
<div Class="subsection">
 
−
<a href="https://2015.igem.org/Team:KU_Leuven/Project">
 
−
<div class="subimg">
 
−
<img src="https://static.igem.org/mediawiki/2015/a/a6/KU_Leuven_test_Eline.jpg" width="100%" height="100%" >
 
−
</div>
 
−
<div class="subtext">
 
−
<h2>Project</h2>
 
−
</div>
 
−
</a>
 
−
</div>
 
  
−
<div class="whitespace">
+
.subsectionswrapper {
−
</div>
+
    position: relative;
 +
    display: block;
 +
    margin:0 auto;
 +
    border:0;
 +
    padding:0;
 +
    opacity:0.9;
 +
    width:100%;
 +
    height:80%;
 +
    top:50%;
 +
    -moz-transform:translateY(-50%);
 +
    -ms-transform:translateY(-50%);
 +
    -webkit-transform:translateY(-50%);
 +
    transform:translateY(-50%);
 +
     
 +
}
  
−
<div Class="subsection">
+
.subsection {
−
<a href="https://2015.igem.org/Team:KU_Leuven/Business">
+
    position: relative;
−
<div class="subimg">
+
    display: inline-block;
−
<img src="https://static.igem.org/mediawiki/2015/d/de/KU_Leuven_test_Laurens.jpg" width="100%" height="100%" >
+
    width:12%;
−
</div>
+
    height:80%;
−
<div class="subtext">
+
    opacity:1;
−
<h2>Business</h2>
+
}
−
</div>
+
−
</a>
+
−
</div>
+
  
−
<div class="whitespace">
+
.whitespace {
−
</div>
+
    position: relative;
 +
    display: inline-block;
 +
    width:2%;
 +
    height:80%;
 +
}
  
−
<div Class="subsection">
+
.subimg {
−
<a href="https://2015.igem.org/Team:KU_Leuven/Journal">
+
    position: absolute;
−
<div class="subimg">
+
    width:100%;
−
<img src="https://static.igem.org/mediawiki/2015/d/de/KU_Leuven_test_Laurens.jpg" width="100%" height="100%" >
+
    height:30%;   
−
</div>
+
}
−
<div class="subtext">
+
−
<h2>Journal</h2>
+
−
</div>
+
−
</a>
+
−
</div>
+
  
−
</div>
+
.subtext {
−
</div>
+
    position: absolute;
 +
    top:30%;
 +
    height:70%;
 +
    width:80%;
 +
    padding: 10%;
 +
    background-color: #FFFFFF;
 +
    color: #000000;
 +
    font-family: 'Annie Use Your Telescope', cursive;
 +
}
  
−
<div class="center" id="footer">
+
.readmorebutton {
−
<div class="sponsorsleft">
+
    position: absolute;
−
  <div id="kuleuven">
+
    bottom: 5%;
−
  <a href="http://www.kuleuven.be/bioscenter/">
+
     height:5%;
−
  <img src="https://static.igem.org/mediawiki/2015/0/08/KULEUVEN_groot.png" alt="bioSCENTer" width="100%">
+
}
−
  </a>
+
−
  </div>
+
−
  <div id="youreca">
+
−
  <a href="http://www.kuleuven.be/bioscenter/">
+
−
  <img src="https://static.igem.org/mediawiki/2015/4/4f/KU_Leuven_YOURECA.png" alt="YOURECA" width="100%">
+
−
  </a>
+
−
  </div>
+
−
</div>
+
−
<div id="footercenter" >
+
−
  <div id="bioscenter">
+
−
  <a href="http://www.kuleuven.be/bioscenter/">
+
−
     <img src="https://static.igem.org/mediawiki/2015/3/3c/KU_Leuven_Logo_BioSCENTer.png" alt="bioSCENTer" width="100%">
+
−
  </a> 
+
−
  </div>
+
−
  <div id="footerimg">
+
−
  <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">
+
−
  <div id="medicine">
+
−
  <a href="http://www.kuleuven.be/bioscenter/">
+
−
  <img src="https://static.igem.org/mediawiki/2015/2/22/KU_Leuven_Medicine.png" alt="Faculty of Medicine" width="100%">
+
−
  </a>
+
−
  </div>
+
−
  <div id="solvay">
+
−
  <a href="http://www.kuleuven.be/bioscenter/">
+
−
  <img src="https://static.igem.org/mediawiki/2015/8/89/KU_Leuven_Solvay_Transparant.png" alt="SOLVAY" width="100%">
+
−
  </a>
+
−
  </div>
+
−
</div>
+
−
<div id="fixer">
+
−
</div>
+
−
</div>
+
  
  
 +
 +
/*********************/
 +
/* 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%;ar
 +
    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 16:33, 9 July 2015