Team:SYSU-Software/demo.css

From 2013.igem.org

(Difference between revisions)
Line 10: Line 10:
.wrapper {
.wrapper {
width: 980px;
width: 980px;
-
margin: 0 auto;
+
margin: 50px auto 0;
}
}
Line 39: Line 39:
.demo-content {
.demo-content {
width: 100%;
width: 100%;
-
margin: 10px auto;
+
margin: 35px auto;
 +
overflow: hidden;
 +
padding-bottom: 67px;
}
}
 +
 +
.hexagon {
 +
display: inline-block;
 +
float: left;
 +
width: 234px;
 +
height: 235px;
 +
margin-top: 67px;
 +
margin: 2px;
 +
}
 +
 +
 +
.hexagon.margin {
 +
margin-left: 121px;
 +
}
 +
 +
.hexagon .top-triangle {
 +
display: block;
 +
width: 0;
 +
height: 0;
 +
overflow: hidden;
 +
border-bottom: 67px solid #ffe14b;
 +
border-left: 117px dotted transparent;
 +
border-right: 117px dotted transparent;
 +
 +
transition:border-bottom 0.5s;
 +
-moz-transition:border-bottom 0.5s; /* Firefox */
 +
-webkit-transition:border-bottom 0.5s; /* Safari and Chrome */
 +
-o-transition:border-bottom 0.5s; /* Opera */
 +
}
 +
 +
.hexagon span {
 +
display: block;
 +
width: 234px;
 +
height: 168px;
 +
line-height: 59px;
 +
text-align: center;
 +
background-color: #ffe14b;
 +
font-size: 11px;
 +
font-family: arial, Veradana, sans-serif;
 +
 +
transition:background-color 0.5s;
 +
-moz-transition:background-color 0.5s; /* Firefox */
 +
-webkit-transition:background-color 0.5s; /* Safari and Chrome */
 +
-o-transition:background-color 0.5s; /* Opera */
 +
}
 +
 +
.hexagon .bottom-triangle {
 +
display: block;
 +
width: 0;
 +
height: 0;
 +
overflow: hidden;
 +
border-top: 67px solid #ffe14b;
 +
border-left: 117px dotted transparent;
 +
border-right: 117px dotted transparent;
 +
 +
transition:border-top 0.5s;
 +
-moz-transition:border-top 0.5s; /* Firefox */
 +
-webkit-transition:border-top 0.5s; /* Safari and Chrome */
 +
-o-transition:border-top 0.5s; /* Opera */
 +
}
 +
 +
.hexagon:hover .top-triangle {
 +
border-bottom: 67px solid #D8B91E;
 +
}
 +
 +
.hexagon:hover span {
 +
background-color: #D8B91E;
 +
}
 +
 +
.hexagon:hover .bottom-triangle {
 +
border-top: 67px solid #D8B91E;
 +
}
 +
 +
 +
 +
/* type1 */
 +
.hexagon.block1 .top-triangle {
 +
border-bottom: 67px solid #a8dbd2;
 +
}
 +
 +
.hexagon.block1 span {
 +
background-color: #a8dbd2;
 +
}
 +
 +
.hexagon.block1 .bottom-triangle {
 +
border-top: 67px solid #a8dbd2;
 +
}
 +
 +
.hexagon.block1:hover .top-triangle {
 +
border-bottom: 67px solid #88C2B8;
 +
}
 +
 +
.hexagon.block1:hover span {
 +
background-color: #88C2B8;
 +
}
 +
 +
.hexagon.block1:hover .bottom-triangle {
 +
border-top: 67px solid #88C2B8;
 +
}
 +
 +
/* type2 */
 +
.hexagon.block2 .top-triangle {
 +
border-bottom: 67px solid #445d72;
 +
}
 +
 +
.hexagon.block2 span {
 +
background-color: #445d72;
 +
}
 +
 +
.hexagon.block2 .bottom-triangle {
 +
border-top: 67px solid #445d72;
 +
}
 +
 +
.hexagon.block2:hover .top-triangle {
 +
border-bottom: 67px solid #2F3942;
 +
}
 +
 +
.hexagon.block2:hover span {
 +
background-color: #2F3942;
 +
}
 +
 +
.hexagon.block2:hover .bottom-triangle {
 +
border-top: 67px solid #2F3942;
 +
}
 +
 +
 +
/* type3 */
 +
.hexagon.block3 .top-triangle {
 +
border-bottom: 67px solid #0c1d2b;
 +
}
 +
 +
.hexagon.block3 span {
 +
background-color: #0c1d2b;
 +
}
 +
 +
.hexagon.block3 .bottom-triangle {
 +
border-top: 67px solid #0c1d2b;
 +
}
 +
 +
.hexagon.block3:hover .top-triangle {
 +
border-bottom: 67px solid #131518;
 +
}
 +
 +
.hexagon.block3:hover span {
 +
background-color: #131518;
 +
}
 +
 +
.hexagon.block3:hover .bottom-triangle {
 +
border-top: 67px solid #131518;
 +
}
 +
 +
 +
/* type4 */
 +
.hexagon.block4 .top-triangle {
 +
border-bottom: 67px solid #445d72;
 +
}
 +
 +
