Difference between revisions of "Team:SDU-Denmark/css/content"

Line 34: Line 34:
 
}
 
}
  
−
#homePage4 {
+
 
 +
.homeCloud {
 +
  height:50%
 +
}
 +
 
 +
#homeCloud1 {
 
   text-align: center;
 
   text-align: center;
 
   position: absolute;
 
   position: absolute;
Line 41: Line 46:
 
   overflow:hidden;
 
   overflow:hidden;
 
   width:200%;
 
   width:200%;
 +
    transition: 40s linear;
 +
    -webkit-transition: 40s linear; /** Chrome & Safari **/
 +
    -moz-transition: 40s linear; /** Firefox **/
 +
    -o-transition: 40s linear; /** Opera **/
 +
}
  
 +
#homeCloud1:hover {
 +
  -webkit-transform: translateX(50%);
 +
  -ms-transform: translateX(50%);
 +
  transform: translateX(50%);
 +
}
 +
 +
#homeCloud2 {
 +
  text-align: center;
 +
  position: absolute;
 +
  bottom:0px;
 +
  right:0px;
 +
  overflow:hidden;
 +
  width:200%;
 
     transition: 40s linear;
 
     transition: 40s linear;
 
     -webkit-transition: 40s linear; /** Chrome & Safari **/
 
     -webkit-transition: 40s linear; /** Chrome & Safari **/
Line 48: Line 71:
 
}
 
}
  
−
#homePage4:hover {
+
#homeCloud2:hover {
 
   -webkit-transform: translateX(50%);
 
   -webkit-transform: translateX(50%);
 
   -ms-transform: translateX(50%);
 
   -ms-transform: translateX(50%);
Line 54: Line 77:
 
}
 
}
  
 +
#homeCloud3 {
 +
  text-align: center;
 +
  position: absolute;
 +
  bottom:0px;
 +
  right:0px;
 +
  overflow:hidden;
 +
  width:200%;
 +
    transition: 40s linear;
 +
    -webkit-transition: 40s linear; /** Chrome & Safari **/
 +
    -moz-transition: 40s linear; /** Firefox **/
 +
    -o-transition: 40s linear; /** Opera **/
 +
}
  
−
#homeSky {
+
#homeCloud3:hover {
−
   height:50%
+
   -webkit-transform: translateX(50%);
 +
  -ms-transform: translateX(50%);
 +
  transform: translateX(50%);
 
}
 
}
 +
 +
#homeCloud4 {
 +
  text-align: center;
 +
  position: absolute;
 +
  bottom:0px;
 +
  right:0px;
 +
  overflow:hidden;
 +
  width:200%;
 +
    transition: 40s linear;
 +
    -webkit-transition: 40s linear; /** Chrome & Safari **/
 +
    -moz-transition: 40s linear; /** Firefox **/
 +
    -o-transition: 40s linear; /** Opera **/
 +
}
 +
 +
#homeCloud4:hover {
 +
  -webkit-transform: translateX(50%);
 +
  -ms-transform: translateX(50%);
 +
  transform: translateX(50%);
 +
}
 +
 +
 +
  
  

Revision as of 17:44, 16 September 2017

  1. homePage {
 width: 100%;
 height:97vh;
 text-align: center;
   background: rgba(153, 172, 168, 0.1); /* For browsers that do not support gradients */    
   background: -webkit-linear-gradient(0deg, rgba(118, 146, 48, 0.12), rgba(135, 222, 237, 1)); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(0deg, rgba(118, 146, 48, 0.12), rgba(135, 222, 237, 1)); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(0deg, rgba(118, 146, 48, 0.12), rgba(135, 222, 237, 1)); /* For Firefox 3.6 to 15 */
   background: linear-gradient(0deg, rgba(118, 146, 48, 0.12), rgba(135, 222, 237, 1)); /* Standard syntax (must be last) */  
 box-shadow: 0 2px 5px rgba(0, 0, 0, .5), 0 2px rgba(0, 0, 0, .1);
 position:relative

}

  1. homePage2 {
 text-align: center;
 position: absolute;
 bottom:-8px;
 left:5%;
 overflow:hidden;
 width:90%;

}

  1. homePageBackground {
 overflow:hidden;

}

  1. homePage3 {
 text-align: center;
 position: absolute;
 top:-50px;
 right:0px;
 overflow:hidden;
 width:90%;

}


.homeCloud { 

 height:50%

}

  1. homeCloud1 {
 text-align: center;
 position: absolute;
 bottom:0px;
 right:0px;
 overflow:hidden;
 width:200%;
   transition: 40s linear;
   -webkit-transition: 40s linear; /** Chrome & Safari **/
   -moz-transition: 40s linear; /** Firefox **/
   -o-transition: 40s linear; /** Opera **/

}

  1. homeCloud1:hover {
 -webkit-transform: translateX(50%);
 -ms-transform: translateX(50%);
 transform: translateX(50%);

}

  1. homeCloud2 {
 text-align: center;
 position: absolute;
 bottom:0px;
 right:0px;
 overflow:hidden;
 width:200%;
   transition: 40s linear;
   -webkit-transition: 40s linear; /** Chrome & Safari **/
   -moz-transition: 40s linear; /** Firefox **/
   -o-transition: 40s linear; /** Opera **/

}

  1. homeCloud2:hover {
 -webkit-transform: translateX(50%);
 -ms-transform: translateX(50%);
 transform: translateX(50%);

}

  1. homeCloud3 {
 text-align: center;
 position: absolute;
 bottom:0px;
 right:0px;
 overflow:hidden;
 width:200%;
   transition: 40s linear;
   -webkit-transition: 40s linear; /** Chrome & Safari **/
   -moz-transition: 40s linear; /** Firefox **/
   -o-transition: 40s linear; /** Opera **/

}

  1. homeCloud3:hover {
 -webkit-transform: translateX(50%);
 -ms-transform: translateX(50%);
 transform: translateX(50%);

}

  1. homeCloud4 {
 text-align: center;
 position: absolute;
 bottom:0px;
 right:0px;
 overflow:hidden;
 width:200%;
   transition: 40s linear;
   -webkit-transition: 40s linear; /** Chrome & Safari **/
   -moz-transition: 40s linear; /** Firefox **/
   -o-transition: 40s linear; /** Opera **/

}

  1. homeCloud4:hover {
 -webkit-transform: translateX(50%);
 -ms-transform: translateX(50%);
 transform: translateX(50%);

}




  1. homePageText {
 width:800px;
 padding-top:200px;
 display: inline-block;

}

  1. abstract {
 padding-bottom:40px;

}

  1. abstractPictureOuter {
 text-align: center;
 margin-top:100px;

}

  1. abstractPicture {
 display: inline-block;
 width:300px;
 height:300px;
 background: url(T--SDU-Denmark--LeafActive.jpg);
 background-size: 100% 100%;
 background-repeat: no-repeat;

}


  1. presentationContent {
 background-color: rgba(153, 172, 168, 0.3);
 padding-top:1px;
 box-shadow:0 -2px 0 rgba(0,0,0,.1),0 -2px 5px rgba(0,0,0,.5);

}


  1. presentationGradient {
   height: 100px;
   background: rgba(153, 172, 168, 0.1); /* For browsers that do not support gradients */    
   background: -webkit-linear-gradient(0deg, rgba(153, 172, 168, 0.12), rgba(153, 172, 168, 0)); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(0deg, rgba(153, 172, 168, 0.12), rgba(153, 172, 168, 0)); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(0deg, rgba(153, 172, 168, 0.12), rgba(153, 172, 168, 0)); /* For Firefox 3.6 to 15 */
   background: linear-gradient(0deg, rgba(153, 172, 168, 0.12), rgba(153, 172, 168, 0)); /* Standard syntax (must be last) */

}