API tools faq
paste
Advertisement
Zeporko

test html

Zeporko
Sep 23rd, 2015
202
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.96 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html><head data-gwd-animation-mode="proMode"><meta name="GCD" content="YTk3ODQ3ZWZhN2I4NzZmMzBkNTEwYjJl92acf394594b03bd61c80378fb24201d"/>
  3. <meta charset="utf-8">
  4. <title>Theme default</title>
  5. <meta name="generator" content="Google Web Designer 1.4.2.0915">
  6. <link rel="stylesheet" href="animate.css">
  7. <style type="text/css">
  8.  
  9. html, body {
  10. width: 100%;
  11. height: 100%;
  12. margin: 0px;
  13. overflow: hidden;
  14. }
  15. body {
  16. -webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  17. -webkit-transform-style: preserve-3d;
  18. background-color: black;
  19. }
  20.  
  21. #bganim {
  22. position: fixed;
  23. top: 50%;
  24. left: 50%;
  25. min-width: 100%;
  26. min-height: 100%;
  27. width: auto;
  28. height: auto;
  29. z-index: -100:
  30. -webkit-transform: translateX(-50%) translateY(-50%);
  31. transform: translateX(-50%) translateY(-50%);
  32.  
  33. filter: blur(0px);
  34. -webkit-filter: blur(0px);
  35. -moz-filter: blur(0px);
  36. -ms-filter: blur(0px);
  37. -o-filter: blur(0px);
  38. }
  39.  
  40. #bg_aeon {
  41. position: absolute;
  42. top: 0%;
  43. left: 0%;
  44. width: 100%;
  45. height: 100%;
  46. z-index: 1;
  47. }
  48.  
  49. #vid_encart {
  50. position: absolute;
  51. top: 20%;
  52. left: 70%;
  53. width: 20%;
  54. height: auto;
  55. z-index: 3;
  56. border-style: solid;
  57. border-color: gray;
  58. border-width: 2px;
  59. }
  60. .clock {
  61. position: absolute;
  62. top: 0.4%;
  63. Left: 87%;
  64. z-index: 3;
  65. }
  66.  
  67. .boite {
  68.  
  69. position: absolute;
  70. top: 16%;
  71. left: 9%;
  72. width: 20%;
  73. height: auto;
  74. z-index: 3;
  75. }
  76.  
  77.  
  78. .texte {
  79.  
  80. font-family: "MyriadProRegular";
  81. font-size: 50px;
  82. background-color: red;
  83. top: 100%;
  84. left: 40%;
  85. width: 300px:
  86. height: auto;
  87. z-index: 3;
  88. }
  89.  
  90. .info_jeux_1 {
  91. position: absolute;
  92. top: 10%;
  93. left: 32.2%;
  94. width: 16.3%;
  95. height: 6%;
  96. font-family: "MyriadProRegular";
  97. color: #A9A9A9;
  98. padding: 0px 0px 0px 0px;
  99. line-height: 1vw;
  100. font-size: 1.3vw;
  101. background: transparent;
  102. text-align: left;
  103. z-index: 3;
  104.  
  105. }
  106.  
  107. .info_jeux_2 {
  108. position: absolute;
  109. top: 10%;
  110. left: 50.7%;
  111. width: 16.3%;
  112. height: 6%;
  113. font-family: "MyriadProRegular";
  114. color: #A9A9A9;
  115. padding: 0px 0px 0px 0px;
  116. line-height: 1vw;
  117. font-size: 1.3vw;
  118. background: transparent;
  119. text-align: left;
  120. z-index: 3;
  121.  
  122. }
  123. .info_jeux_3 {
  124. position: absolute;
  125. top: 17.3%;
  126. left: 32.2%;
  127. width: 16.3%;
  128. height: 6%;
  129. font-family: "MyriadProRegular";
  130. color: #A9A9A9;
  131. padding: 0px 0px 0px 0px;
  132. line-height: 1vw;
  133. font-size: 1.3vw;
  134. background: transparent;
  135. text-align: left;
  136. z-index: 3;
  137.  
  138. }
  139. .info_jeux_4 {
  140. position: absolute;
  141. top: 24.5%;
  142. left: 32.2%;
  143. width: 16.3%;
  144. height: 6%;
  145. font-family: "MyriadProRegular";
  146. color: #A9A9A9;
  147. padding: 0px 0px 0px 0px;
  148. line-height: 1vw;
  149. font-size: 1.3vw;
  150. background: transparent;
  151. text-align: left;
  152. z-index: 3;
  153.  
  154. }
  155. .info_jeux_5 {
  156. position: absolute;
  157. top: 17.3%;
  158. left: 50.7%;
  159. width: 16.3%;
  160. height: 6%;
  161. font-family: "MyriadProRegular";
  162. color: #A9A9A9;
  163. padding: 0px 0px 0px 0px;
  164. line-height: 1vw;
  165. font-size: 1.3vw;
  166. background: transparent;
  167. text-align: left;
  168. z-index: 3;
  169.  
  170. }
  171. .info_jeux_6 {
  172. position: absolute;
  173. top: 24.4%;
  174. left: 50.7%;
  175. width: 16.3%;
  176. height: 6%;
  177. font-family: "MyriadProRegular";
  178. color: #A9A9A9;
  179. padding: 0px 0px 0px 0px;
  180. line-height: 1vw;
  181. font-size: 1.3vw;
  182. background: transparent;
  183. text-align: left;
  184. z-index: 3;
  185. }
  186.  
  187. .info_jeux_description {
  188. position: absolute;
  189. top: 31.5%;
  190. left: 32.2%;
  191. width: 35%;
  192. height: 25%;
  193. font-family: "MyriadProRegular";
  194. color: #A9A9A9;
  195. padding: 0px 0px 0px 0px;
  196. line-height: 1.3vw;
  197. font-size: 1.3vw;
  198. background: transparent;
  199. text-align: left;
  200. z-index: 3;
  201. overflow: hidden;
  202. }
  203.  
  204. .info_jeux_7 {
  205. position: absolute;
  206. top: 7%;
  207. left: 33%;
  208. width: 33%;
  209. height: 3%;
  210. font-family: "MyriadProRegular";
  211. color: white;
  212. padding: 0.2vw 0px 0px 0px;
  213. line-height: 0px;
  214. font-size: 1.7vw;
  215. background: transparent;
  216. text-align: center;
  217. z-index: 3;
  218. }
  219.  
  220. .zspin_d {
  221. font-size: 1.3vw;
  222. color: white;
  223. }
  224.  
  225. </style>
  226.  
  227.  
  228. </head>
  229.  
  230. <body onLoad="startClock()">
  231.  
  232. <video id="vid_encart" src="Video.mp4" loop="loop" autoplay="autoplay" class="fadeIn animated"></video>
  233. <h2 id="bganim" style="bganima"></h2>
  234. <img src="background2.png" id="bg_aeon" class="background_aeon blur">
  235. <img src="Artwork1.png" class="boite fadeIn animated">
  236.  
  237. <div class="info_jeux_1">Developer :</br></br><div class="zspin-developer zspin_d"></div></div>
  238. <div class="info_jeux_2">Langue :</br></br><div class="zspin-language zspin_d"></div></div>
  239. <div class="info_jeux_3">Fabricant :</br></br><div class="zspin-manufacturer zspin_d"></div></div>
  240. <div class="info_jeux_4">Ann&eacute;e :</br></br><div class="zspin-year zspin_d"></div></div>
  241. <div class="info_jeux_5">Players :</br></br><div class="zspin-players zspin_d"></div></div>
  242. <div class="info_jeux_6">Genre :</br></br><div class="zspin-genre zspin_d"></div></div>
  243. <div class="info_jeux_7"></br></br><div class="zspin-description"></div></div>
  244. <div class="info_jeux_description">Synopsis:</br></br><div class="zspin-synopsis zspin_d"></div>
  245.  
  246. </div>
  247.  
  248.  
  249.  
  250.  
  251. <div class="clock">
  252. <form name="Clock">
  253. <input type="text" name="Heure" size="20" style="background-color:transparent;color:white; border-style: none;font-size: 1.3vw; font-family: MyriadProRegular;">
  254. </form>
  255. </div>
  256.  
  257.  
  258.  
  259. <script language="JavaScript" type="text/javascript">
  260. <!--
  261. var timerID = null;
  262. var timerActif = false;
  263. var tabMois = new Array('Jan','Fev','Mar','Avr','Mai','Juin','Jui','Août','Sep','Oct','Nov','Dec');
  264. var tabJour = new Array('Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam');
  265. function stopClock() {
  266. if (timerActif) clearTimeout(timerID);
  267. timerActif = false;
  268. }
  269. function startClock() {
  270. stopClock();
  271. showtime();
  272. }
  273. function showtime() {
  274. var now = new Date();
  275. var dayOfWeek = now.getDay();
  276. var day = now.getDate();
  277. var month = now.getMonth();
  278. var year = now.getFullYear();
  279. var hour = now.getHours();
  280. var min = now.getMinutes();
  281. var sec = now.getSeconds();
  282. var heure = "" + tabJour[dayOfWeek] + " " + day + " " + tabMois[month] + " " + year + " ";
  283. heure += (hour > 9? hour:"0" + hour);
  284. heure += ":" + (min > 9? min:"0" + min);
  285. document.Clock.Heure.value = heure;
  286. timerID = setTimeout("showtime()",400);
  287. timerActif = true;
  288. }
  289. //-->
  290. </script>
  291.  
  292. </body>
  293.  
  294. </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!