API tools faq
paste
Advertisement
Amanduhh7

Fanfiction Recommendations

Amanduhh7
Dec 12th, 2015
184
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.51 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--[if IE 8]><html class="lt-ie10 lt-ie9"> <![endif]-->
  3. <!--[if IE 9]><html class="lt-ie10"> <![endif]-->
  4. <!--[if gt IE 9]><!--> <html> <!--<![endif]-->
  5. <head>
  6.  
  7.  
  8.  
  9. <!--DO NOT REMOVE CREDIT-->
  10. <!--DO NOT REMOVE CREDIT-->
  11. <!--DO NOT REMOVE CREDIT-->
  12. <!--DO NOT REMOVE CREDIT-->
  13.  
  14. <!--classes with view view-fifth are for the content you see on page load/hovering on content. Last view view-fifth class has comments on what to copy and paste and change for a new content box. Make sure to paste new coding for content box BEFORE the body tag-->
  15. <!--classes with popup_block are for the content that pops up when clicking the read more link. Last popup_block class has comments on what to copy and paste and change for a new content box. Make sure any new popup coding is placed AFTER the body tag-->
  16.  
  17.  
  18.  
  19. <script type="text/javascript"
  20. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  21. <script>
  22. $(document).ready(function() {
  23. //
  24. $('a.poplight[href^=#]').click(function() {
  25. var popID = $(this).attr('rel'); //Get Popup Name
  26. var popURL = $(this).attr('href'); //Get Popup href to define size
  27. var query= popURL.split('?');
  28. var dim= query[1].split('&');
  29. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  30. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Tooltip-CloseButton.png" class="btn_close" title="escape" alt="escape" /></a>');
  31. var popMargTop = ($('#' + popID).height() + 80) / 2;
  32. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  33. //Apply Margin to Popup
  34. $('#' + popID).css({
  35. 'margin-top' : -popMargTop,
  36. 'margin-left' : -popMargLeft
  37. });
  38. $('body').append('<div id="fade"></div>');
  39. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  40. return false;
  41. });
  42. $('a.close, #fade').live('click', function() {
  43. $('#fade , .popup_block').fadeOut(function() {
  44. $('#fade, a.close').remove(); //fade them both out
  45. });
  46. return false;
  47. });
  48. });
  49. </script>
  50. <style>
  51.  
  52. body{width:100%; overflow-x:hidden;}
  53.  
  54. #container{
  55. width:100%;
  56. margin-top:10%;
  57. margin-left:5%;
  58. }
  59.  
  60. #header{
  61. width:100%;
  62. font-family:poiret one;
  63. text-align:center;
  64. margin-top:10px;
  65. font-size:50px;
  66. }
  67.  
  68. #nav{
  69. width:100%;
  70. text-align:center;
  71. font-family:poiret one;
  72. }
  73.  
  74. #nav ul{
  75. list-style-type:none;
  76. }
  77.  
  78. #nav ul li{
  79. display:inline-block;
  80. padding:5px;
  81. }
  82.  
  83. #nav ul li a{
  84. text-decoration:none;
  85. color:#000000;
  86. }
  87.  
  88. .view {
  89. width: 300px;
  90. height: 200px;
  91. margin: 10px;
  92. float: left;
  93. border: 10px solid #fff;
  94. overflow: hidden;
  95. position: relative;
  96. text-align: center;
  97. box-shadow: 1px 1px 2px #e6e6e6;
  98. cursor: default;
  99. background: #fff url(../images/bgimg.jpg) no-repeat center center
  100. }
  101. .view .mask, .view .content {
  102. width: 300px;
  103. height: 200px;
  104. position: absolute;
  105. overflow: hidden;
  106. top: 0;
  107. left: 0
  108. }
  109. .view img {
  110. display: block;
  111. position: relative;
  112. max-width:300px;
  113. }
  114. .view h2 {
  115. text-transform: uppercase;
  116. color: #fff;
  117. text-align: center;
  118. position: relative;
  119. font-size: 17px;
  120. padding: 10px;
  121. background: rgba(0, 0, 0, 0.8);
  122. margin: 20px 0 0
  123. }
  124. .view p {
  125. font-family: Georgia, serif;
  126. font-style: italic;
  127. font-size: 12px;
  128. position: relative;
  129. color: #fff;
  130. padding: 10px 20px 20px;
  131. text-align: center
  132. }
  133. .view a.info {
  134. display: inline-block;
  135. text-decoration: none;
  136. padding: 7px 14px;
  137. background: #000;
  138. color: #fff;
  139. text-transform: uppercase;
  140. box-shadow: 0 0 1px #000
  141. }
  142. .view a.info:hover {
  143. box-shadow: 0 0 5px #000
  144. }
  145.  
  146. .view-fifth img {
  147. transition: all 0.3s ease-in-out;
  148. }
  149. .view-fifth .mask {
  150. background-color: rgba(146,96,91,0.3);
  151. transform: translateX(-300px);
  152. opacity: 0;
  153. transition: all 0.4s ease-in-out;
  154. }
  155. .view-fifth h2{
  156. background: rgba(255, 255, 255, 0.5);
  157. color: #000;
  158. box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
  159. opacity:0;
  160. }
  161. .view-fifth p{
  162. opacity: 0;
  163. color: #333;
  164. transition: all 0.2s linear;
  165. }
  166.  
  167. .view-fifth:hover .mask {
  168. transform: translateX(0px);
  169. opacity:1;
  170. }
  171. .view-fifth:hover img {
  172. transform: translateX(300px);
  173. transition-delay: 0.1s;
  174. }
  175. .view-fifth:hover p{
  176. opacity: 1;
  177. transition-delay: 0.4s;
  178. }
  179. .view-fifth:hover h2{
  180. opacity:1;
  181. }
  182.  
  183. #fade { /*--Transparent background layer--*/
  184. display: none; /*--hidden by default--*/
  185. background: #000;
  186. background-image: url('');
  187. position: fixed; left: 0; top: 0;
  188. width: 100%; height: 100%;
  189. opacity: .80;
  190. z-index: 9999;
  191. }
  192. .popup_block{
  193. display: none; /*--hidden by default--*/
  194. background: #fff;
  195. padding: 20px;
  196. border: 2px solid #ddd;
  197. float: left;
  198. font-size: 12px;
  199. position: fixed;
  200. top: 50%; left: 50%;
  201. z-index: 99999;
  202. /*--CSS3 Box Shadows--*/
  203. -webkit-box-shadow: 0px 0px 20px #000;
  204. -moz-box-shadow: 0px 0px 20px #000;
  205. box-shadow: 0px 0px 20px #000;
  206. /*--CSS3 Rounded Corners--*/
  207. -webkit-border-radius: 10px;
  208. -moz-border-radius: 10px;
  209. border-radius: 10px;
  210. }
  211. img.btn_close {
  212. float: right;
  213. margin: -5px -5px 0 0;
  214. }
  215. /*--Making IE6 Understand Fixed Positioning--*/
  216. *html #fade {
  217. position: absolute;
  218. }
  219. *html .popup_block {
  220. position: absolute;
  221. }
  222. /* Custom CSS */
  223. {CustomCSS}
  224. </style>
  225. </head>
  226. <body>
  227.  
  228. <div id="header">{Title}</div>
  229. <div id="nav">
  230. <ul>
  231. <li><a href="/home">INDEX</a></li>
  232. <li><a href="/ask">MESSAGE</a></li>
  233. <li><a href="#">LINK ONE</a></li>
  234. <li><a href="#">LINK TWO</a></li>
  235. <li><a href="http://www.slapdashthemes.tumblr.com">THEME</a>
  236. </ul>
  237. </div>
  238.  
  239. <center>
  240. <div id="container">
  241.  
  242. <div class="view view-fifth">
  243. <img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" />
  244. <div class="mask">
  245. <h2>Title</h2>
  246. <p><a href="#">Your Text</a></p>
  247. <a href="#?w=500" rel="02" class="poplight info">Read More</a>
  248. </div>
  249. </div>
  250.  
  251.  
  252. <div class="view view-fifth">
  253. <img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" />
  254. <div class="mask">
  255. <h2>Title</h2>
  256. <p>Your Text</p>
  257. <a href="#?w=500" rel="03" class="poplight info">Read More</a>
  258. </div>
  259. </div>
  260.  
  261.  
  262. <div class="view view-fifth">
  263. <img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" />
  264. <div class="mask">
  265. <h2>Title</h2>
  266. <p>Your Text</p>
  267. <a href="#?w=500" rel="04" class="poplight info">Read More</a>
  268. </div>
  269. </div>
  270.  
  271.  
  272. <div class="view view-fifth">
  273. <img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" />
  274. <div class="mask">
  275. <h2>Title</h2>
  276. <p>Your Text</p>
  277. <a href="#?w=500" rel="05" class="poplight info">Read More</a>
  278. </div>
  279. </div>
  280.  
  281.  
  282. <div class="view view-fifth">
  283. <img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" />
  284. <div class="mask">
  285. <h2>Title</h2>
  286. <p>Your Text</p>
  287. <a href="#?w=500" rel="06" class="poplight info">Read More</a>
  288. </div>
  289. </div>
  290.  
  291.  
  292. <div class="view view-fifth">
  293. <img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" />
  294. <div class="mask">
  295. <h2>Title</h2>
  296. <p>Your Text</p>
  297. <a href="#?w=500" rel="07" class="poplight info">Read More</a>
  298. </div>
  299. </div>
  300.  
  301.  
  302. <div class="view view-fifth">
  303. <img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" />
  304. <div class="mask">
  305. <h2>Title</h2>
  306. <p>Your Text</p>
  307. <a href="#?w=500" rel="08" class="poplight info">Read More</a>
  308. </div>
  309. </div>
  310.  
  311.  
  312. <div class="view view-fifth">
  313. <img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" />
  314. <div class="mask">
  315. <h2>Title</h2>
  316. <p>Your Text</p>
  317. <a href="#?w=500" rel="09" class="poplight info">Read More</a>
  318. </div>
  319. </div>
  320.  
  321.  
  322. <div class="view view-fifth">
  323. <img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" />
  324. <div class="mask">
  325. <h2>Title</h2>
  326. <p>Your Text</p>
  327. <a href="#?w=500" rel="10" class="poplight info">Read More</a>
  328. </div>
  329. </div>
  330.  
  331. <!--Copy and paste code below for new section--> <!--Change rel number below to following number-->
  332. <div class="view view-fifth">
  333. <img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" />
  334. <div class="mask">
  335. <h2>Title</h2>
  336. <p>Your Text</p>
  337. <a href="#?w=500" rel="11" class="poplight info">Read More</a>
  338. </div>
  339. </div>
  340. <!--End copying for new section-->
  341. <!--Paste below-->
  342.  
  343.  
  344.  
  345. </body>
  346. <div id="02" class="popup_block">
  347. <div style="font-size:20px; text-align:center;">Delicate</div><br>
  348. <div style="float:left; padding:5px;"><img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" width="500"></div>
  349. <!--PLACE INFO HERE-->
  350. </div></div>
  351.  
  352. <div id="03" class="popup_block">
  353. <div style="font-size:20px; text-align:center;">TITLE</div><br>
  354. <div style="float:left; padding:5px;"><img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" width="300"></div>
  355. <!--PLACE INFO HERE-->
  356. </div></div>
  357.  
  358. <div id="04" class="popup_block">
  359. <div style="font-size:20px; text-align:center;">TITLE</div><br>
  360. <div style="float:left; padding:5px;"><img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" width="300"></div>
  361. <!--PLACE INFO HERE-->
  362. </div></div>
  363.  
  364. <div id="05" class="popup_block">
  365. <div style="font-size:20px; text-align:center;">TITLE</div><br>
  366. <div style="float:left; padding:5px;"><img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" width="300"></div>
  367. <!--PLACE INFO HERE-->
  368. </div></div>
  369.  
  370. <div id="06" class="popup_block">
  371. <div style="font-size:20px; text-align:center;">TITLE</div><br>
  372. <div style="float:left; padding:5px;"><img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" width="300"></div>
  373. <!--PLACE INFO HERE-->
  374. </div></div>
  375.  
  376. <div id="07" class="popup_block">
  377. <div style="font-size:20px; text-align:center;">TITLE</div><br>
  378. <div style="float:left; padding:5px;"><img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" width="300"></div>
  379. <!--PLACE INFO HERE-->
  380. </div></div>
  381.  
  382. <div id="08" class="popup_block">
  383. <div style="font-size:20px; text-align:center;">TITLE</div><br>
  384. <div style="float:left; padding:5px;"><img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" width="300"></div>
  385. <!--PLACE INFO HERE-->
  386. </div></div>
  387.  
  388. <div id="09" class="popup_block">
  389. <div style="font-size:20px; text-align:center;">TITLE</div><br>
  390. <div style="float:left; padding:5px;"><img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" width="300"></div>
  391. <!--PLACE INFO HERE-->
  392. </div></div>
  393.  
  394. <div id="10" class="popup_block">
  395. <div style="font-size:20px; text-align:center;">TITLE</div><br>
  396. <div style="float:left; padding:5px;"><img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" width="300"></div>
  397. <!--PLACE INFO HERE-->
  398. </div></div>
  399.  
  400.  
  401. <!--Copy and paste code below for new section--> <!--Change id number below to following number-->
  402. <div id="11" class="popup_block">
  403. <div style="font-size:20px; text-align:center;">TITLEE</div><br>
  404. <div style="float:left; padding:5px;"><img src="<!--DELETE AND PLACE IMAGE LINK HERE-->" width="300"></div>
  405. <!--PLACE INFO HERE-->
  406. </div></div>
  407. <!--End copying for new popup section-->
  408. <!--Paste below-->
  409.  
  410.  
  411. </div><!--END CONTAINER--></center>
  412. </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!