Team:UNITN-Trento/CSS/Products

From 2013.igem.org

(Difference between revisions)
(Copied from CSS/Project)
(Styling the dot buttons)
Line 15: Line 15:
.container .sheet .bubble {
.container .sheet .bubble {
     position: absolute;
     position: absolute;
-
     top: 20px;
+
     top: 10px;
     left: 300px;
     left: 300px;
      
      
     padding: 15px;
     padding: 15px;
-
     width: 545px;
+
     width: 500px;
      
      
     background-color: white;
     background-color: white;
Line 34: Line 34:
      
      
     transform:rotate(90deg);
     transform:rotate(90deg);
 +
}
 +
 +
.container .sheet .dots {
 +
    position: absolute;
 +
    top: 180px;
 +
    right: 10px;
 +
    width: 650px;
 +
   
 +
}
 +
 +
.container .sheet .dots > div {
 +
    display: inline-block;
 +
    width: 300px;
 +
    margin: 10px;
 +
    text-align: center;
 +
}
 +
 +
.container .sheet .dots .circle {
 +
    height: 250px;
 +
    width: 250px;
 +
}
 +
 +
.container .sheet .dots .descr {
 +
    padding: 10px;
 +
    text-align: justify;
}
}

Revision as of 14:47, 22 September 2013

.container .sheet {

   position: relative;
   min-height: 600px;

}

.container .sheet .guide {

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

}

.container .sheet .bubble {

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

}

.container .sheet .bubble .pointer {

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

}

.container .sheet .dots {

   position: absolute;
   top: 180px;
   right: 10px;
   width: 650px;
   

}

.container .sheet .dots > div {

   display: inline-block;
   width: 300px;
   margin: 10px;
   text-align: center;

}

.container .sheet .dots .circle {

   height: 250px;
   width: 250px;

}

.container .sheet .dots .descr {

   padding: 10px;
   text-align: justify;

}