Team:Concordia

From 2013.igem.org

(Difference between revisions)
(Creating basic page)
Line 1: Line 1:
-
<html>
+
[[Image:Concordia_team.png|Your team picture]]<br/><br/>
-
  <head>
+
<font size=9 face="Tahoma"><center>'''Concordia's design team'''</center></font><br/><br/>
-
    <style>
+
<font size=2 face="Verdana"><center>Check out the [[Team:Concordia/Project|Project]] page for more info on our project.</center></font>
-
      /* Reset MediaWiki CSS */
+
<!--- The Mission, Experiments --->
-
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
+
-
    display:none;}
+
-
#top-section {
+
-
    border: none;
+
-
    height: 0px;}
+
-
#content {
+
-
    border: none;}
+
-
/* Radial menu CSS */
+
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
-
* { margin: 0; padding: 0; }
+
!align="center"|[[Team:Concordia|Home]]
-
body {
+
!align="center"|[[Team:Concordia/Team|Team]]
-
overflow: hidden;
+
!align="center"|[https://igem.org/Team.cgi?year=2013&team_name=Concordia Official Team Profile]
-
background: url('../images/geometry.png');
+
!align="center"|[[Team:Concordia/Project|Project]]
-
}
+
!align="center"|[[Team:Concordia/Parts|Parts Submitted to the Registry]]
-
/* generic styles for button & circular menu */
+
!align="center"|[[Team:Concordia/Modeling|Modeling]]
-
.ctrl {
+
!align="center"|[[Team:Concordia/Notebook|Notebook]]
-
position: absolute;
+
!align="center"|[[Team:Concordia/Safety|Safety]]
-
top: 30%; left: 30%;
+
!align="center"|[[Team:Concordia/Attributions|Attributions]]
-
font: 1.5em/1.13 Verdana, sans-serif;
+
|}
-
transition: .5s;
+
<br/><br/>
-
}
+
[[Image:Concordia_logo.png|center]]
-
/* generic link styles */
+
<br/><br/>
-
a.ctrl, .ctrl a {
+
-
display: block;
+
-
opacity: .56;
+
-
background: #c9c9c9;
+
-
color: #7a8092;
+
-
background-image: url('../images/logo_b_w.png');
+
-
background-size: 12.5em;
+
-
background-repeat: no-repeat;
+
-
text-align: center;
+
-
vertical-align: center;
+
-
text-decoration: none;
+
-
text-shadow: 0 -1px dimgrey;
+
-
}
+
-
a.ctrl:hover, a.ctrl:focus {
+
-
background-image: url('../images/logo.png');
+
-
opacity: 1;
+
-
}
+
-
 
+
-
.ctrl a:hover, .ctrl a:focus {
+
-
        opacity: 1;
+
-
}
+
-
a.ctrl:focus, .ctrl a:focus { outline: none; }
+
-
.button {
+
-
z-index: 2;
+
-
margin: -.625em;
+
-
width: 12.5em; height: 12.5em;
+
-
border-radius: 50%;
+
-
box-shadow: 0 0 3px 1px white;
+
-
}
+
-
/* circular menu */
+
-
.tip {
+
-
z-index: 1;
+
-
/**outline: dotted 1px white;/**/
+
-
margin: -5em;
+
-
margin-left: -9em;
+
-
left: 37%;
+
-
top: 30%;
+
-
width: 25em; height: 25em;
+
-
transform: scale(.001);
+
-
-ms-transform: scale(.001);
+
-
-webkit-transform: scale(.001);
+
-
list-style: none;
+
-
opacity: 0;
+
-
}
+
-
 
