Advertisement
Slapoguzov

Untitled

Dec 10th, 2015
111
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.03 KB | None | 0 0
  1. <p style="text-align: center;"><img alt="" src="http://wowjp.net/_ph/8/2/762153980.jpg?1446723885" style="width: 420px; height: 279px;" /></p>
  2.  
  3. <p>С каждым днем Легион все ближе, а вы же совсем не готовы! Предлагаю вам пройти тест, который содержит вопросы из истории Варкрафта и вопросы по новому дополнению, чтобы выявить все пробелы и начать интенсивную подготовку к сражению с пылающим Легионом! Уже по традиции, прошедшие тест бойцы получат <strong>уникальную&nbsp;награду<span style="font-size:14px;">*<img alt="" src="http://wowjp.net/wowjp-dart/Nagradu/legion_award.png" /></span></strong>. Удачи! &nbsp; &nbsp;</p>
  4.  
  5. <p style="text-align: right;"><span style="font-size: 11px; line-height: 17.6px;">*для получения награды вы должны быть зарегистрированы на сайте</span>&nbsp;
  6. <style type="text/css">#q2,#q3,#q4,#q5,#q6,#q7,#q8,#q9, #qend {
  7. display:none;
  8. }
  9. .quiz {
  10. width: 90%;
  11. margin: 10px auto;
  12. border-radius: 6px;
  13. background: #473C30;
  14. border: 2px rgba(255, 255, 255, 0.16) solid;
  15. }
  16. .quiz_img .full {
  17. }
  18. .quiz_img img {
  19. margin: 20px auto;
  20. display: block;
  21. padding: 0px;
  22. border: 2px solid rgb(255, 255, 255);
  23. border-radius: 3px;
  24. height: 300px;
  25. }
  26. .quiz_content {
  27. padding-left: 20px;
  28. font-size: 18px;
  29. color: rgb(206, 196, 176);
  30. font-weight: 600;
  31. }
  32. li.selected {
  33. background-color: rgba(255, 141, 0, 0.22) !important;
  34. border: 1px solid rgba(36, 25, 11, 0.4) !important;
  35. }
  36. .quiz_content button {
  37. margin: 10px auto;
  38. display: block;
  39. background: rgba(15, 11, 7, 0.3);
  40. border: 1px solid rgb(170, 153, 118);
  41. border-radius: 5px;
  42. padding: 5px 20px 5px 20px;
  43. color: rgb(170, 153, 118);
  44. font-size: 14px;
  45. }
  46. .quiz_content .opt li {
  47. font-size: 15px;
  48. list-style: none;
  49. margin: 7px 50px 20px 0px;
  50. font-weight: 400;
  51. color: rgb(206, 196, 176);
  52. border: 1px solid rgba(132, 80, 16, 0.35);
  53. width: 140px;
  54. padding: 10px;
  55. border-radius: 4px;
  56. background-color: rgba(255, 129, 20, 0.1);
  57. height: 160px;
  58. display: inline-block;
  59. }
  60. .quiz_content .opt li:hover {
  61. background-color: rgb(104, 77, 50);
  62. }
  63. .buttonShare {
  64. margin: 0 auto;
  65. width: 150px;
  66. }
  67. .quiz .next {
  68. display: none;
  69. }
  70. .quiz_back {
  71. background: url(https://upload.wikimedia.org/wikipedia/ru/2/22/World_of_Warcraft_logo.png);
  72. width: 98%;
  73. height: 100%;
  74. background-size: contain;
  75. background-repeat: no-repeat;
  76. opacity: 0.08;
  77. margin: auto;
  78. /* top: 22%; */
  79. position: relative;
  80. /* vertical-align: bottom; */
  81. /* vertical-align: middle; */
  82. background-position-y: 50%;
  83. display: none;
  84. }
  85. .quiz .result {
  86. display: none;
  87. }
  88. .correct_ans {
  89. color: rgb(67, 232, 45);
  90. }
  91. .ncorrect_ans {
  92. color: rgb(224, 52, 52);
  93. }
  94. .quiz_descr {
  95. display: none;
  96. }
  97. .quiz .end {
  98. display:none;
  99. }
  100. .quiz_descr ul {
  101. font-size: 15px;
  102. /* list-style: none; */
  103. margin: 7px 20px 7px 40px;
  104. font-weight: 400;
  105. color: rgb(206, 196, 176);
  106. border: 1px solid rgba(132, 80, 16, 0.35);
  107. /* width: 80%; */
  108. padding: 10px 0px 10px 10px;
  109. border-radius: 4px;
  110. background-color: rgba(255, 129, 20, 0.1);
  111. max-width: 87%;
  112. }
  113. .quiz_end_content {
  114. font-size: 45px;
  115. text-align: center;
  116. padding: 200px 0px 200px 0px;
  117. color: #F5E6C5;
  118. }
  119. .ulog {
  120. display:none;
  121. }
  122.  
  123. .fisrt_line,
  124. .second_line {
  125. display: flex;
  126. justify-content: center;
  127. }
  128.  
  129. .quiz_head_content {
  130. margin-top: 20px;
  131. margin-bottom: 20px;
  132. margin-left: 60px;
  133. display: block;
  134. white-space: nowrap;
  135. margin-right: 13%;
  136. }
  137.  
  138. .quiz_img_answ img {
  139. border-radius: 100px;
  140. border: 3px solid #ff4d3b;
  141. width: 100%;
  142. height: 100%;
  143. }
  144.  
  145. .quiz_img_answ,
  146. .quiz_quote {
  147. display: inline-block;
  148. }
  149.  
  150. .quiz_img_answ {
  151. width: 20%;
  152. max-width: 146px;
  153. max-height: 146px;
  154. vertical-align: top;
  155. }
  156.  
  157. .quiz_quote {
  158. min-height: 50px;
  159. margin: 3% 30px 3% 30px;
  160. border: 2px solid #ff4d3b;
  161. border-radius: 5px;
  162. position: relative;
  163. white-space: normal;
  164. padding-right: 50px;
  165. }
  166. .quiz_quote:before {
  167. content: "";
  168. position: absolute;
  169. left: -20px;
  170. top: 10px;
  171. width: 0;
  172. height: 0;
  173. border-right: 18px solid rgb(255, 77, 59);
  174. border-top: 13px solid transparent;
  175. border-bottom: 13px solid transparent
  176. }
  177. .quiz_quote:after {
  178. content: "";
  179. position: absolute;
  180. left: -17px;
  181. top: 11px;
  182. width: 0;
  183. height: 0;
  184. border-right: 18px solid #473C30;
  185. border-top: 12px solid transparent;
  186. border-bottom: 12px solid transparent;
  187. }
  188.  
  189. .quiz_audio img {
  190. width: 24px;
  191. margin-left: 30px;
  192. margin-top: 7px;
  193. opacity: 0.7;
  194. }
  195. .quiz_audio img:hover {
  196. opacity: 1;
  197. }
  198. .quiz_text_quote {
  199. padding: 10px;
  200. }
  201. .quiz_text_quote,
  202. .quiz_audio {
  203. display: inline-block;
  204. float: left;
  205. }
  206.  
  207. .quiz_audio {
  208. position: absolute;
  209. right: 14px;
  210. vertical-align: middle;
  211. }
  212.  
  213. ul.opt {
  214. margin: 0 auto;
  215. width: 430px;
  216. }
  217.  
  218. .answ_img img {
  219. width: 90px;
  220. margin: 0 auto;
  221. display: block;
  222. border-radius: 90px;
  223. }
  224.  
  225. .answ_text {
  226. text-align: center;
  227. margin-top: 5px;
  228. }
  229.  
  230. .quiz_content button:hover {
  231. background: rgba(15, 11, 7, 0.41);
  232. border: 1px solid rgba(170, 153, 118, 0.5);
  233. }
  234.  
  235. .coreect_ch {
  236. background-color: rgb(76, 104, 50) !important;
  237. border: 1px solid rgba(38, 87, 49, 0.48) !important;
  238. }
  239.  
  240. .uncoreect_ch {
  241. background-color: rgb(104, 62, 50) !important;
  242. border: 1px solid rgba(87, 52, 38, 0.48) !important;
  243. }
  244. </style>
  245. </p>
  246.  
  247. <div class="quiz">
  248. <div class="quiz_back">&nbsp;</div>
  249.  
  250. <div id="q1">
  251. <div class="quiz_head_content">
  252. <div class="quiz_img_answ"><img src="/testQuotes/quest_avatar.png"></div>
  253. <div class="quiz_quote"><div class="quiz_text_quote">Я сделаю все, что в моих силах, чтобы помочь вам в бою. Не бойтесь, мой огонь вам не страшен</div><div class="quiz_audio"><img src="/testQuotes/speaker_icon.png"/><audio class="audio_quote" id="aud_1" src="/testQuotes/test.mp3"></audio></div></div>
  254. </div>
  255.  
  256. <div class="quiz_content">
  257. <div class="quiz_answ">Кому принадлежит эта цитата?</div>
  258.  
  259. <div class="result">Правильно!</div>
  260.  
  261. <div class="quiz_descr">Об этом разработчики нам четко дали понять в этом <a href="http://wowjp.net/news/intervju_legion/2015-09-09-10136" target="_blank">интервью</a></div>
  262.  
  263. <ul class="opt">
  264. <div class="fisrt_line">
  265. <li id="a1_1"><div class="answ_img"><img src="https://habrastorage.org/files/464/2dd/5ca/4642dd5ca1b24b96acc82ec1c360b9f7.png"/></div> <div class="answ_text"><div>Алекстраза Хранительница</div></li>
  266. <li id="a1_2"><div class="answ_img"><img src="https://habrastorage.org/files/464/2dd/5ca/4642dd5ca1b24b96acc82ec1c360b9f7.png"/></div> <div class="answ_text"><div>Алекстраза Хранительница</div></li>
  267. </div>
  268. <div class="second_line">
  269. <li id="a1_3"><div class="answ_img"><img src="https://habrastorage.org/files/464/2dd/5ca/4642dd5ca1b24b96acc82ec1c360b9f7.png"/></div> <div class="answ_text"><div>Алекстраза Хранительница</div></li>
  270. <li id="a1_4"><div class="answ_img"><img src="https://habrastorage.org/files/464/2dd/5ca/4642dd5ca1b24b96acc82ec1c360b9f7.png"/></div> <div class="answ_text"><div>Алекстраза Хранительница</div></li>
  271. </div>
  272. </ul>
  273. <button class="answer">Ответить</button><button class="next">Дальше</button></div>
  274. </div>
  275.  
  276. <div id="q2">
  277. <div class="quiz_head_content">
  278. <div class="quiz_img_answ"><img src="/testQuotes/quest_avatar.png"></div>
  279. <div class="quiz_quote"><div class="quiz_text_quote">Я сделаю все, что в моих силах, чтобы помочь вам в бою. Не бойтесь, мой огонь вам не страшен</div><div class="quiz_audio"><img src="/testQuotes/speaker_icon.png"/><audio class="audio_quote" id="aud_2" src="/testQuotes/test.mp3"></audio></div></div>
  280. </div>
  281.  
  282. <div class="quiz_content">
  283. <div class="quiz_answ">Кому принадлежит эта цитата?</div>
  284.  
  285. <div class="result">Правильно!</div>
  286.  
  287. <div class="quiz_descr">Об этом разработчики нам четко дали понять в этом <a href="http://wowjp.net/news/intervju_legion/2015-09-09-10136" target="_blank">интервью</a></div>
  288.  
  289. <ul class="opt">
  290. <div class="fisrt_line">
  291. <li id="a2_1"><div class="answ_img"><img src="https://habrastorage.org/files/464/2dd/5ca/4642dd5ca1b24b96acc82ec1c360b9f7.png"/></div> <div class="answ_text"><div>Алекстраза Хранительница</div></li>
  292. <li id="a2_2"><div class="answ_img"><img src="https://habrastorage.org/files/464/2dd/5ca/4642dd5ca1b24b96acc82ec1c360b9f7.png"/></div> <div class="answ_text"><div>Алекстраза Хранительница</div></li>
  293. </div>
  294. <div class="second_line">
  295. <li id="a2_3"><div class="answ_img"><img src="https://habrastorage.org/files/464/2dd/5ca/4642dd5ca1b24b96acc82ec1c360b9f7.png"/></div> <div class="answ_text"><div>Алекстраза Хранительница</div></li>
  296. <li id="a2_4"><div class="answ_img"><img src="https://habrastorage.org/files/464/2dd/5ca/4642dd5ca1b24b96acc82ec1c360b9f7.png"/></div> <div class="answ_text"><div>Алекстраза Хранительница</div></li>
  297. </div>
  298. </ul>
  299. <button class="answer">Ответить</button><button class="end">Завершить</button></div>
  300. </div>
  301.  
  302. <div id="qend">
  303. <div class="quiz_end_content">Ваш результат <span class="res">9</span> из 7.
  304.  
  305. <div class="ulog">Вы получаете награду <img src="/wowjp-dart/Nagradu/award_got.png" style="border:0;vertical-align: middle;" /></div>
  306.  
  307. <div class="shareVK">Поделись с друзьями своим результатом:
  308. <div class="buttonShare">&nbsp;</div>
  309. </div>
  310. </div>
  311. </div>
  312. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement