API tools faq
paste
Advertisement
ciralism

Introducing Me (Narrow)

ciralism
May 5th, 2015
7,641
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.59 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>About The Blogger</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7.  
  8. <!---------
  9. Frequently Asked Questions Page
  10. page by
  11. CIRALISM
  12. ----------->
  13.  
  14. <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
  15.  
  16.  
  17. <style type="text/css">
  18.  
  19. body {
  20. background-color:#f3f3f3;
  21. color:#000;
  22. font:normal normal 10px 'Lato';
  23. letter-spacing:1px;
  24. }
  25.  
  26. h1 {
  27. text-transform:uppercase;
  28. font-size:11px;
  29. font-weight:600;
  30. letter-spacing:3px;
  31. text-align:center;
  32. padding:17px 0px;
  33. margin-top:10px;
  34. background-color:rgba(0,0,0,.85);
  35. color:#fff;
  36. border-bottom:1px solid #e1e1e1;
  37. }
  38.  
  39. h2 {
  40. text-transform:uppercase;
  41. font-size:9px;
  42. font-weight:900;
  43. letter-spacing:2px;
  44. text-align:center;
  45. }
  46.  
  47. h3 {
  48. text-transform:uppercase;
  49. font-size:10px;
  50. font-weight:700;
  51. letter-spacing:2px;
  52. text-align:right;
  53. }
  54.  
  55. h4 {
  56. text-align:center;
  57. text-transform:uppercase;
  58. font-size:11px;
  59. letter-spacing:2px;
  60. }
  61.  
  62. a, a:visited {
  63. color:#000;
  64. border-bottom:1px solid #b5b8e1;/*ACCENT*/
  65. text-decoration:none;
  66. }
  67.  
  68. .containe {
  69. background-color:transparent;
  70. padding:20px;
  71. padding-bottom:100px;
  72. position:absolute;
  73. left:50%;
  74. margin-left:-220px;
  75. width:400px;
  76. top:50%;
  77. margin-top:-260px;
  78. -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  79. -moz-animation: fadein 2s; /* Firefox < 16 */
  80. -ms-animation: fadein 2s; /* Internet Explorer */
  81. -o-animation: fadein 2s; /* Opera < 12.1 */
  82. animation: fadein 2s;
  83. }
  84.  
  85. @keyframes fadein {
  86. from { opacity: 0; }
  87. to { opacity: 1; }
  88. }
  89.  
  90. /* Firefox < 16 */
  91. @-moz-keyframes fadein {
  92. from { opacity: 0; }
  93. to { opacity: 1; }
  94. }
  95.  
  96. /* Safari, Chrome and Opera > 12.1 */
  97. @-webkit-keyframes fadein {
  98. from { opacity: 0; }
  99. to { opacity: 1; }
  100. }
  101.  
  102. /* Internet Explorer */
  103. @-ms-keyframes fadein {
  104. from { opacity: 0; }
  105. to { opacity: 1; }
  106. }
  107.  
  108. /* Opera < 12.1 */
  109. @-o-keyframes fadein {
  110. from { opacity: 0; }
  111. to { opacity: 1; }
  112. }
  113.  
  114. .top {
  115. width:600px;
  116. display:inline-block;
  117. }
  118.  
  119. .topleft{
  120. background-color:white;
  121. position:absolute;
  122. padding:10px;
  123. margin-top:10px;
  124. border-bottom:1px solid #e1e1e1;
  125. width:170px;
  126. height:170px;
  127. display:inline-block;
  128. text-align:center;
  129. overflow-y:auto;
  130. overflow-x:hidden;
  131. }
  132.  
  133. .topright {
  134. background-color:white;
  135. padding:10px;
  136. margin-top:10px;
  137. border-bottom:1px solid #e1e1e1;
  138. width:170px;
  139. margin-left:205px;
  140. display:inline-block;
  141. position:absolute;
  142. height:170px;
  143. }
  144.  
  145. .topright img {
  146. width:150px;
  147. height:150px;
  148. padding:10px;
  149. }
  150.  
  151.  
  152. .topic {
  153. color:#b5b8e1;/*ACCENT*/
  154. text-transform:uppercase;
  155. font-size:8px;
  156. display:block;
  157. font-weight:700;
  158. line-height:18px;
  159. }
  160.  
  161. .response {
  162. font-weight:300;
  163. font-size:10px;
  164. line-height:18px;
  165. }
  166.  
  167. .midlinks {
  168. display:block;
  169. background-color:#fff;
  170. margin-top:215px;
  171. border-bottom:1px solid #ddd;
  172. padding:10px;
  173. text-align:center;
  174. }
  175.  
  176. .midlinks a {
  177. display:inline-block;
  178. width:80px;
  179. text-transform:uppercase;
  180. font-size:8px;
  181. border:none;
  182. letter-spacing:2px;
  183. font-weight:300;
  184. }
  185.  
  186. .midlinks a:hover {
  187. font-weight:600;
  188. }
  189.  
  190. .bio {
  191. display:block;
  192. padding:25px;
  193. background-color:#fff;
  194. border-bottom:1px solid #ddd;
  195. margin-top:15px;
  196. font-weight:300;
  197. font-size:11px;
  198. line-height:20px;
  199. }
  200.  
  201. .bio h1 {
  202. text-align:center;
  203. background-color:#fff;
  204. color:#000;
  205. border:none;
  206. padding:10px 0px;
  207. font-weight:bold;
  208. text-transform:uppercase;
  209. font-size:11px;
  210. font-weight:900;
  211. letter-spacing:2px;
  212. }
  213.  
  214. .bio h1:after {
  215. content:"";
  216. position:absolute;
  217. height:3px;
  218. width:30px;
  219. left:50%;
  220. margin-top:20px;
  221. margin-left:-15px;
  222. background-color:#b5b8e1;/*ACCENT*/
  223. }
  224.  
  225. </style>
  226. <script type="text/javascript"
  227. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  228.  
  229. <script type="text/javascript">
  230. $(".containe").addClass("load");​
  231. </script>
  232. </head>
  233. <body>
  234. <div class="containe">
  235. <h1>Meet NAME.</h1><!---Replace NAME with your name or change the title altogether--->
  236. <div class="top"><div class="topleft">
  237. <h2>Basics</h2><!---Title of left box--->
  238. <span class="topic">Name</span> <span class="response">NAME</span>
  239. <span class="topic">Age</span> <span class="response">AGE</span>
  240. <span class="topic">From</span> <span class="response">LOCATION</span>
  241. <span class="topic">STUFF</span> <span class="response">STUFF</span>
  242. <!--to create more categories, simply do <span class="topic">title</span><span class="reponse">Your input for that category</span> If you create enough categories, the box will start to scroll--->
  243. </div>
  244.  
  245.  
  246. <div class="topright"><img src="http://40.media.tumblr.com/9e469cabd5b1512a33279905b09624e1/tumblr_neliwymGwv1twgbvoo7_250.jpg"></div>
  247.  
  248. </div>
  249.  
  250.  
  251. <div class="midlinks"><!---feel free to change these links but do not touch the credit--->
  252. <a href="/">home</a>
  253. <a href="/ask">ask</a>
  254. <a href="/archive">archive</a>
  255. <a href="http://ciralism.tumblr.com">© Theme</a>
  256. </div>
  257.  
  258.  
  259. <div class="bio">
  260. <h1>Biography</h1>
  261. <p>This is your main biography. The more text you put, the nicer it looks, in my opinion, although it is entirely up to you. Customizing this page is almost impossibly easy. I've written instructions in the code for you. To change the accent color, simply control+F search "accent" and replace the color there with your own accent color.</p>
  262. <p>I highly recommend separating your paragraphs with < p > tags. If you do not, this will all be one gigantic block of text. You can, of course, put in <b>bold text</b>, <i>italic text</i>, <a href="#">links</a>, and much more.</p>
  263. <p>Enjoy the theme! Click <b><a href="">here</a> to get the code.</b></p>
  264.  
  265.  
  266.  
  267. </div>
  268.  
  269. </div>
  270. </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!