API tools faq
paste
Advertisement
ciralism

Allow Me to Introduce

ciralism
Jun 17th, 2015
7,421
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.57 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>{Title}</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7.  
  8. <!---
  9.  
  10. ALLOW ME TO INTRODUCE...
  11. A Blogroll Page by CIRALISM
  12.  
  13. //use respectfully, don't be a douche canoe
  14. //ask nitpicky questions off anon
  15. //enjoy!
  16.  
  17. --->
  18. <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
  19.  
  20. <style type="text/css">
  21. body {
  22. background-color:#f1f1f1;
  23. font-family:Lato;
  24. }
  25.  
  26. section {
  27. width:550px;
  28. margin:auto;
  29. margin-top:40px;
  30. }
  31.  
  32. h1 {
  33. text-align:center;
  34. padding:20px 0px;
  35. font-size:12px;
  36. font-weight:600;
  37. letter-spacing:3px;
  38. background-color:rgba(0,0,0,.9);
  39. color:#fff;
  40. text-transform:uppercase;
  41. -webkit-animation:fadein 1s 1;
  42. -moz-animation:fadein 1s 1;
  43. -o-animation:fadein 1s 1;
  44. animation:fadein 1s 1;
  45. }
  46.  
  47.  
  48. article {
  49. background-color:#fff;
  50. border-bottom:1px solid #ddd;
  51. padding:15px;
  52. margin-top:15px;
  53. -webkit-animation:fadein 2s 1;
  54. -moz-animation:fadein 2s 1;
  55. -o-animation:fadein 2s 1;
  56. animation:fadein 2s 1;
  57. }
  58.  
  59. .blog {
  60. width:164px;
  61. border:1px solid #eee;
  62. line-height:10px;
  63. font-size:10px;
  64. display:inline-block;
  65. margin-top:5px;
  66. margin-left:3px;
  67. }
  68.  
  69. .portrait {
  70. width:30px;height:30px;padding:5px;
  71. background-color:#f1f1f1;
  72. }
  73.  
  74. .info {
  75. width:105px;
  76. margin-right:10px;
  77. margin-top:10px;
  78. float:right;
  79. text-align:left!important;
  80. overflow:hidden;
  81. }
  82.  
  83. .url {
  84. font-weight:600;
  85. padding-top:10px;
  86. font-size:7px;
  87. color:#000!important;
  88. text-transform:uppercase;
  89. text-decoration:none;
  90. letter-spacing:1px;
  91. }
  92.  
  93. .sub {
  94. text-transform:uppercase;
  95. letter-spacing:1px;
  96. font-weight:300;
  97. font-size:7px;
  98. font-style:italic;
  99. }
  100.  
  101. @-webkit-keyframes fadein {
  102. 0% { opacity: 0; }
  103. 50%; {opacity: .5; }
  104. 100% { opacity: 1; }
  105. }
  106. @-moz-keyframes fadein {
  107. 0% { opacity: 0; }
  108. 50%; {opacity: .5; }
  109. 100% { opacity: 1; }
  110. }
  111. @-o-keyframes fadein {
  112. 0% { opacity: 0; }
  113. 50%; {opacity: .5; }
  114. 100% { opacity: 1; }
  115. }
  116. @keyframes fadein {
  117. 0% { opacity: 0; }
  118. 50%; {opacity: .5; }
  119. 100% { opacity: 1; }
  120. }
  121. .links {padding-top:7px;text-align:center;}
  122. .links a {
  123. color:black;
  124. text-transform:uppercase;
  125. text-decoration:none;
  126. letter-spacing:1px;
  127. font-weight:400;
  128. padding:5px 10px!important;
  129. font-family:Lato;
  130. font-size:7px;
  131. border-bottom:2px solid transparent;
  132. -webkit-transition-duration:1s;
  133. transition-duration:1s;
  134. -o-transition-duration:1s;
  135. -ms-transition-duration:1s;
  136. -moz-transition-duration:1s;
  137. }
  138.  
  139. .links a:hover {
  140. border-bottom-color:#eee;
  141. }
  142.  
  143. #credit {
  144. position:fixed;
  145. width:80px;
  146. text-align:left;
  147. left:5px;
  148. bottom:1px;
  149. padding:5px;
  150. font-family:Lato, Sans-Serif;
  151. font-weight:bold;
  152. font-size:7px;
  153. text-transform:uppercase;
  154. letter-spacing:1px
  155. }
  156.  
  157. #credit a {color:#555;font-weight:bold;}
  158. </style>
  159. </head>
  160. <body>
  161.  
  162. <section>
  163. <h1>Allow me to introduce...<br>
  164. </h1>
  165. <article class="links">
  166. <a href="/">home</a>
  167. <a href="/ask">ask</a>
  168. <a href="/archive">archive</a>
  169. <a href="http://ciralism.tumblr.com">credit</a>
  170. </article>
  171. <article>
  172. {block:Following}
  173. {block:Followed}
  174. <div class="blog">
  175. <img src="{FollowedPortraitURL-30}" class="portrait">
  176. <div class="info">
  177. <a href="{FollowedURL}" class="url">{FollowedName}</a>
  178. <div class="sub">{FollowedTitle}</div>
  179. </div>
  180. </div>
  181. {/block:Followed}
  182. {/block:Following}
  183. </article>
  184. </section>
  185. <div id="credit"><a href="http://ciralism.tumblr.com/">ciralism</a></div>
  186.  
  187. </body></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!