Template:Team:Uppsala/Index styles
From 2013.igem.org
(Difference between revisions)
Sabrijamal (Talk | contribs) (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