Team:SYSU-Software/demo.css

From 2013.igem.org

(Difference between revisions)
(Created page with "body { font-family: Arial; font-weight: bold; } p { word-break: break-all; } .wrapper { width: 980px; margin: 0 auto; } .divider { width: 660px; height: 2px; margin: 4...")
 
(15 intermediate revisions not shown)
Line 2: Line 2:
font-family: Arial;
font-family: Arial;
font-weight: bold;
font-weight: bold;
 +
margin: 0;
 +
padding: 0;
}
}
Line 9: Line 11:
.wrapper {
.wrapper {
 +
width: 100%;
 +
/* padding: 30px 0; */
 +
}
 +
 +
.wrapper.colored-wrapper {
 +
background-color: #dff5f2;
 +
}
 +
 +
.container {
width: 980px;
width: 980px;
margin: 0 auto;
margin: 0 auto;
Line 39: Line 50:
.demo-content {
.demo-content {
width: 100%;
width: 100%;
-
margin: 10px 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 {
float: left;
float: left;
-
width: 620px;
+
margin-left: 15px;
 +
width: 560px;
height: 360px;
height: 360px;
 +
padding: 0;
}
}
Line 52: Line 250:
width: 360px;
width: 360px;
height: 360px;
height: 360px;
 +
margin-right: 15px;
}
}
Line 60: Line 259:
.into-content {
.into-content {
width: 100%;
width: 100%;
 +
text-align:justify;
}
}
.intro-content img {
.intro-content img {
 +
        padding-top:50px;
display: block;
display: block;
margin: 0 auto;
margin: 0 auto;
 +
}
 +
/*footer*/
 +
    #sysu-footer{
 +
      width: 100%;
 +
      margin:0 auto;
 +
 +
      position: relative;
 +
      bottom: 0px;
 +
      overflow: hidden;
 +
 +
      background-color: white !important;
 +
    }
 +
    #sysu-footer img{
 +
      width: 100%;
 +
    }
 +
#home-banner {
 +
background-color: #e0f4f2;
 +
text-align: center;
 +
width: 100%;
 +
}
 +
#banner-middle {
 +
width: 20%;
 +
}
 +
#banner-left {
 +
font-weight:400;
 +
margin-right:90px;
 +
width: 25%;
 +
text-align: left;
 +
}
 +
#banner-right {
 +
font-weight:400;
 +
margin-left:90px;
 +
width: 25%;
 +
}
 +
#banner-right .btn img{
 +
padding-right: 6px;
 +
}
 +
#banner-right div {
 +
margin-top: 8px;
 +
}
 +
#home-banner .banner-tips {
 +
display: inline-block;
 +
vertical-align: middle;
 +
padding: 5px;
 +
}
 +
#banner-left .h {
 +
display: inline-block;
 +
margin: 0;
 +
}
 +
#banner-left h1 {
 +
color: #34495e;
 +
        border: 0;
 +
}
 +
#banner-left h3 {
 +
color: #ffb830;
 +
}
 +
#home-middle img {
 +
height: 100px;
 +
}
 +
/* robot end */
 +
#footer-introduction h2 {
 +
  border: 0;
}
}

Latest revision as of 03:49, 28 September 2013

body { font-family: Arial; font-weight: bold; margin: 0; padding: 0; }

p { word-break: break-all; }

.wrapper { width: 100%; /* padding: 30px 0; */ }

.wrapper.colored-wrapper { background-color: #dff5f2; }

.container { width: 980px; margin: 0 auto; }

.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%; 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%; text-align:justify; }

.intro-content img { 

       padding-top:50px;

display: block; margin: 0 auto; } /*footer*/ 

   #sysu-footer{
     width: 100%;
     margin:0 auto;

     position: relative;
     bottom: 0px;
     overflow: hidden;

     background-color: white !important;
   }
   #sysu-footer img{
     width: 100%;
   }
  1. home-banner {

background-color: #e0f4f2; text-align: center; width: 100%; }

  1. banner-middle {

width: 20%; }

  1. banner-left {

font-weight:400; margin-right:90px; width: 25%; text-align: left; }

  1. banner-right {

font-weight:400; margin-left:90px; width: 25%; }

  1. banner-right .btn img{

padding-right: 6px; }

  1. banner-right div {

margin-top: 8px; }

  1. home-banner .banner-tips {

display: inline-block; vertical-align: middle; padding: 5px; }

  1. banner-left .h {

display: inline-block; margin: 0; }

  1. banner-left h1 {

color: #34495e; 

       border: 0;

}

  1. banner-left h3 {

color: #ffb830; }

  1. home-middle img {

height: 100px; } /* robot end */

  1. footer-introduction h2 { 
 border: 0;

}

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