API tools faq
paste
Advertisement
b0rn-to-be-wild

Page: ABOUT ME (dark)

b0rn-to-be-wild
Mar 5th, 2018
274
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.17 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!----
  4.  
  5. ©borntobewildcodes.tumblr.com | ABOUT ME (dark)
  6.  
  7. + Do not redistribute this page or remove the credits.
  8. + Edit as long as you keep the credits intact.
  9. + Contact me if you have any questions or concerns.
  10. + If you want a custom theme you can commission me.
  11. + Thanks for using this page, I hope that you enjoy it.
  12.  
  13. Other credits:
  14.  
  15. - Google fonts
  16. - Saturn icons
  17. - Jquery
  18.  
  19. ---->
  20.  
  21. <html>
  22. <head>
  23.  
  24. <title>{Title}</title>
  25. <link rel="shortcut icon" href="{Favicon}">
  26. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  27.  
  28. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  29. <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  30.  
  31. <style type="text/css">
  32.  
  33. /* ---------------------------- GENERAL ----------------------------- */
  34.  
  35. /* -------- BASICS ------- */
  36.  
  37. body {
  38. margin: 0;
  39. padding: 0;
  40. width: 100%;
  41. height: 100%;
  42. font-family: Lato;
  43. font-size: 12px;
  44. line-height: 17px;
  45. color: #bbb;
  46. /* Background */
  47. background-color: #111;
  48. background-image: URL('https://78.media.tumblr.com/9baabcc25d446e0b33c44d15944a788a/tumblr_p2rfpxhBEs1w4d880o1_400.png');
  49. background-attachment: fixed;
  50. background-repeat: repeat;
  51. }
  52.  
  53. /* Webkit scrollbar */
  54.  
  55. ::-webkit-scrollbar {
  56. width: 8px;
  57. height: 0px;
  58. }
  59.  
  60. ::-webkit-scrollbar-thumb:vertical {
  61. height: 0px;
  62. background-color: #000;
  63. border:3px solid #222;
  64. }
  65.  
  66. ::-webkit-scrollbar-button:start:decrement,
  67. ::-webkit-scrollbar-button:end:increment {
  68. height: 0px;
  69. display: block;
  70. background-color: #222;
  71. }
  72.  
  73. ::-webkit-scrollbar-track-piece {
  74. background-color: #222;
  75. }
  76.  
  77. /* Tumblr controls */
  78.  
  79. iframe.tmblr-iframe {
  80. top:0px!important;
  81. right:35px!important;
  82. opacity:0.8;
  83. transform:scale(0.6);
  84. transform-origin:100% 0;
  85. -webkit-transform:scale(0.8);
  86. -webkit-transform-origin:100% 0;
  87. -moz-transform:scale(0.8);
  88. -moz-transform-origin:100% 0;
  89. -ms-transform:scale(0.8);
  90. -ms-transform-origin:100% 0;
  91. -o-transform:scale(0.8);
  92. -o-transform-origin:100% 0;
  93. z-index:100000!important;
  94. }
  95.  
  96. iframe.tmblr-iframe:hover {
  97. opacity:1!important;
  98. }
  99.  
  100. /* Tooltips */
  101.  
  102. .ui-tooltip {
  103. position:absolute;
  104. z-index:9999;
  105. padding-top:10px;
  106. }
  107.  
  108. .ui-tooltip-content {
  109. background:#000;
  110. padding:0 4px;
  111. font-style:italic;
  112. color:#eee;
  113. text-transform:lowercase;
  114. border:1px solid #111;
  115. }
  116.  
  117. img {
  118. opacity:1;
  119. border:0;
  120. text-decoration:none;
  121. max-width:100%;
  122. height:auto;
  123. display:block;
  124. }
  125.  
  126. pre {
  127. padding:0;
  128. margin:0;
  129. line-height:inherit!important;
  130. background:transparent;
  131. font-family:inherit!Important;
  132. font-size:inherit!important;
  133. white-space:pre-wrap;
  134. white-space:-moz-pre-wrap;
  135. white-space:-pre-wrap;
  136. white-space:-o-pre-wrap;
  137. word-wrap:break-word;
  138. }
  139.  
  140. /* Fix */
  141.  
  142. iframe, img, embed, object, video {
  143. max-width: 100%;
  144. border: none;
  145. }
  146.  
  147. input, textarea, select, a { outline: none; }
  148.  
  149. /* Headings */
  150.  
  151. h1, h2, h3, h4 {
  152. margin:1.5em;
  153. font-size:1.5em;
  154. padding:0;
  155. font-weight:bold;
  156. }
  157.  
  158. /* Paragraph */
  159.  
  160. p { margin:5px 0px;}
  161.  
  162. p:first-of-type { margin-top:0;}
  163.  
  164. p:last-of-type { margin-bottom:0;}
  165.  
  166. small, big, sub, pre {
  167. font-size:1em!important;
  168. line-height:1.4em!important;
  169. vertical-align:baseline!important;
  170. }
  171.  
  172. /* Bold and italic */
  173.  
  174. b, strong, b a, strong a {
  175. font-weight:bold!important;
  176. color:#333333;
  177. }
  178.  
  179. i, em {
  180. color: #555555;
  181. }
  182.  
  183. /* Links */
  184.  
  185. a {
  186. color:#333333;
  187. text-decoration:none;
  188. -webkit-transition: all 0.4s ease-in-out;
  189. -moz-transition: all 0.4s ease-in-out;
  190. -ms-transition: all 0.4s ease-in-out;
  191. -o-transition: all 0.4s ease-in-out;
  192. transition: all 0.4s ease-in-out;
  193. }
  194.  
  195. a, a img {cursor:pointer;}
  196.  
  197. a:hover {
  198. color:#eeeeee;
  199. text-decoration:none;
  200. }
  201.  
  202. ul, ol, li {
  203. margin: 5px 10px;
  204. padding: 0px;
  205. }
  206.  
  207. /* Line break */
  208.  
  209. hr {
  210. border:none;
  211. box-shadow:0px;
  212. margin-top:0px;
  213. margin-bottom:15px;
  214. margin-left:0px;
  215. width:40px;
  216. padding:0px;
  217. border-top:1px solid #D88552;
  218. }
  219.  
  220. /*------------ CONTAINER ------------*/
  221.  
  222. #container {
  223. position:fixed;
  224. top:50%;
  225. left:50%;
  226. width:115vh;
  227. height:65vh;
  228. z-index:100;
  229. overflow:hidden;
  230. -webkit-transform:translateX(-50%) translateY(-50%);
  231. -moz-transform:translateX(-50%) translateY(-50%);
  232. -ms-transform:translateX(-50%) translateY(-50%);
  233. -o-transform:translateX(-50%) translateY(-50%);
  234. transform:translateX(-50%) translateY(-50%);
  235. /* Container background */
  236. background:rgba(1,1,1,0.8);
  237. border-radius:2px;
  238. background-image: URL('https://78.media.tumblr.com/c065d55bf5858acdd3b775aac52be3eb/tumblr_p2rf3ruVv01w4d880o1_1280.jpg');
  239. background-size:cover;
  240. -webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.75);
  241. -moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.75);
  242. box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.75);
  243. }
  244.  
  245. #containerin{
  246. position:absolute;
  247. margin:0;
  248. width:calc(100% - 60px);
  249. height:calc(100% - 60px);
  250. padding:30px;
  251. /* Container overlay background */
  252. background:rgba(1,1,1,0.5);
  253. }
  254.  
  255. /*-- PROFILE --*/
  256.  
  257. #profile {
  258. position:absolute;
  259. margin-top:0px;
  260. left:30px;
  261. width:45vh;
  262. height:calc(88% - 60px);
  263. }
  264.  
  265. /* Info */
  266.  
  267. #info {
  268. margin:0px;
  269. height:20%;
  270. padding:10px 0px;
  271. border-top:2px solid #333;
  272. border-bottom:2px solid #333;
  273. text-align:left;
  274. font-size:1.5vh;
  275. line-height:3.2vh;
  276. letter-spacing:1px;
  277. /* About info style */
  278. color:#bbb;
  279. text-shadow: 1px 1px #222;
  280. font-weight:600;
  281. }
  282.  
  283. #info b{
  284. color:#eee;
  285. }
  286.  
  287. /* Avatar */
  288.  
  289. #avatar {
  290. float:left;
  291. margin:auto;
  292. margin-left:10px;
  293. margin-right:15px;
  294. padding-right:15px;
  295. width:9vh;
  296. height:9vh;
  297. border-right:1px solid #333;
  298. -webkit-transition: all 0.5s ease;
  299. -moz-transition: all 0.5s ease;
  300. -ms-transition: all 0.5s ease;
  301. -o-transition: all 0.5s ease;
  302. transition: all 0.5s ease;
  303. }
  304.  
  305. #avatar img{
  306. margin:0;
  307. width:100%;
  308. height:100%;
  309. border-radius:100%;
  310. }
  311.  
  312. /* Description */
  313.  
  314. #description {
  315. margin-top:0px;
  316. padding:10px;
  317. font-size:2.1vh;
  318. line-height:3vh;
  319. height:calc(53% - 15px);
  320. overflow-y:auto;
  321. border-bottom:2px solid #333;
  322. /* Description style */
  323. color:#bbb;
  324. text-shadow: 2px 2px 3px rgba(0,0,0,0.3);
  325. text-align:justify;
  326. font-weight:600;
  327. }
  328.  
  329. .firstcharacter {
  330. float: left;
  331. font-size: 10vh;
  332. line-height: 8.1vh;
  333. padding-top: 0.4vh;
  334. padding-right: 8px;
  335. padding-left: 0px;
  336. /* First letter style */
  337. color:#D95E40;
  338. }
  339.  
  340. /* Social icons */
  341.  
  342. #icons {
  343. margin-top:0px;
  344. margin-left:0px;
  345. height:17%;
  346. text-align:center;
  347. overflow:hidden;
  348. }
  349.  
  350. #icons span {
  351. display:inline-block;
  352. height:20px;
  353. margin:2vh;
  354. padding:5px;
  355. font-size:2.5vh;
  356. line-height:20px;
  357. text-align:center;
  358. -webkit-transition: all 0.4s ease-in-out;
  359. -moz-transition: all 0.4s ease-in-out;
  360. -ms-transition: all 0.4s ease-in-out;
  361. -o-transition: all 0.4s ease-in-out;
  362. transition: all 0.4s ease-in-out;
  363. /* Social icons style */
  364. color:#D95E40;
  365. text-shadow: 2px 2px 3px rgba(0,0,0,0.3);
  366. }
  367.  
  368. /* Social icons style on hover */
  369.  
  370. #icons span:hover {
  371. color:#eeeeee;
  372. }
  373.  
  374. /*-- MENU --*/
  375.  
  376. #menu {
  377. position:absolute;
  378. bottom:10px;
  379. margin-left:0px;
  380. width:calc(100% - 60px);
  381. height:12%;
  382. border-top:2px solid #333;
  383. text-align:center;
  384. z-index:100;
  385. }
  386.  
  387. #menu a{
  388. display:inline-block;
  389. margin:0px;
  390. margin-top:-2px;
  391. font-size:2vh;
  392. padding:15px 20px;
  393. -webkit-transition: all 0.5s ease;
  394. -moz-transition: all 0.5s ease;
  395. -ms-transition: all 0.5s ease;
  396. -o-transition: all 0.5s ease;
  397. transition: all 0.5s ease;
  398. /* Menu links style */
  399. color:#eee;
  400. text-shadow: 2px 2px 3px rgba(0,0,0,0.3);
  401. border-top:2px solid #333;
  402. }
  403.  
  404. #menu a span{
  405. color:#D95E40;
  406. }
  407.  
  408. /* Menu links style on hover */
  409.  
  410. #menu a:hover{
  411. border-top:2px solid #D95E40;
  412. color:#D95E40;
  413. }
  414.  
  415. /* Back button */
  416.  
  417. #back{
  418. position:absolute;
  419. top:25px;
  420. right:30px;
  421. width:40px;
  422. height:40px;
  423. line-height:40px;
  424. text-align:center;
  425. }
  426.  
  427. /* Back button style */
  428.  
  429. #back span{
  430. font-size:5vh;
  431. color:#D95E40;
  432. text-shadow: 2px 2px 3px rgba(0,0,0,0.3);
  433. }
  434.  
  435. /* Back button style on hover */
  436.  
  437. #back:hover span{
  438. color:#eee;
  439. }
  440.  
  441. /*-- CREDIT --*/
  442.  
  443. #credit {
  444. position:fixed;
  445. top: 10px;
  446. right: 10px;
  447. width:25px;
  448. height:25px;
  449. z-index: 100000;
  450. }
  451.  
  452. #credit img{
  453. border: 1px solid #eeeeee;
  454. }
  455.  
  456. #credit img:hover{
  457. border: 1px solid #333222;
  458. }
  459.  
  460. /* --------------------------- Custom CSS -------------------------- */
  461.  
  462. {CustomCSS}
  463.  
  464. </style>
  465.  
  466. </head>
  467.  
  468. <body>
  469.  
  470. <div id="container">
  471. <div id="containerin">
  472.  
  473. <div id="profile">
  474.  
  475. <div id="info">
  476.  
  477. <div id="avatar"><img src="{PortraitURL-128}"></div>
  478.  
  479. <b> NAME: </b> John <br>
  480. <b> AGE: </b> 20 <br>
  481. <b> LOCATION: </b> CA <br>
  482.  
  483. </div>
  484. <!-- End blogtitle -->
  485.  
  486. <div id="description">
  487.  
  488. <span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
  489.  
  490. </div>
  491. <!-- End description -->
  492.  
  493. <div id="icons">
  494. <a href="https://" Title="Google Plus"><span class="sf sf-google-plus"></span></a>
  495. <a href="https://" Title="Facebook"><span class="sf sf-facebook"></span></a>
  496. <a href="https://" Title="Pinterest"><span class="sf sf-pinterest"></span></a>
  497. <a href="https://" Title="Twitter"><span class="sf sf-twitter"></span></a>
  498. <a href="https://" Title="YouTube"><span class="sf sf-youtube"></span></a>
  499. </div>
  500. <!-- End icons -->
  501.  
  502. </div>
  503. <!-- End profile -->
  504.  
  505. <div id="back">
  506. <a href="/" Title="Back to blog"><span class="sf sf-aero-cursor"></span></a>
  507. </div>
  508. <!-- End back -->
  509.  
  510. <div id="menu">
  511.  
  512. <a href="https://"> <span> 01 </span> LINK </a>
  513. <a href="https://"> <span> 02 </span> LINK </a>
  514. <a href="https://"> <span> 03 </span> LINK </a>
  515. <a href="https://"> <span> 04 </span> LINK </a>
  516. <a href="https://"> <span> 05 </span> LINK </a>
  517.  
  518. </div>
  519. <!--End menu-->
  520.  
  521. </div>
  522. <!--End containerin-->
  523. </div>
  524. <!--End container-->
  525.  
  526.  
  527. <!-------------------------------- SCRIPTS -------------------------------->
  528.  
  529. <!--Google fonts-->
  530.  
  531. <link href="https://fonts.googleapis.com/css?family=Lato|Exo|Inconsolata|Source+Sans+Pro|Lora" rel="stylesheet">
  532.  
  533. <!-- Saturn icons -->
  534.  
  535. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  536.  
  537. <!-- CREDIT (do not remove) -->
  538.  
  539. <div id="credit"><a href="http://borntobewildcodes.tumblr.com" title="page ABOUT ME by @borntobewildcodes"><img src="http://i57.tinypic.com/301g6eg.jpg"></a></div>
  540.  
  541. </body>
  542. </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!