Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- body{
- margin: 0; padding: 0;
- background-color: #0d0d0d;
- font-family: 'Open Sans', sans-serif;
- font-size: 14px;
- color: white;
- }
- .parallax {
- /* The image used */
- background-image: url("images/parallax.jpg");
- height: 100vh;
- /* Create the parallax scrolling effect */
- background-attachment: fixed;
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- align-content: center;
- }
- a:link, a:visited {
- text-decoration: none;
- }
- /*navBar*/
- .navBar {
- position: sticky;
- top: 0;
- z-index: 5;
- width: 100%; height: 50px;
- background-color: gray;
- padding: 4px 0;
- }
- .navBar ul{
- margin: 0 20vw;
- width: 60vw;
- padding-left: 0;
- }
- .navBar ul li{
- min-width: 120px;
- height: 50px;
- text-align: center;
- font-size: 16px;
- list-style: none;
- float: left;
- }
- .navBar a:link, .navBar a:visited{
- display: inline-block;
- width: 100%; height: 20px;
- padding: 15px 0;
- text-decoration: none;
- color: white;
- }
- .pageLink a:hover{
- transition: 0.2s ease-in-out;
- color: #a22c29;
- transform: scale(1.15, 1.15);
- }
- .authenticationBtn:hover {
- transition: 0.2s ease-in-out;
- color: white;
- transform: scale(1.15, 1.15);
- }
- .currentPage {
- font-weight: 700;
- }
- .currentPage::after {
- display: block;
- position:relative;
- content: "";
- margin-left: 5px;
- margin-right: 5px;
- bottom: 5px;
- height: 2px;
- background-color: #a22c29;
- }
- /*content*/
- .content {
- width: 60vw;
- margin: 100px 17.5vw 0 20vw;
- display: flex;
- flex-wrap: wrap;
- flex-direction: column;
- }
- .movieListSection {
- position: relative;
- width: 100%;
- }
- .slide {
- width: 100%;
- margin-bottom: 100px;
- border: none;
- overflow-x: hidden;
- display: flex;
- flex-wrap: nowrap;
- flex-direction: row;
- transition: all 3s;
- }
- .slide::-webkit-scrollbar {
- display: none;
- }
- .slide > .item{
- height: 240px;
- width: 10vw;
- margin-right: 2.5vw;
- flex: 0 0 auto;
- display: flex;
- flex-direction: column;
- }
- .slideBtn {
- color: #a22c29;
- cursor: pointer;
- }
- .leftSlideBtn {
- position: absolute;
- right: 62vw;
- margin-top: 100px;
- }
- .rightSlideBtn {
- position: absolute;
- left: 62vw;
- margin-top: 100px;
- }
- /*posters*/
- .flip-card {
- flex: 1;
- background-color: transparent;
- width: 100%;
- perspective: 1000px;
- }
- .flip-card-inner {
- position: relative;
- width: 100%; height: 100%;
- transition: transform 0.6s;
- transform-style: preserve-3d;
- }
- .flip-card:hover .flip-card-inner {
- transform: rotateY(180deg);
- }
- .flip-card-front, .flip-card-back {
- position: absolute;
- width: 100%; height: 100%;
- backface-visibility: hidden;
- }
- .flip-card-front {
- z-index: 1;
- }
- .flip-card img {
- width: 100%; height: 100%;
- object-fit: cover;
- }
- .flip-card-back {
- background-color: #a22c29;
- color: black;
- transform: rotateY(180deg);
- z-index: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .movieListSection > span {
- font-size: 25px;
- }
- .movieDataDiv {
- height: 50px;
- background-color: white;
- color: black;
- padding: 10px 1em 0 1em;
- overflow: hidden;
- text-overflow: ellipsis;
- cursor: pointer;
- }
- .movieData {
- width: 100%;
- white-space: nowrap;
- color: gray;
- }
- .movieDataDiv h3
- {
- font-weight: 600;
- margin: 0;
- color: black;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .movieDataDiv h3:hover
- {
- text-decoration: underline;
- }
- .movieDescriptionWrapper
- {
- padding: 1em;
- overflow: hidden;
- text-overflow: ellipsis;
- height: 75%;
- }
- .movieDescription
- {
- text-overflow: ellipsis;
- color: whitesmoke;
- }
- /*footer*/
- .mainFooter {
- display: flex;
- flex-direction: column;
- margin-bottom: 50px;
- }
- .footerSection {
- text-align: center;
- color: gray;
- }
- .footerSection img {
- width: 40px;
- padding: 0 10px;
- filter: grayscale(100%);
- }
- .footerSection img:hover
- {
- transition: 0.2s ease-in-out;
- filter: none;
- }
- .footerLinks a {
- color: gray;
- padding: 12px 10px;
- }
- /*movieContent*/
- .noscroll { overflow: hidden; }
- .overlay {
- position: fixed;
- overflow-y: scroll;
- top: 0; right: 0; bottom: 0; left: 0;
- z-index: 10;
- }
- [aria-hidden="true"] { display: none; }
- [aria-hidden="false"] { display: block; }
- .fa-times-circle {
- position: fixed;
- top: 20px; right: 40px;
- }
- .fa-times-circle:hover {
- cursor: pointer;
- -webkit-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- transform: rotate(90deg);
- color: #a22c29;
- transition: 0.2s all;
- }
- .blackScreen{
- position: fixed;
- top: 0; right: 0; bottom: 0; left: 0;
- background-color: black;
- opacity: 0.9;
- z-index: 11;
- }
- .movieContent {
- position: relative;
- width: 50vw;
- margin: 0 auto;
- background-color: black;
- z-index: 12;
- }
- .movieContent > video {
- width: 100%;
- }
- .movieSection {
- padding: 10px 20px;
- font-size: 16px;
- }
- .summary {
- width: 100%;
- padding: 0 30px;
- text-align: justify;
- }
- sub {
- color: gray;
- }
- /*custom checkbox*/
- /* The container */
- .container {
- display: block;
- position: relative;
- padding-left: 35px;
- margin-bottom: 12px;
- cursor: pointer;
- font-size: 22px;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- margin-right: 50px;
- }
- /* Hide the browser's default checkbox */
- .container input {
- position: absolute;
- opacity: 0;
- cursor: pointer;
- width: 0; height: 0;
- }
- /* Create a custom checkbox */
- .checkmark {
- position: absolute;
- top: 9px; left: 10px;
- width: 15px; height: 15px;
- background-color: white;
- }
- /* On mouse-over, add a grey background color */
- .container:hover input ~ .checkmark {
- background-color: gray;
- }
- /* When the checkbox is checked, add a blue background */
- .container input:checked ~ .checkmark {
- background-color: #a22c29;
- }
- /* Create the checkmark/indicator (hidden when not checked) */
- .checkmark:after {
- content: "";
- position: absolute;
- display: none;
- }
- /* Show the checkmark when checked */
- .container input:checked ~ .checkmark:after {
- display: block;
- }
- /* Style the checkmark/indicator */
- .container .checkmark:after {
- left: 5px;
- top: 1px;
- width: 3px;
- height: 9px;
- border: solid white;
- border-width: 0 3px 3px 0;
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
- }
- /*custom select*/
- .custom-select {
- position: relative;
- width: 180px; height: 30px;
- }
- .custom-select select {
- display: none; /*hide original SELECT element:*/
- }
- .select-selected {
- background-color: #a22c29;
- }
- /*style the arrow inside the select element:*/
- .select-selected:after {
- position: absolute;
- content: "";
- top: 14px;
- right: 10px;
- width: 0;
- height: 0;
- border: 6px solid transparent;
- border-color: #fff transparent transparent transparent;
- }
- /*point the arrow upwards when the select box is open (active):*/
- .select-selected.select-arrow-active:after {
- border-color: transparent transparent #fff transparent;
- top: 7px;
- }
- /*style the items (options), including the selected item:*/
- .select-items div,.select-selected {
- color: #ffffff;
- padding: 4px 16px;
- border: 1px solid transparent;
- border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
- cursor: pointer;
- user-select: none;
- }
- /*style items (options):*/
- .select-items {
- position: absolute;
- background-color: #a22c29;
- top: 100%;
- left: 0; right: 0;
- z-index: 99;
- }
- /*hide the items when the select box is closed:*/
- .select-hide {
- display: none;
- }
- .select-items div:hover, .same-as-selected {
- background-color: rgba(0, 0, 0, 0.1);
- }
- /*media queries*/
- @media only screen and (max-width: 1200px) {
- .body {
- font-size: 13px;
- }
- .navBar ul {
- margin: 0 15vw;
- width: 70vw;
- }
- .navBar ul li {
- min-width: 100px;
- font-size: 15px;
- }
- .currentPage {
- font-weight: 600;
- }
- .content {
- width: 70vw;
- margin: 100px 12.5vw 0 15vw;
- }
- .slide > .item {
- height: 200px;
- width: 12vw;
- margin-right: 2.5vw;
- }
- .leftSlideBtn {
- right: 72vw;
- margin-top: 80px;
- }
- .rightSlideBtn {
- left: 72vw;
- margin-top: 80px;
- }
- .movieListSection > span {
- font-size: 22px;
- }
- .movieDescriptionWrapper {
- font-size: 13px;
- }
- .movieContent {
- width: 70vw;
- }
- .movieContent > video {
- width: 100%;
- }
- .movieSection {
- padding: 10px 15px;
- font-size: 15px;
- }
- .summary {
- padding: 0 15px;
- }
- .container {
- padding-left: 35px;
- font-size: 20px;
- margin-right: 30px;
- }
- .checkmark {
- top: 7px;
- left: 6px;
- width: 14px;
- height: 14px;
- }
- .container .checkmark:after {
- left: 4px;
- top: 0;
- width: 2.5px;
- height: 8.5px;
- }
- .custom-select {
- width: 150px;
- }
- }
- @media only screen and (max-width: 700px) {
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement