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

(Created page with "#front { width:100%; height:100vh; background-size: 100% 100%; background-color: } .back-video { position: fixed; top: 0; right: 0; bottom: 0; left:...")
 
 
(49 intermediate revisions by the same user not shown)
Line 42: Line 42:
 
float:left;
 
float:left;
 
position: relative;
 
position: relative;
 +
}
 +
.results {
 +
background-color:#yellow;
 +
opacity:0.75;
 +
border-radius:5px;
 +
height:120px;                   
 +
line-height:90px;
 +
text-align:center;
 +
        align:center;
 +
        cursor:pointer;
 +
}
 +
 +
.results h1{
 +
font-size:40px;
 +
color:white;
 +
border:#00678A 7px solid;
 +
margin:10px;
 +
border-radius:5px;
 
}
 
}
 
 
Line 56: Line 74:
 
line-height:90px;
 
line-height:90px;
 
text-align:center;
 
text-align:center;
 +
        cursor:pointer;
  
 
}
 
}
 
 
−
.left-but p{
+
.left-but h1{
 
font-size:40px;
 
font-size:40px;
 
color:white;
 
color:white;
Line 72: Line 91:
 
float:right;
 
float:right;
 
position: relative;
 
position: relative;
 +
        margin-top:0px;
 +
        border:none;
 
}
 
}
 
 
Line 87: Line 108:
 
text-align:center;
 
text-align:center;
 
float:left;
 
float:left;
 +
        cursor:pointer;
 
}
 
}
 
 
−
.right-but p{
+
.right-but h1{
 
font-size:40px;
 
font-size:40px;
 
color:white;
 
color:white;
Line 97: Line 119:
 
}
 
}
  
 +
 +
 +
.phone {
 +
      display:none;
 +
      }
 +
 +
.close-jumbo h3,.close-music h3 {
 +
        border:5px solid #eac100;
 +
        padding:10px;
 +
        width:300px;
 +
        cursor:pointer;
 +
        color: #C4AE00;
 +
    font-size: 40px;
 +
      }
 +
#music {
 +
        width:600px;
 +
        height:300px;
 +
        z-index:100;
 +
        background-color:rgba(52, 50, 50, 0.85);
 +
        border:#eac100 2px solid;
 +
        border-radius:5px;
 +
        top:50%;
 +
        left:50%;
 +
        margin-top:-150px;
 +
        margin-left:-300px;
 +
        position:fixed;
 +
        padding:20px;
 +
        text-align:center;
 +
        }
 +
#music audio {
 +
        width:500px;
 +
        margin:20px;
 +
      }
 
@media (min-aspect-ratio: 16/9) {
 
@media (min-aspect-ratio: 16/9) {
 
   .fullscreen-bg {
 
   .fullscreen-bg {
Line 109: Line 164:
 
     left: -100%;
 
     left: -100%;
 
   }
 
   }
 +
}
 +
 +
@media (min-width:992px) and (max-width:1199px) {
 +
        .left-but {
 +
          margin-left:25px;
 +
          }
 +
        .right-but {
 +
          right:25px;
 +
        }
 +
      .right-but h1,.left-but h1{
 +
      font-size:30px;
 +
        }
 +
      .right-but, .left-but {
 +
            height:90px;
 +
            width:250px;
 +
        }
 +
 +
}
 +
 +
@media (max-width:991px) {
 +
      .tablet {
 +
          display:none;
 +
          }
 +
      .phone {
 +
          display:inline-block;
 +
        }
 +
      .left-but,.right-but {
 +
          position:static;
 +
          transform:none;
 +
         
 +
          margin-top:50px;
 +
        }
 +
      .left-but {
 +
          float:left;
 +
          margin-left:5vh;
 +
          }
 +
      .right-but {
 +
          float:right;
 +
              margin-right:5vh;
 +
        }
 +
}
 +
 +
@media (min-width:768px) and (max-width:991px) {
 +
      .right-but h1,.left-but h1{
 +
      font-size:30px;
 +
              border-width:5px;
 +
        }
 +
      .right-but, .left-but {
 +
            height:90px;
 +
            width:250px;
 +
        }
 +
}
 +
 +
@media (min-width:601px) and (max-width:767px) {
 +
 +
        .right-but h1,.left-but h1{
 +
      font-size:25px;
 +
              border-width:3px;
 +
        }
 +
      .right-but, .left-but {
 +
            height:80px;
 +
            width:200px;
 +
        }
 +
        .front-img {
 +
              margin-top:50px;
 +
              width:95%;
 +
              margin-left:2vh;
 +
              }
 +
        .left-but {
 +
            margin-left:2vh;
 +
            }
 +
      .right-but {
 +
            margin-rightt:2vh;
 +
            }
 +
}
 +
@media( max-width:767px) {
 +
        #music {
 +
        width:300px;
 +
        height:250px;
 +
        z-index:100;
 +
        top:50%;
 +
        left:50%;
 +
        margin-top:-125px;
 +
        margin-left:-150px;
 +
        position:fixed;
 +
        padding:10px;
 +
        text-align:center;
 +
        }
 +
#music p {
 +
        font-size:15px;
 +
        }
 +
