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

(Created page with "hahaha")
 
Line 1: Line 1:
−
hahaha
+
<html>
 +
 
 +
<link href='http://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope' rel='stylesheet' type='text/css'>
 +
 
 +
<style>
 +
 
 +
/*********************/
 +
/* 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;
 +
   
 +
  }
 +
 
 +
 
 +
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';
 +
    text-align:center;
 +
   
 +
 
 +
}
 +
 
 +
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:40%;
 +
    background-color: #f3efe7;
 +
}
 +
 
 +
.subsections {
 +
    position: relative;
 +
    display: block;
 +
    margin:0 auto;
 +
    border:0;
 +
    padding:0;
 +
    width:100%;
 +
    height:100%;
 +
}
 +
 
 +
 
 +
#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;
 +
    top:3px;
 +
    border-style: solid;
 +
    border: 0px solid transparent;
 +
    border-bottom: 5px solid transparent;   
 +
}
 +
 
 +
.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-bottom: 5px solid #8b7a57;
 +
}
 +
 
 +
 
 +
/*********************/
 +
/*      Head        */
 +
/*********************/
 +
 
 +
#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;
 +
}
 +
 
 +
/*********************/
 +
/*    Summary      */
 +
/********************/
 +
 
 +
 
 +
#scrolldown {
 +
    position:absolute;
 +
    top:0;
 +
    left:0;
 +
    display: block;
 +
    width:100%;
 +
    height:30%;
 +
    color: #FFFFFF;     
 +
}
 +
 
 +
#scrolldown img {
 +
    position:absolute;
 +
    height:80%;
 +
    top:15%;
 +
    left:50%;
 +
-moz-transform:translateX(-50%);
 +
-ms-transform:translateX(-50%);
 +
-webkit-transform:translateX(-50%);
 +
transform:translateX(-50%);
 +
}
 +
 
 +
#logoiGEMKUL {  /*this is our logo*/
 +
       
 +
    z-index:1;
 +
    position:absolute;
 +
    margin: 0 auto;
 +
    top:2.5%;
 +
    left:1%;
 +
    display: block;
 +
    height:35%;
 +
    opacity: 0.95;
 +
}
 +
     
 +
.summary {
 +
    position: relative;
 +
    margin: 2% 15% auto;
 +
    border:0;
 +
    top:30%;
 +
    padding:0;
 +
    width:70%;
 +
    height:70%;
 +
    display: block;
 +
    background-color: #f3efe7;
 +
}
 +
 
 +
.summary text {
 +
    position:absolute;
 +
    width:70%;
 +
    top: 5%;
 +
}
 +
.summary h2 {
 +
 
 +
}
 +
 
 +
.summary p {
 +
 
 +
}
 +
 
 +
 
 +
/*********************/
 +
/* subsections references */
 +
/*********************/
 +
 
 +
 
 +
.subsectionswrapper {
 +
    position: relative;
 +
    display: block;
 +
    margin:0 auto;
 +
    border:0;
 +
    padding:0;
 +
    opacity:0.9;
 +
    width:80%;
 +
    height:80%;
 +
    top:50%;
 +
    -moz-transform:translateY(-50%);
 +
    -ms-transform:translateY(-50%);
 +
    -webkit-transform:translateY(-50%);
 +
    transform:translateY(-50%);
 +
     
 +
}
 +
 
 +
.subsection {
 +
    position: relative;
 +
    display: inline-block;
 +
    width:18%;
 +
    height:80%;
 +
}
 +
 
 +
.whitespace {
 +
    position: relative;
 +
    display: inline-block;
 +
    width:5%;
 +
    height:80%;
 +
}
 +
 
 +
.subimg {
 +
    position: absolute;
 +
    width:100%;
 +
    height:30%;   
 +
}
 +
 
 +
.subtext {
 +
    position: absolute;
 +
    top:30%;
 +
    height:70%;
 +
    width:80%;
 +
    padding: 10%;
 +
    background-color: #FFFFFF;
 +
    color: #000000;
 +
    font-family: 'Annie Use Your Telescope', cursive;
 +
}
 +
 
 +
.readmorebutton {
 +
    position: absolute;
 +
    bottom: 5%;
 +
    height:5%;
 +
}
 +
 
 +
 
 +
 
 +
/*********************/
 +
/* 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%;
 +
    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>

Revision as of 15:32, 9 July 2015