API tools faq
paste
Advertisement
faluvtha

[#3] — Anime Recommendation [Pages]

faluvtha
Jun 27th, 2014
829
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.47 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!----------------------
  4.  
  5. ANIME RECOMMENDATION by Fukuo
  6. If you're having a problem, just contact me at fukuo-support@tumblr
  7.  
  8. ------------------------>
  9.  
  10. <html>
  11. <head>
  12. <title>{Title}</title>
  13.  
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16. <meta charset="UTF-8">
  17.  
  18. <!-- FONTS -->
  19. <link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
  20. <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
  21.  
  22.  
  23. <style type="text/css">
  24.  
  25. body {
  26. background-color:#eee;
  27. background-image:url('https://38.media.tumblr.com/5085c1a54a7a1224dd3b293b78cf944e/tumblr_n7gg1ehJbh1rmzx9io3_250.png');
  28. background-position:fixed;
  29. }
  30.  
  31. ::-webkit-scrollbar {
  32. width:6px;
  33. }
  34.  
  35. ::-webkit-scrollbar-track {
  36. background-color:#eee;
  37. }
  38.  
  39. ::-webkit-scrollbar-thumb {
  40. border-radius: 10px;
  41. background-color:#555;
  42. }
  43.  
  44. #top_bar {
  45. position:fixed;
  46. width:100%;
  47. height:100px;
  48. padding:35px 0 0 0px;
  49. left:0;
  50. top:0;
  51. background-color:#aaeeee;
  52. background-image:url('http://static.tumblr.com/5ojoydj/lWzn7twqf/tumblr_m4y2lnkd1v1rx3sj3o2_250.png');
  53. z-index:9999999999;
  54. color:#111;
  55. text-shadow:2px 1px 0px #fff;
  56. text-align:center;
  57. font-family:'Raleway' sans-serif;
  58. font-size:45px;
  59. }
  60.  
  61. #content_main {
  62. width:690px;
  63. margin:250px auto;
  64. }
  65.  
  66.  
  67. #position_co_r {
  68. width:800px;
  69. }
  70.  
  71. .content_recs {
  72. display:block;
  73. width:300px;
  74. height:240px;
  75. padding:35px 25px 45px 25px;
  76. color:#111;
  77. overflow-x:hidden;
  78. font-family:'Lato';
  79. margin:90px 120px 10px 200px;
  80. line-height:25px;
  81. text-align:justify;
  82. background-color:white;
  83. -webkit-transition: all 0.4s ease;
  84. -moz-transition: all 0.4s ease;
  85. -o-transition: all 0.4s ease;
  86. }
  87.  
  88.  
  89. .content_recs img {
  90. width:214px;
  91. border:0px solid #ccc;
  92. position:absolute;
  93. margin:-35px 0 40px -240px;
  94. }
  95.  
  96. .content_recs:hover #caption_recs {
  97. margin:-35px 0 0 -240px;
  98. opacity:0.7;
  99. -webkit-transition: all 0.4s ease;
  100. -moz-transition: all 0.4s ease;
  101. -o-transition: all 0.4s ease;
  102. }
  103.  
  104. .content_recs:hover #caption_rate {
  105. margin:-35px 0 0 330px;
  106. background-color:#aaeeee;
  107. color:#333;
  108. transition-delay:0.5s;
  109. -webkit-transition-delay:0.5s;
  110. }
  111.  
  112. #caption_recs {
  113. position:absolute;
  114. opacity:0;
  115. width:565px;
  116. height:321px;
  117. background-color:#111;
  118. margin:-35px 0 0 -240px;
  119. z-index:99999;
  120. -webkit-transition: all 0.4s ease;
  121. -moz-transition: all 0.4s ease;
  122. -o-transition: all 0.4s ease;
  123. }
  124.  
  125.  
  126. #caption_recs h1 {
  127. width:545px;
  128. padding:110px 10px 10px 10px;
  129. text-align:center;
  130. position:absolute;
  131. font-family:'Raleway', sans-serif;
  132. font-size:40px;
  133. color:white;
  134. font-weight:lighter;
  135. }
  136.  
  137. #caption_rate {
  138. position:absolute;
  139. opacity:1;
  140. width:150px;
  141. height:291px;
  142. padding:30px 25px 0px 25px;
  143. border-bottom:0.7px solid #111;
  144. background-color:#111;
  145. z-index:-9;
  146. margin:-35px 0 0 330px;
  147. color:white;
  148. font-family:'Lato';
  149. -webkit-transition: all 0.4s ease;
  150. -moz-transition: all 0.4s ease;
  151. -o-transition: all 0.4s ease;
  152. }
  153.  
  154. #position-menu-bar {
  155. position:fixed;
  156. right:40px;
  157. top:40px;
  158. z-index:999999999999;
  159. -webkit-transition: all 0.8s ease;
  160. -moz-transition: all 0.8s ease;
  161. -o-transition: all 0.8s ease;
  162. }
  163.  
  164.  
  165. .menu-bar {
  166. display:block;
  167. width:40px;
  168. height:45px;
  169. background-color:#333;
  170. padding-left:7px;
  171. padding-right:7px;
  172. color:#FFF;
  173. cursor:crosshair;
  174. -webkit-transition: all 0.5s ease;
  175. -moz-transition: all 0.5s ease;
  176. -o-transition: all 0.5s ease;
  177. }
  178.  
  179. .menu-bar img {
  180. width:35px;
  181. height:35px;
  182. margin-top:6px;
  183. margin-left:3px;
  184. }
  185.  
  186. .mb {
  187. display:block;
  188. width:150px;
  189. height:20px;
  190. padding-top:10px;
  191. padding-bottom:10px;
  192. color:#FFF;
  193. font-family:'Raleway';
  194. cursor:help;
  195. background-color:#444;
  196. margin-bottom:5px;
  197. -webkit-transition: all 0.5s ease;
  198. -moz-transition: all 0.5s ease;
  199. -o-transition: all 0.5s ease;
  200. }
  201.  
  202. a { text-decoration:none;}
  203.  
  204. .mb:hover {
  205. background-color:#333;
  206. color:#FFF;
  207. letter-spacing:5px;
  208. -webkit-transition: all 0.5s ease;
  209. -moz-transition: all 0.5s ease;
  210. -o-transition: all 0.5s ease;
  211. }
  212.  
  213. #more-bar {
  214. display:block;
  215. opacity:0;
  216. position:absolute;
  217. padding:12px;
  218. margin-top:50px;
  219. margin-left:140px;
  220. width:220px;;
  221. text-align:center;
  222. background-color:transparent;
  223. color:white;
  224. font-size:15px;
  225. text-transform:uppercase;
  226. -webkit-transition: all 0.7s ease;
  227. -moz-transition: all 0.7s ease;
  228. -o-transition: all 0.7s ease;
  229. }
  230.  
  231.  
  232. #position-menu-bar:hover #more-bar {
  233. margin-left:-100px;
  234. opacity:1;
  235. }
  236.  
  237. </style>
  238. </head>
  239. <body>
  240.  
  241. <!-- TOP BAR-->
  242. <div id="top_bar">
  243. Anime Recommendation
  244. </div>
  245.  
  246. <!-- MENU-->
  247. <div id="position-menu-bar">
  248. <div class="menu-bar">
  249. <img src="http://static.tumblr.com/5ojoydj/bunmo0ev7/fukuo-line-bar.png"/>
  250. </div>
  251. <div id="more-bar">
  252. <a href="/" class="mb">Go Back </a>
  253. <a href="http://fukuo.tumblr.com/" class="mb">Credit </a>
  254. </div>
  255. </div>
  256.  
  257.  
  258. <!-----------------
  259.  
  260. THE MAIN CONTENT
  261.  
  262. ------------------>
  263.  
  264. <section id="content_main">
  265.  
  266. <!-- The content here is editable -->
  267. <div id="position_co_r">
  268.  
  269. <div class="content_recs">
  270. <div id="caption_recs">
  271. <h1>Kimi Ni <b>Todoke</b></h1>
  272. </div>
  273.  
  274. <div id="caption_rate">
  275. <b>Score:</b> 8.30<br>
  276. <b>Type:</b> TV<br>
  277. <b>Genres:</b>
  278. <ul>
  279. <li>Romance</li>
  280. <li>School</li>
  281. <li>Shoujo</li>
  282. </ul>
  283. </div>
  284.  
  285. <img src="http://static.tumblr.com/5ojoydj/Czen7rnqz/27993l.jpg">
  286. Sawako Kuronuma, called Sadako by her classmates, despite her appearances, she is a sweet and timid girl who longs to be able to make friends with everyone and be liked by everyone. When her idol, popular boy Kazehaya, begins talking with her, everything changes.
  287.  
  288. </div>
  289.  
  290. <div class="content_recs">
  291.  
  292. <div id="caption_recs">
  293. <h1>Sword Art <b>Online</b></h1>
  294. </div>
  295.  
  296. <div id="caption_rate">
  297. <b>Score:</b> 8.23<br>
  298. <b>Type:</b> TV<br>
  299. <b>Genres:</b>
  300. <ul>
  301. <li>Action</li>
  302. <li>Romance</li>
  303. <li>Adventure</li>
  304. <li>Game</li>
  305. <li>Shounen</li>
  306. <li>Fantasy</li>
  307. </ul>
  308. </div>
  309. <img src="http://static.tumblr.com/5ojoydj/oMsn7rntb/36343.jpg">
  310. Explores the universe of Sword Art Online, a Virtual Reality MMORPG, that takes the users and traps them in a virtual world, Aincrad. After it is announced that the only way to leave the game is by beating it, Kirito takes on a quest to free himself.
  311.  
  312. </div>
  313. <br>
  314. <div class="content_recs">
  315. <div id="caption_recs">
  316. <h1>Kimi To <b>Boku</b></h1>
  317. </div>
  318.  
  319. <div id="caption_rate">
  320. <b>Score:</b> 7.92<br>
  321. <b>Type:</b> TV<br>
  322. <b>Genres:</b>
  323. <ul>
  324. <li>Comedy</li>
  325. <li>Romance</li>
  326. <li>Drama</li>
  327. <li>School</li>
  328. <li>Shounen</li>
  329. <li>Slice of Life</li>
  330. </ul>
  331. </div>
  332. <img src="http://static.tumblr.com/5ojoydj/Nban7rnyt/34949l.jpg">
  333. Based on a slice-of-life manga, four boys who have known each other since they were small children enter high school, and are joined by a new, boisterous transfer student. Together, the story centers around their everyday, normal lives.
  334. </div>
  335.  
  336. <br>
  337. <div class="content_recs">
  338. <div id="caption_recs">
  339. <h1>⎾K⏌ - <b>Project </b></h1>
  340. </div>
  341.  
  342. <div id="caption_rate">
  343. <b>Score:</b> 7.70<br>
  344. <b>Type:</b> TV<br>
  345. <b>Genres:</b>
  346. <ul>
  347. <li>Action</li>
  348. <li>Mystery</li>
  349. <li>Super Power</li>
  350. </ul>
  351. </div>
  352. <img src="http://static.tumblr.com/5ojoydj/FWgn7ro0p/47607l.jpg">
  353. K follows the story of a young boy whose life is caught in a psychic war between seven kings. Shiro goes on an errand for his classmate Kukuri to prepare for their upcoming school festival, only to be chased by some intimidating-looking men.
  354. </div>
  355. <br>
  356. <div class="content_recs">
  357. <div id="caption_recs">
  358. <h1>Death<b> Note </b></h1>
  359. </div>
  360.  
  361. <div id="caption_rate">
  362. <b>Score:</b> 8.80<br>
  363. <b>Type:</b> TV<br>
  364. <b>Genres:</b>
  365. <ul>
  366. <li>Supernarutal</li>
  367. <li>Mystery</li>
  368. <li>Police</li>
  369. <li>Psychological</li>
  370. <li>Thriller</li>
  371. </ul>
  372. </div>
  373.  
  374. <img src="http://static.tumblr.com/5ojoydj/BSwn7rpgv/9453l.jpg">
  375. Yagami Light is a 17-year-old genius from Japan who is tired of his life, school, and the state of the world as he knows it. One day, on the way home from class, Light stumbles upon a dark notebook with "Death Note" written on the front.
  376. </div>
  377.  
  378.  
  379. <div class="content_recs">
  380. <div id="caption_recs">
  381. <h1>Haiky<b>uu!! </b></h1>
  382. </div>
  383.  
  384. <div id="caption_rate">
  385. <b>Score:</b> 8.39<br>
  386. <b>Type:</b> TV<br>
  387. <b>Genres:</b>
  388. <ul>
  389. <li>Shounen</li>
  390. <li>Sports</li>
  391. </ul>
  392. </div>
  393.  
  394. <img src="http://static.tumblr.com/5ojoydj/9lYn7tvwu/60431l.jpg">
  395. A chance event triggered Shouyou Hinata's love for volleyball. His club had no members, but somehow persevered and finally made it into its very first and final regular match of middle school, where it was steamrolled by Tobio Kageyama, a superstar player known as "King of the Court." Vowing revenge, Hinata applied to the Karasuno High School volleyball club... only to come face-to-face with his hated rival, Kageyama!
  396. </div>
  397.  
  398. <div class="content_recs">
  399. <div id="caption_recs">
  400. <h1>Kuroko No <b>Basuke </b></h1>
  401. </div>
  402.  
  403. <div id="caption_rate">
  404. <b>Score:</b> 8.82<br>
  405. <b>Type:</b> TV<br>
  406. <b>Genres:</b>
  407. <ul>
  408. <li>Comedy</li>
  409. <li>School</li>
  410. <li>Shounen</li>
  411. <li>Sports</li>
  412. </ul>
  413. </div>
  414.  
  415. <img src="http://static.tumblr.com/5ojoydj/e9Xn7ro30/56155l.jpg">
  416. The basketball team of Teiko Middle School rose to distinction by demolishing all competition. The regulars of the team became known as the "Generation of Miracles". After graduating from middle school, these five stars went to different high schools with top basketball teams. However, a fact few know is that there was another player in the "Generation of Miracles": a phantom sixth man.
  417. </div>
  418.  
  419. <div class="content_recs">
  420. <div id="caption_recs">
  421. <h1>Hyou<b>ka </b></h1>
  422. </div>
  423.  
  424. <div id="caption_rate">
  425. <b>Score:</b> 8.24<br>
  426. <b>Type:</b> TV<br>
  427. <b>Genres:</b>
  428. <ul>
  429. <li>Mystery</li>
  430. <li>School</li>
  431. <li>Slice of Life</li>
  432. </ul>
  433. </div>
  434.  
  435. <img src="http://static.tumblr.com/5ojoydj/GtWn7ro28/50521l.jpg">
  436. Oreki Houtarou is a minimalistic high school boy. One day, he joins the Classic Literature Club at his elder sister's request. There he meets Chitanda Eru, Fukube Satoshi, and Ibara Mayaka. They begin to investigate a case that occurred 45 years ago. Hints of the mystery are buried in an old collection of works of the former members of Classics Club. The collection is titled "Hyouka."
  437.  
  438. </div>
  439. <div class="content_recs">
  440. <div id="caption_recs">
  441. <h1>Nora<b>gami</b></h1>
  442. </div>
  443.  
  444. <div id="caption_rate">
  445. <b>Score:</b> 8.24<br>
  446. <b>Type:</b> TV<br>
  447. <b>Genres:</b>
  448. <ul>
  449. <li>Action</li>
  450. <li>Adventure</li>
  451. <li>Shounen</li>
  452. <li>Supernatural</li>
  453. </ul>
  454. </div>
  455.  
  456. <img src="http://static.tumblr.com/5ojoydj/HN6n7ro58/58139l.jpg">
  457. Yato, a minor god, dreams to become the most revered deity in the world with big shrine and all. However, being a penniless god that he is, he has a long way to go and his shinki leaving him doesn't help matter.
  458.  
  459. </div>
  460.  
  461. <div class="content_recs">
  462. <div id="caption_recs">
  463. <h1>Digi<b>mon</b> ⎾01⏌ </h1>
  464. </div>
  465.  
  466. <div id="caption_rate">
  467. <b>Score:</b> 7.81<br>
  468. <b>Type:</b> TV<br>
  469. <b>Genres:</b>
  470. <ul>
  471. <li>Action</li>
  472. <li>Adventure</li>
  473. <li>Shounen</li>
  474. <li>Comedy</li>
  475. <li>Fantasy</li>
  476. <li>Child</li>
  477. </ul>
  478. </div>
  479.  
  480. <img src="http://static.tumblr.com/5ojoydj/1MXn7tu3w/11070l.jpg">
  481. Seven kids are transported to the Digital World, a strange place where digital creatures called "Digimon" reside. A group of Digimon soon befriend them and keep the kids out of harm's way. The children then discover they are the Chosen Children, which protect the Digital World from evil Digimon like Devimon and Vamdemon.
  482.  
  483. </div>
  484.  
  485. <div class="content_recs">
  486. <div id="caption_recs">
  487. <h1>Digi<b>mon</b> ⎾02⏌ </h1>
  488. </div>
  489.  
  490. <div id="caption_rate">
  491. <b>Score:</b> 7.36<br>
  492. <b>Type:</b> TV<br>
  493. <b>Genres:</b>
  494. <ul>
  495. <li>Action</li>
  496. <li>Adventure</li>
  497. <li>Shounen</li>
  498. <li>Comedy</li>
  499. <li>Fantasy</li>
  500. <li>Child</li>
  501. </ul>
  502. </div>
  503.  
  504. <img src="http://static.tumblr.com/5ojoydj/4ghn7tua1/20360l.jpg">
  505. A few years after the adventures of the Chosen Children in the Digital World, a new batch of Chosen Children are summoned to save the Digital World. An evil ruler known as the Digimon Kaiser, or Digimon Emperor, is forcing the Digital World's Digimon into enslavement. The new group of Chosen Children, with the help of their Digimon, then begin a journey to stop the evil Digimon Emperor.
  506.  
  507. </div>
  508.  
  509. </div><!-- position_co_r -->
  510.  
  511. </section><!-- CONTENT-->
  512.  
  513. </body>
  514. </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!