Taipan_PC_Pro

Untitled

Aug 13th, 2018
105
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.98 KB | None | 0 0
  1. <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  2. <style>
  3. @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300);
  4.  
  5. body {
  6. background-color: #335B67;
  7. background: -ms-radial-gradient(ellipse at center, #335B67 0%, #2C3E50 100%) fixed no-repeat;
  8. background: -moz-radial-gradient(ellipse at center, #335B67 0%, #2C3E50 100%) fixed no-repeat;
  9. background: -o-radial-gradient(ellipse at center, #335B67 0%, #2C3E50 100%) fixed no-repeat;
  10. background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, #335B67), color-stop(1, #2C3E50));
  11. background: -webkit-radial-gradient(ellipse at center, #335B67 0%, #2C3E50 100%) fixed no-repeat;
  12. background: radial-gradient(ellipse at center, #335B67 0%, #2C3E50 100%) fixed no-repeat;
  13. font-family: &#39;Source Sans Pro&#39;, sans-serif;
  14. -webkit-font-smoothing: antialiased;
  15. margin: 0px;
  16. }
  17.  
  18. ::selection {
  19. background-color: rgba(0,0,0,0.2);
  20. }
  21.  
  22. ::-moz-selection {
  23. background-color: rgba(0,0,0,0.2);
  24. }
  25.  
  26.  
  27. a {
  28. color: white;
  29. text-decoration: none;
  30. border-bottom: 1px solid rgba(255,255,255,0.5);
  31. transition: all 0.5s ease;
  32. -moz-transition: all 0.5s ease;
  33. -o-transition: all 0.5s ease;
  34. -webkit-transition: all 0.5s ease;
  35. margin-right: 10px;
  36. }
  37.  
  38. a:last-child { margin-right: 0px; }
  39.  
  40. a:hover {
  41. text-shadow: 0px 0px 1px rgba(255,255,255,.5);
  42. border-bottom: 1px solid rgba(255,255,255,1);
  43. }
  44.  
  45. #noscript-warning {
  46. width: 100%;
  47. text-align: center;
  48. background-color: rgba(0,0,0,0.2);
  49. font-weight: 300;
  50. color: white;
  51. padding-top: 10px;
  52. padding-bottom: 10px;
  53. }
  54.  
  55. #top-nav, .top-header, .sidebar-area, #footer-wrapper {
  56. display: none;
  57. }
  58.  
  59. /* === WRAP === */
  60.  
  61. #wrap {
  62. width: 80%;
  63. max-width: 1400px;
  64. margin:0 auto;
  65. height: auto;
  66. position: relative;
  67. margin-top: 8%;
  68. overflow: hidden;
  69.  
  70. }
  71.  
  72.  
  73.  
  74. /* === MAIN TEXT CONTENT === */
  75.  
  76. #main-content {
  77. float: right;
  78. max-width: 45%;
  79. color: white;
  80. font-weight: 300;
  81. font-size: 18px;
  82. padding-bottom: 40px;
  83. line-height: 28px;
  84. }
  85.  
  86. #main-content h1 {
  87. margin: 0px;
  88. font-weight: 400;
  89. font-size: 42px;
  90. margin-bottom: 40px;
  91. line-height: normal;
  92. }
  93.  
  94.  
  95.  
  96. /* === NAVIGATION BUTTONS === */
  97.  
  98. #navigation { margin-top: 2%; }
  99.  
  100. #navigation a.navigation {
  101. display: block;
  102. float: left;
  103. background-color: rgba(0,0,0,0.2);
  104. padding-left: 15px;
  105. padding-right: 15px;
  106. color: white;
  107. height: 41px;
  108. line-height: 41px;
  109. text-decoration: none;
  110. font-size: 16px;
  111. transition: all 0.5s ease;
  112. -moz-transition: all 0.5s ease;
  113. -o-transition: all 0.5s ease;
  114. -webkit-transition: all 0.5s ease;
  115. margin-right: 2%;
  116. margin-bottom: 2%;
  117. border-bottom: none;
  118. }
  119.  
  120. #navigation a.navigation i { line-height: 41px; }
  121.  
  122. #navigation a.navigation:hover {
  123. background-color: rgba(26,188,156,0.7);
  124. border-bottom: none;
  125. }
  126.  
  127.  
  128.  
  129. /* === WORDSEARCH === */
  130.  
  131. #wordsearch {
  132. width: 45%;
  133. float: left;
  134. }
  135.  
  136. #wordsearch ul {
  137. margin: 0px;
  138. padding: 0px;
  139. }
  140.  
  141. #wordsearch ul li {
  142. float: left;
  143. width: 12%;
  144. background-color: rgba(0,0,0,.2);
  145. list-style: none;
  146. margin-right: 0.5%;
  147. margin-bottom: 0.5%;
  148. padding: 0;
  149. display: block;
  150. text-align: center;
  151. color: rgba(255,255,255,0.7);
  152. text-transform: uppercase;
  153. overflow: hidden;
  154. font-size: 24px;
  155. font-size: 1.6vw;
  156. font-weight: 300;
  157. transition: background-color 0.75s ease;
  158. -moz-transition: background-color 0.75s ease;
  159. -webkit-transition: background-color 0.75s ease;
  160. -o-transition: background-color 0.75s ease;
  161. }
  162.  
  163. #wordsearch ul li.selected {
  164. background-color: rgba(26,188,156,0.7);
  165. color: rgba(255,255,255,1);
  166. font-weight: 400;
  167. }
  168.  
  169.  
  170.  
  171. /* === SEARCH FORM === */
  172.  
  173. #search { margin-top: 30px; }
  174.  
  175. #search input[type=&#39;text&#39;] {
  176. width: 88%;
  177. height: 41px;
  178. padding-left: 15px;
  179. padding-rigt: 15px;
  180. box-sizing: border-box;
  181. -moz-box-sizing: border-box;
  182. background-color: rgba(0,0,0,0.2);
  183. border: none;
  184. outline: none;
  185. -webkit-appearance: none;
  186. font-size: 16px;
  187. font-weight: 300;
  188. color: white;
  189. font-family: &#39;Source Sans Pro&#39;, sans-serif;
  190. transition: all 0.5s ease;
  191. -moz-transition: all 0.5s ease;
  192. -o-transition: all 0.5s ease;
  193. -webkit-transition: all 0.5s ease;
  194. border-radius: 0px;
  195. }
  196.  
  197. #search .input-search {
  198. width: 10%;
  199. float: right;
  200. height: 41px;
  201. background-color: rgba(0,0,0,0.2);
  202. outline: none;
  203. border: none;
  204. -webkit-appearance: none;
  205. font-family: &#39;Source Sans Pro&#39;, sans-serif;
  206. color: white;
  207. font-weight: 300;
  208. font-size: 16px;
  209. cursor: pointer;
  210. transition: all 0.5s ease;
  211. -moz-transition: all 0.5s ease;
  212. -o-transition: all 0.5s ease;
  213. -webkit-transition: all 0.5s ease;
  214. text-align: center;
  215. }
  216.  
  217. #search .input-search:hover {
  218. background-color: rgba(26,188,156,0.7);
  219. }
  220. /* === RESPONSIVE CSS === */
  221. @media all and (max-width: 899px) {
  222. #wrap { width: 90%; }
  223. }
  224. @media all and (max-width: 799px) {
  225. #wrap { width: 90%; height: auto; margin-top: 40px; top: 0%; }
  226. #wordsearch { width: 90%; float: none; margin:0 auto; }
  227. #wordsearch ul li { font-size: 4vw; }
  228. #main-content { float: none; width: 90%; max-width: 90%; margin:0 auto; margin-top: 30px; text-align: justify; }
  229. #main-content h1 { text-align: left; }
  230. #search input[type=&#39;text&#39;] { width: 84%; }
  231. #search .input-search { width: 15%; }
  232. }
  233.  
  234. @media all and (max-width: 499px) {
  235. #main-content h1 { font-size: 28px; }
  236. }
  237. </style>
  238. <div id='wrap'>
  239. <div id='wordsearch'>
  240. <ul>
  241. <li>k</li>
  242.  
  243. <li>v</li>
  244.  
  245. <li>n</li>
  246.  
  247. <li>z</li>
  248.  
  249. <li>i</li>
  250.  
  251. <li>x</li>
  252.  
  253. <li>m</li>
  254.  
  255. <li>e</li>
  256.  
  257. <li>t</li>
  258.  
  259. <li>a</li>
  260.  
  261. <li>x</li>
  262.  
  263. <li>l</li>
  264.  
  265. <li class='one'>4</li>
  266.  
  267. <li class='two'>0</li>
  268.  
  269. <li class='three'>4</li>
  270.  
  271. <li>y</li>
  272.  
  273. <li>y</li>
  274.  
  275. <li>w</li>
  276.  
  277. <li>v</li>
  278.  
  279. <li>b</li>
  280.  
  281. <li>o</li>
  282.  
  283. <li>q</li>
  284.  
  285. <li>d</li>
  286.  
  287. <li>y</li>
  288.  
  289. <li>p</li>
  290.  
  291. <li>a</li>
  292.  
  293. <li class='four'>p</li>
  294.  
  295. <li class='five'>a</li>
  296.  
  297. <li class='six'>g</li>
  298.  
  299. <li class='seven'>e</li>
  300.  
  301. <li>v</li>
  302.  
  303. <li>j</li>
  304.  
  305. <li>a</li>
  306.  
  307. <li class='eight'>n</li>
  308.  
  309. <li class='nine'>o</li>
  310.  
  311. <li class='ten'>t</li>
  312.  
  313. <li>s</li>
  314.  
  315. <li>c</li>
  316.  
  317. <li>e</li>
  318.  
  319. <li>w</li>
  320.  
  321. <li>v</li>
  322.  
  323. <li>x</li>
  324.  
  325. <li>e</li>
  326.  
  327. <li>p</li>
  328.  
  329. <li>c</li>
  330.  
  331. <li>f</li>
  332.  
  333. <li>h</li>
  334.  
  335. <li>q</li>
  336.  
  337. <li>e</li>
  338. <li class='eleven'>f</li>
  339. <li class='twelve'>o</li>
  340. <li class='thirteen'>u</li>
  341. <li class='fourteen'>n</li>
  342. <li class='fifteen'>d</li>
  343. <li>s</li>
  344. <li>w</li>
  345. <li>q</li>
  346. <li>v</li>
  347. <li>o</li>
  348. <li>s</li>
  349. <li>m</li>
  350. <li>v</li>
  351. <li>f</li>
  352. <li>u</li>
  353. </ul>
  354. </div>
  355. <div id='main-content'>
  356. <h1>Lỗi 404 Rồi</h1>
  357. <p>
  358. Rất tiếc, trang bạn đang tìm kiếm không thể tìm thấy. Nó có thể
  359. tạm thời không có hoặc không còn tồn tại.</p>
  360. <p>
  361. Kiểm tra URL bạn đã nhập và thử lại. Ngoài ra, tìm kiếm
  362. cho bất cứ điều gì là mất tích hoặc có một cái nhìn xung quanh phần còn lại của trang web của chúng tôi.</p>
  363. <div id='search'>
  364. <form>
  365. <input placeholder='Search' type='text'/>
  366. </form>
  367. </div>
  368.  
  369. <div id='navigation'>
  370. <a class='navigation' href='/'>Home</a><a class='navigation' href='/p/gioithieu.html'>Thông Tin
  371. Us</a>
  372. <a class='navigation' href='https://www.ttitvn.com/p/sitemap.html'>Site Map</a>
  373. <a class='navigation' href='https://www.ttitvn.com/p/lienhe.html'>Liên Hệ</a>
  374. </div>
  375. </div>
  376. </div>
  377. <script>$(function () {
  378. var liWidth = $(&quot;li&quot;).css(&quot;width&quot;);
  379. $(&quot;li&quot;).css(&quot;height&quot;, liWidth);
  380. $(&quot;li&quot;).css(&quot;lineHeight&quot;, liWidth);
  381. var totalHeight = $(&quot;#wordsearch&quot;).css(&quot;width&quot;);
  382. $(&quot;#wordsearch&quot;).css(&quot;height&quot;, totalHeight);
  383. });
  384. causeRepaintsOn = $(&quot;h1, h2, h3, p&quot;);
  385. $(window).resize(function () {
  386. causeRepaintsOn.css(&quot;z-index&quot;, 1);
  387. });
  388. $(window).on(&#39;resize&#39;, function () {
  389. var liWidth = $(&quot;.one&quot;).css(&quot;width&quot;);
  390. $(&quot;li&quot;).css(&quot;height&quot;, liWidth);
  391. $(&quot;li&quot;).css(&quot;lineHeight&quot;, liWidth);
  392. var totalHeight = $(&quot;#wordsearch&quot;).css(&quot;width&quot;);
  393. $(&quot;#wordsearch&quot;).css(&quot;height&quot;, totalHeight);
  394. });
  395.  
  396.  
  397.  
  398. $(function () {
  399. /* 4 */
  400. $(this).delay(1500).queue(function () {
  401. $(&quot;.one&quot;).addClass(&quot;selected&quot;);
  402. $(this).dequeue();
  403. })
  404. /* 0 */
  405. .delay(500).queue(function () {
  406. $(&quot;.two&quot;).addClass(&quot;selected&quot;);
  407. $(this).dequeue();
  408. })
  409. /* 4 */
  410. .delay(500).queue(function () {
  411. $(&quot;.three&quot;).addClass(&quot;selected&quot;);
  412. $(this).dequeue();
  413. })
  414. /* P */
  415. .delay(500).queue(function () {
  416. $(&quot;.four&quot;).addClass(&quot;selected&quot;);
  417. $(this).dequeue();
  418. })
  419. /* A */
  420. .delay(500).queue(function () {
  421. $(&quot;.five&quot;).addClass(&quot;selected&quot;);
  422. $(this).dequeue();
  423. })
  424. /* G */
  425. .delay(500).queue(function () {
  426. $(&quot;.six&quot;).addClass(&quot;selected&quot;);
  427. $(this).dequeue();
  428. })
  429. /* E */
  430. .delay(500).queue(function () {
  431. $(&quot;.seven&quot;).addClass(&quot;selected&quot;);
  432. $(this).dequeue();
  433. })
  434. /* N */
  435. .delay(500).queue(function () {
  436. $(&quot;.eight&quot;).addClass(&quot;selected&quot;);
  437. $(this).dequeue();
  438. })
  439. /* O */
  440. .delay(500).queue(function () {
  441. $(&quot;.nine&quot;).addClass(&quot;selected&quot;);
  442. $(this).dequeue();
  443. })
  444. /* T */
  445. .delay(500).queue(function () {
  446. $(&quot;.ten&quot;).addClass(&quot;selected&quot;);
  447. $(this).dequeue();
  448. })
  449. /* F */
  450. .delay(500).queue(function () {
  451. $(&quot;.eleven&quot;).addClass(&quot;selected&quot;);
  452. $(this).dequeue();
  453. })
  454. /* O */
  455. .delay(500).queue(function () {
  456. $(&quot;.twelve&quot;).addClass(&quot;selected&quot;);
  457. $(this).dequeue();
  458. })
  459. /* U */
  460. .delay(500).queue(function () {
  461. $(&quot;.thirteen&quot;).addClass(&quot;selected&quot;);
  462. $(this).dequeue();
  463. })
  464. /* N */
  465. .delay(500).queue(function () {
  466. $(&quot;.fourteen&quot;).addClass(&quot;selected&quot;);
  467. $(this).dequeue();
  468. })
  469. /* D */
  470. .delay(500).queue(function () {
  471. $(&quot;.fifteen&quot;).addClass(&quot;selected&quot;);
  472. $(this).dequeue()
  473. });
  474. });
  475. </script>
  476. </b:if>
Advertisement
Add Comment
Please, Sign In to add comment