Difference between revisions of "Team:Tianjin/css/slides"

(Created page with ".wrap{ width: 100%; } #container{ font-size: 18px ; line-height: 30px ; text-align: justify; font-family: 'Open Sans'; font-weight: 300; margin-left:...")
 
 
(3 intermediate revisions by 2 users not shown)
Line 134: Line 134:
 
         color: #5b759d;
 
         color: #5b759d;
 
     }
 
     }
 +
 +
@media(max-width:767px){
 +
    .display-left,.display-right{
 +
padding:0;padding-top:50%;
 +
}
 +
    .mySlides{padding:0;}
 +
    .mySlides img{width:100%;height:auto;}
 +
}

Latest revision as of 01:49, 18 October 2018

.wrap{ width: 100%; }

  1. container{
   font-size: 18px ;
   line-height: 30px ;
   text-align: justify;
   font-family: 'Open Sans';
   font-weight: 300;
   margin-left: auto;
   margin-right: auto;
   width: 100%;

}.photo-container{ max-width: 980px; margin-left:auto; margin-right: auto; background-color: transparent; font-weight: 400; font-size: 20px; color: #000; display: flex; } .Slides{ 

   /*box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.25);*/
   margin-left: auto;
   margin-right: auto;
   display: inherit;

} .mySlides{ display: none; padding: 50px; text-align: justify !important; } .display-left,.display-right,.badge{ cursor: pointer; } .photo-title{ font-family: 'Open Sans' !important; 

   color: #9d1c20 !important;
   margin-bottom: .6em;
   line-height: 70px;
   font-size: 58px;
   margin-top: 30px;

} .imgcon{ width: 300px; padding-bottom: 50px; } .mySlides img{ width: 300px; 

   height: 300px;

} .display-left,.display-right{ color: #fff!important; padding: 8px 16px; font-size: 30px; position: relative; padding-top: 20%; } .display-left a,.display-right a{ text-decoration: none; } /*RIGHT*/ .slideRInAni{ -webkit-animation-name:RIN; animation-name: RIN; animation-iteration-count: 1; animation-duration: 800ms; } .slideROutAni{ display: block !important; 

   position: absolute;
   opacity: 0;

-webkit-animation-name:ROUT; animation-name: ROUT; animation-iteration-count: 1; animation-duration: 800ms; } @keyframes RIN{ 0%{opacity: 0;transform: translateX(500px) rotateY(90deg);} 100%{opacity: 1;transform: translateX(0px) rotateY(0deg);} } @keyframes ROUT{ 0%{opacity: 1;transform: translateX(0px) rotateY(0deg);} 100%{opacity: 0;transform: translateX(-500px) rotateY(-90deg);} } /*LEFT*/ .slideLInAni{ -webkit-animation-name:LIN; animation-name: LIN; animation-iteration-count: 1; animation-duration: 800ms; } .slideLOutAni{ display: block !important; 

   position: absolute;
   opacity: 0;

-webkit-animation-name:LOUT; animation-name: LOUT; animation-iteration-count: 1; animation-duration: 800ms; } @keyframes LIN{ 0%{opacity: 0;transform: translateX(-500px) rotateY(-90deg);} 100%{opacity: 1;transform: translateX(0px) rotateY(0deg);} } @keyframes LOUT{ 0%{opacity: 1;transform: translateX(0px) rotateY(0deg);} 100%{opacity: 0;transform: translateX(500px) rotateY(90deg);} } 

   .control{
   width: 50%;
   min-width: 200px;
   margin-left: auto;
   margin-right: auto;
   background-color: transparent;
   font-weight: 400;
   font-size: 20px;
   color: #000;
   display: flex;
   }
   .cr{
       margin-left: auto;
       margin-right: auto;
   }
   .wrap .active a{
       color: #5b759d;
   }
   .wrap a{
       color: #79acdd;
   }
   .wrap a:hover{
       color: #5b759d;
   }

@media(max-width:767px){ 

   .display-left,.display-right{

padding:0;padding-top:50%; } 

   .mySlides{padding:0;}
   .mySlides img{width:100%;height:auto;}

}