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

 
(775 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<!DOCTYPE html>
 
 
<html>
 
<html>
−
<style type="text/css">
 
−
 
  
 +
<style>
 
/*********************/
 
/*********************/
−
/* MENU STYLING */
+
/*     PAGES      */
−
/*********************/
+
/********************/
 +
/* in this section the parts of the page are defined in space and background */
  
−
.menu {  
+
.main-nav {
−
     position: fixed;
+
     position:fixed;
−
     left: 0px;
+
     width:100%;
−
     top: 18px;
+
    height: 30px;
−
     padding: 0.7em 1.2em 0em 0,7em;
+
     top: 17px;
−
     background-color: #52bcec;
+
     left:0;
 +
    display: block;
 +
     background-color: #ddd1b8;
 +
    z-index: 5;
 
}
 
}
  
−
.menu ul {
+
#headimg {
−
     list-style-type: none;
+
     position:relative;
−
     margin: 0;
+
     border:0;
−
     padding: 0;
+
     padding:0;
−
     overflow: hidden;
+
     margin:0;
 +
    width:100%;  
 
}
 
}
  
−
.menu li {
+
#summarywrapper {
−
     float: left;
+
     top:0;
 +
    position: relative;
 +
    border:0;
 +
    display: block;
 +
    opacity:0.95;
 +
    padding:0;
 +
    width:100%;
 +
    height:auto;
 +
    background-color: #f3efe7;
 +
    overflow:hidden;
 
}
 
}
  
−
.menu a:link, a:visited {
+
.subsections {
 +
    position: relative;
 
     display: block;
 
     display: block;
−
     width: 120px;
+
     padding:5%;
−
     font-weight: bold;
+
     top:0;
−
     color: #2a5389;
+
     width:90%;
−
     background-color: #52bcec;
+
     height:auto;
−
     text-align: center;
+
     opacity:0.95;
−
     padding: 4px;
+
     background-color: #f3efe7;
−
    text-decoration: none;
+
−
    text-transform: uppercase;
+
 
}
 
}
  
−
.menu a:hover, a:active {
+
#footer {
−
     background-color: #52bcec;
+
    top:0;
 +
    opacity:0.95;
 +
    position:relative;
 +
    display: block;
 +
    height:240px;
 +
    width:100%;
 +
     background-color: #f3efe7;
 
}
 
}
  
  
 
/*********************/
 
/*********************/
−
/* Titles */
+
/*       Head        */
 
/*********************/
 
/*********************/
  
−
.tile {
+
#topimg {
−
padding: 0.7em 0.7em 0.7em 0.7em;
+
    position:fixed;
−
margin: 0.25em 0.25em 0.25em 0.25em;
+
    z-index: 0;
−
width: 24%;
+
    width: 100%;
−
height: 11em;
+
    height:100%;
−
display: inline-block;
+
    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;
 
}
 
}
  
−
.tile img {
+
#hiddenimg {
−
display: block;
+
    position:relative;
−
float: right;
+
    visibility:hidden;
−
width: 40%;
+
    width:100%;
 +
    top:0;
 +
    left:0;
 +
    display:block;
 
}
 
}
  
−
.tile h2 {
+
#logowrapper {
−
display: block;
+
    display:block;
−
float: left;
+
    position:relative;
−
width: 60%;
+
    left:0;
−
font-size: 1.2em;
+
    width:100%;
−
margin: 0em 0em 0.5em 0em;
+
    background-color: #f3efe7;  
 +
}   
 +
 
 +
#scrolldown {
 +
    position:relative;
 +
    width:10%;
 +
    display:block;
 +
    height:20%;
 +
    color: #FFFFFF;
 +
    z-index:1;
 +
 
 
}
 
}
  
−
.tile h3 {
+
#scrolldown img {
−
display: block;
+
    position:relative;
−
float: left;
+
    height:100%;
−
width: 60%;
+
−
font-size: 1em;
+
 
}
 
}
  
−
.tile p {
+
#center {
−
display: block;
+
    position:relative;
−
clear: both;
+
    width:60%;
−
width: 100%;
+
    bottom:-20%;
−
font-size: 0.875em;
+
    display:inline-block;
−
padding: 0.5em 0em 0em 0em;
+
    z-index:1;
−
text-align: justify;
+
 
}
 
}
  
−
/************/
+
#pagetitle {
−
/* LINKS */
+
    display:block;
−
/***********/
+
  
−
a:link {
 
−
    text-decoration: none;
 
−
color: #B0B000;
 
 
}
 
}
  
 +
#logoiGEMKUL {  /*this is our logo*/ 
 +
    z-index:1;
 +
    position:relative;
 +
    bottom:0;
 +
    display: inline-block;
 +
    width:15%;
 +
    opacity: 0.95;
 +
    background-color: #f3efe7;
 +
}
  
−
a:visited {
+
#logoiGEMKUL img{  
−
     text-decoration: none;
+
     width:80%;
−
color: #B09300;
+
    left:10%;
 
}
 
}
  
−
a:hover {
+
#summarylogos {  
−
     text-decoration: none;
+
     z-index:1;
−
color: #E3E300;
+
    position:relative;
−
border-bottom: 1px #E3E300 dotted;
+
    display:inline-block; 
 +
    opacity: 0.95;
 +
    right:0;
 +
    bottom:0;
 +
    width:15%;
 +
    background-color: #f3efe7;
 
}
 
}
  
