Advertisement
Guest User

Untitled

a guest
Mar 21st, 2019
109
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.58 KB | None | 0 0
  1. body{
  2.     margin: 0; padding: 0;
  3.     background-color: #0d0d0d;
  4.     font-family: 'Open Sans', sans-serif;
  5.     font-size: 14px;
  6.     color: white;
  7. }
  8. .parallax {
  9.     /* The image used */
  10.     background-image: url("images/parallax.jpg");
  11.     height: 100vh;
  12.  
  13.     /* Create the parallax scrolling effect */
  14.     background-attachment: fixed;
  15.     background-position: center;
  16.     background-repeat: no-repeat;
  17.     background-size: cover;
  18.  
  19.     align-content: center;
  20. }
  21.  
  22. a:link, a:visited {
  23.     text-decoration: none;
  24. }
  25.  
  26.  
  27.  
  28. /*navBar*/
  29. .navBar {
  30.     position: sticky;
  31.     top: 0;
  32.     z-index: 5;
  33.     width: 100%; height: 50px;
  34.     background-color: gray;
  35.     padding: 4px 0;
  36. }
  37.  
  38. .navBar ul{
  39.     margin: 0 20vw;
  40.     width: 60vw;
  41.     padding-left: 0;
  42. }
  43.  
  44. .navBar ul li{
  45.     min-width: 120px;
  46.     height: 50px;
  47.     text-align: center;
  48.     font-size: 16px;
  49.     list-style: none;
  50.     float: left;
  51. }
  52.  
  53. .navBar a:link, .navBar a:visited{
  54.     display: inline-block;
  55.     width: 100%; height: 20px;
  56.     padding: 15px 0;
  57.     text-decoration: none;
  58.     color: white;
  59. }
  60.  
  61. .pageLink a:hover{
  62.     transition: 0.2s ease-in-out;
  63.     color: #a22c29;
  64.     transform: scale(1.15, 1.15);
  65. }
  66.  
  67. .authenticationBtn:hover {
  68.     transition: 0.2s ease-in-out;
  69.     color: white;
  70.     transform: scale(1.15, 1.15);
  71. }
  72.  
  73. .currentPage {
  74.     font-weight: 700;
  75. }
  76.  
  77. .currentPage::after {
  78.     display: block;
  79.     position:relative;
  80.     content: "";
  81.     margin-left: 5px;
  82.     margin-right: 5px;
  83.     bottom: 5px;
  84.     height: 2px;
  85.     background-color: #a22c29;
  86. }
  87.  
  88.  
  89.  
  90. /*content*/
  91. .content {
  92.     width: 60vw;
  93.     margin: 100px 17.5vw 0 20vw;
  94.     display: flex;
  95.     flex-wrap: wrap;
  96.     flex-direction: column;
  97. }
  98.  
  99. .movieListSection {
  100.     position: relative;
  101.     width: 100%;
  102. }
  103.  
  104. .slide {
  105.     width: 100%;
  106.     margin-bottom: 100px;
  107.     border: none;
  108.     overflow-x: hidden;
  109.     display: flex;
  110.     flex-wrap: nowrap;
  111.     flex-direction: row;
  112.     transition: all 3s;
  113. }
  114.  
  115. .slide::-webkit-scrollbar {
  116.     display: none;
  117. }
  118.  
  119.  
  120. .slide > .item{
  121.     height: 240px;
  122.     width: 10vw;
  123.     margin-right: 2.5vw;
  124.     flex: 0 0 auto;
  125.     display: flex;
  126.     flex-direction: column;
  127. }
  128.  
  129. .slideBtn {
  130.     color: #a22c29;
  131.     cursor: pointer;
  132. }
  133.  
  134. .leftSlideBtn {
  135.     position: absolute;
  136.     right: 62vw;
  137.     margin-top: 100px;
  138. }
  139.  
  140. .rightSlideBtn {
  141.     position: absolute;
  142.     left: 62vw;
  143.     margin-top: 100px;
  144. }
  145.  
  146.  
  147. /*posters*/
  148. .flip-card {
  149.     flex: 1;
  150.     background-color: transparent;
  151.     width: 100%;
  152.     perspective: 1000px;
  153. }
  154.  
  155. .flip-card-inner {
  156.     position: relative;
  157.     width: 100%; height: 100%;
  158.     transition: transform 0.6s;
  159.     transform-style: preserve-3d;
  160. }
  161.  
  162. .flip-card:hover .flip-card-inner {
  163.     transform: rotateY(180deg);
  164. }
  165.  
  166. .flip-card-front, .flip-card-back {
  167.     position: absolute;
  168.     width: 100%; height: 100%;
  169.     backface-visibility: hidden;
  170. }
  171.  
  172. .flip-card-front {
  173.     z-index: 1;
  174. }
  175.  
  176. .flip-card img {
  177.     width: 100%; height: 100%;
  178.     object-fit: cover;
  179. }
  180.  
  181. .flip-card-back {
  182.     background-color: #a22c29;
  183.     color: black;
  184.     transform: rotateY(180deg);
  185.     z-index: 1;
  186.     overflow: hidden;
  187.     text-overflow: ellipsis;
  188. }
  189.  
  190. .movieListSection > span {
  191.     font-size: 25px;
  192. }
  193.  
  194. .movieDataDiv {
  195.     height: 50px;
  196.     background-color: white;
  197.     color: black;
  198.     padding: 10px 1em 0 1em;
  199.     overflow: hidden;
  200.     text-overflow: ellipsis;
  201.     cursor: pointer;
  202. }
  203.  
  204. .movieData {
  205.     width: 100%;
  206.     white-space: nowrap;
  207.     color: gray;
  208. }
  209.  
  210. .movieDataDiv h3
  211. {
  212.     font-weight: 600;
  213.     margin: 0;
  214.     color: black;
  215.     overflow: hidden;
  216.     text-overflow: ellipsis;
  217. }
  218. .movieDataDiv h3:hover
  219. {
  220.     text-decoration: underline;
  221. }
  222.  
  223. .movieDescriptionWrapper
  224. {
  225.     padding: 1em;
  226.     overflow: hidden;
  227.     text-overflow: ellipsis;
  228.     height: 75%;
  229. }
  230.  
  231. .movieDescription
  232. {
  233.     text-overflow: ellipsis;
  234.     color: whitesmoke;
  235. }
  236.  
  237.  
  238.  
  239. /*footer*/
  240. .mainFooter {
  241.     display: flex;
  242.     flex-direction: column;
  243.     margin-bottom: 50px;
  244. }
  245.  
  246. .footerSection {
  247.     text-align: center;
  248.     color: gray;
  249. }
  250.  
  251. .footerSection img {
  252.     width: 40px;
  253.     padding: 0 10px;
  254.     filter: grayscale(100%);
  255. }
  256. .footerSection img:hover
  257. {
  258.     transition: 0.2s ease-in-out;
  259.     filter: none;
  260. }
  261.  
  262. .footerLinks a {
  263.     color: gray;
  264.     padding: 12px 10px;
  265. }
  266.  
  267.  
  268.  
  269. /*movieContent*/
  270. .noscroll { overflow: hidden; }
  271.  
  272. .overlay {
  273.     position: fixed;
  274.     overflow-y: scroll;
  275.     top: 0; right: 0; bottom: 0; left: 0;
  276.     z-index: 10;
  277. }
  278.  
  279. [aria-hidden="true"] { display: none; }
  280. [aria-hidden="false"] { display: block; }
  281.  
  282. .fa-times-circle {
  283.     position: fixed;
  284.     top: 20px; right: 40px;
  285. }
  286.  
  287. .fa-times-circle:hover {
  288.     cursor: pointer;
  289.     -webkit-transform: rotate(90deg);
  290.     -ms-transform: rotate(90deg);
  291.     transform: rotate(90deg);
  292.     color: #a22c29;
  293.     transition: 0.2s all;
  294. }
  295.  
  296. .blackScreen{
  297.     position: fixed;
  298.     top: 0; right: 0; bottom: 0; left: 0;
  299.     background-color: black;
  300.     opacity: 0.9;
  301.     z-index: 11;
  302. }
  303.  
  304. .movieContent {
  305.     position: relative;
  306.     width: 50vw;
  307.     margin: 0 auto;
  308.     background-color: black;
  309.     z-index: 12;
  310. }
  311.  
  312. .movieContent > video {
  313.     width: 100%;
  314. }
  315.  
  316. .movieSection {
  317.     padding: 10px 20px;
  318.     font-size: 16px;
  319. }
  320.  
  321. .summary {
  322.     width: 100%;
  323.     padding: 0 30px;
  324.     text-align: justify;
  325. }
  326.  
  327. sub {
  328.     color: gray;
  329. }
  330.  
  331.  
  332.  
  333. /*custom checkbox*/
  334. /* The container */
  335. .container {
  336.     display: block;
  337.     position: relative;
  338.     padding-left: 35px;
  339.     margin-bottom: 12px;
  340.     cursor: pointer;
  341.     font-size: 22px;
  342.     -webkit-user-select: none;
  343.     -moz-user-select: none;
  344.     -ms-user-select: none;
  345.     user-select: none;
  346.     margin-right: 50px;
  347. }
  348.  
  349. /* Hide the browser's default checkbox */
  350. .container input {
  351.     position: absolute;
  352.     opacity: 0;
  353.     cursor: pointer;
  354.     width: 0; height: 0;
  355. }
  356.  
  357. /* Create a custom checkbox */
  358. .checkmark {
  359.     position: absolute;
  360.     top: 9px; left: 10px;
  361.     width: 15px; height: 15px;
  362.     background-color: white;
  363. }
  364.  
  365. /* On mouse-over, add a grey background color */
  366. .container:hover input ~ .checkmark {
  367.     background-color: gray;
  368. }
  369.  
  370. /* When the checkbox is checked, add a blue background */
  371. .container input:checked ~ .checkmark {
  372.     background-color: #a22c29;
  373. }
  374.  
  375. /* Create the checkmark/indicator (hidden when not checked) */
  376. .checkmark:after {
  377.     content: "";
  378.     position: absolute;
  379.     display: none;
  380. }
  381.  
  382. /* Show the checkmark when checked */
  383. .container input:checked ~ .checkmark:after {
  384.     display: block;
  385. }
  386.  
  387. /* Style the checkmark/indicator */
  388. .container .checkmark:after {
  389.     left: 5px;
  390.     top: 1px;
  391.     width: 3px;
  392.     height: 9px;
  393.     border: solid white;
  394.     border-width: 0 3px 3px 0;
  395.     -webkit-transform: rotate(45deg);
  396.     -ms-transform: rotate(45deg);
  397.     transform: rotate(45deg);
  398. }
  399.  
  400.  
  401.  
  402. /*custom select*/
  403. .custom-select {
  404.     position: relative;
  405.     width: 180px; height: 30px;
  406. }
  407.  
  408. .custom-select select {
  409.     display: none; /*hide original SELECT element:*/
  410. }
  411.  
  412. .select-selected {
  413.     background-color: #a22c29;
  414. }
  415.  
  416. /*style the arrow inside the select element:*/
  417. .select-selected:after {
  418.     position: absolute;
  419.     content: "";
  420.     top: 14px;
  421.     right: 10px;
  422.     width: 0;
  423.     height: 0;
  424.     border: 6px solid transparent;
  425.     border-color: #fff transparent transparent transparent;
  426. }
  427.  
  428. /*point the arrow upwards when the select box is open (active):*/
  429. .select-selected.select-arrow-active:after {
  430.     border-color: transparent transparent #fff transparent;
  431.     top: 7px;
  432. }
  433.  
  434. /*style the items (options), including the selected item:*/
  435. .select-items div,.select-selected {
  436.     color: #ffffff;
  437.     padding: 4px 16px;
  438.     border: 1px solid transparent;
  439.     border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  440.     cursor: pointer;
  441.     user-select: none;
  442. }
  443.  
  444. /*style items (options):*/
  445. .select-items {
  446.     position: absolute;
  447.     background-color: #a22c29;
  448.     top: 100%;
  449.     left: 0; right: 0;
  450.     z-index: 99;
  451. }
  452.  
  453. /*hide the items when the select box is closed:*/
  454. .select-hide {
  455.     display: none;
  456. }
  457.  
  458. .select-items div:hover, .same-as-selected {
  459.     background-color: rgba(0, 0, 0, 0.1);
  460. }
  461.  
  462.  
  463.  
  464. /*media queries*/
  465. @media only screen and (max-width: 1200px) {
  466.     .body {
  467.         font-size: 13px;
  468.     }
  469.  
  470.     .navBar ul {
  471.         margin: 0 15vw;
  472.         width: 70vw;
  473.     }
  474.  
  475.     .navBar ul li {
  476.         min-width: 100px;
  477.         font-size: 15px;
  478.     }
  479.  
  480.     .currentPage {
  481.         font-weight: 600;
  482.     }
  483.  
  484.     .content {
  485.         width: 70vw;
  486.         margin: 100px 12.5vw 0 15vw;
  487.     }
  488.  
  489.     .slide > .item {
  490.         height: 200px;
  491.         width: 12vw;
  492.         margin-right: 2.5vw;
  493.     }
  494.  
  495.     .leftSlideBtn {
  496.         right: 72vw;
  497.         margin-top: 80px;
  498.     }
  499.  
  500.     .rightSlideBtn {
  501.         left: 72vw;
  502.         margin-top: 80px;
  503.     }
  504.  
  505.     .movieListSection > span {
  506.         font-size: 22px;
  507.     }
  508.  
  509.     .movieDescriptionWrapper {
  510.         font-size: 13px;
  511.     }
  512.  
  513.     .movieContent {
  514.         width: 70vw;
  515.     }
  516.  
  517.     .movieContent > video {
  518.         width: 100%;
  519.     }
  520.  
  521.     .movieSection {
  522.         padding: 10px 15px;
  523.         font-size: 15px;
  524.     }
  525.  
  526.     .summary {
  527.         padding: 0 15px;
  528.     }
  529.  
  530.     .container {
  531.         padding-left: 35px;
  532.         font-size: 20px;
  533.         margin-right: 30px;
  534.     }
  535.  
  536.     .checkmark {
  537.         top: 7px;
  538.         left: 6px;
  539.         width: 14px;
  540.         height: 14px;
  541.     }
  542.  
  543.     .container .checkmark:after {
  544.         left: 4px;
  545.         top: 0;
  546.         width: 2.5px;
  547.         height: 8.5px;
  548.     }
  549.  
  550.     .custom-select {
  551.         width: 150px;
  552.     }
  553. }
  554.  
  555. @media only screen and (max-width: 700px) {
  556.  
  557. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement