Template:Team:DukeHomePage/CSS

From 2014.igem.org

(Difference between revisions)
 
(184 intermediate revisions not shown)
Line 1: Line 1:
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
Line 5: Line 9:
<style media="screen" type="text/css">
<style media="screen" type="text/css">
-
/*hide default igem banner and reformat style into blank slate - from UVA 2013*/
+
/*hide default igem banner and reformat style into blank slate - modified from UVA 2013*/
#globalWrapper {
#globalWrapper {
Line 51: Line 55:
#footer-box {
#footer-box {
-
border:none;
+
display:none;
}
}
Line 67: Line 71:
background-color:#000;
background-color:#000;
}
}
 +
</style>
-
/*This "bodyContent" style rule controls what the formatting of the page looks like, not body, for some reason. MediaWiki logic, amirite? Also, this comment marks where my (not UVA's) code begins.*/
+
 
 +
<!--BEGIN HERE: This comment marks where actual coding on the main part of the page begins.-->
 +
 
 +
<style media="screen" type="text/css">
 +
 
 +
/*This "bodyContent" style rule controls what the formatting of the page looks like, not body, for some reason. MediaWiki logic, amirite?*/
#bodyContent {
#bodyContent {
border:none;
border:none;
background-color:#000;
background-color:#000;
-
color:#fff;
+
font-color:#fff;
font-size: 1em;
font-size: 1em;
 +
font-family: Futura, Helvetica;
}
}
-
body {
+
#bodyContent a {
-
background-color:#000;
+
text-decoration:none;
 +
color:#fff;
}
}
-
.main {
 
-
position:relative;
 
-
z-index:200;
 
-
padding:20px;
 
-
text-align:center;
 
-
}
 
-
.cthru  {
+
/*This formats the stuff at the bottom. */
-
opacity:0.6;
+
body {
-
background-color: #fff;
+
background-color:#000;
}
}
 +
/* Title font */
.big {
.big {
-
font-size: 6em;
+
font-size: 4em;
-
color:#000;
+
color:#fff;
text-transform:uppercase;
text-transform:uppercase;
-
font-weight:bold;
 
text-align:center;
text-align:center;
 +
float:center;
 +
padding-bottom:0px;
}
}
-
     
+
 
-
.round-button {
+
/* Makes the square buttons */     
 +
.sq-button {
     display:block;
     display:block;
     width:100px;
     width:100px;
     height:100px;
     height:100px;
 +
    border:none;
     line-height:50px;
     line-height:50px;
-
    border: 2px solid #f5f5f5;
 
-
    border-radius: 50%;
 
     color:#f5f5f5;
     color:#f5f5f5;
     text-align:center;
     text-align:center;
     text-decoration:none;
     text-decoration:none;
-
     opacity: 0.6;
+
     opacity: 1;
-
     background: #464646;
+
     background: #0736A4;
-
    box-shadow: 0 0 3px gray;
+
     font-size:16px;
-
     font-size:20px;
+
     font-weight:bold;
     font-weight:bold;
     overflow:hidden;
     overflow:hidden;
-
     color:#FFF;
+
     -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: 5px 5px;
 +
    line-height:200%;
}
}
-
.round-button:hover {
+
.sq-button span {
-
     background: #000;
+
    display: table-cell;
 +
    text-align: center;
 +
    vertical-align: middle;
 +
}
 +
 
 +
.sq-button:hover {
 +
     background-color: #0000ff;
     opacity: 1;
     opacity: 1;
 +
    width: 110px;
 +
    height: 110px;
 +
/*margins must be negative half of the change in size*/
 +
    margin: -5px -5px;
 +
/* 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);
}
}
-
a:visited {
+
/* So the logo is out of the way */
-
font-color:#FFF;
+
.logo {
 +
z-index:200;
 +
padding:20px;
 +
margin: 0px 100px 0px 0px;
}
}
 +
 +
.main {
 +
position:relative;
 +
z-index:100;
 +
padding:20px;
 +
text-align:center;
 +
}
 +
 +
img.mainpic {
 +
display:block;
 +
text-align:center;
 +
float:center;
 +
padding-bottom: 10px;
 +
}
 +
</style>
</style>
Line 134: Line 178:
</head>
</head>
-
 
<body>
<body>
-
<img src="https://static.igem.org/mediawiki/2014/1/1a/Mattigemlogowhite.png " align="right" alt="Duke iGEM" height="300px" width="300px">
+
<div class="main">
-
<!--black logo can be found here: https://static.igem.org/mediawiki/2014/c/ce/Mattigemlogo.png -->
+
<p class="big">
-
<!--white logo can be found here: https://static.igem.org/mediawiki/2014/1/1a/Mattigemlogowhite.png -->
+
Demonstrating Ultrasensitivity
 +
</p>
 +
<center><a href="https://2014.igem.org"><img class="mainpic" src="https://static.igem.org/mediawiki/2014/1/1a/Mattigemlogowhite.png" width="400px" height="400px" /></a></center>
 +
<!--https://2014.igem.org/File:Mattigemlogowhite.png or https://static.igem.org/mediawiki/2014/1/1a/Mattigemlogowhite.png -->
 +
</div>
</body>
</body>
</html>
</html>

Latest revision as of 14:23, 28 August 2014

Demonstrating Ultrasensitivity

Retrieved from "http://2014.igem.org/Template:Team:DukeHomePage/CSS"