Team:UNITN-Trento/CSS/Products

From 2013.igem.org

(Difference between revisions)
(Correct vertical align for dots)
(Last edit?)
Line 1: Line 1:
 +
.container {
 +
    background-color: #d09220 !important;
 +
    background-image: url(https://static.igem.org/mediawiki/2013/c/c6/Tn-2013-boxbg-onda-Gold.png) !important;
 +
    background-position: 0 30px !important;
 +
}
 +
.container .sheet {
.container .sheet {
     position: relative;
     position: relative;
-
     min-height: 510px;
+
     min-height: 410px;
 +
    margin: 15px !important;
 +
    background-color: rgba(250,250,250,.5) !important;
}
}
Line 9: Line 17:
     left: 0px;
     left: 0px;
      
      
-
     width: 300px;
+
     width: 250px;
     transform:rotate(-15deg);
     transform:rotate(-15deg);
}
}
Line 16: Line 24:
     position: absolute;
     position: absolute;
     top: 10px;
     top: 10px;
-
     left: 300px;
+
     left: 230px;
      
      
     padding: 15px;
     padding: 15px;
-
     width: 500px;
+
     width: 620px;
      
      
     background-color: white;
     background-color: white;
Line 26: Line 34:
      
      
     font-family: "Cabin", cursive;
     font-family: "Cabin", cursive;
 +
}
 +
.container .sheet .bubble .title {
 +
    font-size: 1.5em;
 +
    margin: 0;
 +
}
 +
 +
.container .sheet .bubble .title b {
 +
    font-size: 1.2em;
 +
    font-family: "Boogaloo", sans-serif;
 +
    color: green;
}
}
Line 40: Line 58:
.container .sheet .dots {
.container .sheet .dots {
     position: absolute;
     position: absolute;
-
     top: 180px;
+
     top: 140px;
-
     right: 10px;
+
     right: 20px;
     width: 650px;
     width: 650px;
      
      
Line 47: Line 65:
.container .sheet .dots > div {
.container .sheet .dots > div {
 +
    position: relative;
     display: inline-block;
     display: inline-block;
     width: 300px;
     width: 300px;
Line 57: Line 76:
     height: 250px;
     height: 250px;
     width: 250px;
     width: 250px;
-
    filter: grayscale(100%);
 
-
    -ms-filter: grayscale(100%);
 
-
    -webkit-filter: grayscale(100%);
 
}
}
-
.container .sheet .dots div .circle:hover {
+
.container .sheet .dots div .title {
-
     filter: grayscale(0%);
+
     position: absolute;
-
     -ms-filter: grayscale(0%);
+
    top: 25px;
-
     -webkit-filter: grayscale(0%);
+
    left: 65px;
 +
   
 +
    padding: 5px 5px;
 +
    width: 150px;
 +
   
 +
    background: rgba(149,191,191,.9);
 +
     border: 5px solid white;
 +
    border-radius: 0.5em;
 +
      
 +
    color: white;
 +
    font-family: "Boogaloo", sans-serif;
 +
    font-size: 1.5em;
 +
    text-shadow: 0 0 2px black;
}
}
.container .sheet .dots .descr {
.container .sheet .dots .descr {
 +
    position: absolute;
 +
    top: 200px;
 +
    left: 25px;
 +
   
     padding: 10px;
     padding: 10px;
 +
    width: 225px;
 +
   
 +
    background-color: rgba(50,50,50,.9);
 +
    border: 2px solid white;
 +
    border-radius: 10px;
 +
   
 +
    color: white;
 +
    font-family: "Cabin",cursive;
 +
    font-size: 0.9em;
     text-align: justify;
     text-align: justify;
 +
    text-shadow: 0 0 2px black;
}
}

Revision as of 16:44, 22 September 2013

.container { 

   background-color: #d09220 !important;
   background-image: url(Tn-2013-boxbg-onda-Gold.png) !important;
   background-position: 0 30px !important;

}

.container .sheet { 

   position: relative;
   min-height: 410px;
   margin: 15px !important;
   background-color: rgba(250,250,250,.5) !important;

}

.container .sheet .guide { 

   position: absolute;
   top: 0px;
   left: 0px;
   
   width: 250px;
   transform:rotate(-15deg);

}

.container .sheet .bubble { 

   position: absolute;
   top: 10px;
   left: 230px;
   
   padding: 15px;
   width: 620px;
   
   background-color: white;
   border: 2px solid black;
   border-radius: 0.5em;
   
   font-family: "Cabin", cursive;

} .container .sheet .bubble .title { 

   font-size: 1.5em;
   margin: 0;

}

.container .sheet .bubble .title b { 

   font-size: 1.2em;
   font-family: "Boogaloo", sans-serif;
   color: green;

}

.container .sheet .bubble .pointer { 

   position: absolute;
   top: 20px;
   left: -23px;
   
   transform:rotate(90deg);
   -ms-transform:rotate(90deg);
   -webkit-transform:rotate(90deg);

}

.container .sheet .dots { 

   position: absolute;
   top: 140px;
   right: 20px;
   width: 650px;

}

.container .sheet .dots > div { 

   position: relative;
   display: inline-block;
   width: 300px;
   margin: 10px;
   text-align: center;
   vertical-align: top;

}

.container .sheet .dots div .circle { 

   height: 250px;
   width: 250px;

}

.container .sheet .dots div .title { 

   position: absolute;
   top: 25px;
   left: 65px;
   
   padding: 5px 5px;
   width: 150px;
   
   background: rgba(149,191,191,.9);
   border: 5px solid white;
   border-radius: 0.5em;
   
   color: white;
   font-family: "Boogaloo", sans-serif;
   font-size: 1.5em;
   text-shadow: 0 0 2px black;

}

.container .sheet .dots .descr { 

   position: absolute;
   top: 200px;
   left: 25px;
   
   padding: 10px;
   width: 225px;
   
   background-color: rgba(50,50,50,.9);
   border: 2px solid white;
   border-radius: 10px;
   
   color: white;
   font-family: "Cabin",cursive;
   font-size: 0.9em;
   text-align: justify;
   text-shadow: 0 0 2px black;

}

Retrieved from "http://2013.igem.org/Team:UNITN-Trento/CSS/Products"