.hexagon.block4 span {
 +
background-color: #445d72;
 +
}
 +
 +
.hexagon.block4 .bottom-triangle {
 +
border-top: 67px solid #445d72;
 +
}
 +
 +
.hexagon.block4:hover .top-triangle {
 +
border-bottom: 67px solid #0F171F;
 +
}
 +
 +
.hexagon.block4:hover span {
 +
background-color: #0F171F;
 +
}
 +
 +
.hexagon.block4:hover .bottom-triangle {
 +
border-top: 67px solid #0F171F;
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
.demo-video {
.demo-video {

Revision as of 12:58, 25 September 2013

body { font-family: Arial; font-weight: bold; }

p { word-break: break-all; }

.wrapper { width: 980px; margin: 50px auto 0; }

.divider { width: 660px; height: 2px; margin: 40px auto; background-color: #3d4a55; }

.header-text { color: #ffe14b; font-size: 25px; }

.demo-nav { width: 100%; text-align: center; height: 36px; font-size: 36px; }

.demo-nav img { width: 21px; height: 27px; }

.demo-content { width: 100%; margin: 35px auto; overflow: hidden; padding-bottom: 67px; }

.hexagon { display: inline-block; float: left; width: 234px; height: 235px; margin-top: 67px; margin: 2px; }


.hexagon.margin { margin-left: 121px; }

.hexagon .top-triangle { display: block; width: 0; height: 0; overflow: hidden; border-bottom: 67px solid #ffe14b; border-left: 117px dotted transparent; border-right: 117px dotted transparent;

transition:border-bottom 0.5s; -moz-transition:border-bottom 0.5s; /* Firefox */ -webkit-transition:border-bottom 0.5s; /* Safari and Chrome */ -o-transition:border-bottom 0.5s; /* Opera */ }

.hexagon span { display: block; width: 234px; height: 168px; line-height: 59px; text-align: center; background-color: #ffe14b; font-size: 11px; font-family: arial, Veradana, sans-serif;

transition:background-color 0.5s; -moz-transition:background-color 0.5s; /* Firefox */ -webkit-transition:background-color 0.5s; /* Safari and Chrome */ -o-transition:background-color 0.5s; /* Opera */ }

.hexagon .bottom-triangle { display: block; width: 0; height: 0; overflow: hidden; border-top: 67px solid #ffe14b; border-left: 117px dotted transparent; border-right: 117px dotted transparent;

transition:border-top 0.5s; -moz-transition:border-top 0.5s; /* Firefox */ -webkit-transition:border-top 0.5s; /* Safari and Chrome */ -o-transition:border-top 0.5s; /* Opera */ }

.hexagon:hover .top-triangle { border-bottom: 67px solid #D8B91E; }

.hexagon:hover span { background-color: #D8B91E; }

.hexagon:hover .bottom-triangle { border-top: 67px solid #D8B91E; }


/* type1 */ .hexagon.block1 .top-triangle { border-bottom: 67px solid #a8dbd2; }

.hexagon.block1 span { background-color: #a8dbd2; }

.hexagon.block1 .bottom-triangle { border-top: 67px solid #a8dbd2; }

.hexagon.block1:hover .top-triangle { border-bottom: 67px solid #88C2B8; }

.hexagon.block1:hover span { background-color: #88C2B8; }

.hexagon.block1:hover .bottom-triangle { border-top: 67px solid #88C2B8; }

/* type2 */ .hexagon.block2 .top-triangle { border-bottom: 67px solid #445d72; }

.hexagon.block2 span { background-color: #445d72; }

.hexagon.block2 .bottom-triangle { border-top: 67px solid #445d72; }

.hexagon.block2:hover .top-triangle { border-bottom: 67px solid #2F3942; }

.hexagon.block2:hover span { background-color: #2F3942; }

.hexagon.block2:hover .bottom-triangle { border-top: 67px solid #2F3942; }


/* type3 */ .hexagon.block3 .top-triangle { border-bottom: 67px solid #0c1d2b; }

.hexagon.block3 span { background-color: #0c1d2b; }

.hexagon.block3 .bottom-triangle { border-top: 67px solid #0c1d2b; }

.hexagon.block3:hover .top-triangle { border-bottom: 67px solid #131518; }

.hexagon.block3:hover span { background-color: #131518; }

.hexagon.block3:hover .bottom-triangle { border-top: 67px solid #131518; }


/* type4 */ .hexagon.block4 .top-triangle { border-bottom: 67px solid #445d72; }

.hexagon.block4 span { background-color: #445d72; }

.hexagon.block4 .bottom-triangle { border-top: 67px solid #445d72; }

.hexagon.block4:hover .top-triangle { border-bottom: 67px solid #0F171F; }

.hexagon.block4:hover span { background-color: #0F171F; }

.hexagon.block4:hover .bottom-triangle { border-top: 67px solid #0F171F; }





.demo-video { float: left; margin-left: 15px; width: 560px; height: 360px; padding: 0; }

.demo-intro { float: right; width: 360px; height: 360px; margin-right: 15px; }

.intro-header { width: 100%; }

.into-content { width: 100%; }

.intro-content img { display: block; margin: 0 auto; }

Retrieved from "http://2013.igem.org/Team:SYSU-Software/demo.css"