−
a:active {
+
#summarylogofacebook {  
−
     text-decoration: underline;
+
     display:inline-block;  
−
color: #2EB82E;
+
}
 +
 
 +
#summarylogotwitter { 
 +
    display:inline-block;
 +
}
 +
 
 +
#summarylogomail { 
 +
    display:inline-block;  
 
}
 
}
  
 
/*********************/
 
/*********************/
−
/*      PAGES      */
+
/*     Summary     */
 
/********************/
 
/********************/
−
 
+
     
−
.page topimg {
+
.summary {
−
     min-height: 100%;
+
     position: relative;
−
     width: 100%;
+
     margin: 5% 20% 5% auto;
−
    height: auto;
+
     border:0;
−
     position:fixed;
+
 
     top:0;
 
     top:0;
 +
    padding:0;
 +
    width:60%;
 +
    display: block;
 +
    background-color: #f3efe7;
 +
    color: #808080;
 +
    font-family: 'Handlee';
 +
    font-size:1.2em;
 +
}
 +
 +
#comingsoon {
 +
    position:relative;
 +
    font-size: 3.0em;
 +
    font-weight: bold;
 +
    color: #4A4A4A;
 +
    font-family: 'Handlee';
 +
    text-align:center;
 +
    margin:5% 0;
 +
    bottom:5%;
 +
}
 +
 +
 +
/*********************/
 +
/* subsections references */
 +
/*********************/
 +
 +
.subsectionwrapper {
 +
    display:table;
 +
    table-layout: fixed;
 +
    width:90%;
 +
    margin:auto;
 +
}
 +
 +
.subimgrow, .subtextrow {
 +
    display: table-row;
 +
    width:15%;
 +
    vertical-align:top;
 +
    wrap-text: normal;
 +
    color: #808080;
 +
    font-family: 'Handlee';
 +
}
 +
 +
.whitespace {
 +
    display: table-cell;
 +
    width:20px;
 +
}
 +
 +
.subimg, .subtext {
 +
    display: table-cell;
 +
}
 +
 +
.subtext p {
 +
    margin:5% 0%;
 +
}
 +
 +
.readmorebutton {
 +
    display: table-cell;
 +
    text-align:left;
 +
    margin:5% 0%;
 +
}
 +
 +
 +
/*********************/
 +
/* Footer */
 +
/*********************/
 +
 +
.sponsorsleft {
 +
    position:absolute;
 +
    height:60%;
 +
    width:35%;
 +
    display: inline;
 
     left:0;
 
     left:0;
 +
    bottom:0;
 
}
 
}
  
−
.toppage {
+
#kuleuven {
 +
    position:absolute;
 +
    width:30%;
 +
    display: inline;
 +
    left:20%;
 +
    bottom:14%;
 +
}
  
 +
#krd {
 +
    position:absolute;
 +
    width:30%;
 +
    display: inline;
 +
    left:45%;
 +
    top:0%;
 
}
 
}
  
−
</style>
+
#youreca {
 +
    position:absolute;
 +
    width:30%;
 +
    display: inline;
 +
    right:5%;
 +
    bottom:15%;
 +
}
  
−
<div class=menu>
+
#footercenter {
−
<ul>
+
    position:absolute;
−
  <li><a href="#home">Home</a></li>
+
    height:100%;
−
  <li><a href="#news">News</a></li>
+
    display: inline;
−
  <li><a href="#contact">Contact</a></li>
+
    left:35%;
−
  <li><a href="#about">About</a></li>
+
    right:35%;
−
</ul>
+
    bottom:0;
−
</div>
+
}
  
−
<div class=page>
 
−
<div id=topimg>
 
−
[File:Team_KU_Leuven_test_img.jpg]
 
−
</div>
 
−
<div class=header>
 
−
<h1>This is a header</h1>
 
−
</div>
 
  
−
<div class=main>
+
#bioscenter {
−
<p>Pleased him another was settled for. Moreover end horrible endeavor entrance any families. Income appear extent on of thrown in admire. Stanhill on we if vicinity material in. Saw him smallest you provided ecstatic supplied. Garret wanted expect remain as mr. Covered parlors concern we express in visited to do. Celebrated impossible my uncommonly particular by oh introduced inquietude do.</p>
+
    position:absolute;
−
</div>
+
    width:50%;
 +
    display: block;
 +
    left:15%;
 +
    bottom:50%;
 +
    z-index:2;
 +
}
 +
 
 +
#bioscenter img{
 +
    position:absolute;
 +
    left:0;
 +
    bottom:0;
 +
    z-index:2;
 +
}
 +
 
 +
#footerimg {
 +
    position:absolute;
 +
    width:100%;
 +
    height:20%;
 +
    display: block;
 +
    left:0;
 +
    right:0;
 +
    bottom:-30px;
 +
}
 +
 
 +
#footerimg img{
 +
    position:absolute;
 +
    bottom:0;
 +
    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;
 +
}
 +
 
 +
</style>
  
−
</div>
+
</html>

Latest revision as of 08:57, 7 August 2015