Template:Team:Uppsala/styles
From 2013.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | <html> | + | |
+ | <html> | ||
<style type="text/css"> | <style type="text/css"> | ||
Line 21: | Line 22: | ||
+ | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
*{ | *{ | ||
margin: 0px; | margin: 0px; | ||
padding: 0px; | padding: 0px; | ||
- | |||
border: none; | border: none; | ||
} | } | ||
+ | section, footer, nav{ | ||
+ | display: block; | ||
+ | } | ||
- | |||
body{ | body{ | ||
Line 61: | Line 40: | ||
height: 100%; | height: 100%; | ||
- | background-image: url(../image/bakgrund3.png); | + | background-image: url(../image/bakgrund3.png); |
} | } | ||
Line 74: | Line 53: | ||
} | } | ||
- | + | ||
+ | header { | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | } | ||
#logo_img{ | #logo_img{ | ||
Line 103: | Line 87: | ||
height: 55px; | height: 55px; | ||
} | } | ||
- | + | nav { | |
+ | } | ||
+ | section | ||
+ | { | ||
+ | min-height: 1300px; | ||
+ | padding: 20px; | ||
+ | } | ||
+ | |||
footer | footer | ||
{ | { | ||
Line 113: | Line 104: | ||
.home-knapp | .home-knapp | ||
{ | { | ||
- | position: relative;left:15px;top:- | + | position: relative;left:15px;top:-84px; |
width: 15%; | width: 15%; | ||
float: left; | float: left; | ||
Line 123: | Line 114: | ||
padding-right: 10px; | padding-right: 10px; | ||
z-index: 1; | z-index: 1; | ||
- | + | ||
} | } | ||
#list_type1{width: 110px;}#list_type2{width: 80px;}#list_type3{width: 120px;}#list_type4{width: 150px;} | #list_type1{width: 110px;}#list_type2{width: 80px;}#list_type3{width: 120px;}#list_type4{width: 150px;} | ||
+ | nav ul ul { | ||
+ | display: none; | ||
+ | z-index: 1; | ||
+ | } | ||
nav ul li:hover > ul { | nav ul li:hover > ul { | ||
Line 145: | Line 140: | ||
nav ul li | nav ul li | ||
{ | { | ||
- | padding-top: | + | padding-top: 1.4%; |
float: left; | float: left; | ||
- | height: | + | height: 44px; |
} | } | ||
Line 154: | Line 149: | ||
text-align: center; | text-align: center; | ||
display: block; | display: block; | ||
- | text-decoration: | + | text-decoration: none; |
} | } | ||
.nav-text2{ | .nav-text2{ | ||
Line 182: | Line 177: | ||
border-radius: 0px; | border-radius: 0px; | ||
padding: 0px; | padding: 0px; | ||
- | position: | + | position: absolute; |
top: 100%; | top: 100%; | ||
- | |||
- | |||
} | } | ||
nav ul ul li { | nav ul ul li { | ||
Line 191: | Line 184: | ||
width: 150px; | width: 150px; | ||
float: none; | float: none; | ||
- | + | position: relative; | |
} | } | ||
nav ul ul li a { | nav ul ul li a { | ||
Line 200: | Line 193: | ||
background: #0089d1; | background: #0089d1; | ||
} | } | ||
+ | |||
+ | #bottom-pic { | ||
+ | width: 100%; | ||
+ | height: 200px; | ||
+ | margin-top: 50px; | ||
+ | } | ||
+ | |||
+ | #project-description { | ||
+ | padding-top: 30px; | ||
+ | width: 100%; | ||
+ | border-bottom: 1px solid #22409a; | ||
+ | padding-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #grid-matrix { | ||
+ | width: 64%; | ||
+ | float: left; | ||
+ | padding-top: 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/1/18/Vision.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/1/1b/Chassi.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/f/fd/Society.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/6/6f/Safty.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; | ||
+ | } |
Revision as of 19:11, 15 August 2013