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

Line 279: Line 279:
 
     font-size: 300%;
 
     font-size: 300%;
 
   }
 
   }
 +
 +
  verticalAlignColumns {
 +
    float: none;
 +
    display: inline-block;
 +
    vertical-align: middle;
 +
    margin-right: -4px;
 +
  }
 +
 
}
 
}
  

Revision as of 08:05, 2 October 2017

/********************************************************************/ /********************* HOME PAGE **********************/ /********************************************************************/

  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 {
 text-align: center;
 position: absolute;
 bottom:0px;
 right:0px;
 overflow:hidden;
 width:200%;
   animation-name: Cloud1Anim;
   animation-duration: 85s;
   animation-timing-function: linear;
   animation-play-state: running;
   -webkit-animation-name: Cloud1Anim;
   -webkit-animation-duration: 85s;
   -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: 105s;
   animation-timing-function: linear;
   animation-play-state: running;
   -webkit-animation-name: Cloud1Anim;
   -webkit-animation-duration: 105s;
   -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: 95s;
   animation-timing-function: linear;
   animation-play-state: running;
   -webkit-animation-name: Cloud1Anim;
   -webkit-animation-duration: 95s;
   -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: 98s;
   animation-timing-function: linear;
   animation-play-state: running;
   -webkit-animation-name: Cloud1Anim;
   -webkit-animation-duration: 98s;
   -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;

}



  1. homePage p {
   text-align: center;
   letter-spacing: 0.13em;
   margin-top: 0;
   padding-top: 0;

}



/********************************************************************/ /********************* ABSTRACT **********************/ /********************************************************************/


  1. abstract {
   padding-bottom: 60px;
   padding-top: 60px;
   background-color: rgba(84,121,131,0);
   background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .05) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .05) 75%, rgba(0, 0, 0, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .05) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .05) 75%, rgba(0, 0, 0, .05) 76%, transparent 77%, transparent);
   background-size: 50px 50px;

}


div#scrollWritten { 

   -ms-transform: rotate(-12deg);
   -webkit-transform: rotate(-12deg);
   transform: rotate(-12deg);
   padding:50px;
   text-align:center;

}


  1. sketchAbstract {
 width: 100%;

}



/********************************************************************/ /********************* PRESENTATION **********************/ /********************************************************************/

.shadowDropBottom { 

   box-shadow: 0 2px 5px rgba(0, 0, 0, .5), 0 2px rgba(0, 0, 0, .1);

}

.contentHeadline { 

   background-color: #fff;
   box-shadow: 0 -2px 0 rgba(0,0,0,.1), 0 -2px 5px rgba(0,0,0,.5);
   margin-top: 0px;
   width: 100%;
   height: 50vh;
   z-index: 5;

}


.centerContentHeadline { 

   align-items: center;
   display: flex;
   justify-content: center;
   height: 102%;
   background: rgba(115, 145, 138, 0.3); /* For browsers that do not support gradients */
   background: -webkit-linear-gradient(rgba(115, 145, 138, 0.5), #fff); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(rgba(115, 145, 138, 0.5), #fff); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(rgba(115, 145, 138, 0.5), #fff); /* For Firefox 3.6 to 15 */
   background: linear-gradient(rgba(115, 145, 138, 0.5), #fff 90%); /* Standard syntax */

}


p#headlinePresentation { 

 font-family: "open sans";
 font-size: 500%;
 font-weight:500;
 letter-spacing: 0.12em;
 color: #1D353D;

}


.presentationBackground { 

   background: linear-gradient(0deg, rgba(115, 145, 138, 0.12), rgba(115, 145, 138, 0.6) 90%);
   box-shadow: 0 2px 5px rgba(0, 0, 0, .5), 0 2px rgba(0, 0, 0, .1);

}

.boxedContainer { 

   background: rgba(255, 255, 255,0.5);
   border-radius: 25px;
   border: 10px solid rgba(255,255,255,0.2);

}


.margin-bottom-200 { 

 margin-bottom:200px;

}

.padding-bottom-200 { 

 padding-bottom:200px;

}


.row.team-rows { 

   margin-top: 100px;
   margin-bottom: 100px;

}

.row.team-top-rows { 

   margin-bottom: 100px;

}

.row.team-bottom-rows { 

   margin-top: 100px;

}



  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.1), rgba(153, 172, 168, 0)); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(0deg, rgba(153, 172, 168, 0.1), rgba(153, 172, 168, 0)); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(0deg, rgba(153, 172, 168, 0.1), rgba(153, 172, 168, 0)); /* For Firefox 3.6 to 15 */
   background: linear-gradient(0deg, rgba(153, 172, 168, 0.1), rgba(153, 172, 168, 0)); /* Standard syntax (must be last) */
   margin-top: 0px;
   margin-bottom: 80px;

}


@media only screen and (max-width: 768px) { 

 p#headlinePresentation {
   font-size: 300%;
 }

 verticalAlignColumns {
   float: none;
   display: inline-block;
   vertical-align: middle;
   margin-right: -4px;
 }

}


@media only screen and (max-width: 450px) { 

 p#headlinePresentation {
   font-size: 200%;
 }

}