Template:Team:Uppsala/Index styles

From 2013.igem.org

(Difference between revisions)
(Created page with " #main_frame { min-height: 1800px; width: 950px; margin: 20px auto; border: 1px solid ligth gray; border-radius: 15px; box-shadow: ...")
 
(One intermediate revision not shown)
Line 1: Line 1:
 +
<html>
 +
<style type="text/css">
 +
#main_frame {
#main_frame {
min-height: 1800px;
min-height: 1800px;
Line 9: Line 12:
}
}
 +
 +
 +
h1 {
 +
        color:#0089d1;
 +
}
 +
 +
h3 {
 +
        color:#0089d1;
 +
}
 +
 +
#bottom-pic {
 +
width: 100%;
 +
height: 200px;
 +
margin-top: 50px;
 +
}
 +
 +
#team-div{
 +
width: 100%;
 +
margin-left:auto;
 +
margin-right:auto;
 +
/*border-top: 1px solid #22409a;*/
 +
clear: both;
 +
}
 +
 +
#team-pic{
 +
position: center;
 +
/*padding-top: 10px;*/
 +
margin-left: 100px;
 +
height:400px;
 +
width:700px;
 +
border:solid 3px;
 +
margin-top:10px;
 +
 +
}
 +
 +
 +
.team-text {
 +
float: right;
 +
padding-left: 1px;
 +
 +
}
 +
 +
 +
#profile-div{
 +
width: 100%;
 +
margin-left:auto;
 +
margin-right:auto;
 +
border-bottom: 1px solid #22409a;
 +
margin-bottom: 10px;
 +
margin-top: 20px;
 +
clear: both;
 +
}
 +
 +
#profile_pic{
 +
position: left;
 +
float:left;
 +
height:270px;
 +
width:250px;
 +
/*border:solid 3px;*/
 +
margin-top:20px;
 +
}
 +
 +
 +
#profile_pic_right{
 +
position: right;
 +
/* padding-top: px;*/
 +
float:right;
 +
height:270px;
 +
width:250px;
 +
/*border:solid 3px;*/
 +
margin-top:20px;
 +
 +
}
 +
 +
#container_right{
 +
height:270px;
 +
padding-top:0px;
 +
width:650px;
 +
/*border:solid 3px;*/
 +
float:right;
 +
margin-top:15px;
 +
}
 +
/*section * {border: solid 1px;}*/
 +
 +
 +
#container_left{
 +
height:270px;
 +
padding-top:0px;
 +
width:650px;
 +
/*border:solid 3px;*/
 +
float:left;
 +
margin-top:15px;
 +
}
 +
 +
 +
.profile-text {
 +
float: right;
 +
padding-left: 1px;
 +
 +
}
 +
 +
 +
#project-description {
 +
width: 100%;
 +
border-bottom: 1px solid #22409a;
 +
padding-bottom: 10px;
 +
        clear:both
 +
 +
}
 +
 +
 +
#grid-matrix {
 +
width: 64%;
 +
float: left;
 +
padding-top: 20px;
 +
        padding-bottom: 20px;
 +
}
 +
 +
#sidebar {
 +
width: 34%;
 +
float: right;
 +
padding-top: 20px;
 +
}
 +
 +
#twitter-feed {
 +
padding-top:20px;
 +
}
 +
 +
#grid-a {
 +
width: 276.5px; float: left;
 +
height: 276.5px; border: 3px solid;
 +
background-image: url(https://static.igem.org/mediawiki/2013/1/1f/Background-new.png);
 +
}
 +
 +
#grid-b {
 +
width: 276.5px; float: right;
 +
height: 276.5px; border: 3px solid;
 +
        background-image: url(https://static.igem.org/mediawiki/2013/f/f1/Vision_%281%29.png);
 +
}
 +
 +
#grid-c {
 +
width: 276.5px; float: left;
 +
height: 276.5px; border: 3px solid;
 +
margin-top: 20px;
 +
        background-image: url(https://static.igem.org/mediawiki/2013/a/a7/Metabolic_engineering.png);
 +
 +
}
 +
 +
#grid-d {
 +
width: 276.5px; float: right;
 +
height: 276.5px; border: 3px solid;
 +
margin-top: 20px;
 +
        background-image: url(https://static.igem.org/mediawiki/2013/6/68/Chassi2_%281%29.png);
 +
}
 +
 +
#grid-e {
 +
width: 276.5px; float: left;
 +
height: 276.5px; border: 3px solid;
 +
margin-top: 20px;
 +
        background-image: url(https://static.igem.org/mediawiki/2013/5/50/Society_and_safety.png);
 +
}
 +
 +
#grid-f {
 +
width: 276.5px; float: right;
 +
height: 276.5px; border: 3px solid;
 +
margin-top: 20px;
 +
        background-image: url(https://static.igem.org/mediawiki/2013/archive/6/64/20130816124745%21Achievements.png);
 +
}
 +
 +
 +
/* Hover effect on grid pictures begin */
 +
 +
#grid-a img {
 +
  -webkit-transition: opacity 0.2s ease-in-out;
 +
  -moz-transition: opacity 0.2s ease-in-out;
 +
  -o-transition: opacity 0.2s ease-in-out;
 +
  transition: opacity 0.2s ease-in-out;
 +
}
 +
 +
#grid-a img.top:hover {
 +
  opacity:0;
 +
}
 +
 +
#grid-b img {
 +
  -webkit-transition: opacity 0.2s ease-in-out;
 +
  -moz-transition: opacity 0.2s ease-in-out;
 +
  -o-transition: opacity 0.2s ease-in-out;
 +
  transition: opacity 0.2s ease-in-out;
 +
}
 +
 +
#grid-b img.top:hover {
 +
  opacity:0;
 +
}
 +
 +
#grid-c img {
 +
  -webkit-transition: opacity 0.2s ease-in-out;
 +
  -moz-transition: opacity 0.2s ease-in-out;
 +
  -o-transition: opacity 0.2s ease-in-out;
 +
  transition: opacity 0.2s ease-in-out;
 +
}
 +
 +
#grid-c img.top:hover {
 +
  opacity:0;
 +
}
 +
 +
#grid-d img {
 +
  -webkit-transition: opacity 0.2s ease-in-out;
 +
  -moz-transition: opacity 0.2s ease-in-out;
 +
  -o-transition: opacity 0.2s ease-in-out;
 +
  transition: opacity 0.2s ease-in-out;
 +
}
 +
 +
#grid-d img.top:hover {
 +
  opacity:0;
 +
}
 +
 +
#grid-e img {
 +
  -webkit-transition: opacity 0.2s ease-in-out;
 +
  -moz-transition: opacity 0.2s ease-in-out;
 +
  -o-transition: opacity 0.2s ease-in-out;
 +
  transition: opacity 0.2s ease-in-out;
 +
}
 +
 +
#grid-e img.top:hover {
 +
  opacity:0;
 +
}
 +
 +
#grid-f img {
 +
  -webkit-transition: opacity 0.2s ease-in-out;
 +
  -moz-transition: opacity 0.2s ease-in-out;
 +
  -o-transition: opacity 0.2s ease-in-out;
 +
  transition: opacity 0.2s ease-in-out;
 +
}
 +
 +
#grid-f img.top:hover {
 +
  opacity:0;
 +
}
 +
 +
/* Hover effect in grid pictures end
 +
Grid pictures styling begin */
 +
 +
.top {
 +
width: 277px;
 +
}
 +
 +
.grid-pic {
 +
width: 276.5px;
 +
}
 +
 +
.grid-test {
 +
width: 200px;
 +
}

Latest revision as of 15:57, 22 August 2013