API tools faq
paste
Advertisement
astroloki

página de cnn

astroloki
Apr 5th, 2017
307
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.00 KB | None | 0 0
raw download clone embed print report
  1. <!---------------------------------------------------------------------
  2.  
  3. Fᴀᴍɪʟʏ Pᴀɢᴇ #1; ᴍᴀᴅᴇ ʙʏ Kʏᴜɴɢsᴀᴛɪᴏɴᴀʟ
  4. <ᴋʏᴜɴɢsᴀᴛɪᴏɴᴀʟ.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ>
  5. ᴘʟᴇᴀsᴇ ᴅᴏ ɴᴏᴛ ʀᴇᴍᴏᴠᴇ ᴄʀᴇᴅɪᴛ.
  6. ғᴇᴇʟ ғʀᴇᴇ ᴛᴏ ᴀsᴋ ɪғ ʏᴏᴜ ʜᴀᴠᴇ
  7. ᴀɴʏ ǫᴜᴇsᴛɪᴏɴs!
  8.  
  9. ---------------------------------------------------------------------->
  10.  
  11. <html>
  12.  
  13. <head><title>{Title}</title><link rel="shortcut icon" href="{Favicon}" />
  14. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  15.  
  16. <style type="text/css">
  17.  
  18. @font-face{font-family:bebas;src:url(http://static.tumblr.com/nnubjjk/gBon7uhde/bebasneue.otf);}
  19.  
  20. ::-webkit-scrollbar{
  21. width:4px;
  22. height:4px;
  23. background-color:#fff;
  24. }
  25.  
  26. ::-webkit-scrollbar-thumb{background-color:#000;}
  27.  
  28. ::selection {color: #bbb; background: #f5f5f5; }
  29. ::-moz-selection {color: #bbb; background: #f5f5f5; }
  30. ::-webkit-selection {color: #bbb; background: #f5f5f5; }
  31.  
  32. body{
  33. margin:0px;
  34. padding:0px;
  35. font-family:calibri;
  36. font-size:9px;
  37. color:#808080;
  38. background-color:#fff;
  39. background-image:url('http://static.tumblr.com/d40eae727a79de74c5b3c4cb5c8e9fd5/kucevlg/wLin7ybei/tumblr_static_36ptwx9v1yqsgg84g48w0scc8.png');
  40. background-repeat:repeat;
  41. background-attachment:fixed;
  42. word-wrap:break-word;
  43. }
  44.  
  45. a, a:link, a:visited, a:active{
  46. cursor: pointer;
  47. text-decoration:none;
  48. color:#808080;
  49. -webkit-transition: all 0.3s ease-in-out;
  50. -moz-transition: all 0.3s ease-in-out;
  51. transition: all 0.3s ease-in-out;
  52. }
  53.  
  54. a:hover{
  55. cursor:pointer;
  56. color:#f7f7f7;
  57. -webkit-transition: all 0.3s ease-in-out;
  58. -moz-transition: all 0.3s ease-in-out;
  59. transition: all 0.3s ease-in-out;
  60. }
  61.  
  62. #sidebarimg{
  63. z-index:999;
  64. position:fixed;
  65. left:0;
  66. top:0;
  67. height:100%;
  68. width:350px;
  69. background-color:#000;
  70. background-image:url('http://static.tumblr.com/nnubjjk/PZ9n7yne0/tumblr_n7yllf8b5w1qbgdrko1_1280.png');
  71. background-position:center;
  72. background-size:cover;
  73. -webkit-transition: all 0.5s ease-in-out;
  74. -moz-transition: all 0.5s ease-in-out;
  75. -o-transition: all 0.5s ease-in-out;
  76. }
  77.  
  78. #bar{
  79. position:fixed;
  80. top:0px;
  81. height:100%;
  82. left:350px;
  83. width:20px;
  84. padding:10px;
  85. background:#000;
  86. }
  87.  
  88. #sidebar{
  89. z-index:9999;
  90. position:fixed;
  91. left:0;
  92. top:0;
  93. height:100%;
  94. width:350px;
  95. opacity:1;
  96. -webkit-transition: all 0.5s ease-in-out;
  97. -moz-transition: all 0.5s ease-in-out;
  98. -o-transition: all 0.5s ease-in-out;
  99. }
  100.  
  101. #title{
  102. width:220px;
  103. letter-spacing:1px;
  104. font-size:90px;
  105. font-family:bebas;
  106. text-transform:uppercase;
  107. margin-top:150px;
  108. margin-left:auto;
  109. margin-right:auto;
  110. text-align:center;
  111. color:#fff; /*----- cor do título que fica sobre a foto ----*/
  112. z-index:999;
  113. }
  114.  
  115. #description{
  116. text-align:justify;
  117. font-family:calibri;
  118. font-size:10px;
  119. color:#fff; /*----- cor da descrição sobre o título ---*/
  120. margin-left:auto;
  121. margin-right:auto;
  122. width:200px;
  123. padding:10px;
  124. border-top:1px solid #fff;
  125. border-bottom:1px solid #fff;
  126. }
  127.  
  128. #navigation {
  129. margin-left:-8px;
  130. margin-top:230px;
  131. margin-bottom:10px;
  132. width:20px;
  133. text-align:center;
  134. }
  135.  
  136. #navigation a{
  137. display:inline-block;
  138. z-index:9999999;
  139. width:20px;
  140. text-transform:uppercase;
  141. font-family:calibri;
  142. padding:5px;
  143. margin-top:1px;
  144. margin-left:5px;
  145. height:10px;
  146. border-top:none;
  147. border-right:none;
  148. font-size:11px;
  149. text-align:left;
  150. }
  151.  
  152. #navigation a img{
  153. background:transparent;
  154. width:10px;
  155. margin-top:3px;
  156. margin-right:5px;
  157. float:left;
  158. padding:5px;
  159. opacity:1;
  160. border-radius:5px;
  161. background:transparent;
  162. -webkit-filter:invert(100%);
  163. -moz-filter:invert(100%);
  164. -o-filter:invert(100%);
  165. -ms-filter:invert(100%);
  166. filter:invert(100%);
  167. -webkit-transition: all 0.5s ease-in-out;
  168. -moz-transition: all 0.5s ease-in-out;
  169. -o-transition: all 0.5s ease-in-out;
  170. }
  171.  
  172. #navigation a:hover {
  173. background:transparent;
  174. -webkit-transition: all 0.7s ease-in-out;
  175. -moz-transition: all 0.7s ease-in-out;
  176. -o-transition: all 0.7s ease-in-out;
  177. -ms-transition: all 0.7s ease-in-out;
  178. transition: all 0.7s ease-in-out;
  179. }
  180.  
  181. #navigation a:hover img{
  182. background:transparent;
  183. -webkit-filter:invert(0%);
  184. -moz-filter:invert(0%);
  185. -o-filter:invert(0%);
  186. -ms-filter:invert(0%);
  187. filter:invert(0%);
  188. -webkit-transition: all 0.5s ease-in-out;
  189. -moz-transition: all 0.5s ease-in-out;
  190. -o-transition: all 0.5s ease-in-out;
  191. }
  192.  
  193. #container{
  194. margin-top:50px;
  195. margin-left:450px;
  196. width:800px;
  197. height:500px;
  198. background:#fff;
  199. padding:30px;
  200. border:1px solid #e6e6e6;
  201. overflow:auto;
  202. }
  203.  
  204. h3{
  205. font-family:bebas;
  206. color:#fff;
  207. background:#000;
  208. padding:5px;
  209. font-size:25px;
  210. letter-spacing:3px;
  211. text-align:center;
  212. margin-top:0px;
  213. }
  214.  
  215. #box {
  216. float:left;
  217. width:340px;
  218. height:220px;
  219. background:#fff;
  220. margin-bottom:30px;
  221. margin-right:30px;
  222. border:1px solid #e6e6e6; /*----caixinha ao redor das connections ----*/
  223. padding:10px;
  224. }
  225.  
  226. #picture{
  227. width:120px;
  228. height:130px;
  229. margin-top:-15px;
  230. background:#000;
  231. padding:10px;
  232. border:7px double #fff;
  233. }
  234.  
  235. #desc{
  236. margin-left:157px;
  237. margin-top:-163px;
  238. width:163px;
  239. height:160px;
  240. padding:0px 10px 0px 10px;
  241. font-family:calibri;
  242. color:#808080;
  243. overflow:auto;
  244. }
  245.  
  246. #s-m-t-tooltip {
  247. display:block;
  248. background:#000;
  249. font-size:8px;
  250. font-family:calibri;
  251. letter-spacing: 1px;
  252. color:#fff;
  253. text-align:center;
  254. text-transform:uppercase;
  255. margin-left:20px;
  256. padding:5px;
  257. max-width:200px;
  258. z-index:9999;
  259. }
  260.  
  261.  
  262. </style>
  263.  
  264. <script type="text/javascript"
  265. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  266. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  267. <script>
  268. (function($){
  269. $(document).ready(function(){
  270. $("[title]").style_my_tooltips();
  271. });
  272. })(jQuery);
  273. </script>
  274.  
  275. </head>
  276. <body>
  277.  
  278. <div id="sidebarimg"> <!----a imagem da barra do lado fica aqui ---->
  279. <div id="sidebarimg" style="background-image: url('http://i.imgur.com/q0s2pQR.jpg'); background-size: cover; background-position: center;">
  280. </div>
  281.  
  282. <div id="sidebar">
  283. <div id="title">cards</div>
  284. <div id="description">
  285.  
  286. <!---é a descrição que vai em cima da fotinho!--->
  287. <!----------------------- DESCRIPTION GOES HERE: ------------------------>
  288. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  289. <p><i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</i>
  290. <p><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</b>
  291. <!----------------------------------------------------------------------->
  292. </div>
  293. </div>
  294.  
  295. <div id="bar">
  296. <div id="navigation">
  297. <a href="/" title="home"><img src="http://static.tumblr.com/kucevlg/JMMn7uc1l/16.png"></a>
  298. <a href="/ask" title="message"><img src="http://static.tumblr.com/kucevlg/ZnXn7uc42/36.png"></a>
  299. <a href="/archive" title="archive"><img src="http://static.tumblr.com/kucevlg/aj2n7uc9j/2.png"></a>
  300. <a href="/" title="Link 1"><img src="http://static.tumblr.com/kucevlg/1Aqn7y99a/dribbble.png"></a>
  301. <a href="/" title="Link 2"><img src="http://static.tumblr.com/kucevlg/qWYn7y94o/bug.png"></a>
  302. <a href="/" title="Link 3"><img src="http://static.tumblr.com/kucevlg/N2An7y964/crop_tool.png"></a>
  303. <a href="/" title="Link 4"><img src="http://static.tumblr.com/kucevlg/3XTn7y9a4/export_box.png"></a>
  304. <a href="http://kyungsational.tumblr.com/" title="page by kyungsational"><img src="http://static.tumblr.com/kucevlg/vC8n7ue75/buzz-star-icon.png"></a>
  305. </div>
  306. </div>
  307.  
  308. <!------------a caixinhas das cnn começa aqui!----------->
  309.  
  310. <!---quando você quiser fazer mais cnn, você deve copiar o code daqui ---->
  311. <div id="container">
  312. <div id="box"><a href="http://URL.tumblr.com/"><h3>NAME</h3></a>
  313. <img id="picture" src="http://i.imgur.com/Vww5aK0.jpg">
  314.  
  315. <!---aqui é o icon de cada personagem, okay? --->
  316. <div id="desc">
  317. <!----------------------- DESCRIPTION GOES HERE: ------------------------>
  318. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  319. <p><i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</i>
  320. <p><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</b>
  321. <!----------------------------------------------------------------------->
  322. </div>
  323. </div>
  324. <!---até aqui, ok?? e colar antes ou depois do início de um novo personagem. cuidado pra não colar no meio de um, tá?? --->
  325.  
  326. <div id="box"><a href="http://URL.tumblr.com/"><h3>NAME</h3></a>
  327. <img id="picture" src="http://i.imgur.com/tLm0czf.png">
  328. <div id="desc">
  329. <!----------------------- DESCRIPTION GOES HERE: ------------------------>
  330. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  331. <p><i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</i>
  332. <p><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</b>
  333. <!----------------------------------------------------------------------->
  334. </div>
  335. </div>
  336.  
  337. <div id="box"><a href="http://URL.tumblr.com/"><h3>NAME</h3></a>
  338. <img id="picture" src="http://i.imgur.com/tLm0czf.png">
  339. <div id="desc">
  340. <!----------------------- DESCRIPTION GOES HERE: ------------------------>
  341. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  342. <p><i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</i>
  343. <p><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</b>
  344. <!----------------------------------------------------------------------->
  345. </div>
  346. </div>
  347.  
  348. <div id="box"><a href="http://URL.tumblr.com/"><h3>NAME</h3></a>
  349. <img id="picture" src="http://i.imgur.com/tLm0czf.png">
  350. <div id="desc">
  351. <!----------------------- DESCRIPTION GOES HERE: ------------------------>
  352. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  353. <p><i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</i>
  354. <p><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</b>
  355. <!----------------------------------------------------------------------->
  356. </div>
  357. </div>
  358.  
  359. <div id="box"><a href="http://URL.tumblr.com/"><h3>NAME</h3></a>
  360. <img id="picture" src="http://i.imgur.com/tLm0czf.png">
  361. <div id="desc">
  362. <!----------------------- DESCRIPTION GOES HERE: ------------------------>
  363. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  364. <p><i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</i>
  365. <p><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</b>
  366. <!----------------------------------------------------------------------->
  367. </div>
  368. </div>
  369.  
  370. <div id="box"><a href="http://URL.tumblr.com/"><h3>NAME</h3></a>
  371. <img id="picture" src="http://i.imgur.com/tLm0czf.png">
  372. <div id="desc">
  373. <!----------------------- DESCRIPTION GOES HERE: ------------------------>
  374. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  375. <p><i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</i>
  376. <p><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</b>
  377. <!----------------------------------------------------------------------->
  378. </div>
  379. </div>
  380.  
  381. <div id="box"><a href="http://URL.tumblr.com/"><h3>NAME</h3></a>
  382. <img id="picture" src="http://i.imgur.com/tLm0czf.png">
  383. <div id="desc">
  384. <!----------------------- DESCRIPTION GOES HERE: ------------------------>
  385. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  386. <p><i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</i>
  387. <p><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</b>
  388. <!----------------------------------------------------------------------->
  389. </div>
  390. </div>
  391.  
  392. <div id="box"><a href="http://URL.tumblr.com/"><h3>NAME</h3></a>
  393. <img id="picture" src="http://i.imgur.com/tLm0czf.png">
  394. <div id="desc">
  395. <!----------------------- DESCRIPTION GOES HERE: ------------------------>
  396. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  397. <p><i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</i>
  398. <p><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</b>
  399. <!----------------------------------------------------------------------->
  400. </div>
  401. </div>
  402.  
  403. <div id="box"><a href="http://URL.tumblr.com/"><h3>NAME</h3></a>
  404. <img id="picture" src="http://i.imgur.com/tLm0czf.png">
  405. <div id="desc">
  406. <!----------------------- DESCRIPTION GOES HERE: ------------------------>
  407. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  408. <p><i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</i>
  409. <p><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</b>
  410. <!----------------------------------------------------------------------->
  411. </div>
  412. </div>
  413.  
  414. <div id="box"><a href="http://URL.tumblr.com/"><h3>NAME</h3></a>
  415. <img id="picture" src="http://i.imgur.com/tLm0czf.png">
  416. <div id="desc">
  417. <!----------------------- DESCRIPTION GOES HERE: ------------------------>
  418. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  419. <p><i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</i>
  420. <p><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</b>
  421. <!----------------------------------------------------------------------->
  422. </div>
  423. </div>
  424.  
  425. <div id="box"><a href="http://URL.tumblr.com/"><h3>NAME</h3></a>
  426. <img id="picture" src="http://i.imgur.com/tLm0czf.png">
  427. <div id="desc">
  428. <!----------------------- DESCRIPTION GOES HERE: ------------------------>
  429. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  430. <p><i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</i>
  431. <p><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</b>
  432. <!----------------------------------------------------------------------->
  433. </div>
  434. </div>
  435.  
  436. <div id="box"><a href="http://URL.tumblr.com/"><h3>NAME</h3></a>
  437. <img id="picture" src="http://i.imgur.com/tLm0czf.png">
  438. <div id="desc">
  439. <!----------------------- DESCRIPTION GOES HERE: ------------------------>
  440. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  441. <p><i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</i>
  442. <p><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</b>
  443. <!----------------------------------------------------------------------->
  444. </div>
  445. </div>
  446. </div>
  447.  
  448. <!---não cola nada embaixo dessa marquinha aqui, senão vai desconfigurar a página toda! e não precisa ser medo de colocar mais cnn, pode me chamar qualquer coisa. e sem medo de dar enter pra criar mais linhas.--->
  449. </body>
  450. </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!