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

(Created page with "hahaha")
 
 
(103 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
hahaha
+
<html>
 +
 
 +
<style>
 +
/*********************/
 +
/*      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;
 +
    border:0;
 +
    padding:0;
 +
    margin:0;
 +
    width:100%;
 +
}
 +
 
 +
#summarywrapper {
 +
    top:0;
 +
    position: relative;
 +
    border:0;
 +
    display: block;
 +
    opacity:0.90;
 +
    padding:0;
 +
    width:100%;
 +
    height:auto;
 +
    background-color: #f3efe7;
 +
    overflow:hidden;
 +
}
 +
 
 +
.subsections {
 +
    position: relative;
 +
    display: block;
 +
    top:0;
 +
    width:90%;
 +
    height:auto;
 +
    padding:5% 5% 0% 5%;
 +
    opacity:0.95;
 +
    background-color: #f3efe7; 
 +
}
 +
 
 +
 
 +
 
 +
/*********************/
 +
/*      Head        */
 +
/*********************/
 +
 
 +
#topimg {
 +
    position:fixed;
 +
    z-index: 0;
 +
    width: 100%;
 +
    height:100%;
 +
    background: url(https://static.igem.org/mediawiki/2015/1/16/KU_Leuven_Squirrel_spots.png) no-repeat center center fixed;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
}
 +
 
 +
#hiddenimg {
 +
    position:relative;
 +
    visibility:hidden;
 +
    width:100%;
 +
    top:0;
 +
    left:0;
 +
    display:block;
 +
}
 +
 
 +
#logowrapper {
 +
    display:block;
 +
    position:relative;
 +
    left:0;
 +
    width:100%;
 +
    background-color: #f3efe7;   
 +
}   
 +
 
 +
#scrolldown {
 +
    position:relative;
 +
    width:10%;
 +
    display:block;
 +
    height:20%;
 +
    color: #FFFFFF;
 +
    z-index:1;
 +
 
 +
}
 +
 
 +
#scrolldown img {
 +
    position:relative;
 +
    height:40%;
 +
}
 +
 
 +
#center {
 +
    position:relative;
 +
    width:60%;
 +
    bottom:-20%;
 +
    display:inline-block;
 +
    z-index:1;
 +
}
 +
 
 +
#pagetitle {
 +
    display:block;
 +
 
 +
}
 +
 
 +
#logoiGEMKUL {  /*this is our logo*/ 
 +
    z-index:1;
 +
    position:relative;
 +
    top:-40px;
 +
    display: inline-block;
 +
    width:15%;
 +
    opacity: 0.95;
 +
    background-color: #f3efe7;
 +
}
 +
 
 +
#logoiGEMKUL img{
 +
    width:80%;
 +
    left:10%;
 +
    top:0;
 +
}
 +
 
 +
#summarylogos { 
 +
    z-index:1;
 +
    position:relative;
 +
    display:inline-block; 
 +
    opacity: 0.95;
 +
    right:0;
 +
    bottom:0;
 +
    width:15%;
 +
    background-color: #f3efe7;
 +
}
 +
 
 +
#summarylogofacebook { 
 +
    display:inline-block;
 +
}
 +
 
 +
#summarylogotwitter { 
 +
    display:inline-block;
 +
}
 +
 
 +
#summarylogomail { 
 +
    display:inline-block;
 +
}
 +
 
 +
/*********************/
 +
/*    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;
 +
}
 +
 
 +
#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 */
 +
/*********************/
 +
 
 +
/*********************/
 +
/*    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;
 +
}
 +
 
 +
#more1 { 
 +
    display:inline-block;
 +
}
 +
 
 +
#more2 { 
 +
    display:inline-block;
 +
}
 +
 
 +
#more3 { 
 +
    display:inline-block;
 +
}
 +
 
 +
#more4 { 
 +
    display:inline-block;
 +
}
 +
 
 +
#more5 { 
 +
    display:inline-block;
 +
}
 +
 
 +
#comingsoon {
 +
    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;
 +
}
 +
 
 +
/*********************/
 +
/* subsections references */
 +
/*********************/
 +
 
 +
.subsectionwrapper {
 +
    display:table;
 +
    background-color: #ddd1b8; 
 +
    table-layout: fixed;
 +
    width:70%;
 +
    margin:auto;
 +
}
 +
 
 +
 
 +
 
 +
.subtextrow, .subimgrowm, .subimgreadmore {
 +
    display: table-row;
 +
    width:15%;
 +
    vertical-align:top;
 +
    wrap-text: normal;
 +
    color: #808080;
 +
}
 +
 
 +
.subimgrow {
 +
    display: table-row;
 +
    width:15%;
 +
    background-color: #f3efe7;
 +
    wrap-text: normal;
 +
}
 +
 
 +
.subimgrowm {
 +
    display:none;
 +
}
 +
 
 +
 
 +
.whitespace {
 +
    display: table-cell;
 +
    background-color: #f3efe7;
 +
    width:5%;
 +
}
 +
 
 +
.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;
 +
}
 +
 
 +
.subimg {
 +
    display: table-cell;
 +
    width:80px;
 +
    min-height:80px;
 +
}
 +
 
 +
.subtext {
 +
    position:relative;
 +
    display: table-cell;
 +
    width:80%;
 +
    vertical-align:middle;
 +
}
 +
 
 +
 
 +
.whitespace {
 +
    display: table-cell;
 +
    width:5%;
 +
}
 +
 
 +
 
 +
.subtext a {
 +
    position:relative;
 +
    margin: 5% 5px 5% 0;
 +
}
 +
 
 +
.subtext a:hover {
 +
    text-decoration:none;
 +
}
 +
 
 +
 
 +
</style>
 +
 
 +
</html>

Latest revision as of 18:48, 9 September 2015