Template:Team:DukeProtocol/CSS
From 2014.igem.org
(Difference between revisions)
(Created page with "<html xmlns="http://www.w3.org/1999/xhtml"> <!--THIS STYLE SHEET IS FOR THE PROTOCOLS PAGE --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <sty...") |
|||
(75 intermediate revisions not shown) | |||
Line 12: | Line 12: | ||
} | } | ||
- | # | + | #protosection { |
- | width: | + | /*width: 50%; |
- | height: | + | height: 500px; |
- | + | padding-left:%; | |
- | + | padding-top:-15%; | |
- | padding- | + | padding-bottom:50%;*/ |
- | + | margin-right:2.5%; | |
- | margin- | + | margin-left:2.5%; |
- | margin- | + | color: #ffffff; |
- | z-index: | + | z-index:50; |
} | } | ||
- | + | #protosection h2 { | |
- | + | color: #ffffff; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #protogrid { | |
- | + | float:left; | |
- | + | width:50%; | |
- | + | overflow:hidden; | |
- | + | margin-left:2.5%; | |
+ | margin-top:5%; | ||
+ | padding-bottom:30%; | ||
+ | padding-right:45%; | ||
} | } | ||
- | . | + | /* Makes the square protocol buttons */ |
- | + | .protobutt { | |
+ | display:block; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | border:none; | ||
+ | line-height:50px; | ||
+ | color:#f5f5f5; | ||
+ | text-align:center; | ||
+ | text-decoration:none; | ||
+ | opacity: 1; | ||
+ | background: #0736A4; | ||
+ | font-size:16px; | ||
+ | font-weight:bold; | ||
+ | overflow:hidden; | ||
+ | -webkit-transition: all 0.5s ease; | ||
+ | -moz-transition: all 0.5s ease; | ||
+ | -o-transition: all 0.5s ease; | ||
+ | /*margins must be half of the change in size*/ | ||
+ | margin: 0px 0px; | ||
+ | line-height:200%; | ||
} | } | ||
- | |||
- | |||
- | |||
- | + | .protobutt:hover { | |
- | + | background-color: #0000ff; | |
+ | opacity: 1; | ||
+ | /*margins must be negative half of the change in size*/ | ||
+ | margin: 0px 0px; | ||
+ | /* Glow effect */ | ||
+ | -webkit-box-shadow: 0px 0px 20px rgba(7, 54, 164, 0); | ||
+ | -moz-box-shadow: 0px 0px 20px rgba(7, 54, 164, 0; | ||
+ | box-shadow: 0px 0px 20px rgba(7, 54, 164, 0); | ||
} | } | ||
- | |||
- | |||
- | |||
- | + | .pro { | |
- | color:# | + | font-size:1em; |
+ | color:#fff; | ||
+ | margin-top: 15px; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | .pro img { | |
float: left; | float: left; | ||
+ | padding: 10px 10px 5px 0px; /* top right bottom left */ | ||
+ | width:130px; | ||
+ | height:190px; | ||
} | } | ||
- | + | .pro h2 { | |
color:#FFFFFF; | color:#FFFFFF; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</style> | </style> | ||
</head> | </head> | ||
</html> | </html> |
Latest revision as of 16:57, 6 October 2014