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

Revision as of 10:53, 17 September 2017 (view source) FelixBoelPedersen (Talk | contribs) ← Older edit		Revision as of 11:01, 17 September 2017 (view source) FelixBoelPedersen (Talk | contribs) Newer edit →
Line 66:		Line 66:
	width:200%;		width:200%;
	animation-name: Cloud1Anim;		animation-name: Cloud1Anim;
−	animation-duration: 55s;	+	animation-duration: 73s;
	animation-timing-function: linear;		animation-timing-function: linear;
	animation-play-state: running;		animation-play-state: running;
	-webkit-animation-name: Cloud1Anim;		-webkit-animation-name: Cloud1Anim;
−	-webkit-animation-duration: 55s;	+	-webkit-animation-duration: 73s;
	-webkit-animation-timing-function: linear;		-webkit-animation-timing-function: linear;
	-webkit-animation-play-state: running;		-webkit-animation-play-state: running;
Line 83:		Line 83:
	width:200%;		width:200%;
	animation-name: Cloud1Anim;		animation-name: Cloud1Anim;
−	animation-duration: 58s;	+	animation-duration: 80s;
	animation-timing-function: linear;		animation-timing-function: linear;
	animation-play-state: running;		animation-play-state: running;
	-webkit-animation-name: Cloud1Anim;		-webkit-animation-name: Cloud1Anim;
−	-webkit-animation-duration: 58s;	+	-webkit-animation-duration: 80s;
	-webkit-animation-timing-function: linear;		-webkit-animation-timing-function: linear;
	-webkit-animation-play-state: running;		-webkit-animation-play-state: running;
Line 101:		Line 101:
	width:200%;		width:200%;
	animation-name: Cloud1Anim;		animation-name: Cloud1Anim;
−	animation-duration: 56s;	+	animation-duration: 76s;
	animation-timing-function: linear;		animation-timing-function: linear;
	animation-play-state: running;		animation-play-state: running;
	-webkit-animation-name: Cloud1Anim;		-webkit-animation-name: Cloud1Anim;
−	-webkit-animation-duration: 56s;	+	-webkit-animation-duration: 76s;
	-webkit-animation-timing-function: linear;		-webkit-animation-timing-function: linear;
	-webkit-animation-play-state: running;		-webkit-animation-play-state: running;
Line 120:		Line 120:
	width:200%;		width:200%;
	animation-name: Cloud1Anim;		animation-name: Cloud1Anim;
−	animation-duration: 57s;	+	animation-duration: 78s;
	animation-timing-function: linear;		animation-timing-function: linear;
	animation-play-state: running;		animation-play-state: running;
	-webkit-animation-name: Cloud1Anim;		-webkit-animation-name: Cloud1Anim;
−	-webkit-animation-duration: 57s;	+	-webkit-animation-duration: 78s;
	-webkit-animation-timing-function: linear;		-webkit-animation-timing-function: linear;
	-webkit-animation-play-state: running;		-webkit-animation-play-state: running;

---

Revision as of 11:01, 17 September 2017

1. homePage {

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

}

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%;

}

1. homePageCloud1, #homePageCloud2, #homePageCloud3, #homePageCloud4, {

 width:90%;

}

1. homeCloud1 {

 height:50%
 position:absolute;

}

1. homeCloud2 {

 height:50%
 position:absolute;

}

1. homeCloud3 {

 height:50%
 position:absolute;

}

1. homeCloud4 {

 height:50%
 position:absolute;

}

1. homeCloud1 {

 text-align: center;
 position: absolute;
 bottom:0px;
 right:0px;
 overflow:hidden;
 width:200%;
   animation-name: Cloud1Anim;
   animation-duration: 73s;
   animation-timing-function: linear;
   animation-play-state: running;
   -webkit-animation-name: Cloud1Anim;
   -webkit-animation-duration: 73s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-play-state: running;

}

1. homeCloud2 {

 text-align: center;
 position: absolute;
 bottom:0px;
 right:0px;
 overflow:hidden;
 width:200%;
   animation-name: Cloud1Anim;
   animation-duration: 80s;
   animation-timing-function: linear;
   animation-play-state: running;
   -webkit-animation-name: Cloud1Anim;
   -webkit-animation-duration: 80s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-play-state: running;

}

1. homeCloud3 {

 text-align: center;
 position: absolute;
 bottom:0px;
 right:0px;
 overflow:hidden;
 width:200%;
   animation-name: Cloud1Anim;
   animation-duration: 76s;
   animation-timing-function: linear;
   animation-play-state: running;
   -webkit-animation-name: Cloud1Anim;
   -webkit-animation-duration: 76s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-play-state: running;

}

1. homeCloud4 {

 text-align: center;
 position: absolute;
 bottom:0px;
 right:0px;
 overflow:hidden;
 width:200%;
   animation-name: Cloud1Anim;
   animation-duration: 78s;
   animation-timing-function: linear;
   animation-play-state: running;
   -webkit-animation-name: Cloud1Anim;
   -webkit-animation-duration: 78s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-play-state: running;

}

@keyframes Cloud1Anim {

 0% {
   transform: translateX(0);
 }
 100% {
   transform: translateX(50%);
 }

}

1. homePageText {

 position:absolute;
 text-align:center;
 top:20%;
 z-index:3;
 width: 100%;
 margin: 0 auto;

}

.hr {

 display: inline-block;

} .hr:after {

 content: ;
 display: block;
 border-top: 1px solid black;
 margin: 1% 0.4% 0% 0.4%;

}

1. homePage p {

   text-align: center;
   letter-spacing: 0.13em;
   margin-top: 0;
   padding-top: 0;

}

1. abstract {

 padding-bottom:40px;

}

1. abstractPictureOuter {

 text-align: center;
 margin-top:100px;

}

1. abstractPicture {

 display: inline-block;
 width:300px;
 height:300px;
 background: url();
 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) */

}