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

 
(765 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<!DOCTYPE html>
 
 
<html>
 
<html>
−
<style>
 
−
 
  
 +
<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     */
 
/********************/
 
/********************/
−
 
+
     
−
.topimg {
+
.summary {
−
     width: 100%;
+
     position: relative;
−
     height: auto;
+
     margin: 5% 20% 5% auto;
−
     position:fixed;
+
     border:0;
 
     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;
−
     margin: 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>
+
}
  
  
 +
#bioscenter {
 +
    position:absolute;
 +
    width:50%;
 +
    display: block;
 +
    left:15%;
 +
    bottom:50%;
 +
    z-index:2;
 +
}
  
−
<div class=topimg>
+
#bioscenter img{
−
<img src="https://static.igem.org/mediawiki/2015/6/68/Team_KU_Leuven_test_img.jpg" alt="testimg">
+
    position:absolute;
−
</div>
+
    left:0;
 +
    bottom:0;
 +
    z-index:2;
 +
}
  
−
<div class=page>
+
#footerimg {
 +
    position:absolute;
 +
    width:100%;
 +
    height:20%;
 +
    display: block;
 +
    left:0;
 +
    right:0;
 +
    bottom:-30px;
 +
}
  
−
<div class=header>
+
#footerimg img{
−
<h1>This is a header</h1>
+
    position:absolute;
−
</div>
+
    bottom:0;
 +
    left:0;
 +
    opacity: 0.5;
 +
    z-index:1;
  
−
<div class=main>
+
}
−
<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>
+
 
−
</div>
+
.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