Advertisement
briqhter

theme pack 1 about me

Nov 28th, 2014
493
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.45 KB | None | 0 0
  1. <!--
  2. theme pack #1 - about me by Sabina (briqhter/cutiephil)
  3. please do not remove the credit
  4. -->
  5.  
  6. <!DOCTYPE html>
  7. <html lang="en">
  8.  
  9. <head>
  10.  
  11. <style type="text/css">
  12.  
  13. /* fonts */
  14. @font-face { font-family:"bb"; src: url('https://dl.dropboxusercontent.com/s/mw5tqnd88mxflxw/Saniretro.ttf');}
  15.  
  16. /* basics1 */
  17. body {
  18. font-family:calibri;
  19. font-size:11px;
  20. line-height:12px;
  21. color:#888;
  22. background-color:#ffffff;
  23. background-image:url(http://static.tumblr.com/bgzjy3u/0Zznfopt2/tumblr_inline_mx3lrqyox41r8f9nah.gif); /* replace this with your background image */
  24. background-attachment:fixed;
  25. background-repeat:repeat;
  26. }
  27.  
  28. a:link, a:active, a:visited{
  29. color:#888;
  30. text-decoration:none;
  31. }
  32.  
  33. a:hover {
  34. color: #888;
  35. }
  36.  
  37. img {
  38. border:0;
  39. max-width:100%;
  40. }
  41.  
  42. ul {
  43. list-style: square;
  44. margin-left:0px;
  45. margin-top:2px;
  46. padding-top:5px;
  47. font-size:10px;
  48. line-height:12px;
  49. font-family:calibri;
  50. letter-spacing:1px;
  51. border-top:1px solid #ddd;
  52. }
  53.  
  54. li {
  55. margin-left:-10px;
  56. }
  57.  
  58. .title {
  59. margin-top:10px;
  60. font-size:11px;
  61. line-height:12px;
  62. font-family:calibri;
  63. letter-spacing:1px;
  64. text-transform:uppercase;
  65. font-style:italic;
  66. font-weight:bold;
  67. text-align:center;
  68. }
  69.  
  70. #wrap{
  71. margin:auto;
  72. position: absolute;
  73. overflow:hidden;
  74. width:880px;
  75. height:600px;
  76. top: 0; left: 0; bottom: 0; right: 0;
  77. }
  78.  
  79. ::-webkit-scrollbar {width: 2px; height: 4px; background: #f3e2d7; }
  80. ::-webkit-scrollbar-thumb { background-color: #f0b484; -webkit-border-radius: 1ex; }
  81.  
  82. /* basics2 */
  83.  
  84. #content {
  85. z-index:10;
  86. position:fixed;
  87. overflow:hidden;
  88. margin-top:0px;
  89. margin-left:420px;
  90. width:440px;
  91. height:600px;
  92. background-color:#ffffff;
  93. background-image:url(http://static.tumblr.com/bgzjy3u/0Zznfopt2/tumblr_inline_mx3lrqyox41r8f9nah.gif); /* replace this with your background image */
  94. background-attachment:fixed;
  95. background-repeat:repeat;
  96. }
  97.  
  98. #sidebar {
  99. position:fixed;
  100. margin-left:0px;
  101. margin-top:0px;
  102. width:440px;
  103. height:600px;
  104. background:#fff;
  105. }
  106.  
  107. #sidebar img{
  108. height:600px;
  109. width:440px;
  110. overflow:hidden;
  111. }
  112.  
  113. #backbar {
  114. z-index:1;
  115. position:fixed;
  116. margin-left:440px;
  117. margin-top:0px;
  118. width:440px;
  119. height:600px;
  120. background:#fff;
  121. }
  122.  
  123. #backbar img{
  124. height:600px;
  125. width:440px;
  126. overflow:hidden;
  127. }
  128.  
  129. #maintitle{
  130. z-index:3;
  131. position:fixed;
  132. margin-top:10px;
  133. margin-left:12px;
  134. width:400px;
  135. color:#7b7b7b;
  136. font-family:bb;
  137. font-size:40px;
  138. line-height:30px;
  139. text-transform:uppercase;
  140. text-align:right;
  141. }
  142.  
  143. #maintitleshadow{
  144. z-index:2;
  145. position:fixed;
  146. margin-top:8px;
  147. margin-left:15px;
  148. width:400px;
  149. color:#c9c9c9;
  150. font-family:bb;
  151. font-size:40px;
  152. line-height:30px;
  153. text-transform:uppercase;
  154. text-align:right;
  155. }
  156.  
  157. #box1 {
  158. z-index:4;
  159. position:fixed;
  160. margin-top:35px;
  161. margin-left:0px;
  162. width:410px;
  163. height:auto;
  164. padding:10px;
  165. }
  166.  
  167. #selca {
  168. position:fixed;
  169. margin-top:10px;
  170. margin-left:315px;
  171. background:#fff;
  172. padding:8px;
  173. border:1px solid #ddd;
  174. }
  175.  
  176. #selca img {
  177. width:80px;
  178. height:100px;
  179. }
  180.  
  181. #profile1 {
  182. position:fixed;
  183. margin-top:10px;
  184. margin-left:30px;
  185. width:270px;
  186. height:100px;
  187. padding:0px;
  188. color:#888;
  189. font-size:11px;
  190. line-height:16px;
  191. text-align:right;
  192. font-family:consolas;
  193. text-transform:uppercase;
  194. letter-spacing:1px;
  195. }
  196.  
  197. #box2 {
  198. position:fixed;
  199. margin-top:190px;
  200. margin-left:0px;
  201. width:200px;
  202. height:170px;
  203. background:white;
  204. font-size:11px;
  205. line-height:15px;
  206. padding:10px;
  207. border:1px solid #7b7b7b;
  208. border-left:0px;
  209. border-right:0px;
  210. }
  211.  
  212. #desctitle{
  213. z-index:3;
  214. position:fixed;
  215. margin-top:150px;
  216. margin-left:12px;
  217. width:190px;
  218. color:#7b7b7b;
  219. font-family:bb;
  220. font-size:30px;
  221. line-height:25px;
  222. text-transform:uppercase;
  223. text-align:right;
  224. }
  225.  
  226. #desctitleshadow{
  227. z-index:2;
  228. position:fixed;
  229. margin-top:148px;
  230. margin-left:14px;
  231. width:190px;
  232. color:#c9c9c9;
  233. font-family:bb;
  234. font-size:30px;
  235. line-height:25px;
  236. text-transform:uppercase;
  237. text-align:right;
  238. }
  239.  
  240. #box3 {
  241. position:fixed;
  242. margin-top:190px;
  243. margin-left:220px;
  244. width:199px;
  245. height:272px;
  246. background:white;
  247. font-size:11px;
  248. line-height:15px;
  249. padding:10px;
  250. padding-top:40px;
  251. border:1px solid #7b7b7b;
  252. border-right:0px;
  253. }
  254.  
  255. #likestitle{
  256. z-index:3;
  257. position:fixed;
  258. margin-top:-30px;
  259. margin-left:0px;
  260. width:190px;
  261. color:#7b7b7b;
  262. font-family:bb;
  263. font-size:30px;
  264. line-height:25px;
  265. text-transform:uppercase;
  266. text-align:left;
  267. }
  268.  
  269. #likestitleshadow{
  270. z-index:2;
  271. position:fixed;
  272. margin-top:-32px;
  273. margin-left:2px;
  274. width:190px;
  275. color:#c9c9c9;
  276. font-family:bb;
  277. font-size:30px;
  278. line-height:25px;
  279. text-transform:uppercase;
  280. text-align:left;
  281. }
  282.  
  283. #box4 {
  284. position:fixed;
  285. margin-top:382px;
  286. margin-left:0px;
  287. width:200px;
  288. height:111px;
  289. background:white;
  290. font-size:11px;
  291. line-height:15px;
  292. padding:10px;
  293. border-bottom:1px solid #7b7b7b;
  294. }
  295.  
  296. #box4 img{
  297. width:200px;
  298. height:111px;
  299. }
  300.  
  301. #btitle {
  302. z-index:3;
  303. position:fixed;
  304. margin-top:540px;
  305. margin-left:12px;
  306. width:440px;
  307. height:100px;
  308. color:#7b7b7b;
  309. font-family:bb;
  310. font-size:80px;
  311. line-height:60px;
  312. text-transform:uppercase;
  313. }
  314.  
  315. #btitleshadow{
  316. z-index:2;
  317. position:fixed;
  318. margin-top:537px;
  319. margin-left:16px;
  320. width:440px;
  321. height:100px;
  322. color:#c9c9c9;
  323. font-family:bb;
  324. font-size:80px;
  325. line-height:60px;
  326. text-transform:uppercase;
  327. }
  328.  
  329. #credit {
  330. z-index: 4783;
  331. position:fixed;
  332. bottom:10px;
  333. right:10px;
  334. background:white;
  335. border: 1px solid #eee;
  336. padding: 3px;
  337. font-family: times;
  338. font-size: 10px;
  339. line-height: 15px;
  340. font-style:italic;
  341. transition: all 0.6s ease-out;
  342. -o-transition-transition: all 0.4s ease-out;
  343. -webkit-transition: all 0.4s ease-out;
  344. -moz-transition: all 0.4s ease-out;
  345. }
  346.  
  347. #credit a{
  348. color:#bbb;
  349. }
  350.  
  351. #credit:hover{
  352. opacity: 2;
  353. transition: all 0.6s ease-out;
  354. -o-transition-transition: all 0.4s ease-out;
  355. -webkit-transition: all 0.4s ease-out;
  356. -moz-transition: all 0.4s ease-out;
  357. }
  358.  
  359. {CustomCSS}
  360.  
  361. </style>
  362.  
  363. <title>About Me</title>
  364. <link rel="shortcut icon" href="{Favicon}" />
  365.  
  366. </head>
  367.  
  368. <body>
  369.  
  370. <div id="credit"><a href="http://cutiephil.tumblr.com">CP</a></div>
  371.  
  372. <div id="wrap">
  373.  
  374. <div id="sidebar">
  375. <img src="http://static.tumblr.com/sdsy8hc/qICnfqo1i/picmonkey_image.jpg"><!--put the url of the image you want here-->
  376. </div>
  377. <div id="backbar">
  378. <img src="http://static.tumblr.com/sdsy8hc/qICnfqo1i/picmonkey_image.jpg"><!--put the url of the image you want here-->
  379. </div><!--sidebar-->
  380.  
  381. <div id="content">
  382.  
  383. <!-----change (//profile) to anything you want as the first title------>
  384. <div id="maintitle">//profile</div>
  385. <div id="maintitleshadow">//profile</div>
  386.  
  387. <div id="box1">
  388.  
  389. <!-----replace the url below with a picture of yourself or whatever------>
  390. <div id="selca"><img src="http://38.media.tumblr.com/e812ecb6c54623ded244a9137daa3b86/tumblr_nfla4dGYt61u3gi2vo1_250.gif"></div>
  391. <div id="profile1">
  392.  
  393. <!-----change the info below to your own------>
  394. <b>name:</b> your name</br>
  395. <b>age:</b> your age</br>
  396. <b>location:</b> your location</br>
  397. <b>dob:</b> your birthday</br>
  398. <b>interests:</b> your interests
  399. </div>
  400. </div>
  401.  
  402. <div id="box2">
  403.  
  404. <!-----change (description) to anything you want as the description title------>
  405. <div id="desctitle">description</div>
  406. <div id="desctitleshadow">description</div>
  407.  
  408. <!-----replace this with a description about yourself or quote you like or whatever------>
  409. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  410.  
  411. </div>
  412.  
  413. <div id="box3">
  414. <div id="likestitle">favourites</div>
  415. <div id="likestitleshadow">favourites</div>
  416.  
  417. <!-----replace this with whatever category------>
  418. <div class="title">category one</div>
  419.  
  420. <!-----add your favourites with the (li) tag------>
  421. <ul>
  422. <li>thing one</li>
  423. <li>thing two</li>
  424. <li>thing three</li>
  425. </ul>
  426.  
  427. <!-----do the same here------>
  428. <div class="title">category two</div>
  429. <ul>
  430. <li>thing one</li>
  431. <li>thing two</li>
  432. <li>thing three</li>
  433. </ul>
  434.  
  435. <!-----and here------>
  436. <div class="title">category three</div>
  437. <ul>
  438. <li>thing one</li>
  439. <li>thing two</li>
  440. <li>thing three</li>
  441. </ul>
  442.  
  443. </div>
  444.  
  445. <div id="box4">
  446.  
  447. <!-----replace the url below with something you like------>
  448. <img src="http://38.media.tumblr.com/6aba2263dd4266301112f2d3246bf736/tumblr_neo7wlRnd51siefdwo2_250.gif">
  449. </div>
  450.  
  451. <!-----change (about me//) to anything you want as the main title------>
  452. <div id="btitle">about me//</div>
  453. <div id="btitleshadow">about me//</div>
  454.  
  455. </div><!--content-->
  456.  
  457. </div><!--wrap-->
  458. </body>
  459.  
  460. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement