API tools faq
paste
Advertisement
nofacesface

About Page (1)

nofacesface
Mar 30th, 2014
4,609
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.94 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--PAGE BY NO-FACES-FACE
  5. steal and I'll find you and punch you in the throat  (◡‿◡✿)
  6. -->
  7.  
  8. <head>
  9.  
  10. <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  11.  
  12. <style>
  13. div#qTip {
  14. padding: 4px;
  15. display: none;
  16. text-align: center;
  17. position: absolute;
  18. font-family: consolas;
  19. font-size:8px;
  20. line-height:10px;
  21. z-index: 1000;
  22. background-color: rgba(255,255,255,0.8);
  23. color: {color:Text};
  24. text-transform:uppercase;
  25. letter-spacing: 3px;}
  26. </style>
  27.  
  28.  <title>ABOUT ME</title>
  29. <link rel="shortcut icon" href="{Favicon}">
  30.  
  31. <style type="text/css">
  32. @import url(http://weloveiconfonts.com/api/?family=fontawesome);
  33. /* fontawesome */
  34. [class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;}
  35.  
  36.  #tumblr_controls { position: fixed !important;}
  37.  
  38. iframe#tumblr_controls { white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); opacity:0.2; right:3px !important; position: fixed !important;-webkit-transition: opacity 0.7s linear;opacity: 0.2;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  39.  
  40. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.2s linear;opacity: 1;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
  41.  
  42. /* GENERAL */
  43.  
  44. /* SCROLLBAR */
  45. ::-webkit-scrollbar {width: 3px;height:5px; background: none;}
  46. ::-webkit-scrollbar-thumb {background: #41122F;}
  47. /* SCROLLBAR */
  48.  
  49. body {
  50. cursor: crosshair;
  51. background-color: #fff; /* BACKGROUND COLOR */
  52. background-image: url(http://media.tumblr.com/tumblr_mex6qbS3q71rbvno1.png); /* BACKGROUND IMAGE */
  53. margin: 0;
  54. word-wrap: break-word;
  55. background-attachment: fixed;}
  56.  
  57. a:link, a:active, a:visited {
  58. color: #313131; /* GENERAL LINK COLOR */
  59. -webkit-transition: all 0.7s ease;
  60. transition: all 0.7s ease;
  61. -moz-transition: all 0.7s ease;
  62. -o-transition: all 0.7s ease;}
  63.  
  64. a:hover{color: #555; /* GENERAL LINK COLOR HOVER */}
  65.  
  66. #center {
  67. position:relative;
  68. width:500px;
  69. height: 200px;
  70. margin-top: 231px; /* INCREASE TO MOVE ENTIRE ABOUT BAR DOWN/DECREASE TO MOVE UP */
  71. margin-left: auto;
  72. margin-right: auto;}
  73.  
  74. /* DON'T TOUCH */
  75. #content {
  76. position: fixed;
  77. width:560px;
  78. height: 215px;
  79. background: none;
  80. margin-left: 0px;
  81. margin-top: 0px;
  82. border-radius: 5px;
  83. overflow: hidden;}
  84. /* DON'T TOUCH */
  85.  
  86. /* CIRCLE SIDEBAR */
  87.  
  88. .picbg {
  89. z-index:999;
  90. position: fixed;
  91. width: 145px;
  92. height: 145px;
  93. background: white;
  94. margin-left: 35px;
  95. margin-top: 35px;
  96. border-radius: 500px;
  97.  background-image: url(http://media.tumblr.com/tumblr_mex6qbS3q71rbvno1.png); /* MAKE THIS BACKGROUND THE SAME AS YOUR GENERAL BACKGROUND */
  98. overflow: hidden;}
  99.  
  100. .picall {
  101. position: absolute;
  102. width: 125px;
  103. height: 125px;
  104. background: rgba(255,255,255,0.6); /* BACKGROUND COLOR OF CIRCLE (CHANGE THE "255" TO "0" MAKE IT A TRANSPARENT BLACK OR REPLACE WITH A HEX CODE FOR A SOLID COLOR) */
  105. margin-left: 10px;
  106. margin-top: 10px;
  107. border-radius: 500px;
  108. overflow: hidden;}
  109.  
  110. .in1, .in2, .in3, .in4 {
  111. cursor: help;
  112. position: absolute;
  113. width: 41px;
  114. height: 41px;
  115. border: 3px solid #A44058; /* CIRCLE LINK ONE BORDER COLOR */
  116. background: none;
  117. margin-left: 12px;
  118. margin-top: 12px;
  119. border-top-left-radius: 100px;
  120. border-top-right-radius: 5px;
  121. border-bottom-left-radius: 5px;
  122. border-bottom-right-radius: 5px;
  123. -webkit-transition: opacity .8s linear;
  124. -webkit-transition: all .8s ease-in-out;
  125. -moz-transition: all .8s ease-in-out;
  126. -o-transition: all .8s ease-in-out;}
  127.  
  128. .in1:hover {
  129. background: #A44058; /* CIRCLE LINK ONE BACKGROUND COLOR (I SUGGEST YOU MAKE IT THE SAME AS ITS BORDER COLOR) */}
  130.  
  131. .in2 {
  132. border: 3px solid #C73653; /* CIRCLE LINK TWO BORDER COLOR */
  133. margin-left: 65px;
  134. margin-top: 12px;
  135. border-top-left-radius: 5px;
  136. border-top-right-radius: 100px;
  137. border-bottom-left-radius: 5px;
  138. border-bottom-right-radius: 5px;}
  139.  
  140. .in2:hover {
  141. background: #C73653; /* CIRCLE LINK TWO BACKGROUND COLOR (I SUGGEST YOU MAKE IT THE SAME AS ITS BORDER COLOR) */ }
  142.  
  143. .in3 {
  144. border: 3px solid #F6716D; /* CIRCLE LINK THREE BORDER COLOR */
  145. margin-left: 12px;
  146. margin-top: 66px;
  147. border-top-left-radius: 5px;
  148. border-top-right-radius: 5px;
  149. border-bottom-left-radius: 100px;
  150. border-bottom-right-radius: 5px;}
  151.  
  152. .in3:hover {
  153. background: #F6716D; /* CIRCLE LINK THREE BACKGROUND COLOR (I SUGGEST YOU MAKE IT THE SAME AS ITS BORDER COLOR) */}
  154.  
  155. .in4 {
  156. border: 3px solid #FA9C94; /* CIRCLE LINK FOUR BORDER COLOR) */
  157. margin-left: 65px;
  158. margin-top: 66px;
  159. border-top-left-radius: 5px;
  160. border-top-right-radius: 5px;
  161. border-bottom-left-radius: 5px;
  162. border-bottom-right-radius: 100px;}
  163.  
  164. .in4:hover {
  165. background: #FA9C94; /* CIRCLE LINK FOUR BACKGROUND COLOR (I SUGGEST YOU MAKE IT THE SAME AS ITS BORDER COLOR) */}
  166.  
  167. .infont1, .infont2, .infont3, .infont4 {
  168. text-align: center;
  169. color: #A44058; /* CIRCLE LINK ONE FONT COLOR (I SUGGEST YOU MAKE IT THE SAME AS THE CIRCLE LINK'S BORDER COLOR) */
  170. font-family: consolas;
  171. font-style: none;
  172. font-size: 15px;
  173. letter-spacing: 5px;
  174. text-transform: uppercase;
  175. text-align: right;
  176. margin-top: -2px;
  177. margin-left: 0px;
  178. padding: 17px;
  179. -webkit-transition: opacity .8s linear;
  180. -webkit-transition: all .8s ease-in-out;
  181. -moz-transition: all .8s ease-in-out;
  182. -o-transition: all .8s ease-in-out;}
  183.  
  184. .in1:hover .infont1 {
  185. color: #fefefe; /* CIRCLE LINK ONE FONT COLOR HOVER (SUGGESTION: TRY TO MATCH IT WITH THE BG COLOR) */}
  186.  
  187. .infont2 {
  188. color: #C73653; /* CIRCLE LINK TWO FONT COLOR (I SUGGEST YOU MAKE IT THE SAME AS THE CIRCLE LINK'S BORDER COLOR) */  
  189. margin-top: 5px;
  190. margin-left: 0px;
  191. padding: 10px;    
  192. }
  193.  
  194. .in2:hover .infont2 {
  195. color: #fefefe; /* CIRCLE LINK TWO FONT COLOR HOVER (SUGGESTION: TRY TO MATCH IT WITH THE BG COLOR) */}
  196.  
  197. .infont3 {
  198. color: #F6716D; /* CIRCLE LINK THREE FONT COLOR (I SUGGEST YOU MAKE IT THE SAME AS THE CIRCLE LINK'S BORDER COLOR) */    
  199. margin-top: 0px;
  200. margin-left: 6px;
  201. padding: 10px;}
  202.  
  203. .in3:hover .infont3 {
  204. color: #fefefe; /* CIRCLE LINK THREE FONT COLOR HOVER (SUGGESTION: TRY TO MATCH IT WITH THE BG COLOR) */}
  205.  
  206. .infont4 {
  207. color: #FA9C94; /* CIRCLE LINK FOUR FONT COLOR (I SUGGEST YOU MAKE IT THE SAME AS THE CIRCLE LINK'S BORDER COLOR) */  
  208. margin-top: -4px;
  209. margin-left: -10px;
  210. padding: 12px;}
  211.  
  212. .in4:hover .infont4 {
  213. color: #fefefe; /* CIRCLE LINK FOUR FONT COLOR HOVER (SUGGESTION: TRY TO MATCH IT WITH THE BG COLOR) */}
  214.  
  215. .picout {
  216. position: absolute;
  217. width: 125px;
  218. height: 125px;
  219. background: white; /* IMAGE BG COLOR (IF YOU CHOOSE NO IMAGE) */
  220. margin-left: 0px;
  221. margin-top: 0px;
  222. border-radius: 500px;
  223. overflow: hidden;
  224. -webkit-transition: opacity .9s linear;
  225. -webkit-transition: all .9s ease-in-out;
  226. -moz-transition: all .9s ease-in-out;
  227. -o-transition: all .9s ease-in-out;}
  228.  
  229. .picbg:hover .picout {
  230. margin-left: 62.5px;
  231. margin-top: 62.5px;
  232. height: 0px;
  233. width: 0px;
  234. }
  235.  
  236. .pic {
  237. position: absolute;
  238. width: 125px;
  239. height: 125px;
  240. background: none;
  241. margin-left: 0px;
  242. margin-top: 0px;
  243. overflow: hidden;
  244.     -webkit-transition: opacity .9s linear;
  245. -webkit-transition: all .9s ease-in-out;
  246. -moz-transition: all .9s ease-in-out;
  247. -o-transition: all .9s ease-in-out;
  248. }
  249.  
  250. .pic img {
  251. width: 100%;
  252. height: 125px;}
  253.  
  254. .picbg:hover .pic {
  255. margin-left: -62.5px;  
  256. margin-top: -62.5px;
  257. }
  258.  
  259.  
  260. /* DESCRIPTION AND HEADER */
  261.  
  262. .descbg {
  263. z-index:999;
  264. position: fixed;
  265. width: 315px;
  266. height: 145px;
  267. background: white;
  268. margin-left: 210px;
  269. margin-top: 35px;
  270. border-radius: 5px;
  271. background-image: url(http://media.tumblr.com/tumblr_mex6qbS3q71rbvno1.png); /* MAKE THIS BACKGROUND THE SAME AS YOUR GENERAL BACKGROUND */}
  272.  
  273.  
  274. .header {
  275. position:fixed;
  276. background-color: rgba(255,255,255,0.6); /* BACKGROUND COLOR OF HEADER (CHANGE THE "255" TO "0" MAKE IT A TRANSPARENT BLACK OR REPLACE WITH A HEX CODE FOR A SOLID COLOR) */
  277. width:295px; height:15px;
  278. margin-top: 10px; margin-left: 10px;
  279. border-radius: 5px;
  280. overflow: hidden;}
  281.  
  282. .headerfont {
  283. text-align: left;
  284. color: #313131; /* COLOR OF HEADER TEXT */
  285. font-family: consolas;
  286. font-style: none; /* OBLIQUE, NORMAL, BOLD */
  287. font-size: 10px;
  288. letter-spacing: 5px;
  289. text-transform: uppercase;
  290. text-align: right;
  291. margin-top: 0px;
  292. margin-right: 58px;
  293. padding: 1px;}
  294.  
  295. .circlebox {
  296. position: absolute;
  297. right: 0px;
  298. top: 0px;
  299. width: 57px;
  300. height: 15px;
  301. background: none;}
  302.  
  303. .c1, .c2, .c3, .c4 {
  304. cursor: help;
  305. position: absolute;
  306. margin-left: 3px;
  307. margin-top: 3px;
  308. width: 5px;
  309. height: 5px;
  310. border: 2px solid #A44058; /* COLOR OF LITTLE HEADER CIRCLE ONE */
  311. border-top-left-radius: 500px;
  312. border-top-right-radius: 225px;
  313. border-bottom-left-radius: 500px;
  314. border-bottom-right-radius: 225px;
  315. background: none;
  316. -webkit-transition: opacity .5s linear;
  317. -webkit-transition: all .5s ease-in-out;
  318. -moz-transition: all .5s ease-in-out;
  319. -o-transition: all .5s ease-in-out;}
  320.  
  321. .c1:hover {
  322. background: #A44058; /* COLOR OF LITTLE HEADER CIRCLE ONE */}
  323.  
  324. .c2 {
  325. margin-left: 17px;
  326. border-top-left-radius: 2px;
  327. border-top-right-radius: 2px;
  328. border-bottom-left-radius: 2px;
  329. border-bottom-right-radius: 2px;
  330. border: 2px solid #C73653; /* COLOR OF LITTLE HEADER CIRCLE TWO */}
  331.  
  332. .c2:hover {
  333. background: #C73653; /* COLOR OF LITTLE HEADER CIRCLE TWO */}
  334.  
  335. .c3 {
  336. margin-left: 31px;
  337. border-top-left-radius: 2px;
  338. border-top-right-radius: 2px;
  339. border-bottom-left-radius: 2px;
  340. border-bottom-right-radius: 2px;
  341. border: 2px solid #F6716D; /* COLOR OF LITTLE HEADER CIRCLE THREE */}
  342.  
  343. .c3:hover {
  344. background: #F6716D; /* COLOR OF LITTLE HEADER CIRCLE THREE */}
  345.  
  346. .c4 {
  347. margin-left: 45px;
  348. border-top-left-radius: 225px;
  349. border-top-right-radius: 500px;
  350. border-bottom-left-radius: 225px;
  351. border-bottom-right-radius: 500px;
  352. border: 2px solid #FA9C94; /* COLOR OF LITTLE HEADER CIRCLE FOUR */}
  353.  
  354. .c4:hover {
  355. background: #FA9C94; /* COLOR OF LITTLE HEADER CIRCLE FOUR */}
  356.  
  357. .stuff {
  358. position:fixed;
  359. width:295px;
  360. height:100px;
  361. margin-top: 35px;
  362. margin-left: 10px;
  363. overflow: auto;
  364. overflow-x: hidden;
  365. background: rgba(255,255,255,0.6); /* BACKGROUND COLOR OF DESCRIPTION (CHANGE THE "255" TO "0" MAKE IT A TRANSPARENT BLACK OR REPLACE WITH A HEX CODE FOR A SOLID COLOR) */
  366. border-radius: 5px;}
  367.  
  368. .font {
  369. text-align: justify; /* JUSTIFY, CENTER, LEFT, RIGHT */
  370. color: #313131; /* COLOR OF DESCRIPTION TEXT */
  371. font-family: consolas;
  372. font-style: oblique; /* OBLIQUE, NORMAL, BOLD */
  373. font-size: 10px;
  374. letter-spacing: 2px;
  375. text-transform: none; /* UPPERCASE, LOWERCASE */
  376. margin-top: 0px;
  377. padding: 7px;}
  378.  
  379. i, em{color:#F6716D; /* COLOR OF ITALIC FONT */ }
  380. b{color: #FA9C94; /* COLOR OF BOLD FONT */ }
  381. ul,ol{margin:0px;margin-left:-10px;}
  382. p{padding:0px;margin:10px;}
  383. u {
  384. color: #C73653; /* COLOR OF UNDERLINE FONT */  
  385. letter-spacing: 1px;
  386. }
  387.  
  388. /* LINK BARS */
  389.  
  390. .link1, .link2, .link3, .link4, .link5 {
  391. cursor: help;
  392. position: absolute;
  393. margin-top: 0px;
  394. margin-left: 0px;
  395. width: 140px;
  396. height: 215px;
  397. background: #A44058; /* BACKGROUND COLOR OF FIRST LINK BAR */
  398. text-align: center;
  399. font-family: calibri;
  400. text-transform: uppercase;
  401. font-size: 8px;
  402. letter-spacing: 5px;
  403. -webkit-transition: opacity .6s linear;
  404. -webkit-transition: all .6s ease-in-out;
  405. -moz-transition: all .6s ease-in-out;
  406. -o-transition: all .6s ease-in-out;
  407. overflow: hidden;}
  408.  
  409. .link1:hover {
  410. background: #FFE2D0; /* BACKGROUND COLOR OF FIRST LINK BAR (HOVER) */}
  411.  
  412. .link2 {
  413. margin-left: 140px;
  414. background: #C73653; /* BACKGROUND COLOR OF SECOND LINK BAR */}
  415.  
  416. .link2:hover {
  417. background: #6A2E48; /* BACKGROUND COLOR OF SECOND LINK BAR (HOVER) */}
  418.  
  419. .link3 {
  420. background: #F6716D; /* BACKGROUND COLOR OF THIRD LINK BAR */
  421. margin-left: 280px;}
  422.  
  423. .link3:hover {
  424. background: #F6C2B4; /* BACKGROUND COLOR OF THIRD LINK BAR (HOVER) */}
  425.  
  426. .link4 {
  427. background: #FA9C94; /* BACKGROUND COLOR OF FOURTH LINK BAR */
  428. margin-left: 420px;}
  429.  
  430. .link4:hover {
  431. background: #FFEBE0; /* BACKGROUND COLOR OF FOURTH LINK BAR (HOVER) */}
  432.  
  433. .navbar {
  434. position: fixed;
  435. width: 125px;
  436. height: 20px;
  437. margin: 0px;}
  438.  
  439.  
  440. .c img {
  441. padding-left: 2.5px;
  442. padding-top: 2px;
  443. border-radius: 250px;
  444. opacity: 0;
  445. width:25px;
  446. height: 25px;
  447. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  448. -o-transition: 0.5s ease;-moz-transition: 0.5s ease;}
  449.  
  450. .c {
  451. z-index: 99999;
  452. overflow: hidden;
  453. position:fixed;
  454. right:7px;
  455. bottom:7px;
  456. background-color: rgba(0,0,0,0.2);
  457. width: 30px;
  458. height: 30px;
  459. border-radius: 250px;}
  460.  
  461. .c img:hover {  opacity: 1;}
  462.  
  463. </style>
  464. </head>
  465. <body>
  466.  
  467. <div id="center">
  468. <div id="content">
  469.  
  470. <div class="descbg">
  471.  
  472. <div class="header">
  473.  
  474. <div class="circlebox">
  475.  
  476. <!--HEADER CIRCLE LINKS-->
  477. <a href="LINK-ONE-URL" title="LINK ONE TITLE"><div class="c1"></div></a>
  478.  
  479. <a href="LINK-TWO-URL" title="LINK TWO TITLE"><div class="c2"></div></a>
  480.    
  481. <a href="LINK-THREE-URL" title="LINK THREE TITLE"><div class="c3"></div></a>
  482.    
  483. <a href="LINK-FOUR-URL" title="LINK FOUR TITLE"><div class="c4"></div>
  484. </div></a>
  485. <!--HEADER CIRCLE LINKS-->
  486.  
  487. <div class="headerfont">
  488. <!--HEADER TITLE-->
  489. About Me
  490. <!--HEADER TITLE-->    
  491. </div></div>
  492.  
  493. <div class="stuff">
  494. <div class="font">
  495. <!--DESCRIPTION-->
  496. "Lorem ipsum dolor sit amet, <i>consectetur adipisicing elit</i>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <u>Ut enim ad minim veniam</u>, quis nostrud exercitation ullamco laboris <b>nisi ut aliquip ex ea</b>."
  497. <!--DESCRIPTION-->
  498. </div>
  499. </div>
  500.  
  501. </div>
  502.  
  503. <div class="picbg">
  504. <div class="picall">
  505.  
  506. <!--CIRCLE ICON LINKS-->
  507. <a href="LINK-ONE-URL" title="LINK ONE TITLE">
  508. <div class="in1">
  509. <div class="infont1"><span class="fontawesome-home"></span></div>
  510. </div>
  511. </a>
  512.  
  513. <a href="LINK-TWO-URL" title="LINK TWO TITLE">
  514. <div class="in2">
  515. <div class="infont2"><span class="fontawesome-envelope"></span></div>
  516. </div>
  517. </a>
  518.  
  519. <a href="LINK-THREE-URL" title="LINK THREE TITLE">
  520. <div class="in3">
  521. <div class="infont3"><span class="fontawesome-heart"></span></div>
  522. </div>
  523. </a>
  524.  
  525. <a href="LINK-FOUR-URL" title="LINK FOUR TITLE">
  526. <div class="in4">
  527. <div class="infont4"><span class="fontawesome-calendar"></span></div>
  528. </div>
  529. </a>
  530. <!--CIRCLE ICON LINKS-->
  531.  
  532. <!--REPLACE URL (WITHIN THE QUOTATIONS) WITH THE SAME URL-->
  533. <div class="picout">
  534. <div class="pic"><img src="http://static.tumblr.com/cbjpgjf/wK0n6rysc/ugh.gif"></div>
  535. </div>
  536.    
  537. <!--REPLACE URL (WITHIN THE QUOTATIONS) WITH THE SAME URL-->
  538.    
  539. </div><!--picall-->
  540. </div><!--picbg-->
  541.  
  542. <!--LINK BAR LINKS-->
  543. <a href="LINK-ONE-URL" title="LINK ONE TITLE">
  544. <div class="link1">
  545. <div class="navbar">
  546. </div>
  547. </div>
  548. </a>
  549.  
  550. <a href="LINK-TWO-URL" title="LINK TWO TITLE">
  551. <div class="link2">
  552. <div class="navbar">
  553. </div>
  554. </div>
  555. </a>
  556.  
  557. <a href="LINK-THREE-URL" title="LINK THREE TITLE">
  558. <div class="link3">
  559. <div class="navbar">
  560. </div>
  561. </div>
  562. </a>
  563.  
  564. <a href="LINK-FOUR-URL" title="LINK FOUR TITLE">
  565. <div class="link4">
  566. <div class="navbar">
  567. </div>
  568. </div>
  569. </a>
  570. <!--LINK BAR LINKS-->
  571.  
  572. </div>
  573. </div>
  574.  
  575. <div class="c">
  576. <a href="http://nff-themes.tumblr.com">
  577. <img src="http://static.tumblr.com/cbjpgjf/hmgmwsd81/yyylamo.png">
  578. </a>
  579. </div>
  580.  
  581. </body>
  582. </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!