Advertisement
Hardrockdesign

It's the end tablón

Oct 1st, 2015
1,602
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.40 KB | None | 0 0
  1. ------------ HTML ----------------
  2.  
  3. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet" type="text/css" />
  4. <center>
  5.  
  6. <div class="tablon-anuncios">
  7.  
  8. <div id="example-popup" class="modal-content">
  9.  
  10. <table cellspacing="0">
  11.  
  12. <tbody>
  13.  
  14. <tr>
  15.  
  16. <td>
  17.  
  18. <div class="ambientacion">
  19. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. <br /><br />Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.
  20. </div>
  21.  
  22. </td>
  23.  
  24. <td>
  25. <img src="http://goo.gl/oFJdKT" style="width: 300px;" />
  26. <div class="bot-negro">
  27.  
  28. </div>
  29.  
  30. </td>
  31.  
  32. </tr>
  33.  
  34. </tbody>
  35.  
  36. </table>
  37.  
  38. </div>
  39.  
  40. <div id="admin-tab" class="modal-content">
  41.  
  42. <div style="margin-right: 4px;" class="admin">
  43. <img src="http://i.imgur.com/FipfoTz.jpg" />
  44. <div class="info-admin">
  45. Thor
  46. </div>
  47.  
  48. <div class="info-admin">
  49. Admin
  50. </div><a class="info-admin" href="url">Contacto</a>
  51. </div>
  52.  
  53. <div style="margin-right: 4px;" class="admin">
  54. <img src="http://i.imgur.com/k1GF747.jpg" />
  55. <div class="info-admin">
  56. Natasha
  57. </div>
  58.  
  59. <div class="info-admin">
  60. Admin
  61. </div><a class="info-admin" href="url">Contacto</a>
  62. </div>
  63.  
  64. <div class="admin">
  65. <img src="http://i.imgur.com/akymeww.jpg" />
  66. <div class="info-admin">
  67. Bruce
  68. </div>
  69.  
  70. <div class="info-admin">
  71. Admin
  72. </div><a class="info-admin" href="url">Contacto</a>
  73. </div>
  74.  
  75. </div>
  76.  
  77. <div id="links-tab" class="modal-content">
  78.  
  79. <div style="margin-right: 4px;" class="link-title">
  80. Principales
  81. </div>
  82.  
  83. <div class="link-title">
  84. Secundarios
  85. </div>
  86.  
  87. <div class="links-pples">
  88. <a href="url">Enlace 1</a><a href="url">Enlace 2</a><a href="url">Enlace 3</a><a href="url">Enlace 4</a><a href="url">Enlace 5</a>
  89. </div>
  90.  
  91. <div class="links-sdarios">
  92. <a href="url">Enlace 1</a><a href="url">Enlace 2</a><a href="url">Enlace 3</a><a href="url">Enlace 4</a><a href="url">Enlace 5</a><a href="url">Enlace 6</a><a href="url">Enlace 7</a><a href="url">Enlace 8</a><a href="url">Enlace 9</a><a href="url">Enlace 10</a>
  93. <div class="bot2">
  94.  
  95. </div>
  96.  
  97. </div>
  98.  
  99. </div>
  100.  
  101. <div id="news-tab" class="modal-content">
  102.  
  103. <div class="column-tab" style="margin-right: 4px;">
  104.  
  105. <div class="novedad">
  106. Última<br />novedad
  107. </div>
  108.  
  109. <div class="nov-cont">
  110. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.
  111. </div>
  112.  
  113. <div style="margin-top: 64px;" class="link-title">
  114. Noticias anteriores
  115. </div>
  116.  
  117. <div class="noticias">
  118. 00/00 Título de la noticia.<br /><br />00/00 Título de la noticia.<br /><br />00/00 Título de la noticia.
  119. </div>
  120.  
  121. </div>
  122.  
  123. <div class="column-tab">
  124.  
  125. <div class="link-title">
  126. Búsquedas
  127. </div>
  128.  
  129. <marquee scrollamount="2" class="busquedas" direction="up" onmouseout="this.start()" onmouseover="this.stop()">
  130. <a href="url">Título de la búsqueda 1</a><br /><br /><a href="url">Título de la búsqueda 2</a><br /><br /><a href="url">Título de la búsqueda 3</a><br /><br /><a href="url">Título de la búsqueda 4</a><br /><br /><a href="url">Título de la búsqueda 5</a>
  131. </marquee>
  132.  
  133. </div>
  134.  
  135. </div>
  136.  
  137. </div>
  138. </center>
  139. <div class="botones">
  140.  
  141. <div class="title">
  142. Menu
  143. </div><a href="#" class="modal-link" data-modal-target="example-popup">Index</a><a href="#" class="modal-link" data-modal-target="admin-tab">Staff</a><a href="#" class="modal-link" data-modal-target="links-tab">Links</a><a style="border-bottom: 3px solid #000;" href="#" class="modal-link" data-modal-target="news-tab">News</a><span style="font-size: 10px; font-weight: 700; text-transform: uppercase; font-family: calibri; position: relative; top: 5px; text-align: center;"><a href="http://thecaptainknowsbest.tumblr.com/" style="color: #000;">© HARDROCK</a></span>
  144. </div>
  145.  
  146. ------------ CSS -----------------
  147.  
  148. .botones {
  149. position: fixed;
  150. top: 0px;
  151. left: 0px;
  152. width: 73px;
  153. }
  154.  
  155. .busquedas {
  156. background: #e1e0e0;
  157. text-align: center;
  158. height: 146px;
  159. overflow: hidden;
  160. font-weight: bold;
  161. }
  162.  
  163. .busquedas a {color: #000;}
  164.  
  165. .tablon-anuncios {font-family: source sans pro;}
  166.  
  167. .noticias {
  168. font-size: 11px;
  169. line-height: 100%;
  170. color: #000;
  171. font-weight: bold;
  172. text-align: justify;
  173. }
  174.  
  175. .novedad {
  176. display: inline-block;
  177. line-height: 100%;
  178. position: absolute;
  179. top: 0px;
  180. left: 0px;
  181. width: 70px;
  182. background: #000;
  183. margin-right: 1px;
  184. text-align: center;
  185. padding-bottom: 20px;
  186. color: #f2f2f2;
  187. padding-top: 20px;
  188. }
  189.  
  190. .nov-cont {
  191. display: inline-block;
  192. position: absolute;
  193. right: 0px;
  194. top: 0px;
  195. height: 50px;
  196. background: #e1e0e0;
  197. line-height: 100%;
  198. text-align: justify;
  199. color: #000;
  200. width: 186px;
  201. padding: 5px;
  202. }
  203.  
  204. .column-tab {
  205. width: 270px;
  206. overflow: hidden;
  207. position: relative;
  208. height: 181px;
  209. display: inline-block;
  210. }
  211.  
  212. .links-sdarios .bot2 {
  213. margin-top: 5px;
  214. width: 100%;
  215. height: 40px;
  216. background: #000;
  217. }
  218.  
  219. .links-sdarios {
  220. height: 150px;
  221. overflow: hidden;
  222. width: 270px;
  223. display: inline-block;
  224. }
  225.  
  226. .links-sdarios a {
  227. display: inline-block;
  228. background: #e1e0e0;
  229. line-height: 100%;
  230. color: #000;
  231. padding-top: 5px;
  232. padding-bottom: 5px;
  233. width: 134px;
  234. margin-top: 1px;
  235. margin-right: 1px;
  236. text-align: center;
  237. font-size: 11px;
  238. transition: 1s;
  239. }
  240.  
  241. .links-sdarios a:hover {letter-spacing: 2px; transition: 1s;}
  242.  
  243. .links-pples {
  244. width: 270px;
  245. height: 150px;
  246. overflow: hidden;
  247. margin-right: 5px;
  248. display: inline-block;
  249. }
  250.  
  251. .links-pples a {
  252. display: block;
  253. background: #e1e0e0;
  254. line-height: 100%;
  255. color: #000;
  256. padding-top: 9px;
  257. padding-bottom: 9px;
  258. margin-top: 1px;
  259. text-align: center;
  260. font-size: 11px;
  261. transition: 1s;
  262. }
  263.  
  264. .links-pples a:hover {transition: 1s; letter-spacing: 2px;}
  265.  
  266. .link-title {
  267. display: inline-block;
  268. margin-bottom: 5px;
  269. width: 270px;
  270. font-size: 11px;
  271. text-transform: uppercase;
  272. text-align: center;
  273. line-height: 100%;
  274. font-family: Source Sans Pro;
  275. padding-top: 10px;
  276. padding-bottom: 10px;
  277. color: #f9f9f9;
  278. background: #000;
  279. }
  280.  
  281. .admin .info-admin {
  282. display: block;
  283. width: 87px;
  284. text-align: center;
  285. margin-left: 90px;
  286. font-size: 11px;
  287. background: #000;
  288. border-bottom: 1px solid #F9F9F9;
  289. line-height: 100%;
  290. padding-top: 3px;
  291. padding-bottom: 3px;
  292. color: #F9F9F9;
  293. }
  294.  
  295. .admin img {float: left; width: 90px; height: 181px;border-right: 1px solid #F9F9F9;}
  296.  
  297. .admin {
  298. height: 181px;
  299. width: 178px;
  300. overflow: hidden;
  301. display: inline-block;
  302. background: #000;
  303. }
  304.  
  305. .ambientacion {
  306. height: 161px;
  307. padding: 10px;
  308. color: #000;
  309. width: 220px;
  310. margin-right: 5px;
  311. background: #e1e0e0;
  312. line-height: 100%;
  313. font-size: 11px;
  314. text-align: justify;
  315. }
  316.  
  317. .bot-negro {
  318. width: 300px;
  319. height: 50px;
  320. margin-top: 5px;
  321. background: #000;
  322. }
  323.  
  324. .botones a {color: #eee;}
  325.  
  326. .botones .title {
  327. display: block;
  328. text-transform: uppercase;
  329. font-family: Source Sans Pro;
  330. font-size: 13px;
  331. background: #000;
  332. width: 70px;
  333. text-align: center;
  334. color: #eee;
  335. font-weight: 600;
  336. margin-bottom: 1px;
  337. padding-top: 10px;
  338. padding-bottom: 5px;
  339. line-height: 100%;
  340. height: 20px;
  341. border-right: 3px solid #000;
  342. }
  343.  
  344. .modal-link {
  345. display: block;
  346. text-transform: uppercase;
  347. font-family: Source Sans Pro;
  348. font-size: 13px;
  349. background: #21B7B8;
  350. width: 70px;
  351. text-align: center;
  352. font-weight: 600;
  353. margin-bottom: 1px;
  354. padding-top: 10px;
  355. padding-bottom: 5px;
  356. line-height: 100%;
  357. height: 20px;
  358. border-right: 3px solid #000;
  359. transition: 0.5s;
  360. }
  361.  
  362. .modal-link:hover {transition: 0.5s; width: 90px;}
  363.  
  364. .modal-content {
  365. display: none;
  366. }
  367.  
  368. #fade-background {
  369. position: fixed;
  370. top: 0;
  371. left: 0;
  372. width: 100%;
  373. height: 100%;
  374. background: #000000;
  375. z-index: 2;
  376. }
  377. #modal-window {
  378. position: fixed;
  379. top: 64px;
  380. width: 550px;
  381. padding: 20px;
  382. left: 50%;
  383. height: 181px;
  384. overflow: hidden;
  385. border: 10px solid #000;
  386. margin: 0 0 0 -295px;
  387. background-color: #F9F9F9;
  388. z-index: 3;
  389. }
  390. /*Pop up*/
  391.  
  392. ------------ JAVASCRIPT ----------
  393.  
  394. // jQuery Modal Popups by Black
  395. // http://code.jfbs.net/?showtopic=57
  396. $(document).ready(function() {
  397. var fadeBackground = $(document.createElement("div")).hide().attr("id", "fade-background"),
  398. modalWindow = $(document.createElement("div")).hide().attr("id", "modal-window");
  399. $(document.body).append(fadeBackground, modalWindow);
  400. $(document).on("click", ".modal-link", function(e) {
  401. $("#fade-background").css({ "opacity": "0.3" }).fadeIn("fast");
  402. var newContents = $("#" + $(this).data("modal-target")).html();
  403. $("#modal-window").html(newContents);
  404. $("#modal-window").fadeIn("fast");
  405. e.preventDefault();
  406. });
  407. $(document).on("click", "#fade-background", function() {
  408. $("#fade-background").fadeOut("fast");
  409. $("#modal-window").fadeOut("fast");
  410. });
  411. $(document).keypress(function(e) {
  412. if(e.keyCode == 27) {
  413. $("#fade-background").fadeOut("fast");
  414. $("#modal-window").fadeOut("fast");
  415. }
  416. });
  417. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement