API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 21st, 2019
132
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 93.00 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4.  
  5.  
  6. <!--TODO - implement 'MyProfile' page (Tudor)-->
  7. <!--TODO - implement movie view (Leo)-->
  8. <!--TODO - implement media queries (Leo)-->
  9. <!--TODO - implement 'Login' page (?)-->
  10.  
  11.  
  12.  
  13. <head>
  14.     <title>YoMovie</title>
  15.     <meta charset="utf-8" />
  16.  
  17.     <link rel="stylesheet" href="style.css" type="text/css">
  18.     <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css" type="text/css">
  19.     <script src="primitive.js" type="text/javascript" defer=""></script>
  20.     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  21.  
  22.     <meta name="viewport" content="width=device-width initial-scale=1.0">
  23. </head>
  24.  
  25. <body>
  26.     <div class="parallax"></div>
  27.  
  28.     <nav class="navBar">
  29.         <ul>
  30.             <!--TODO - replace logo-->
  31.             <li style="margin-top: 5px;"><img src="images/logo.png" height="40px"></li>
  32.  
  33.             <!--TODO - class for current page-->
  34.             <li class="pageLink currentPage"><a href=""><span>Home</span></a></li>
  35.             <li class="pageLink"><a href=""><span>Catalog</span></a></li>
  36.  
  37.             <!--TODO - visible before authentication-->
  38.             <li class="authenticationBtn" style="float: right; background-color: #a22c29"><a href=""><span>Authenticate</span></a></li>
  39.  
  40.             <!--TODO - visible after authentication-->
  41.             <li class="pageLink" style="float: right;"><a href=""><i class="fa fa-user"></i><span> Leonard</span></a></li>
  42.         </ul>
  43.     </nav>
  44.  
  45.  
  46.  
  47.     <div class="overlay" aria-hidden="false">
  48.         <div class="blackScreen">
  49.             <div class="close-overlay">
  50.             <i class="fa fa-2x fa-times-circle"></i></div>
  51.         </div>
  52.  
  53.         <div class="movieContent"style="padding-bottom: 20px;">
  54.             <video src="videos/SampleVideo_1280x720_5mb.mp4" controls></video>
  55.  
  56.             <div class="movieSection">
  57.                 <span>Movie Title</span><span>|</span>
  58.                 <span>Year</span><span>|</span>
  59.                 <span>Genre</span><span>|</span>
  60.                 <span>8.1<sub>/10</sub></span>
  61.             </div>
  62.  
  63.             <div class="movieSection" style="display: flex; flex-direction: row;">
  64.                 <!--TODO - add AJAX section here-->
  65.  
  66.                 <label class="container">Watch List
  67.                     <input type="checkbox">
  68.                     <span class="checkmark"></span>
  69.                 </label>
  70.  
  71.                 <div class="custom-select">
  72.                     <select>
  73.                         <option value="0">Review Movie</option>
  74.                         <option value="1">1</option>
  75.                         <option value="2">2</option>
  76.                         <option value="3">3</option>
  77.                         <option value="4">4</option>
  78.                         <option value="5">5</option>
  79.                         <option value="6">6</option>
  80.                         <option value="7">7</option>
  81.                         <option value="8">8</option>
  82.                         <option value="9">9</option>
  83.                         <option value="10">10</option>
  84.                     </select>
  85.                 </div>
  86.             </div>
  87.  
  88.             <div class="movieSection" style="display: flex; flex-direction: row;">
  89.                 <div class="summary">
  90.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a sagittis diam, at dapibus lorem. Cras bibendum rhoncus scelerisque. Etiam lobortis ante massa, in placerat erat hendrerit non. Nullam a suscipit purus. Sed egestas venenatis vehicula. Maecenas mattis ultricies dolor, et lacinia elit. Maecenas vitae risus dictum, iaculis ipsum non, placerat ipsum.</p>
  91.                     <p>Proin turpis velit, mattis in tellus vitae, tristique tristique odio. Fusce blandit, nisi eget tempus blandit, dolor sem imperdiet ligula, quis convallis orci tortor vitae ex. Vivamus sit amet rhoncus libero. Donec porttitor mi sed lorem finibus, vitae rhoncus magna placerat. Maecenas laoreet nulla sed vestibulum consectetur. In quis sapien nec nunc finibus mattis non et magna. Cras erat libero, euismod id lacinia quis, mollis nec dui. Maecenas consequat est vitae turpis accumsan bibendum. Curabitur purus lacus, tempor vehicula elit id, tempor elementum sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt rutrum sem, vel volutpat nunc ullamcorper ac. Curabitur quis nisi lorem.</p>
  92.                     <p>Cras sit amet tincidunt odio. Phasellus non magna sem. Cras eleifend sapien sollicitudin maximus accumsan. Curabitur ex dolor, suscipit tempor mauris eu, accumsan tincidunt sapien. Quisque scelerisque turpis et nibh eleifend tincidunt. Donec elit tellus, molestie at faucibus vel, tincidunt non tellus. Nunc at sem blandit, bibendum mi sed, tempus risus. Donec sollicitudin, orci id egestas auctor, quam sapien pharetra lacus, et vestibulum mauris lorem et lacus.</p>
  93.                 </div>
  94.                 <div style="display: flex; flex-direction: column;">
  95.                     <p>
  96.                         <span style="color: gray">Director: </span>
  97.                         <span>Taylor Hackford</span>
  98.                     </p>
  99.                     <p>
  100.                         <span style="color: gray">Writers: </span>
  101.                         <span>Andrew Neiderman, Jonathan Lemkin</span>
  102.                     </p>
  103.                     <p>
  104.                         <span style="color: gray">Stars: </span>
  105.                         <span>Keanu Reeves, Al Pacino, Charlize Theron, Jeffrey Jones, Judith Ivey</span>
  106.                     </p>
  107.                     <p>
  108.                         <span style="color: gray">Duration: </span>
  109.                         <span>2h 24min</span>
  110.                     </p>
  111.                 </div>
  112.             </div>
  113.         </div>
  114.     </div>
  115.  
  116.  
  117.  
  118.     <div class="content">
  119.         <div class="movieListSection">
  120.             <span>Weekly Top</span>
  121.             <hr style="width: 100%; margin: 10px 0;">
  122.             <i id="btn-1" class="slideBtn leftSlideBtn fa fa-3x fa-chevron-circle-left"></i>
  123.             <i id="btn-2" class="slideBtn rightSlideBtn fa fa-3x fa-chevron-circle-right"></i>
  124.  
  125.             <div id="slide-1" class="slide" data-target="slide">
  126.  
  127.                     <div class="item" data-target="item">
  128.  
  129.                         <div class="flip-card">
  130.                             <div class="flip-card-inner">
  131.  
  132.                                 <div class="flip-card-front">
  133.                                     <img src="images/HP7jpg">
  134.                                 </div>
  135.  
  136.                                 <div class="flip-card-back">
  137.                                     <div class="movieDescriptionWrapper">
  138.                                         <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  139.                                     </div>
  140.                                 </div>
  141.  
  142.                             </div>
  143.                         </div>
  144.  
  145.                         <div class="movieDataDiv open-overlay">
  146.                             <h3 class="movieData">First Movie</h3>
  147.                             <span class="movieData">Year | Genre1, Genre2</span>
  148.                         </div>
  149.  
  150.                     </div>
  151.  
  152.                     <div class="item" data-target="item">
  153.  
  154.                         <div class="flip-card">
  155.                             <div class="flip-card-inner">
  156.  
  157.                                 <div class="flip-card-front">
  158.                                     <img src="images/HP6jpg">
  159.                                 </div>
  160.  
  161.                                 <div class="flip-card-back">
  162.                                     <div class="movieDescriptionWrapper">
  163.                                         <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  164.                                     </div>
  165.                                 </div>
  166.  
  167.                             </div>
  168.                         </div>
  169.  
  170.                         <div class="movieDataDiv open-overlay">
  171.                             <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  172.                             <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  173.                         </div>
  174.  
  175.                     </div>
  176.  
  177.                     <div class="item" data-target="item">
  178.  
  179.                         <div class="flip-card">
  180.                             <div class="flip-card-inner">
  181.  
  182.                                 <div class="flip-card-front">
  183.                                     <img src="images/GodFather.jpg">
  184.                                 </div>
  185.  
  186.                                 <div class="flip-card-back">
  187.                                     <div class="movieDescriptionWrapper">
  188.                                         <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  189.                                     </div>
  190.                                 </div>
  191.  
  192.                             </div>
  193.                         </div>
  194.  
  195.                         <div class="movieDataDiv open-overlay">
  196.                             <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  197.                             <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  198.                         </div>
  199.  
  200.                     </div>
  201.  
  202.                     <div class="item" data-target="item">
  203.  
  204.                         <div class="flip-card">
  205.                             <div class="flip-card-inner">
  206.  
  207.                                 <div class="flip-card-front">
  208.                                     <img src="images/DA.png">
  209.                                 </div>
  210.  
  211.                                 <div class="flip-card-back">
  212.                                     <div class="movieDescriptionWrapper">
  213.                                         <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  214.                                     </div>
  215.                                 </div>
  216.  
  217.                             </div>
  218.                         </div>
  219.  
  220.                         <div class="movieDataDiv open-overlay">
  221.                             <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  222.                             <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  223.                         </div>
  224.  
  225.                     </div>
  226.  
  227.                     <div class="item" data-target="item">
  228.  
  229.                         <div class="flip-card">
  230.                             <div class="flip-card-inner">
  231.  
  232.                                 <div class="flip-card-front">
  233.                                     <img src="images/HP7jpg">
  234.                                 </div>
  235.  
  236.                                 <div class="flip-card-back">
  237.                                     <div class="movieDescriptionWrapper">
  238.                                         <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  239.                                     </div>
  240.                                 </div>
  241.  
  242.                             </div>
  243.                         </div>
  244.  
  245.                         <div class="movieDataDiv open-overlay">
  246.                             <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  247.                             <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  248.                         </div>
  249.  
  250.                     </div>
  251.  
  252.                     <div class="item" data-target="item">
  253.  
  254.                         <div class="flip-card">
  255.                             <div class="flip-card-inner">
  256.  
  257.                                 <div class="flip-card-front">
  258.                                     <img src="images/HP6jpg">
  259.                                 </div>
  260.  
  261.                                 <div class="flip-card-back">
  262.                                     <div class="movieDescriptionWrapper">
  263.                                         <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  264.                                     </div>
  265.                                 </div>
  266.  
  267.                             </div>
  268.                         </div>
  269.  
  270.                         <div class="movieDataDiv open-overlay">
  271.                             <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  272.                             <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  273.                         </div>
  274.  
  275.                     </div>
  276.  
  277.                     <div class="item" data-target="item">
  278.  
  279.                         <div class="flip-card">
  280.                             <div class="flip-card-inner">
  281.  
  282.                                 <div class="flip-card-front">
  283.                                     <img src="images/GodFather.jpg">
  284.                                 </div>
  285.  
  286.                                 <div class="flip-card-back">
  287.                                     <div class="movieDescriptionWrapper">
  288.                                         <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  289.                                     </div>
  290.                                 </div>
  291.  
  292.                             </div>
  293.                         </div>
  294.  
  295.                         <div class="movieDataDiv open-overlay">
  296.                             <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  297.                             <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  298.                         </div>
  299.  
  300.                     </div>
  301.  
  302.                     <div class="item" data-target="item">
  303.  
  304.                         <div class="flip-card">
  305.                             <div class="flip-card-inner">
  306.  
  307.                                 <div class="flip-card-front">
  308.                                     <img src="images/DA.png">
  309.                                 </div>
  310.  
  311.                                 <div class="flip-card-back">
  312.                                     <div class="movieDescriptionWrapper">
  313.                                         <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  314.                                     </div>
  315.                                 </div>
  316.  
  317.                             </div>
  318.                         </div>
  319.  
  320.                         <div class="movieDataDiv open-overlay">
  321.                             <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  322.                             <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  323.                         </div>
  324.  
  325.                     </div>
  326.  
  327.                     <div class="item" data-target="item">
  328.  
  329.                         <div class="flip-card">
  330.                             <div class="flip-card-inner">
  331.  
  332.                                 <div class="flip-card-front">
  333.                                     <img src="images/HP7jpg">
  334.                                 </div>
  335.  
  336.                                 <div class="flip-card-back">
  337.                                     <div class="movieDescriptionWrapper">
  338.                                         <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  339.                                     </div>
  340.                                 </div>
  341.  
  342.                             </div>
  343.                         </div>
  344.  
  345.                         <div class="movieDataDiv open-overlay">
  346.                             <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  347.                             <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  348.                         </div>
  349.  
  350.                     </div>
  351.  
  352.                     <div class="item" data-target="item">
  353.  
  354.                         <div class="flip-card">
  355.                             <div class="flip-card-inner">
  356.  
  357.                                 <div class="flip-card-front">
  358.                                     <img src="images/HP6jpg">
  359.                                 </div>
  360.  
  361.                                 <div class="flip-card-back">
  362.                                     <div class="movieDescriptionWrapper">
  363.                                         <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  364.                                     </div>
  365.                                 </div>
  366.  
  367.                             </div>
  368.                         </div>
  369.  
  370.                         <div class="movieDataDiv open-overlay">
  371.                             <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  372.                             <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  373.                         </div>
  374.  
  375.                     </div>
  376.  
  377.                     <div class="item" data-target="item">
  378.  
  379.                         <div class="flip-card">
  380.                             <div class="flip-card-inner">
  381.  
  382.                                 <div class="flip-card-front">
  383.                                     <img src="images/GodFather.jpg">
  384.                                 </div>
  385.  
  386.                                 <div class="flip-card-back">
  387.                                     <div class="movieDescriptionWrapper">
  388.                                         <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  389.                                     </div>
  390.                                 </div>
  391.  
  392.                             </div>
  393.                         </div>
  394.  
  395.                         <div class="movieDataDiv open-overlay">
  396.                             <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  397.                             <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  398.                         </div>
  399.  
  400.                     </div>
  401.  
  402.                     <div class="item" data-target="item">
  403.  
  404.                         <div class="flip-card">
  405.                             <div class="flip-card-inner">
  406.  
  407.                                 <div class="flip-card-front">
  408.                                     <img src="images/DA.png">
  409.                                 </div>
  410.  
  411.                                 <div class="flip-card-back">
  412.                                     <div class="movieDescriptionWrapper">
  413.                                         <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  414.                                     </div>
  415.                                 </div>
  416.  
  417.                             </div>
  418.                         </div>
  419.  
  420.                         <div class="movieDataDiv open-overlay">
  421.                             <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  422.                             <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  423.                         </div>
  424.  
  425.                     </div>
  426.  
  427.                     <div class="item" data-target="item">
  428.  
  429.                         <div class="flip-card">
  430.                             <div class="flip-card-inner">
  431.  
  432.                                 <div class="flip-card-front">
  433.                                     <img src="images/HP7jpg">
  434.                                 </div>
  435.  
  436.                                 <div class="flip-card-back">
  437.                                     <div class="movieDescriptionWrapper">
  438.                                         <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  439.                                     </div>
  440.                                 </div>
  441.  
  442.                             </div>
  443.                         </div>
  444.  
  445.                         <div class="movieDataDiv open-overlay">
  446.                             <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  447.                             <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  448.                         </div>
  449.  
  450.                     </div>
  451.  
  452.                     <div class="item" data-target="item">
  453.  
  454.                         <div class="flip-card">
  455.                             <div class="flip-card-inner">
  456.  
  457.                                 <div class="flip-card-front">
  458.                                     <img src="images/HP6jpg">
  459.                                 </div>
  460.  
  461.                                 <div class="flip-card-back">
  462.                                     <div class="movieDescriptionWrapper">
  463.                                         <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  464.                                     </div>
  465.                                 </div>
  466.  
  467.                             </div>
  468.                         </div>
  469.  
  470.                         <div class="movieDataDiv open-overlay">
  471.                             <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  472.                             <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  473.                         </div>
  474.  
  475.                     </div>
  476.  
  477.                     <div class="item" data-target="item">
  478.  
  479.                         <div class="flip-card">
  480.                             <div class="flip-card-inner">
  481.  
  482.                                 <div class="flip-card-front">
  483.                                     <img src="images/GodFather.jpg">
  484.                                 </div>
  485.  
  486.                                 <div class="flip-card-back">
  487.                                     <div class="movieDescriptionWrapper">
  488.                                         <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  489.                                     </div>
  490.                                 </div>
  491.  
  492.                             </div>
  493.                         </div>
  494.  
  495.                         <div class="movieDataDiv open-overlay">
  496.                             <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  497.                             <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  498.                         </div>
  499.  
  500.                     </div>
  501.  
  502.                     <div class="item" data-target="item">
  503.  
  504.                         <div class="flip-card">
  505.                             <div class="flip-card-inner">
  506.  
  507.                                 <div class="flip-card-front">
  508.                                     <img src="images/DA.png">
  509.                                 </div>
  510.  
  511.                                 <div class="flip-card-back">
  512.                                     <div class="movieDescriptionWrapper">
  513.                                         <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  514.                                     </div>
  515.                                 </div>
  516.  
  517.                             </div>
  518.                         </div>
  519.  
  520.                         <div class="movieDataDiv open-overlay">
  521.                             <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  522.                             <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  523.                         </div>
  524.  
  525.                     </div>
  526.                 </div>
  527.         </div>
  528.  
  529.         <div class="movieListSection">
  530.             <span>Recently Added</span>
  531.             <hr style="width: 100%; margin: 10px 0;">
  532.             <i id="btn-3" class="slideBtn leftSlideBtn fa fa-3x fa-chevron-circle-left"></i>
  533.             <i id="btn-4" class="slideBtn rightSlideBtn fa fa-3x fa-chevron-circle-right"></i>
  534.  
  535.             <div id="slide-2" class="slide" data-target="slide">
  536.  
  537.                 <div class="item" data-target="item">
  538.  
  539.                     <div class="flip-card">
  540.                         <div class="flip-card-inner">
  541.  
  542.                             <div class="flip-card-front">
  543.                                 <img src="images/HP7jpg">
  544.                             </div>
  545.  
  546.                             <div class="flip-card-back">
  547.                                 <div class="movieDescriptionWrapper">
  548.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  549.                                 </div>
  550.                             </div>
  551.  
  552.                         </div>
  553.                     </div>
  554.  
  555.                     <div class="movieDataDiv open-overlay">
  556.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  557.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  558.                     </div>
  559.  
  560.                 </div>
  561.  
  562.                 <div class="item" data-target="item">
  563.  
  564.                     <div class="flip-card">
  565.                         <div class="flip-card-inner">
  566.  
  567.                             <div class="flip-card-front">
  568.                                 <img src="images/HP6jpg">
  569.                             </div>
  570.  
  571.                             <div class="flip-card-back">
  572.                                 <div class="movieDescriptionWrapper">
  573.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  574.                                 </div>
  575.                             </div>
  576.  
  577.                         </div>
  578.                     </div>
  579.  
  580.                     <div class="movieDataDiv open-overlay">
  581.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  582.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  583.                     </div>
  584.  
  585.                 </div>
  586.  
  587.                 <div class="item" data-target="item">
  588.  
  589.                     <div class="flip-card">
  590.                         <div class="flip-card-inner">
  591.  
  592.                             <div class="flip-card-front">
  593.                                 <img src="images/GodFather.jpg">
  594.                             </div>
  595.  
  596.                             <div class="flip-card-back">
  597.                                 <div class="movieDescriptionWrapper">
  598.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  599.                                 </div>
  600.                             </div>
  601.  
  602.                         </div>
  603.                     </div>
  604.  
  605.                     <div class="movieDataDiv open-overlay">
  606.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  607.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  608.                     </div>
  609.  
  610.                 </div>
  611.  
  612.                 <div class="item" data-target="item">
  613.  
  614.                     <div class="flip-card">
  615.                         <div class="flip-card-inner">
  616.  
  617.                             <div class="flip-card-front">
  618.                                 <img src="images/DA.png">
  619.                             </div>
  620.  
  621.                             <div class="flip-card-back">
  622.                                 <div class="movieDescriptionWrapper">
  623.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  624.                                 </div>
  625.                             </div>
  626.  
  627.                         </div>
  628.                     </div>
  629.  
  630.                     <div class="movieDataDiv open-overlay">
  631.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  632.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  633.                     </div>
  634.  
  635.                 </div>
  636.  
  637.                 <div class="item" data-target="item">
  638.  
  639.                     <div class="flip-card">
  640.                         <div class="flip-card-inner">
  641.  
  642.                             <div class="flip-card-front">
  643.                                 <img src="images/HP7jpg">
  644.                             </div>
  645.  
  646.                             <div class="flip-card-back">
  647.                                 <div class="movieDescriptionWrapper">
  648.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  649.                                 </div>
  650.                             </div>
  651.  
  652.                         </div>
  653.                     </div>
  654.  
  655.                     <div class="movieDataDiv open-overlay">
  656.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  657.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  658.                     </div>
  659.  
  660.                 </div>
  661.  
  662.                 <div class="item" data-target="item">
  663.  
  664.                     <div class="flip-card">
  665.                         <div class="flip-card-inner">
  666.  
  667.                             <div class="flip-card-front">
  668.                                 <img src="images/HP6jpg">
  669.                             </div>
  670.  
  671.                             <div class="flip-card-back">
  672.                                 <div class="movieDescriptionWrapper">
  673.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  674.                                 </div>
  675.                             </div>
  676.  
  677.                         </div>
  678.                     </div>
  679.  
  680.                     <div class="movieDataDiv open-overlay">
  681.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  682.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  683.                     </div>
  684.  
  685.                 </div>
  686.  
  687.                 <div class="item" data-target="item">
  688.  
  689.                     <div class="flip-card">
  690.                         <div class="flip-card-inner">
  691.  
  692.                             <div class="flip-card-front">
  693.                                 <img src="images/GodFather.jpg">
  694.                             </div>
  695.  
  696.                             <div class="flip-card-back">
  697.                                 <div class="movieDescriptionWrapper">
  698.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  699.                                 </div>
  700.                             </div>
  701.  
  702.                         </div>
  703.                     </div>
  704.  
  705.                     <div class="movieDataDiv open-overlay">
  706.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  707.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  708.                     </div>
  709.  
  710.                 </div>
  711.  
  712.                 <div class="item" data-target="item">
  713.  
  714.                     <div class="flip-card">
  715.                         <div class="flip-card-inner">
  716.  
  717.                             <div class="flip-card-front">
  718.                                 <img src="images/DA.png">
  719.                             </div>
  720.  
  721.                             <div class="flip-card-back">
  722.                                 <div class="movieDescriptionWrapper">
  723.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  724.                                 </div>
  725.                             </div>
  726.  
  727.                         </div>
  728.                     </div>
  729.  
  730.                     <div class="movieDataDiv open-overlay">
  731.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  732.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  733.                     </div>
  734.  
  735.                 </div>
  736.  
  737.                 <div class="item" data-target="item">
  738.  
  739.                     <div class="flip-card">
  740.                         <div class="flip-card-inner">
  741.  
  742.                             <div class="flip-card-front">
  743.                                 <img src="images/HP7jpg">
  744.                             </div>
  745.  
  746.                             <div class="flip-card-back">
  747.                                 <div class="movieDescriptionWrapper">
  748.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  749.                                 </div>
  750.                             </div>
  751.  
  752.                         </div>
  753.                     </div>
  754.  
  755.                     <div class="movieDataDiv open-overlay">
  756.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  757.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  758.                     </div>
  759.  
  760.                 </div>
  761.  
  762.                 <div class="item" data-target="item">
  763.  
  764.                     <div class="flip-card">
  765.                         <div class="flip-card-inner">
  766.  
  767.                             <div class="flip-card-front">
  768.                                 <img src="images/HP6jpg">
  769.                             </div>
  770.  
  771.                             <div class="flip-card-back">
  772.                                 <div class="movieDescriptionWrapper">
  773.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  774.                                 </div>
  775.                             </div>
  776.  
  777.                         </div>
  778.                     </div>
  779.  
  780.                     <div class="movieDataDiv open-overlay">
  781.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  782.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  783.                     </div>
  784.  
  785.                 </div>
  786.  
  787.                 <div class="item" data-target="item">
  788.  
  789.                     <div class="flip-card">
  790.                         <div class="flip-card-inner">
  791.  
  792.                             <div class="flip-card-front">
  793.                                 <img src="images/GodFather.jpg">
  794.                             </div>
  795.  
  796.                             <div class="flip-card-back">
  797.                                 <div class="movieDescriptionWrapper">
  798.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  799.                                 </div>
  800.                             </div>
  801.  
  802.                         </div>
  803.                     </div>
  804.  
  805.                     <div class="movieDataDiv open-overlay">
  806.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  807.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  808.                     </div>
  809.  
  810.                 </div>
  811.  
  812.                 <div class="item" data-target="item">
  813.  
  814.                     <div class="flip-card">
  815.                         <div class="flip-card-inner">
  816.  
  817.                             <div class="flip-card-front">
  818.                                 <img src="images/DA.png">
  819.                             </div>
  820.  
  821.                             <div class="flip-card-back">
  822.                                 <div class="movieDescriptionWrapper">
  823.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  824.                                 </div>
  825.                             </div>
  826.  
  827.                         </div>
  828.                     </div>
  829.  
  830.                     <div class="movieDataDiv open-overlay">
  831.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  832.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  833.                     </div>
  834.  
  835.                 </div>
  836.  
  837.                 <div class="item" data-target="item">
  838.  
  839.                     <div class="flip-card">
  840.                         <div class="flip-card-inner">
  841.  
  842.                             <div class="flip-card-front">
  843.                                 <img src="images/HP7jpg">
  844.                             </div>
  845.  
  846.                             <div class="flip-card-back">
  847.                                 <div class="movieDescriptionWrapper">
  848.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  849.                                 </div>
  850.                             </div>
  851.  
  852.                         </div>
  853.                     </div>
  854.  
  855.                     <div class="movieDataDiv open-overlay">
  856.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  857.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  858.                     </div>
  859.  
  860.                 </div>
  861.  
  862.                 <div class="item" data-target="item">
  863.  
  864.                     <div class="flip-card">
  865.                         <div class="flip-card-inner">
  866.  
  867.                             <div class="flip-card-front">
  868.                                 <img src="images/HP6jpg">
  869.                             </div>
  870.  
  871.                             <div class="flip-card-back">
  872.                                 <div class="movieDescriptionWrapper">
  873.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  874.                                 </div>
  875.                             </div>
  876.  
  877.                         </div>
  878.                     </div>
  879.  
  880.                     <div class="movieDataDiv open-overlay">
  881.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  882.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  883.                     </div>
  884.  
  885.                 </div>
  886.  
  887.                 <div class="item" data-target="item">
  888.  
  889.                     <div class="flip-card">
  890.                         <div class="flip-card-inner">
  891.  
  892.                             <div class="flip-card-front">
  893.                                 <img src="images/GodFather.jpg">
  894.                             </div>
  895.  
  896.                             <div class="flip-card-back">
  897.                                 <div class="movieDescriptionWrapper">
  898.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  899.                                 </div>
  900.                             </div>
  901.  
  902.                         </div>
  903.                     </div>
  904.  
  905.                     <div class="movieDataDiv open-overlay">
  906.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  907.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  908.                     </div>
  909.  
  910.                 </div>
  911.  
  912.                 <div class="item" data-target="item">
  913.  
  914.                     <div class="flip-card">
  915.                         <div class="flip-card-inner">
  916.  
  917.                             <div class="flip-card-front">
  918.                                 <img src="images/DA.png">
  919.                             </div>
  920.  
  921.                             <div class="flip-card-back">
  922.                                 <div class="movieDescriptionWrapper">
  923.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  924.                                 </div>
  925.                             </div>
  926.  
  927.                         </div>
  928.                     </div>
  929.  
  930.                     <div class="movieDataDiv open-overlay">
  931.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  932.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  933.                     </div>
  934.  
  935.                 </div>
  936.             </div>
  937.         </div>
  938.  
  939.         <div class="movieListSection">
  940.             <span>Action/ Adventure</span>
  941.             <hr style="width: 100%; margin: 10px 0;">
  942.             <i id="btn-5" class="slideBtn leftSlideBtn fa fa-3x fa-chevron-circle-left"></i>
  943.             <i id="btn-6" class="slideBtn rightSlideBtn fa fa-3x fa-chevron-circle-right"></i>
  944.  
  945.             <div id="slide-3" class="slide" data-target="slide">
  946.  
  947.                 <div class="item" data-target="item">
  948.  
  949.                     <div class="flip-card">
  950.                         <div class="flip-card-inner">
  951.  
  952.                             <div class="flip-card-front">
  953.                                 <img src="images/HP7jpg">
  954.                             </div>
  955.  
  956.                             <div class="flip-card-back">
  957.                                 <div class="movieDescriptionWrapper">
  958.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  959.                                 </div>
  960.                             </div>
  961.  
  962.                         </div>
  963.                     </div>
  964.  
  965.                     <div class="movieDataDiv open-overlay">
  966.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  967.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  968.                     </div>
  969.  
  970.                 </div>
  971.  
  972.                 <div class="item" data-target="item">
  973.  
  974.                     <div class="flip-card">
  975.                         <div class="flip-card-inner">
  976.  
  977.                             <div class="flip-card-front">
  978.                                 <img src="images/HP6jpg">
  979.                             </div>
  980.  
  981.                             <div class="flip-card-back">
  982.                                 <div class="movieDescriptionWrapper">
  983.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  984.                                 </div>
  985.                             </div>
  986.  
  987.                         </div>
  988.                     </div>
  989.  
  990.                     <div class="movieDataDiv open-overlay">
  991.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  992.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  993.                     </div>
  994.  
  995.                 </div>
  996.  
  997.                 <div class="item" data-target="item">
  998.  
  999.                     <div class="flip-card">
  1000.                         <div class="flip-card-inner">
  1001.  
  1002.                             <div class="flip-card-front">
  1003.                                 <img src="images/GodFather.jpg">
  1004.                             </div>
  1005.  
  1006.                             <div class="flip-card-back">
  1007.                                 <div class="movieDescriptionWrapper">
  1008.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1009.                                 </div>
  1010.                             </div>
  1011.  
  1012.                         </div>
  1013.                     </div>
  1014.  
  1015.                     <div class="movieDataDiv open-overlay">
  1016.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1017.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1018.                     </div>
  1019.  
  1020.                 </div>
  1021.  
  1022.                 <div class="item" data-target="item">
  1023.  
  1024.                     <div class="flip-card">
  1025.                         <div class="flip-card-inner">
  1026.  
  1027.                             <div class="flip-card-front">
  1028.                                 <img src="images/DA.png">
  1029.                             </div>
  1030.  
  1031.                             <div class="flip-card-back">
  1032.                                 <div class="movieDescriptionWrapper">
  1033.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1034.                                 </div>
  1035.                             </div>
  1036.  
  1037.                         </div>
  1038.                     </div>
  1039.  
  1040.                     <div class="movieDataDiv open-overlay">
  1041.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1042.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1043.                     </div>
  1044.  
  1045.                 </div>
  1046.  
  1047.                 <div class="item" data-target="item">
  1048.  
  1049.                     <div class="flip-card">
  1050.                         <div class="flip-card-inner">
  1051.  
  1052.                             <div class="flip-card-front">
  1053.                                 <img src="images/HP7jpg">
  1054.                             </div>
  1055.  
  1056.                             <div class="flip-card-back">
  1057.                                 <div class="movieDescriptionWrapper">
  1058.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1059.                                 </div>
  1060.                             </div>
  1061.  
  1062.                         </div>
  1063.                     </div>
  1064.  
  1065.                     <div class="movieDataDiv open-overlay">
  1066.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1067.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1068.                     </div>
  1069.  
  1070.                 </div>
  1071.  
  1072.                 <div class="item" data-target="item">
  1073.  
  1074.                     <div class="flip-card">
  1075.                         <div class="flip-card-inner">
  1076.  
  1077.                             <div class="flip-card-front">
  1078.                                 <img src="images/HP6jpg">
  1079.                             </div>
  1080.  
  1081.                             <div class="flip-card-back">
  1082.                                 <div class="movieDescriptionWrapper">
  1083.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1084.                                 </div>
  1085.                             </div>
  1086.  
  1087.                         </div>
  1088.                     </div>
  1089.  
  1090.                     <div class="movieDataDiv open-overlay">
  1091.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1092.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1093.                     </div>
  1094.  
  1095.                 </div>
  1096.  
  1097.                 <div class="item" data-target="item">
  1098.  
  1099.                     <div class="flip-card">
  1100.                         <div class="flip-card-inner">
  1101.  
  1102.                             <div class="flip-card-front">
  1103.                                 <img src="images/GodFather.jpg">
  1104.                             </div>
  1105.  
  1106.                             <div class="flip-card-back">
  1107.                                 <div class="movieDescriptionWrapper">
  1108.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1109.                                 </div>
  1110.                             </div>
  1111.  
  1112.                         </div>
  1113.                     </div>
  1114.  
  1115.                     <div class="movieDataDiv open-overlay">
  1116.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1117.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1118.                     </div>
  1119.  
  1120.                 </div>
  1121.  
  1122.                 <div class="item" data-target="item">
  1123.  
  1124.                     <div class="flip-card">
  1125.                         <div class="flip-card-inner">
  1126.  
  1127.                             <div class="flip-card-front">
  1128.                                 <img src="images/DA.png">
  1129.                             </div>
  1130.  
  1131.                             <div class="flip-card-back">
  1132.                                 <div class="movieDescriptionWrapper">
  1133.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1134.                                 </div>
  1135.                             </div>
  1136.  
  1137.                         </div>
  1138.                     </div>
  1139.  
  1140.                     <div class="movieDataDiv open-overlay">
  1141.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1142.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1143.                     </div>
  1144.  
  1145.                 </div>
  1146.  
  1147.                 <div class="item" data-target="item">
  1148.  
  1149.                     <div class="flip-card">
  1150.                         <div class="flip-card-inner">
  1151.  
  1152.                             <div class="flip-card-front">
  1153.                                 <img src="images/HP7jpg">
  1154.                             </div>
  1155.  
  1156.                             <div class="flip-card-back">
  1157.                                 <div class="movieDescriptionWrapper">
  1158.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1159.                                 </div>
  1160.                             </div>
  1161.  
  1162.                         </div>
  1163.                     </div>
  1164.  
  1165.                     <div class="movieDataDiv open-overlay">
  1166.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1167.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1168.                     </div>
  1169.  
  1170.                 </div>
  1171.  
  1172.                 <div class="item" data-target="item">
  1173.  
  1174.                     <div class="flip-card">
  1175.                         <div class="flip-card-inner">
  1176.  
  1177.                             <div class="flip-card-front">
  1178.                                 <img src="images/HP6jpg">
  1179.                             </div>
  1180.  
  1181.                             <div class="flip-card-back">
  1182.                                 <div class="movieDescriptionWrapper">
  1183.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1184.                                 </div>
  1185.                             </div>
  1186.  
  1187.                         </div>
  1188.                     </div>
  1189.  
  1190.                     <div class="movieDataDiv open-overlay">
  1191.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1192.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1193.                     </div>
  1194.  
  1195.                 </div>
  1196.  
  1197.                 <div class="item" data-target="item">
  1198.  
  1199.                     <div class="flip-card">
  1200.                         <div class="flip-card-inner">
  1201.  
  1202.                             <div class="flip-card-front">
  1203.                                 <img src="images/GodFather.jpg">
  1204.                             </div>
  1205.  
  1206.                             <div class="flip-card-back">
  1207.                                 <div class="movieDescriptionWrapper">
  1208.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1209.                                 </div>
  1210.                             </div>
  1211.  
  1212.                         </div>
  1213.                     </div>
  1214.  
  1215.                     <div class="movieDataDiv open-overlay">
  1216.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1217.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1218.                     </div>
  1219.  
  1220.                 </div>
  1221.  
  1222.                 <div class="item" data-target="item">
  1223.  
  1224.                     <div class="flip-card">
  1225.                         <div class="flip-card-inner">
  1226.  
  1227.                             <div class="flip-card-front">
  1228.                                 <img src="images/DA.png">
  1229.                             </div>
  1230.  
  1231.                             <div class="flip-card-back">
  1232.                                 <div class="movieDescriptionWrapper">
  1233.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1234.                                 </div>
  1235.                             </div>
  1236.  
  1237.                         </div>
  1238.                     </div>
  1239.  
  1240.                     <div class="movieDataDiv open-overlay">
  1241.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1242.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1243.                     </div>
  1244.  
  1245.                 </div>
  1246.  
  1247.                 <div class="item" data-target="item">
  1248.  
  1249.                     <div class="flip-card">
  1250.                         <div class="flip-card-inner">
  1251.  
  1252.                             <div class="flip-card-front">
  1253.                                 <img src="images/HP7jpg">
  1254.                             </div>
  1255.  
  1256.                             <div class="flip-card-back">
  1257.                                 <div class="movieDescriptionWrapper">
  1258.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1259.                                 </div>
  1260.                             </div>
  1261.  
  1262.                         </div>
  1263.                     </div>
  1264.  
  1265.                     <div class="movieDataDiv open-overlay">
  1266.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1267.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1268.                     </div>
  1269.  
  1270.                 </div>
  1271.  
  1272.                 <div class="item" data-target="item">
  1273.  
  1274.                     <div class="flip-card">
  1275.                         <div class="flip-card-inner">
  1276.  
  1277.                             <div class="flip-card-front">
  1278.                                 <img src="images/HP6jpg">
  1279.                             </div>
  1280.  
  1281.                             <div class="flip-card-back">
  1282.                                 <div class="movieDescriptionWrapper">
  1283.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1284.                                 </div>
  1285.                             </div>
  1286.  
  1287.                         </div>
  1288.                     </div>
  1289.  
  1290.                     <div class="movieDataDiv open-overlay">
  1291.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1292.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1293.                     </div>
  1294.  
  1295.                 </div>
  1296.  
  1297.                 <div class="item" data-target="item">
  1298.  
  1299.                     <div class="flip-card">
  1300.                         <div class="flip-card-inner">
  1301.  
  1302.                             <div class="flip-card-front">
  1303.                                 <img src="images/GodFather.jpg">
  1304.                             </div>
  1305.  
  1306.                             <div class="flip-card-back">
  1307.                                 <div class="movieDescriptionWrapper">
  1308.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1309.                                 </div>
  1310.                             </div>
  1311.  
  1312.                         </div>
  1313.                     </div>
  1314.  
  1315.                     <div class="movieDataDiv open-overlay">
  1316.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1317.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1318.                     </div>
  1319.  
  1320.                 </div>
  1321.  
  1322.                 <div class="item" data-target="item">
  1323.  
  1324.                     <div class="flip-card">
  1325.                         <div class="flip-card-inner">
  1326.  
  1327.                             <div class="flip-card-front">
  1328.                                 <img src="images/DA.png">
  1329.                             </div>
  1330.  
  1331.                             <div class="flip-card-back">
  1332.                                 <div class="movieDescriptionWrapper">
  1333.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1334.                                 </div>
  1335.                             </div>
  1336.  
  1337.                         </div>
  1338.                     </div>
  1339.  
  1340.                     <div class="movieDataDiv open-overlay">
  1341.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1342.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1343.                     </div>
  1344.  
  1345.                 </div>
  1346.             </div>
  1347.         </div>
  1348.  
  1349.         <div class="movieListSection">
  1350.             <span>SF/ Fantasy</span>
  1351.             <hr style="width: 100%; margin: 10px 0;">
  1352.             <i id="btn-7" class="slideBtn leftSlideBtn fa fa-3x fa-chevron-circle-left"></i>
  1353.             <i id="btn-8" class="slideBtn rightSlideBtn fa fa-3x fa-chevron-circle-right"></i>
  1354.  
  1355.             <div id="slide-4" class="slide" data-target="slide">
  1356.  
  1357.                 <div class="item" data-target="item">
  1358.  
  1359.                     <div class="flip-card">
  1360.                         <div class="flip-card-inner">
  1361.  
  1362.                             <div class="flip-card-front">
  1363.                                 <img src="images/HP7jpg">
  1364.                             </div>
  1365.  
  1366.                             <div class="flip-card-back">
  1367.                                 <div class="movieDescriptionWrapper">
  1368.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1369.                                 </div>
  1370.                             </div>
  1371.  
  1372.                         </div>
  1373.                     </div>
  1374.  
  1375.                     <div class="movieDataDiv open-overlay">
  1376.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1377.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1378.                     </div>
  1379.  
  1380.                 </div>
  1381.  
  1382.                 <div class="item" data-target="item">
  1383.  
  1384.                     <div class="flip-card">
  1385.                         <div class="flip-card-inner">
  1386.  
  1387.                             <div class="flip-card-front">
  1388.                                 <img src="images/HP6jpg">
  1389.                             </div>
  1390.  
  1391.                             <div class="flip-card-back">
  1392.                                 <div class="movieDescriptionWrapper">
  1393.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1394.                                 </div>
  1395.                             </div>
  1396.  
  1397.                         </div>
  1398.                     </div>
  1399.  
  1400.                     <div class="movieDataDiv open-overlay">
  1401.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1402.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1403.                     </div>
  1404.  
  1405.                 </div>
  1406.  
  1407.                 <div class="item" data-target="item">
  1408.  
  1409.                     <div class="flip-card">
  1410.                         <div class="flip-card-inner">
  1411.  
  1412.                             <div class="flip-card-front">
  1413.                                 <img src="images/GodFather.jpg">
  1414.                             </div>
  1415.  
  1416.                             <div class="flip-card-back">
  1417.                                 <div class="movieDescriptionWrapper">
  1418.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1419.                                 </div>
  1420.                             </div>
  1421.  
  1422.                         </div>
  1423.                     </div>
  1424.  
  1425.                     <div class="movieDataDiv open-overlay">
  1426.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1427.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1428.                     </div>
  1429.  
  1430.                 </div>
  1431.  
  1432.                 <div class="item" data-target="item">
  1433.  
  1434.                     <div class="flip-card">
  1435.                         <div class="flip-card-inner">
  1436.  
  1437.                             <div class="flip-card-front">
  1438.                                 <img src="images/DA.png">
  1439.                             </div>
  1440.  
  1441.                             <div class="flip-card-back">
  1442.                                 <div class="movieDescriptionWrapper">
  1443.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1444.                                 </div>
  1445.                             </div>
  1446.  
  1447.                         </div>
  1448.                     </div>
  1449.  
  1450.                     <div class="movieDataDiv open-overlay">
  1451.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1452.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1453.                     </div>
  1454.  
  1455.                 </div>
  1456.  
  1457.                 <div class="item" data-target="item">
  1458.  
  1459.                     <div class="flip-card">
  1460.                         <div class="flip-card-inner">
  1461.  
  1462.                             <div class="flip-card-front">
  1463.                                 <img src="images/HP7jpg">
  1464.                             </div>
  1465.  
  1466.                             <div class="flip-card-back">
  1467.                                 <div class="movieDescriptionWrapper">
  1468.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1469.                                 </div>
  1470.                             </div>
  1471.  
  1472.                         </div>
  1473.                     </div>
  1474.  
  1475.                     <div class="movieDataDiv open-overlay">
  1476.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1477.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1478.                     </div>
  1479.  
  1480.                 </div>
  1481.  
  1482.                 <div class="item" data-target="item">
  1483.  
  1484.                     <div class="flip-card">
  1485.                         <div class="flip-card-inner">
  1486.  
  1487.                             <div class="flip-card-front">
  1488.                                 <img src="images/HP6jpg">
  1489.                             </div>
  1490.  
  1491.                             <div class="flip-card-back">
  1492.                                 <div class="movieDescriptionWrapper">
  1493.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1494.                                 </div>
  1495.                             </div>
  1496.  
  1497.                         </div>
  1498.                     </div>
  1499.  
  1500.                     <div class="movieDataDiv open-overlay">
  1501.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1502.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1503.                     </div>
  1504.  
  1505.                 </div>
  1506.  
  1507.                 <div class="item" data-target="item">
  1508.  
  1509.                     <div class="flip-card">
  1510.                         <div class="flip-card-inner">
  1511.  
  1512.                             <div class="flip-card-front">
  1513.                                 <img src="images/GodFather.jpg">
  1514.                             </div>
  1515.  
  1516.                             <div class="flip-card-back">
  1517.                                 <div class="movieDescriptionWrapper">
  1518.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1519.                                 </div>
  1520.                             </div>
  1521.  
  1522.                         </div>
  1523.                     </div>
  1524.  
  1525.                     <div class="movieDataDiv open-overlay">
  1526.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1527.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1528.                     </div>
  1529.  
  1530.                 </div>
  1531.  
  1532.                 <div class="item" data-target="item">
  1533.  
  1534.                     <div class="flip-card">
  1535.                         <div class="flip-card-inner">
  1536.  
  1537.                             <div class="flip-card-front">
  1538.                                 <img src="images/DA.png">
  1539.                             </div>
  1540.  
  1541.                             <div class="flip-card-back">
  1542.                                 <div class="movieDescriptionWrapper">
  1543.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1544.                                 </div>
  1545.                             </div>
  1546.  
  1547.                         </div>
  1548.                     </div>
  1549.  
  1550.                     <div class="movieDataDiv open-overlay">
  1551.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1552.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1553.                     </div>
  1554.  
  1555.                 </div>
  1556.  
  1557.                 <div class="item" data-target="item">
  1558.  
  1559.                     <div class="flip-card">
  1560.                         <div class="flip-card-inner">
  1561.  
  1562.                             <div class="flip-card-front">
  1563.                                 <img src="images/HP7jpg">
  1564.                             </div>
  1565.  
  1566.                             <div class="flip-card-back">
  1567.                                 <div class="movieDescriptionWrapper">
  1568.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1569.                                 </div>
  1570.                             </div>
  1571.  
  1572.                         </div>
  1573.                     </div>
  1574.  
  1575.                     <div class="movieDataDiv open-overlay">
  1576.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1577.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1578.                     </div>
  1579.  
  1580.                 </div>
  1581.  
  1582.                 <div class="item" data-target="item">
  1583.  
  1584.                     <div class="flip-card">
  1585.                         <div class="flip-card-inner">
  1586.  
  1587.                             <div class="flip-card-front">
  1588.                                 <img src="images/HP6jpg">
  1589.                             </div>
  1590.  
  1591.                             <div class="flip-card-back">
  1592.                                 <div class="movieDescriptionWrapper">
  1593.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1594.                                 </div>
  1595.                             </div>
  1596.  
  1597.                         </div>
  1598.                     </div>
  1599.  
  1600.                     <div class="movieDataDiv open-overlay">
  1601.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1602.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1603.                     </div>
  1604.  
  1605.                 </div>
  1606.  
  1607.                 <div class="item" data-target="item">
  1608.  
  1609.                     <div class="flip-card">
  1610.                         <div class="flip-card-inner">
  1611.  
  1612.                             <div class="flip-card-front">
  1613.                                 <img src="images/GodFather.jpg">
  1614.                             </div>
  1615.  
  1616.                             <div class="flip-card-back">
  1617.                                 <div class="movieDescriptionWrapper">
  1618.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1619.                                 </div>
  1620.                             </div>
  1621.  
  1622.                         </div>
  1623.                     </div>
  1624.  
  1625.                     <div class="movieDataDiv open-overlay">
  1626.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1627.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1628.                     </div>
  1629.  
  1630.                 </div>
  1631.  
  1632.                 <div class="item" data-target="item">
  1633.  
  1634.                     <div class="flip-card">
  1635.                         <div class="flip-card-inner">
  1636.  
  1637.                             <div class="flip-card-front">
  1638.                                 <img src="images/DA.png">
  1639.                             </div>
  1640.  
  1641.                             <div class="flip-card-back">
  1642.                                 <div class="movieDescriptionWrapper">
  1643.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1644.                                 </div>
  1645.                             </div>
  1646.  
  1647.                         </div>
  1648.                     </div>
  1649.  
  1650.                     <div class="movieDataDiv open-overlay">
  1651.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1652.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1653.                     </div>
  1654.  
  1655.                 </div>
  1656.  
  1657.                 <div class="item" data-target="item">
  1658.  
  1659.                     <div class="flip-card">
  1660.                         <div class="flip-card-inner">
  1661.  
  1662.                             <div class="flip-card-front">
  1663.                                 <img src="images/HP7jpg">
  1664.                             </div>
  1665.  
  1666.                             <div class="flip-card-back">
  1667.                                 <div class="movieDescriptionWrapper">
  1668.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1669.                                 </div>
  1670.                             </div>
  1671.  
  1672.                         </div>
  1673.                     </div>
  1674.  
  1675.                     <div class="movieDataDiv open-overlay">
  1676.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1677.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1678.                     </div>
  1679.  
  1680.                 </div>
  1681.  
  1682.                 <div class="item" data-target="item">
  1683.  
  1684.                     <div class="flip-card">
  1685.                         <div class="flip-card-inner">
  1686.  
  1687.                             <div class="flip-card-front">
  1688.                                 <img src="images/HP6jpg">
  1689.                             </div>
  1690.  
  1691.                             <div class="flip-card-back">
  1692.                                 <div class="movieDescriptionWrapper">
  1693.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1694.                                 </div>
  1695.                             </div>
  1696.  
  1697.                         </div>
  1698.                     </div>
  1699.  
  1700.                     <div class="movieDataDiv open-overlay">
  1701.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1702.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1703.                     </div>
  1704.  
  1705.                 </div>
  1706.  
  1707.                 <div class="item" data-target="item">
  1708.  
  1709.                     <div class="flip-card">
  1710.                         <div class="flip-card-inner">
  1711.  
  1712.                             <div class="flip-card-front">
  1713.                                 <img src="images/GodFather.jpg">
  1714.                             </div>
  1715.  
  1716.                             <div class="flip-card-back">
  1717.                                 <div class="movieDescriptionWrapper">
  1718.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1719.                                 </div>
  1720.                             </div>
  1721.  
  1722.                         </div>
  1723.                     </div>
  1724.  
  1725.                     <div class="movieDataDiv open-overlay">
  1726.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1727.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1728.                     </div>
  1729.  
  1730.                 </div>
  1731.  
  1732.                 <div class="item" data-target="item">
  1733.  
  1734.                     <div class="flip-card">
  1735.                         <div class="flip-card-inner">
  1736.  
  1737.                             <div class="flip-card-front">
  1738.                                 <img src="images/DA.png">
  1739.                             </div>
  1740.  
  1741.                             <div class="flip-card-back">
  1742.                                 <div class="movieDescriptionWrapper">
  1743.                                     <span class="movieDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elit risus, congue gravida nunc sit amet, facilisis imperdiet orci. Ut consectetur massa vitae risus cursus vestibulum. Integer consectetur lectus at sagittis tempor. Suspendisse quis risus eros. Aenean sit amet magna nec mi vulputate tristique sed quis dui.</span>
  1744.                                 </div>
  1745.                             </div>
  1746.  
  1747.                         </div>
  1748.                     </div>
  1749.  
  1750.                     <div class="movieDataDiv open-overlay">
  1751.                         <h3 class="movieData">Movie Title: Lorem Ipsum Dolor</h3>
  1752.                         <span class="movieData" style="color: gray;">Year | Genre1, Genre2</span>
  1753.                     </div>
  1754.  
  1755.                 </div>
  1756.             </div>
  1757.         </div>
  1758.  
  1759.  
  1760.  
  1761.         <footer class="mainFooter">
  1762.             <div class="footerSection">
  1763.                 <a href=""><img src="images/patreon.png"></a>
  1764.                 <a href=""><img src="images/instagram.png"></a>
  1765.                 <a href=""><img src="images/facebook.png"></a>
  1766.                 <a href=""><img src="images/twitter.png"></a>
  1767.             </div> <hr style="width: 100%; margin: 10px 0; opacity: 0.2;">
  1768.  
  1769.             <div class="footerSection footerLinks">
  1770.                 <a href=""><span>FAQ</span></a>
  1771.                 <a href=""><span>Terms and Conditions</span></a>
  1772.                 <a href=""><span>Privacy Policy</span></a>
  1773.             </div> <hr style="width: 100%; margin: 10px 0; opacity: 0.2;">
  1774.  
  1775.             <div class="footerSection">Copyright &copy; 2019</div>
  1776.         </footer>
  1777.     </div>
  1778. </body>
  1779.  
  1780. </html>
  1781.  
  1782.  
  1783.  
  1784. <script>
  1785.     var x, i, j, selElmnt, a, b, c;
  1786.     /*look for any elements with the class "custom-select":*/
  1787.     x = document.getElementsByClassName("custom-select");
  1788.     for (i = 0; i < x.length; i++) {
  1789.        selElmnt = x[i].getElementsByTagName("select")[0];
  1790.        /*for each element, create a new DIV that will act as the selected item:*/
  1791.        a = document.createElement("DIV");
  1792.        a.setAttribute("class", "select-selected");
  1793.        a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  1794.        x[i].appendChild(a);
  1795.        /*for each element, create a new DIV that will contain the option list:*/
  1796.        b = document.createElement("DIV");
  1797.        b.setAttribute("class", "select-items select-hide");
  1798.        for (j = 1; j < selElmnt.length; j++) {
  1799.            /*for each option in the original select element,
  1800.            create a new DIV that will act as an option item:*/
  1801.            c = document.createElement("DIV");
  1802.            c.innerHTML = selElmnt.options[j].innerHTML;
  1803.            c.addEventListener("click", function(e) {
  1804.                /*when an item is clicked, update the original select box,
  1805.                and the selected item:*/
  1806.                var y, i, k, s, h;
  1807.                s = this.parentNode.parentNode.getElementsByTagName("select")[0];
  1808.                h = this.parentNode.previousSibling;
  1809.                for (i = 0; i < s.length; i++) {
  1810.                    if (s.options[i].innerHTML == this.innerHTML) {
  1811.                        s.selectedIndex = i;
  1812.                        h.innerHTML = this.innerHTML;
  1813.                        y = this.parentNode.getElementsByClassName("same-as-selected");
  1814.                        for (k = 0; k < y.length; k++) {
  1815.                            y[k].removeAttribute("class");
  1816.                        }
  1817.                        this.setAttribute("class", "same-as-selected");
  1818.                        break;
  1819.                    }
  1820.                }
  1821.                h.click();
  1822.            });
  1823.            b.appendChild(c);
  1824.        }
  1825.        x[i].appendChild(b);
  1826.        a.addEventListener("click", function(e) {
  1827.            /*when the select box is clicked, close any other select boxes,
  1828.            and open/close the current select box:*/
  1829.            e.stopPropagation();
  1830.            closeAllSelect(this);
  1831.            this.nextSibling.classList.toggle("select-hide");
  1832.            this.classList.toggle("select-arrow-active");
  1833.        });
  1834.    }
  1835.    function closeAllSelect(elmnt) {
  1836.        /*a function that will close all select boxes in the document,
  1837.        except the current select box:*/
  1838.        var x, y, i, arrNo = [];
  1839.        x = document.getElementsByClassName("select-items");
  1840.        y = document.getElementsByClassName("select-selected");
  1841.        for (i = 0; i < y.length; i++) {
  1842.            if (elmnt == y[i]) {
  1843.                arrNo.push(i)
  1844.            } else {
  1845.                y[i].classList.remove("select-arrow-active");
  1846.            }
  1847.        }
  1848.        for (i = 0; i < x.length; i++) {
  1849.            if (arrNo.indexOf(i)) {
  1850.                x[i].classList.add("select-hide");
  1851.            }
  1852.        }
  1853.    }
  1854.    /*if the user clicks anywhere outside the select box,
  1855.    then close all select boxes:*/
  1856.    document.addEventListener("click", closeAllSelect);
  1857. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!