API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 23rd, 2015
93
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.40 KB | None | 0 0
raw download clone embed print report
  1. @model IEnumerable<MovieShopProxy.Models.Movie>
  2. @{
  3. Layout = null;
  4. var listCount = Model.Count();
  5. }
  6. <html>
  7. <head>
  8. <title>Movie Shop - Buy The Newest Movies Online!</title>
  9. <style type="text/css">
  10. body{
  11. margin: 0px;
  12. padding: 0px;
  13. width: 100%;
  14. height: 100%;
  15. font-size: 0px;
  16. text-align: center;
  17. }
  18. #backgroundImage{
  19. display: block;
  20. position: fixed;
  21. top: -5px;
  22. left: -5px;
  23. bottom: -5px;
  24. right: -5px;
  25. background-image: url("http://leaguematch.altervista.org/back.jpg");
  26. background-size: cover;
  27. -webkit-filter: blur(5px);
  28. -moz-filter: blur(5px);
  29. -ms-filter: blur(5px);
  30. z-index: -9999;
  31. }
  32. #bodyHolder{
  33. position: relative;
  34. max-width: 1050px;
  35. margin-top: 50px;
  36. margin-left: auto;
  37. margin-right: auto;
  38. text-align: left;
  39. padding-bottom: 40px;
  40. padding-left: 10px;
  41. padding-right: 10px;
  42. }
  43. .moviePoster{
  44. position: relative;
  45. display: inline-block;
  46. width: 150px;
  47. height: 250px;
  48. margin-top: 40px;
  49. margin-left: 30px;
  50. margin-right: 30px;
  51. background-size: 100% 100%;
  52. box-shadow: 5px 5px 5px black;
  53. border-radius: 15px;
  54. transition: 0.1s;
  55. }
  56. .moviePoster:hover{
  57. transform: scale(1.1);
  58. }
  59. .moviePoster:hover > .movieInformation{
  60. opacity: 1;
  61. }
  62. #searchHolder{
  63. position: relative;
  64. top: 0px;
  65. width: 100%;
  66. height: 30px;
  67. background: -webkit-linear-gradient(rgba(100, 100, 100, 1), rgba(100, 100, 100, 0));
  68. text-align: center;
  69. z-index: 9999;
  70. }
  71. #searchHolder:hover{
  72. background-color: rgba(100, 100, 100, 0.75);
  73. }
  74. #searchForm input{
  75. font-size: 12px;
  76. }
  77. .movieInformation{
  78. position: absolute;
  79. height: 250px;
  80. width: 150px;
  81. background-color: rgba(0, 0, 0, 0.75);
  82. color: white;
  83. font-family: Tahoma;
  84. font-size: 12px;
  85. opacity: 0;
  86. text-align: center;
  87. border-radius: inherit;
  88. transition-delay: 0.1s;
  89. }
  90. a{
  91. text-decoration: none;
  92. }
  93. #modalOpen{
  94. display: none;
  95. position: fixed;
  96. top: 0;
  97. left: 0;
  98. right: 0;
  99. bottom: 0;
  100. background-color: rgba(0, 0, 0, 0.75);
  101. z-index: -99999;
  102. }
  103. #modalOpen:target{
  104. display: block;
  105. z-index: 99999;
  106. }
  107. #modalOpen div{
  108. position: absolute;
  109. width: 800px;
  110. height: 500px;
  111. left: 50%;
  112. top: 50%;
  113. margin-left: -400px;
  114. margin-top: -250px;
  115. background-color: gray;
  116. text-align: left
  117. }
  118. #modalOpen button{
  119. -webkit-appearance: none;
  120. outline: none;
  121. padding: 0px;
  122. position: absolute;
  123. background-color: black;
  124. color: white;
  125. font-family: monospace;
  126. font-size: 20px;
  127. line-height: 50px;
  128. vertical-align: middle;
  129. text-decoration: none;
  130. text-align: center;
  131. height: 50px;
  132. width: 50px;
  133. right: -27px;
  134. top: -27px;
  135. border-radius: 27px;
  136. z-index: 99999;
  137. border: solid white 2px;
  138. cursor: pointer;
  139. box-sizing: unset;
  140. }
  141. #modalOpen button:hover{
  142. color: white;
  143. background-color: red;
  144. }
  145. #modalOpen button:active{
  146. color: red;
  147. background-color: white;
  148. border: solid red 2px;
  149. }
  150. #modalOpen div #orderMovieInModal{
  151. position: relative;
  152. float: left;
  153. width: 200px;
  154. height: 300px;
  155. margin: 0px;
  156. top: 0px;
  157. left: 0px;
  158. line-height: 300px;
  159. text-align: center;
  160. vertical-align: middle;
  161. }
  162. #modalOpen div #plotDescription{
  163. position: relative;
  164. float: left;
  165. width: 780px;
  166. height: 150px;
  167. color: white;
  168. font-size: 16px;
  169. font-family: Tahoma;
  170. padding: 10px;
  171. margin: 0px;
  172. margin-top: 20px;
  173. top: 0px;
  174. left: 0px;
  175. }
  176. #modalOpen div #orderMovieInModal input[type=submit]{
  177. position: absolute;
  178. outline: none;
  179. background-color: black;
  180. color: white;
  181. font-family: Tahoma;
  182. font-size: 16px;
  183. border-radius: 24px;
  184. -webkit-appearance: none;
  185. border: none;
  186. padding: 0px;
  187. top: 50%;
  188. left: 50%;
  189. height: 50px;
  190. width: 140px;
  191. margin-top: -27px;
  192. margin-left: -72px;
  193. border: 2px solid white;
  194. cursor: pointer;
  195. box-sizing: unset;
  196. }
  197. #modalOpen div #orderMovieInModal input[type=submit]:hover{
  198. background-color: green;
  199. }
  200. #modalOpen div #orderMovieInModal input[type=submit]:active{
  201. background-color: white;
  202. color: green;
  203. border: 2px solid green;
  204. }
  205. </style>
  206. </head>
  207. <body>
  208. <div id="backgroundImage"></div>
  209. <div id="searchHolder">
  210. <form id="searchForm" method="post" action="">
  211. <input list="movies" name="movieSearched" />
  212. <datalist id="movies">
  213. @foreach(var item in Model)
  214. {
  215. <option>@item.Title</option>
  216. }
  217. </datalist>
  218. <input type="submit" value="Search" />
  219. </form>
  220. <button id="shoppingCart"></button>
  221. </div>
  222. <div id="modalOpen">
  223. <div>
  224. <button type="submit" id="modalClose">X
  225. </button>
  226. <iframe id="player" style="width: 600px; height: 300px; float: left;" src="" frameborder="0" allowfullscreen></iframe>
  227. <div id="orderMovieInModal">
  228. <form method="post" action="~/Home/OrderReceived">
  229. <input type="hidden" id="movieUrl" name="trailerURL"/>
  230. <input type="submit" value="Buy This Movie!" />
  231. </form>
  232. </div>
  233. <div id="plotDescription">
  234. Lorem ipsum dolor sit amet, ea porro simul theophrastus vis, ea cibo voluptua quo. Etiam novum laoreet nec eu, constituto accommodare nam id, virtute atomorum indoctum vis id. Ea nullam erroribus eum. Ludus oratio singulis cu nec, eius clita eloquentiam te vel, ne pro minimum gloriatur honestatis. Id placerat laboramus sit. Ne idque aliquando definitionem sea, ex eum quas movet liberavisse, ad praesent constituam pri.
  235.  
  236. Fugit salutatus ei mel. Congue maiestatis eum ut. Mei unum adipisci ullamcorper cu, his fugit rationibus efficiantur te. Vel cu virtute adolescens mediocritatem, ad sit affert vidisse.
  237.  
  238. ption te qui. An eros deleniti per, id possim utamur sit. Inani habemus atomorum nec ea, qui ne facete pertinax.
  239.  
  240. </div>
  241. </div>
  242. </div>
  243. <script>
  244. document.getElementById("modalClose").onclick = function(){
  245. location.href = "#modalClose";
  246. setURL("");
  247. }
  248. function setURL(url) {
  249. document.getElementById("player").setAttribute("src", url);
  250. document.getElementById("movieUrl").setAttribute("value", url);
  251. }
  252. </script>
  253. <div id="bodyHolder">
  254. @for (int i = 0; i < listCount - 1; i++)
  255. {
  256. <a class="moviePoster" href="#modalOpen" onclick="setURL(&quot;@Model.ElementAt(i).TrailerURL&quot;);" style="background-image: url('@Model.ElementAt(i).PictureURL');">
  257. <table class="movieInformation">
  258. <tr>
  259. <td>Title:</td>
  260. <td>@Model.ElementAt(i).Title</td>
  261. </tr>
  262. <tr>
  263. <td>Released:</td>
  264. <td>@Model.ElementAt(i).ReleaseDate</td>
  265. </tr>
  266. <tr>
  267. <td>Genre:</td>
  268. <td>
  269. @foreach (var item in Model.ElementAt(i).Genres)
  270. {
  271. @item.Name<br />
  272. }
  273. </td>
  274. </tr>
  275. <tr>
  276. <td>Rating:</td>
  277. <td>@Model.ElementAt(i).Rating</td>
  278. </tr>
  279. </table>
  280. </a>
  281. }
  282. </div>
  283. </body>
  284. </html>
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!