#music audio {
 +
        width:250px;
 +
        margin:10px;
 +
      }
 +
}
 +
 +
@media (max-width:600px) {
 +
      .right-but h1,.left-but h1{
 +
      font-size:20px;
 +
              border-width:3px;
 +
        }
 +
      .right-but, .left-but {
 +
            height:70px;
 +
            width:130px;
 +
        }
 +
      .left-but {
 +
            margin-left:2vh;
 +
            }
 +
      .right-but {
 +
            margin-rightt:2vh;
 +
            }
 +
 +
        .front-img {
 +
              margin-top:50px;
 +
              width:95%;
 +
              margin-left:2vh;
 +
              }
 +
      #shield .close-jumbo h3,#shield .close-music h3 {
 +
        border:5px solid #eac100;
 +
        padding:10px;
 +
        width:150px;
 +
        font-size:20px;
 +
      }
 
}
 
}

Latest revision as of 18:47, 2 December 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; } .results { background-color:#yellow; opacity:0.75; border-radius:5px; height:120px; line-height:90px; text-align:center; 

       align:center;
       cursor:pointer;

}

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

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

       cursor:pointer;

}

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

       cursor:pointer;

}

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


.phone { 

      display:none;
      }

.close-jumbo h3,.close-music h3 { 

       border:5px solid #eac100;
       padding:10px;
       width:300px;
       cursor:pointer;
       color: #C4AE00;
   font-size: 40px;
     }
  1. music {
       width:600px;
       height:300px;
       z-index:100;
       background-color:rgba(52, 50, 50, 0.85);
       border:#eac100 2px solid;
       border-radius:5px;
       top:50%;
       left:50%;
       margin-top:-150px;
       margin-left:-300px;
       position:fixed;
       padding:20px;
       text-align:center;
       }
  1. music audio {
       width:500px;
       margin:20px;
      }

@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:25px;
          }
       .right-but {
          right:25px;
       }
      .right-but h1,.left-but h1{

font-size:30px; 

       }
      .right-but, .left-but {
            height:90px;
            width:250px;
        }

}

@media (max-width:991px) { 

     .tablet {
         display:none;
         }
     .phone {
         display:inline-block;
        }
     .left-but,.right-but {
         position:static;
         transform:none;
         
         margin-top:50px;
       }
     .left-but {
         float:left;
         margin-left:5vh;
         }
     .right-but {
         float:right;
             margin-right:5vh;
        }

}

@media (min-width:768px) and (max-width:991px) { 

      .right-but h1,.left-but h1{

font-size:30px; 

             border-width:5px;
       }
      .right-but, .left-but {
            height:90px;
            width:250px;
        }

}

@media (min-width:601px) and (max-width:767px) { 

       .right-but h1,.left-but h1{

font-size:25px; 

             border-width:3px;
       }
      .right-but, .left-but {
            height:80px;
            width:200px;
        }
       .front-img {
             margin-top:50px;
             width:95%;
             margin-left:2vh;
             }
       .left-but {
            margin-left:2vh;
            }
      .right-but {
            margin-rightt:2vh;
            }

} @media( max-width:767px) { 

       #music {
       width:300px;
       height:250px;
       z-index:100;
       top:50%;
       left:50%;
       margin-top:-125px;
       margin-left:-150px;
       position:fixed;
       padding:10px;
       text-align:center;
       }
  1. music p {
       font-size:15px;
       }
  1. music audio {
       width:250px;
       margin:10px;
      }

}

@media (max-width:600px) { 

      .right-but h1,.left-but h1{

font-size:20px; 

             border-width:3px;
       }
      .right-but, .left-but {
            height:70px;
            width:130px;
        }
      .left-but {
            margin-left:2vh;
            }
      .right-but {
            margin-rightt:2vh;
            }

       .front-img {
             margin-top:50px;
             width:95%;
             margin-left:2vh;
             }
     #shield .close-jumbo h3,#shield .close-music h3 {
       border:5px solid #eac100;
       padding:10px;
       width:150px;
       font-size:20px;
     }

}