Line 46: | Line 46: | ||
-moz-transition: all 2s ease-in-out; /** Firefox **/ | -moz-transition: all 2s ease-in-out; /** Firefox **/ | ||
-o-transition: all 2s ease-in-out; /** Opera **/ | -o-transition: all 2s ease-in-out; /** Opera **/ | ||
+ | } | ||
+ | #homePage4:hover { | ||
-webkit-transform: translateX(1500px); | -webkit-transform: translateX(1500px); | ||
-ms-transform: translateX(1500px); | -ms-transform: translateX(1500px); | ||
transform: translateX(1500px); | transform: translateX(1500px); | ||
} | } | ||
+ | |||
#homeSky { | #homeSky { |
Revision as of 17:23, 16 September 2017
- 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
}
- homePage2 {
text-align: center; position: absolute; bottom:-8px; left:5%; overflow:hidden; width:90%;
}
- homePageBackground {
overflow:hidden;
}
- homePage3 {
text-align: center; position: absolute; top:-50px; right:0px; overflow:hidden; width:90%;
}
- homePage4 {
text-align: center; position: absolute; top:0px; right:0px; overflow:hidden; width:200%;
transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -moz-transition: all 2s ease-in-out; /** Firefox **/ -o-transition: all 2s ease-in-out; /** Opera **/
}
- homePage4:hover {
-webkit-transform: translateX(1500px); -ms-transform: translateX(1500px); transform: translateX(1500px);
}
- homeSky {
height:50%
}
- homePageText {
width:800px; padding-top:200px; display: inline-block;
}
- abstract {
padding-bottom:40px;
}
- abstractPictureOuter {
text-align: center; margin-top:100px;
}
- abstractPicture {
display: inline-block; width:300px; height:300px; background: url(); background-size: 100% 100%; background-repeat: no-repeat;
}
- 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);
}
- 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) */
}