Advertisement
ciralism

Introducing Me

May 5th, 2015
15,622
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.85 KB | None | 0 0
  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 Me</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7.  
  8. <!---------
  9. Introducing Me
  10. about me page by
  11. CIRALISM
  12.  
  13. //typical theme rules apply
  14. //don't touch the credit
  15. //don't be a prick
  16. //I'm available if you need help
  17.  
  18. Customization options are written into the code, just look for grey text and use that to guide you.
  19.  
  20. I churned this out in an hour when I should have been studying for AP's so it may be glitchy. Take it as you will. If you find problems, tell me.
  21. ----------->
  22.  
  23. <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
  24.  
  25.  
  26. <style type="text/css">
  27.  
  28. body {
  29. background-color:#f3f3f3;
  30. color:#000;
  31. font:normal normal 10px 'Lato';
  32. letter-spacing:1px;
  33. }
  34.  
  35. h1 {
  36. text-transform:uppercase;
  37. font-size:11px;
  38. font-weight:600;
  39. letter-spacing:3px;
  40. text-align:center;
  41. padding:17px 0px;
  42. margin-top:10px;
  43. background-color:rgba(0,0,0,.85);
  44. color:#fff;
  45. border-bottom:1px solid #e1e1e1;
  46. }
  47.  
  48. h2 {
  49. text-transform:uppercase;
  50. font-size:9px;
  51. font-weight:900;
  52. letter-spacing:2px;
  53. text-align:center;
  54. }
  55.  
  56. h3 {
  57. text-transform:uppercase;
  58. font-size:10px;
  59. font-weight:700;
  60. letter-spacing:2px;
  61. text-align:right;
  62. }
  63.  
  64. h4 {
  65. text-align:center;
  66. text-transform:uppercase;
  67. font-size:11px;
  68. letter-spacing:2px;
  69. }
  70.  
  71. a, a:visited {
  72. color:#000;
  73. border-bottom:1px solid #b5b8e1;/*ACCENT*/
  74. text-decoration:none;
  75. }
  76.  
  77. .containe {
  78. background-color:transparent;
  79. padding:20px;
  80. padding-bottom:100px;
  81. position:absolute;
  82. left:50%;
  83. margin-left:-320px;
  84. width:600px;
  85. top:50%;
  86. margin-top:-260px;
  87. -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  88. -moz-animation: fadein 2s; /* Firefox < 16 */
  89. -ms-animation: fadein 2s; /* Internet Explorer */
  90. -o-animation: fadein 2s; /* Opera < 12.1 */
  91. animation: fadein 2s;
  92. }
  93.  
  94. @keyframes fadein {
  95. from { opacity: 0; }
  96. to { opacity: 1; }
  97. }
  98.  
  99. /* Firefox < 16 */
  100. @-moz-keyframes fadein {
  101. from { opacity: 0; }
  102. to { opacity: 1; }
  103. }
  104.  
  105. /* Safari, Chrome and Opera > 12.1 */
  106. @-webkit-keyframes fadein {
  107. from { opacity: 0; }
  108. to { opacity: 1; }
  109. }
  110.  
  111. /* Internet Explorer */
  112. @-ms-keyframes fadein {
  113. from { opacity: 0; }
  114. to { opacity: 1; }
  115. }
  116.  
  117. /* Opera < 12.1 */
  118. @-o-keyframes fadein {
  119. from { opacity: 0; }
  120. to { opacity: 1; }
  121. }
  122.  
  123. .top {
  124. width:600px;
  125. display:inline-block;
  126. }
  127.  
  128. .topleft{
  129. background-color:white;
  130. position:absolute;
  131. padding:10px;
  132. margin-top:10px;
  133. border-bottom:1px solid #e1e1e1;
  134. width:170px;
  135. height:170px;
  136. display:inline-block;
  137. text-align:center;
  138. overflow-y:auto;
  139. overflow-x:hidden;
  140. }
  141.  
  142. .topcenter {
  143. background-color:white;
  144. padding:10px;
  145. margin-top:10px;
  146. border-bottom:1px solid #e1e1e1;
  147. width:170px;
  148. margin-left:205px;
  149. display:inline-block;
  150. position:absolute;
  151. height:170px;
  152. }
  153.  
  154. .topcenter img {
  155. width:150px;
  156. height:150px;
  157. padding:10px;
  158. }
  159.  
  160. .topright {
  161. background-color:white;
  162. padding:10px;
  163. margin-top:10px;
  164. border-bottom:1px solid #e1e1e1;
  165. margin-left:410px;
  166. display:inline-block;
  167. width:170px;
  168. height:170px;
  169. position:absolute;
  170. }
  171.  
  172. .topic {
  173. color:#b5b8e1;/*ACCENT*/
  174. text-transform:uppercase;
  175. font-size:8px;
  176. display:block;
  177. font-weight:700;
  178. line-height:18px;
  179. }
  180.  
  181. .response {
  182. font-weight:300;
  183. font-size:10px;
  184. line-height:18px;
  185. }
  186.  
  187. .q {
  188. display:block;
  189. text-align:center;
  190. font-weight:300;
  191. text-transform:uppercase;
  192. letter-spacing:1px;
  193. line-height:180%;
  194. padding-top:15px;
  195. }
  196.  
  197. .m {
  198. padding:5px;
  199. font-weight:900;
  200. }
  201.  
  202. #tumblr_controls{display:none;}
  203.  
  204. .src {
  205. font-weight:bold;
  206. text-transform:lowercase;
  207. font-style:italic;
  208. text-shadow:1px 1px 1px #b5b8e1;/*ACCENT*/
  209. font-size:11px;
  210. text-align:center;
  211. padding-top:7px;
  212. }
  213.  
  214. .midlinks {
  215. display:block;
  216. background-color:#fff;
  217. margin-top:215px;
  218. border-bottom:1px solid #ddd;
  219. padding:10px;
  220. text-align:center;
  221. }
  222.  
  223. .midlinks a {
  224. display:inline-block;
  225. width:100px;
  226. text-transform:uppercase;
  227. font-size:8px;
  228. border:none;
  229. letter-spacing:2px;
  230. font-weight:300;
  231. }
  232.  
  233. .midlinks a:hover {
  234. font-weight:600;/*Feel free to change the hover effect*/
  235. }
  236.  
  237. .bio {
  238. display:block;
  239. padding:25px;
  240. background-color:#fff;
  241. border-bottom:1px solid #ddd;
  242. margin-top:15px;
  243. font-weight:300;
  244. font-size:11px;
  245. line-height:20px;
  246. }
  247.  
  248. .bio h1 {
  249. text-align:center;
  250. background-color:#fff;
  251. color:#000;
  252. border:none;
  253. padding:10px 0px;
  254. font-weight:bold;
  255. text-transform:uppercase;
  256. font-size:11px;
  257. font-weight:900;
  258. letter-spacing:2px;
  259. }
  260.  
  261. .bio h1:after {
  262. content:"";
  263. position:absolute;
  264. height:3px;
  265. width:30px;
  266. left:50%;
  267. margin-top:20px;
  268. margin-left:-15px;
  269. background-color:#b5b8e1;/*ACCENT*/
  270. }
  271.  
  272. </style>
  273. <script type="text/javascript"
  274. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  275.  
  276. <script type="text/javascript">
  277. $(".containe").addClass("load");​
  278. </script>
  279. </head>
  280. <body>
  281. <div class="containe">
  282. <h1>Meet NAME.</h1><!---Replace NAME with your name or change the title altogether--->
  283. <div class="top"><div class="topleft">
  284. <h2>Basics</h2><!---Title of left box--->
  285. <span class="topic">Name</span> <span class="response">NAME</span>
  286. <span class="topic">Age</span> <span class="response">AGE</span>
  287. <span class="topic">From</span> <span class="response">LOCATION</span>
  288. <span class="topic">STUFF</span> <span class="response">STUFF</span>
  289. <!--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--->
  290. </div>
  291.  
  292.  
  293. <div class="topcenter"><img src="IMG URL HERE"></div>
  294. <div class="topright"><span class="q"><span class="m">❝</span>PUT QUOTE HERE<span class="m">❞</span></span><div class="src">PUT SOURCE HERE</div></div><!---replace "put quote here" with your quote and "put source here" with your source--->
  295. </div>
  296.  
  297.  
  298. <div class="midlinks"><!---feel free to change these links but do not touch the credit--->
  299. <a href="/">home</a>
  300. <a href="/ask">ask</a>
  301. <a href="/archive">archive</a>
  302. <a href="http://ciralism.tumblr.com">© Theme</a>
  303. </div>
  304.  
  305.  
  306. <div class="bio">
  307. <h1>Biography</h1>
  308. <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>
  309. <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>
  310. <p>Enjoy the theme! Click <b><a href="">here</a> to get the code.</b></p>
  311.  
  312.  
  313.  
  314. </div>
  315.  
  316. </div>
  317. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement