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...")
 
 
(411 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
{{KU_Leuven_Test}}
+
<html>
−
{{KU_Leuven_Test/css}}
+
−
<html>
+
  
 
<style>
 
<style>
−
#main{  
+
/*********************/
−
     background-color: transparent;
+
/*      PAGES      */
−
     border-style: solid;
+
/********************/
−
     border: 0px solid transparent;
+
/* in this section the parts of the page are defined in space and background */
−
     border-bottom: 5px solid #8b7a57;  
+
 
 +
 
 +
 
 +
#headimg {
 +
     position:relative;
 +
     border:0;
 +
     padding:0;
 +
     margin:0;
 +
    width:100%;  
 
}
 
}
  
−
#centernav:hover #main { /* this is active when your mouse moves is over the item */
+
#summarywrapper {
−
     border-style: solid;
+
     top:0;
−
     border-bottom: 0px solid transparent;
+
    position: relative;
 +
     border:0;
 +
    display: block;
 +
    opacity:0.95;
 +
    padding:0;
 +
    width:100%;
 +
    height:auto;
 +
    background-color: #f3efe7;
 +
    overflow:hidden;
 
}
 
}
  
−
</style>
+
.subsections {
 +
    position: relative;
 +
    display: block;
 +
    top:0;
 +
    width:90%;
 +
    height:auto;
 +
    padding:0% 5% 0% 5%;
 +
    opacity:0.95;
 +
    background-color: #f3efe7; 
 +
    z-index:2;
 +
}
  
−
<div id="headimg">
+
/*********************/
−
<div id="topimg">
+
/*      Head        */
−
</div>
+
/*********************/
−
</div>
+
  
−
<div id="summarywrapper">
+
#topimg {
 +
    position:fixed;
 +
    z-index: 0;
 +
    width: 100%;
 +
    height:100%;
 +
   
 +
}
  
−
<div id="scrolldown">
+
#hiddenimg {
−
<img src="https://static.igem.org/mediawiki/2015/1/1d/KU_Leuven_Arrows_wiki.png" alt="Scroll down" height="100%" >
+
    position:relative;
−
</div>
+
    visibility:hidden;
 +
    width:100%;
 +
    top:0;
 +
    left:0;
 +
    display:block;
 +
}
  
−
<div id="logoiGEMKUL">
+
#logowrapper {
−
  <img src="https://static.igem.org/mediawiki/2015/2/23/Team_KU_Leuven_banner.jpg"  alt="Logo" height="100%" >
+
    display:block;
−
</div>
+
    position:relative;
 +
    left:10px;
 +
    width:100%;
 +
    background-color: #f3efe7;   
 +
}   
  
−
<div class="summary">
+
#scrolldown {
−
<text class="center">
+
    position:relative;
−
<h2>Our Project</h2>
+
    height:40px;
−
<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>
+
    width:40px;
−
</text>
+
    display:block;
−
</div>
+
    color: #FFFFFF;
 +
    z-index:1; 
 +
}
  
 +
#scrolldown img {
 +
    position:relative;
 +
    height:100%;
 +
}
  
−
<div class="summary">
+
#center {
−
<text class="center">
+
    position:relative;
−
<h2>Recent activity</h2>
+
    width:60%;
−
<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>
+
    bottom:-20%;
−
</text>
+
    display:inline-block;
−
</div>
+
    z-index:1;
 +
}
  
−
<div class="summary">
+
#pagetitle {
−
<text class="center">
+
    display:block;
−
<h2>Accomplishments</h2>
+
−
<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>
+
−
</text>
+
−
</div>
+
  
−
<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">
+
#logoiGEMKUL {  /*this is our logo*/ 
 +
    z-index:1;
 +
    position:relative;
 +
    top:-20px;
 +
    left: -4.5%;
 +
    display: inline-block;
 +
    width:15%;
 +
    opacity: 0.95;
 +
    background-color: #f3efe7;
 +
}
  
−
<div class="subsectionswrapper">
+
#logoiGEMKUL img{
−
<div Class="subsection">
+
    width:80%;
−
<a href="https://2015.igem.org/Team:KU_Leuven/Team">
+
    left:5%;
−
<div class="subimg">
+
}
−
<img src="https://static.igem.org/mediawiki/2015/9/9d/KU_Leuven_test_Kasia.jpg" width="100%" height="100%" >
+
−
</div>
+
−
<div class="subtext">
+
−
<h2>Team</h2>
+
−
</div>
+
−
</a>
+
−
</div>
+
  
−
<div class="whitespace">
+
#summarylogos { 
−
</div>
+
    z-index:1;
 +
    position:relative;
 +
    display:inline-block; 
 +
    opacity: 0.95;
 +
    right:-10px;
 +
    top:-20px;
 +
    bottom:0;
 +
    width:17%;
 +
    background-color: #f3efe7;
 +
}
  
−
<div Class="subsection">
+
#summarylogofacebook { 
−
<a href="https://2015.igem.org/Team:KU_Leuven/Wetlab">
+
    display:inline-block;
−
<div class="subimg">
+
    position:relative;
−
<img src="https://static.igem.org/mediawiki/2015/8/8a/KU_Leuven_test_Astrid.jpg" width="100%" height="100%" >
+
    width:15%;
−
</div>
+
}
−
<div class="subtext">
+
−
<h2>Wet Lab</h2>
+
−
</div>
+
−
</a>
+
−
</div>
+
  
−
<div class="whitespace">
+
#summarylogotwitter { 
−
</div>
+
    display:inline-block;
 +
    position:relative;
 +
    width:15%;
 +
}
  
−
<div Class="subsection">
+
#summarylogomail { 
−
<a href="https://2015.igem.org/Team:KU_Leuven/Modeling">
+
    display:inline-block;
−
<div class="subimg">
+
    position:relative;
−
<img src="https://static.igem.org/mediawiki/2015/d/de/KU_Leuven_test_Laurens.jpg" width="100%" height="100%" >
+
    width:15%;
−
</div>
+
}
−
<div class="subtext">
+
−
<h2>Modeling</h2>
+
−
</div>
+
−
</a>
+
−
</div>
+
  
−
<div class="whitespace">
+
/*********************/
−
</div>
+
/*    Summary      */
 +
/********************/
 +
     
 +
.summary {
 +
    position: relative;
 +
    margin: 5% 20% 0% auto;
 +
    border:0;
 +
    top:0;
 +
    padding:0;
 +
    width:60%;
 +
    display: block;
 +
    background-color: #f3efe7;
 +
    color: #808080;
 +
    font-family: 'Handlee';
 +
    font-size:1.2em;
 +
}
  
−
<div Class="subsection">
+
#more1 { 
−
<a href="https://2015.igem.org/Team:KU_Leuven/Project">
+
    display:inline-block;
−
<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">
+
#more2 { 
−
</div>
+
    display:inline-block;
 +
}
  
−
<div Class="subsection">
+
#more3 { 
−
<a href="https://2015.igem.org/Team:KU_Leuven/Business">
+
    display:inline-block;
−
<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>Business</h2>
+
−
</div>
+
−
</a>
+
−
</div>
+
  
−
<div class="whitespace">
+
#more4 { 
−
</div>
+
    display:inline-block;
 +
}
  
−
<div Class="subsection">
+
#more5 { 
−
<a href="https://2015.igem.org/Team:KU_Leuven/Journal">
+
    display:inline-block;
−
<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>Journal</h2>
+
−
</div>
+
−
</a>
+
−
</div>
+
  
−
</div>
+
#comingsoon {
−
</div>
+
    position:relative;
 +
    display:inline-block; 
 +
    font-size: 3.0em;
 +
    font-weight: bold;
 +
    color: #4A4A4A;
 +
    background-color:#f3efe7;
 +
    font-family: 'Handlee';
 +
    text-align:center;
 +
    padding:5% 0;
 +
    bottom:5%;
 +
    opacity:0.95;
 +
}
  
−
<div class="center" id="footer">
+
/*********************/
−
<div class="sponsorsleft">
+
/* subsections references */
−
  <div id="kuleuven">
+
/*********************/
−
  <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>
+
−
  <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>
+
  
 +
.subtext {
 +
    position:relative;
 +
    margin: 5% 5px 5% 0;
 +
}
  
 +
.subsectionwrapper {
 +
    display:table; 
 +
    table-layout: fixed;
 +
    width:70%;
 +
    margin:auto;
 +
}
 +
 +
.subtextrow {
 +
    display: table-row;
 +
    width:15%;
 +
    vertical-align:top;
 +
    wrap-text: normal;
 +
    color: #808080;
 +
    background: #ddd1b8;
 +
    border-radius: 30px 30px 0px 0px;
 +
}
 +
 +
.subimgrowm {
 +
    display: table-row;
 +
    width:15%;
 +
    vertical-align:top;
 +
    wrap-text: normal;
 +
    color: #808080;
 +
}
 +
 +
.subimgreadmore {
 +
    display: table-row;
 +
    width:15%;
 +
    vertical-align:top;
 +
    wrap-text: normal;
 +
    color: #808080;
 +
    background-color: #ddd1b8;
 +
}
 +
 +
.subimgrow {
 +
    display: table-row;
 +
    width:15%;
 +
    background: linear-gradient(#f3efe7,#ddd1b8);
 +
    wrap-text: normal;
 +
}
 +
 +
.subimgrowm {
 +
    display:none;
 +
}
 +
 +
 +
.whitespace {
 +
    display: table-cell;
 +
    background-color: #f3efe7;
 +
    width:5%;
 +
}
 +
 +
.subtext {
 +
    background-color: #ddd1b8;
 +
    border-radius: 20px 20px 0px 0px;
 +
}
 +
 +
.subtext h2 {
 +
    font-size: 2.0em;
 +
}
 +
 +
.subtext p {
 +
    margin:5% 5% 5% 5%;
 +
    text-align: justify;
 +
    font-size: 1.0em;
 +
}
 +
 +
.subtext a:hover {
 +
    text-decoration:none;
 +
}
 +
 +
.readmorebutton {
 +
    display: table-cell;
 +
    text-align:left;
 +
    margin:5% 0%;
 +
}
 +
 +
@media screen and (max-width: 1000px) {
 +
 +
.summary {
 +
    margin: 5% 5% 0% auto;
 +
    border:0;
 +
    top:0;
 +
    padding:0;
 +
    width:90%;
 +
}
 +
 +
 +
/*********************/
 +
/* subsections references */
 +
/*********************/
 +
 +
.subsectionwrapper {
 +
    display:table;
 +
    table-layout: fixed;
 +
    width:100%;
 +
    margin:auto;
 +
}
 +
 +
.subtextrow, .subimgrow, .subimgreadmore {
 +
    display:none;
 +
}
 +
 +
 +
.subimgrowm  {
 +
    display: table-row;
 +
    width:15%;
 +
    wrap-text: normal;
 +
    color: #808080;
 +
}
 +
 +
.subtextm a {
 +
    margin: 5%;
 +
}
 +
 +
.subimg {
 +
    display: table-cell;
 +
    width:50px;
 +
    min-height:50px;
 +
}
 +
 +
.subtext {
 +
    position:relative;
 +
    display: table-cell;
 +
    width:80%;
 +
    vertical-align:middle;
 +
    background-color:transparent;
 +
}
 +
 +
 +
 +
.whitespace {
 +
    display: table-cell;
 +
    width:5%;
 +
}
 +
 +
 +
.subtext a {
 +
    position:relative;
 +
    margin: 5% 5px 5% 0;
 +
}
 +
 +
 +
.subtextm a:hover {
 +
    text-decoration:none;
 +
}
 +
 +
 +
}
 +
 +
#eppendorf, #bioke, #kuleuven, #lrd, #youreca, #sigma, #egilab, #kolo, #thermofisher, #solvay, #medicine, #bioscenter, #imec, #genzyme, #gips, #regensys, #gimv, #machery, #vwr, .logosmall{
 +
    opacity: 0.4;
 +
}
 +
 +
#eppendorf:hover, #bioke:hover, #kuleuven:hover, #lrd:hover, #youreca:hover, #sigma:hover, #egilab:hover, #kolo:hover, #thermofisher:hover, #solvay:hover, #medicine:hover, #bioscenter:hover, #imec:hover, #genzyme:hover, #gips:hover, #regensys:hover, #gimv:hover, #machery:hover, #vwr:hover, .logosmall:hover {
 +
    opacity: 1;
 +
}
 +
 +
 +
</style>
  
 
</html>
 
</html>

Latest revision as of 16:32, 10 September 2015