API tools faq
paste
Advertisement
foundcas

Page 02 (Blogroll): Blogscape

foundcas
Apr 12th, 2015
697
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.89 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <title>Blogroll</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6.  
  7. <!-- TOOLTIP SCRIPTS -->
  8. <script type="text/javascript"
  9. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  10. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  11. <script>
  12. (function($){
  13. $(document).ready(function(){
  14. $("[title]").style_my_tooltips({
  15. tip_follows_cursor:true,
  16. tip_delay_time:200,
  17. tip_fade_speed:300
  18. }
  19. );
  20. });
  21. })(jQuery);
  22. </script>
  23.  
  24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  25. <script>
  26. $(document).ready(function(){
  27. $('.neutron').click(function(){
  28. $('.quark').toggleClass('particle');
  29. });
  30. });
  31. </script>
  32.  
  33. <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  34.  
  35. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  36.  
  37. <style type="text/css">
  38.  
  39. /** TOOLTIPS **/
  40. #s-m-t-tooltip{
  41. max-width:300px;
  42. margin:15px;
  43. padding:3px;
  44. background:#999; /** tooltip background color **/
  45. color:#fff; /** toolip color **/
  46. z-index:999999;
  47. font-size:11px;
  48. text-transform:lowercase;
  49. }
  50.  
  51. /** BODY **/
  52. body{
  53. margin:0px;
  54. font-family: 'Open Sans', sans-serif; /*fonts can be fond on google.com/fonts*/
  55. background:#cccccc; /*background color*/
  56. cursor:crosshair;
  57. }
  58.  
  59. ::-webkit-scrollbar{
  60. width:4px;
  61. height:auto;
  62. }
  63.  
  64. ::-webkit-scrollbar-thumb{
  65. width:4px;
  66. height:auto;
  67. background:#475d62; /*scrollbar color*/
  68. }
  69.  
  70. ::selection{
  71. background:#b3eaf7; /*selection background*/
  72. color:#475d62; /*selection color*/
  73. }
  74.  
  75. /** LINKS **/
  76. a{
  77. text-decoration:none;
  78. -webkit-transition-duration:.6s;
  79. -moz-transition-duration:.6s;
  80. -o-transition-duration:.6s;
  81. -ms-transition-duration:.6s;
  82. }
  83.  
  84. a:hover{
  85. -webkit-transition-duration:.6s;
  86. -moz-transition-duration:.6s;
  87. -o-transition-duration:.6s;
  88. -ms-transition-duration:.6s;
  89. }
  90.  
  91.  
  92. /** CONTAINER **/
  93. .atom {
  94. position:absolute;
  95. width:730px;
  96. height:500px;
  97. margin-left:50%;
  98. left:-365px;
  99. top:50%;
  100. margin-top:-250px;
  101. overflow-y:auto;
  102. background:url('https://unsplash.imgix.net/photo-1426703377232-53c5e63dd904?fit=crop&fm=jpg&h=1600&q=75&w=1050');
  103. }
  104.  
  105. /** ICONS **/
  106. .atom img{
  107. margin:27px;
  108. border:1px solid #444;
  109. border-radius:100%;
  110. width:50px;
  111. padding:5px;
  112. -webkit-transition-duration:.6s;
  113. -moz-transition-duration:.6s;
  114. -o-transition-duration:.6s;
  115. -ms-transition-duration:.6s;
  116. }
  117.  
  118. .atom img:hover{
  119. border-radius:0%;
  120. -ms-transform: scale(1.5,1.5);
  121. -webkit-transform: scale(1.5,1.5);
  122. transform: scale(1.5,1.5);
  123. box-shadow:inset 100px 0px 0px #999;
  124. -webkit-transition-duration:.6s;
  125. -moz-transition-duration:.6s;
  126. -o-transition-duration:.6s;
  127. -ms-transition-duration:.6s;
  128. }
  129.  
  130. .atom img:hover .atom img{
  131. background:blue;
  132. }
  133.  
  134. .quark{
  135. position:absolute;
  136. margin-left:50%;
  137. left:-365px;
  138. top:50%;
  139. margin-top:-250px;
  140. width:730px;
  141. height:500px;
  142. background:url('https://unsplash.imgix.net/photo-1426703377232-53c5e63dd904?fit=crop&fm=jpg&h=1600&q=75&w=1050');
  143. -ms-transform:scale(0,0);
  144. -webkit-transform:scale(0,0);
  145. transform:scale(0,0);
  146. z-index:9;
  147. -webkit-transition-duration:.6s;
  148. -moz-transition-duration:.6s;
  149. -o-transition-duration:.6s;
  150. -ms-transition-duration:.6s;
  151. }
  152.  
  153. .particle{
  154. -ms-transform:scale(1,1);
  155. -webkit-transform:scale(1,1);
  156. transform:scale(1,1);
  157. -webkit-transition-duration:.6s;
  158. -moz-transition-duration:.6s;
  159. -o-transition-duration:.6s;
  160. -ms-transition-duration:.6s;
  161. }
  162.  
  163. .panel{
  164. background:rgba(255,255,255,.5);
  165. width:730px;
  166. height:500px;
  167. }
  168.  
  169. .p{
  170. float:left;
  171. width:365px;
  172. height:500px;
  173. background:rgba(119, 136, 136, 0.4);
  174. }
  175.  
  176. .p a{
  177. display:block;
  178. color:#444;
  179. padding:5px;
  180. margin:20px;
  181. text-transform:uppercase;
  182. }
  183.  
  184. .pr{
  185. display:table;
  186. margin-left:auto;
  187. margin-right:auto;
  188. text-align:center;
  189. width:365px;
  190. height:500px;
  191. }
  192.  
  193. .pr p{
  194. display: table-cell;
  195. text-align: center;
  196. vertical-align: middle;
  197. padding:50px;
  198. }
  199.  
  200. .g{
  201. float:right;
  202. width:365px;
  203. height:500px;
  204. background:rgba(153, 136, 119, 0.4);
  205. }
  206.  
  207. .gr{
  208. display:table;
  209. margin-left:auto;
  210. margin-right:auto;
  211. text-align:center;
  212. width:365px;
  213. height:500px;
  214. }
  215.  
  216. .gr p{
  217. display: table-cell;
  218. text-align: center;
  219. vertical-align: middle;
  220. font-style:italic;
  221. padding:50px;
  222. }
  223.  
  224. .fa-quote-left, .fa-quote-right{
  225. padding:3px;
  226. }
  227.  
  228. /** TITLE **/
  229. .neutron{
  230. position:absolute;
  231. top:50%;
  232. margin-top:-315px;
  233. margin-left:50%;
  234. left:-365px;
  235. text-align:center;
  236. width:730px;
  237. font-size:40px;
  238. color:#000; /** title color **/
  239. font-weight:bold;
  240. cursor:help;
  241. overflow-y:hidden;
  242. z-index:9;
  243. }
  244.  
  245. /** CREDIT **/
  246. .proton a{
  247. font-size:7px;
  248. bottom:7px;
  249. right:10px;
  250. position:fixed;
  251. letter-spacing:1px;
  252. font-weight:bold;
  253. text-transform:uppercase;
  254. color:#000;
  255. text-decoration:none;
  256. }
  257.  
  258. .proton a:hover{
  259. color:#eee;
  260. }
  261.  
  262.  
  263. </style>
  264. </head>
  265. <body>
  266.  
  267. <div class="neutron">blogscape</div>
  268.  
  269. <div class="quark">
  270. <div class="panel">
  271. <div class="p">
  272. <div class="pr">
  273. <p>
  274. <a href="/">index</a>
  275. <a href="tumblr.com/dashboard">dash</a>
  276. <a href="/ask">message</a>
  277. <a href="url here">link</a>
  278. <a href="url here">link</a>
  279. </p>
  280. </div>
  281. </div>
  282. <div class="g">
  283. <div class="gr">
  284. <p><i class="fa fa-quote-left"></i>
  285. <!--you can put whatever you want here-->
  286. My mind rebels at stagnation. Give me problems, give me work, give me the most abstruse cryptogram, or the most intricate analysis, and I am in my own proper atmosphere. But I abhor the dull routine of existence. I crave for mental exaltation.
  287. <i class="fa fa-quote-right"></i>
  288.  
  289.  
  290. <br>
  291.  
  292. <b>- Sir Arthur Conan Doyle</b>
  293.  
  294. </p>
  295. </div>
  296. </div>
  297. </div>
  298. </div>
  299.  
  300. <div class="atom">
  301. {block:Following}
  302. {block:Followed}
  303. <a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-64}">
  304. {/block:Followed}
  305. {/block:Following}
  306. </div>
  307.  
  308. <div class="proton"><a href="http://capecoding.tumblr.com">capecode</a></div>
  309.  
  310. </body>
  311. </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!