Difference between revisions of "Template:Sheffield/style/front"

Line 113: Line 113:
 
   }
 
   }
 
}
 
}
 +
 +
@media (min-width:992px) and (max-width:1199px) {
 +
        .left-but {
 +
          margin-left:50px;
 +
          }
 +
        .right-but {
 +
          right:50px;
 +
        }
 +
      .right-but h1,left-but h1{
 +
      font-size:30px;
 +
        }

Revision as of 12:03, 5 October 2016

  1. front {

width:100%; height:100vh; background-size: 100% 100%; background-color: }

.back-video { 

   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   z-index: -100;

}

.fullscreen-bg { 

   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
   filter: grayscale(100%);
   opacity: 0.5;
   filter: alpha(opacity=50);

}

.front-img { height:80%; margin-top:120px; z-index:2; margin-left: auto; 

   margin-right: auto;
   display:block;

}

.left-box { height:100vh; width:100px; float:left; position: relative; }

.left-but { background-color:#a94442; opacity:0.75; border-radius:5px; margin-left:100px; width:300px; height:120px; position: absolute; top: 50%; transform: translate(0, -50%); line-height:90px; text-align:center;

}

.left-but h1{ font-size:40px; color:white; border:#752E2D 7px solid; border-radius:5px; margin:10px; }

.right-box { height:100vh; width:100px; float:right; position: relative; 

       margin-top:0px;
       border:none;

}

.right-but { background-color:#0091c2; opacity:0.75; border-radius:5px; right:100px; width:300px; height:120px; position: absolute; top: 50%; transform: translate(0, -50%); line-height:90px; text-align:center; float:left;

}

.right-but h1{ font-size:40px; color:white; border:#00678A 7px solid; margin:10px; border-radius:5px; }

@media (min-aspect-ratio: 16/9) { 

 .fullscreen-bg {
   height: 300%;
   top: -100%;
 }

}

@media (max-aspect-ratio: 16/9) { 

 .fullscreen-bg {
   width: 300%;
   left: -100%;
 }

}

@media (min-width:992px) and (max-width:1199px) { 

       .left-but {
          margin-left:50px;
          }
       .right-but {
          right:50px;
       }
      .right-but h1,left-but h1{

font-size:30px; 

       }