(43 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; | ||
} | } | ||
Line 89: | Line 108: | ||
text-align:center; | text-align:center; | ||
float:left; | float:left; | ||
− | + | cursor:pointer; | |
} | } | ||
Line 100: | 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 116: | Line 168: | ||
@media (min-width:992px) and (max-width:1199px) { | @media (min-width:992px) and (max-width:1199px) { | ||
.left-but { | .left-but { | ||
− | margin-left: | + | margin-left:25px; |
} | } | ||
.right-but { | .right-but { | ||
− | right: | + | right:25px; |
} | } | ||
.right-but h1,.left-but h1{ | .right-but h1,.left-but h1{ | ||
font-size:30px; | 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
- 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; }
- 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) {
.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; }
- 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; }
}