+
-
/* the ends of the menu */
+
-
/*
+
-
.tip:before, .tip:after {
+
-
position: absolute;
+
-
top: 34.3%;
+
-
width: .5em; height: 14%;
+
-
opacity: .56;
+
-
background: #c9c9c9;
+
-
content: '';
+
-
}
+
-
.tip:before {
+
-
left: 5.4%;
+
-
border-radius: .25em 0 0 .25em;
+
-
box-shadow: -1px 0 1px dimgrey, inset 1px 0 1px white, inset -1px 0 1px grey,
+
-
inset 0 1px 1px white, inset 0 -1px 1px white;
+
-
transform: rotate(-75deg);
+
-
}
+
-
.tip:after {
+
-
right: 5.4%;
+
-
border-radius: 0 .25em .25em 0;
+
-
box-shadow: 1px 0 1px dimgrey, inset -1px 0 1px white, inset 1px 0 1px grey,
+
-
inset 0 1px 1px white, inset 0 -1px 1px white;
+
-
transform: rotate(75deg);
+
-
}
+
-
*/
+
-
/* make the menu appear on click */
+
-
.button:focus + .tip {
+
-
        transform: scale(1);
+
-
        -ms-transform: scale(1);
+
-
        -webkit-transform: scale(1);
+
-
        opacity: 1;
+
-
}
+
-
/* slices of the circular menu */
+
-
.slice {
+
-
overflow: hidden;
+
-
position: absolute;
+
-
/**outline: dotted 1px yellow;/**/
+
-
width: 50%; height: 50%;
+
-
transform-origin: 100% 100%;
+
-
-ms-transform-origin: 100% 100%;
+
-
-webkit-transform-origin: 100% 100%;
+
-
}
+
-
/*
+
-
* rotate each slice at the right angle = (A/2)° + (k - (n+1)/2)*A°
+
-
* where A is the angle of 1 slice (30° in this case)
+
-
* k is the number of the slice (in {1,2,3,4,5} here)
+
-
* and n is the number of slices (5 in this case)
+
-
* formula works for odd number of slices (n odd)
+
-
* for even number of slices (n even) the rotation angle is (k - n/2)*A°
+
-
*
+
-
* after rotating, skew on Y by 90°-A°; here A° = the angle for 1 slice = 30°
+
-
*/
+
-
.slice:first-child {
+
-
    transform: rotate(-45deg) skewY(60deg);
+
-
    -ms-transform: rotate(-45deg) skewY(60deg);
+
-
    -webkit-transform: rotate(-45deg) skewY(60deg);
+
-
}
+
-
.slice:nth-child(2) {
+
-
    transform: rotate(-15deg) skewY(60deg);
+
-
    -ms-transform: rotate(-15deg) skewY(60deg);
+
-
    -webkit-transform: rotate(-15deg) skewY(60deg);
+
-
}
+
-
.slice:nth-child(3) {
+
-
    transform: rotate(15deg) skewY(60deg);
+
-
    -ms-transform: rotate(15deg) skewY(60deg);
+
-
    -webkit-transform: rotate(15deg) skewY(60deg);
+
-
}
+
-
.slice:nth-child(4) {
+
-
    transform: rotate(45deg) skewY(60deg);
+
-
    -ms-transform: rotate(45deg) skewY(60deg);
+
-
    -webkit-transform: rotate(45deg) skewY(60deg);
+
-
}
+
-
.slice:last-child {
+
-
    transform: rotate(75deg) skewY(60deg);
+
-
    -ms-transform: rotate(75deg) skewY(60deg);
+
-
    -webkit-transform: rotate(75deg) skewY(60deg);
+
-
}
+
-
/* covers for the inner part of the links so there's no hover trigger between
+
-
  star button & menu links; give them a red background to see them */
+
-
.slice:after {
+
-
position: absolute;
+
-
top: 32%; left: 32%;
+
-
width: 136%; height: 136%;
+
-
border-radius: 50%;
+
-
/* "unskew" = skew by minus the same angle by which parent was skewed */
+
-
transform: skewY(-60deg);
+
-
content: '';
+
-
}
+
-
/* menu links */
+
-
.slice a {
+
-
width: 200%; height: 200%;
+
-
border-radius: 50%;
+
-
box-shadow: 0 0 3px dimgrey, inset 0 0 4px white;
+
-
/* "unskew" & rotate by -A°/2 */
+
-
transform: skewY(-60deg) rotate(-15deg);
+
-
-ms-transform: skewY(-60deg) rotate(-15deg);
+
-
-webkit-transform: skewY(-60deg) rotate(-15deg);
+
-
background: /* lateral separators */
+
-
linear-gradient(75deg,
+
-
transparent 50%, grey 50%, transparent 54%) no-repeat 36.5% 0,
+
-
linear-gradient(-75deg,
+
-
transparent 50%, grey 50%, transparent 54%) no-repeat 63.5% 0,
+
-
/* make sure inner part is transparent */
+
-
radial-gradient(rgba(127,127,127,0) 49%,
+
-
rgba(255,255,255,.7) 51%, #c9c9c9 52%);
+
-
background-size: 15% 15%, 15% 15%, cover;
+
-
line-height: 3;
+
-
vertical
+
-
}
+
-
/* arrow for middle link */
+
-
.slice:nth-child(3) a:after {
+
-
position: absolute;
+
-
top: 13%; left: 50%;
+
-
margin: -.25em;
+
-
width: .5em; height: .5em;
+
-
box-shadow: 2px 2px 2px white;
+
-
transform: rotate(45deg);
+
-
-ms-transform: rotate(45deg);
+
-
-webkit-transform: rotate(45deg);
+
-
background: linear-gradient(-45deg, #c9c9c9 50%, transparent 50%);
+
-
content: '';
+
-
}
+
-
</style>
+
-
    <title>Index page</title>
+
-
    <link href="../css/base.css" rel="stylesheet" type="text/css">
+
-
  </head>
+
-
  <body>
+
-
    <a class='button ctrl' href='#' tabindex='1'></a>
+
-
<ul class='tip ctrl'>
+
-
<li class='slice'><a href='#'>Project</a></li>
+
-
<li class='slice'><a href='#'>Team</a></li>
+
-
<li class='slice'><a href='#'>HP</a></li>
+
-
<li class='slice'><a href='#'>Notebook</a></li>
+
-
<li class='slice'><a href='#'>Other</a></li>
+
-
<!-- <li class='slice'><a href='#'>Notebook</a></li>
+
-
<li class='slice'><a href='#'>Safety</a></li>-->
+
-
</ul>
+
-
 
+
-
</body></html>
+

Revision as of 02:43, 26 August 2013

Your team picture

Concordia's design team


Check out the Project page for more info on our project.
Home Team Official Team Profile Project Parts Submitted to the Registry Modeling Notebook Safety Attributions



Concordia logo.png



Retrieved from "http://2013.igem.org/Team:Concordia"