API tools faq
paste
Advertisement
glcssiers

• • • PAGE 001: CLAUDIA

glcssiers
Jan 7th, 2018
4,346
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.07 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <!---------------------------------------------------------------------
  4.  
  5.  
  6.  
  7. ╭ ╮
  8.  
  9. glcssiers PAGE 001: CLAUDIA
  10.  
  11. • • •
  12.  
  13. you may edit this page as you
  14. see fit, but please do not erase
  15. the credit. DO NOT use this as a
  16. base, lift any coding/fonts from
  17. this theme, or take any part of
  18. this code and claim it as your
  19. own or use it elsewhere.
  20.  
  21. ┄ pop-up tabs code: ncighbourhood
  22.  
  23. ╰ ╯
  24.  
  25.  
  26.  
  27.  
  28. ---------------------------------------------------------------------->
  29.  
  30. <head>
  31.  
  32.  
  33.  
  34. <title>{title}</title>
  35.  
  36. <!-- scripts -->
  37.  
  38. <link rel="shortcut icon" href="{Favicon}">
  39. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" /><meta name="viewport" content="width=820" />
  40.  
  41. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  42. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  43. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  44. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  45. <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
  46. <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  47. <link href="css/hover-min.css" rel="stylesheet">
  48.  
  49. <script>
  50. (function($){
  51. $(document).ready(function() {
  52. $("a[title]").style_my_tooltips({
  53. tip_follows_cursor:true,
  54. tip_delay_time:90,
  55. tip_fade_speed:600,
  56. attribute:"title"
  57. });
  58. });
  59. })(jQuery);
  60. </script>
  61.  
  62.  
  63. <style type="text/css">
  64.  
  65.  
  66. /* ◜ SCROLL ◞ */
  67.  
  68. ::-webkit-scrollbar { width:0px; height: 4px; }
  69. ::-webkit-scrollbar-thumb { background-color: #eaeaea;
  70. -webkit-border-radius: 5px; }
  71.  
  72.  
  73. /* ◜ HOVER EFFECTS ◞ */
  74.  
  75.  
  76. /* Bounce In */
  77. .hvr-bounce-in {display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;
  78. }
  79. .hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {-webkit-transform: scale(1.2);transform: scale(1.2);-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  80. }
  81.  
  82. /* Pop */
  83. @-webkit-keyframes hvr-pop {
  84. 50% {-webkit-transform: scale(1.2);transform: scale(1.2);}}
  85.  
  86. @keyframes hvr-pop {
  87. 50% {-webkit-transform: scale(1.2);transform: scale(1.2);}}
  88.  
  89. .hvr-pop {display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;
  90. }
  91. .hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {-webkit-animation-name: hvr-pop;animation-name: hvr-pop;-webkit-animation-duration: 0.3s;animation-duration: 0.3s;-webkit-animation-timing-function: linear;animation-timing-function: linear;-webkit-animation-iteration-count: 1;animation-iteration-count: 1;
  92. }
  93.  
  94.  
  95.  
  96. /* ------- fonts ------ */
  97.  
  98. @font-face{
  99. font-family:"chaennie8";
  100. src: url('https://dl.dropboxusercontent.com/s/9jhv2y3v1ky37yp/so.otf');
  101. }
  102.  
  103. @font-face{
  104. font-family:"chaennie9";
  105. src: url('https://dl.dropboxusercontent.com/s/kz3iqc070yg0sxs/bj.otf');
  106. }
  107.  
  108. @font-face{
  109. font-family:"chaennie10";
  110. src: url('https://dl.dropboxusercontent.com/s/ppob0yhtg6w6odf/vst.ttf');
  111. }
  112.  
  113.  
  114. b, strong {
  115. font-weight:bold;
  116. color:#6c4b45; /* BOLD/STRONG COLOR */
  117. }
  118.  
  119. a {
  120. color:#ad9991; /* LINK COLOR */
  121. }
  122.  
  123. /* ------- general ------ */
  124.  
  125. body{
  126. background: url('url') no-repeat center center fixed;
  127. -webkit-background-size: cover;
  128. -moz-background-size: cover;
  129. -o-background-size: cover;
  130. background-size: cover;
  131. background-color:#ffffff;
  132. font-family:'inconsolata';
  133. font-size:9px;
  134. line-height:13px;
  135. color:#000; /* FONT COLOR */
  136. letter-spacing:.5px;
  137.  
  138. }
  139.  
  140. #s-m-t-tooltip {
  141. max-width:300px;
  142. border-radius: 8px;
  143. padding:0px 5px;
  144. margin:25px 20px 5px 0px;
  145. color:#000;
  146. background: #fff;
  147. z-index:99999;
  148. font-size:8px;
  149. font-family:'arial';
  150. letter-spacing:1px;
  151. text-transform:uppercase;
  152. z-index:999999999999999;
  153. }
  154.  
  155. #container {
  156. background:#fff;
  157. width:450px;
  158. height:300px;
  159. padding:12px;
  160. position:absolute;
  161. top:0px;
  162. bottom:0;
  163. right:0;
  164. left:0;
  165. margin:auto;
  166. border-radius:10px;
  167. }
  168.  
  169. #pagetitle {
  170. font-family:"chaennie8";
  171. color:#7aa68d; /* TITLE FONT COLOR */
  172. font-size:50px;
  173. position:absolute;
  174. top:-10px;
  175. right:20px;
  176. text-shadow: 1px 1px 0px white;
  177. -webkit-transform: rotate(-3deg);
  178. transform: rotate(-3deg);
  179. text-shadow:2px 2px rgba(255,255,255,0.8);
  180. z-index:99999999;
  181. }
  182.  
  183. #pagelabel {
  184. width:175px;
  185. padding:1px 4px 0px 4px;
  186. background-color:#c6a29a; /* SUBTITLE BACKGROUND COLOR */
  187. color:white;
  188. -webkit-transform: rotate(-3deg);
  189. transform: rotate(-3deg);
  190. position:absolute;
  191. top:15px;
  192. right:40px;
  193. text-align:center;
  194. z-index:-9999;
  195. font-family:'chaennie9';
  196. text-transform:uppercase;
  197. letter-spacing:1.5px;
  198. font-size:6px;
  199. z-index:9999999;
  200. opacity:0.85;
  201. }
  202.  
  203. /* ------- sidebar ------ */
  204.  
  205.  
  206. #sideimg {
  207. border-radius:5px;
  208. overflow:hidden;
  209. padding:8px;
  210. -webkit-box-shadow:inset 0px 0px 0px 10px #eee;
  211. -moz-box-shadow:inset 0px 0px 0px 10px #eee;
  212. box-shadow:inset 0px 0px 0px 10px #ee;
  213. width:150px;
  214. height:230px;
  215. margin-top:5px;
  216. margin-left:5px;
  217. }
  218.  
  219. #sideimg img {
  220. border-radius:2px;
  221.  
  222. }
  223.  
  224. #desc {
  225. position:absolute;
  226. top:0px;
  227. left:35px;
  228. width:110px;
  229. height:155px;
  230. background:white;
  231. padding:10px;
  232. overflow:auto;
  233. opacity:0;
  234. text-align:justify;
  235. border-radius:5px;
  236. margin-top:50px;
  237. z-index:99999999;
  238. -webkit-transform: scaleY(0);
  239. transform: scaleY(0);
  240. -webkit-transition: all .6s;
  241. -moz-transition: all .6s;
  242. -o-transition: all .6s;
  243. -ms-transition: all .6s;
  244. transition: all .6s;
  245. }
  246.  
  247. #sideimg:hover #desc{
  248. opacity:0.9;
  249. -webkit-transform: scaleY(1);
  250. transform: scaleY(1);
  251. }
  252.  
  253. /* ------- desc ------ */
  254.  
  255. #minicon {
  256. width:230px;
  257. height:260px;
  258. margin-top:15px;
  259. }
  260.  
  261. .ic {
  262. color:white;
  263. margin-right:5px;
  264. font-size:10px;
  265. }
  266.  
  267. /* ------- stats ------ */
  268.  
  269. #statstitle {
  270. background-color:#ad9991; /* STATS LABEL BACKGROUND COLOR */
  271. padding:5px;
  272. width:120px;
  273. height:10px;
  274. padding:5px;
  275. margin-left:185px;
  276. margin-top:-230px;
  277. border-radius:5px 5px 0px 0px;
  278. color:white;
  279. font-family:'chaennie9';
  280. text-transform:uppercase;
  281. letter-spacing:2px;
  282. }
  283.  
  284.  
  285. #stats {
  286. width:118px;
  287. height:90px;
  288. border:1px solid #eee;
  289. border-top:none;
  290. padding:5px;
  291. margin-left:185px;
  292. margin-top:0px;
  293. border-radius:5px;
  294. border-radius:0px 0px 5px 5px;
  295. overflow:auto;
  296. letter-spacing:1px;
  297. text-transform:uppercase;
  298. font-size:7.5px;
  299. text-align:justify;
  300. }
  301.  
  302.  
  303. /* ------- connections ------ */
  304.  
  305. #connectionstitle {
  306. background-color:#c6a29a; /* CONNECTIONS LABEL BACKGROUND COLOR */
  307. padding:5px;
  308. width:120px;
  309. height:10px;
  310. padding:5px;
  311. margin-left:185px;
  312. margin-top:10px;
  313. border-radius:5px 5px 0px 0px;
  314. color:white;
  315. font-family:'chaennie9';
  316. text-transform:uppercase;
  317. letter-spacing:2px;
  318. }
  319.  
  320. #connections {
  321. width:120px;
  322. height:100px;
  323. border:1px solid #eee;
  324. padding:2px 5px 2px 5px;
  325. margin-left:185px;
  326. margin-top:0px;
  327. border-radius:0px 0px 5px 5px;
  328. overflow:auto;
  329. letter-spacing:1px;
  330. text-transform:uppercase;
  331. font-size:7.5px;
  332. }
  333.  
  334. #connections img {
  335. border-radius:5px;
  336. width:50px;
  337. height:50px;
  338. }
  339.  
  340. #connections b {
  341. color:#fff;
  342. padding:2px;
  343. margin-right:2px;
  344. box-shadow: inset 0px -20px #ccc;
  345. }
  346.  
  347. #connections p {
  348. border-bottom:1px dashed black;
  349. padding-bottom:5px;
  350. }
  351.  
  352. z {
  353. font-size:24px;
  354. padding:8px 5px 2px 5px;
  355. float:right;
  356. }
  357. y {
  358. font-size:24px;
  359. padding:8px 5px 2px 5px;
  360. float:left;
  361. }
  362.  
  363. /* ------- spotify ------ */
  364.  
  365. #spotifytitle {
  366. background-color:#7aa68d; /* SPOTIFY LABEL BACKGROUND COLOR */
  367. padding:5px;
  368. width:115px;
  369. height:10px;
  370. padding:5px;
  371. margin-left:325px;
  372. margin-top:-255px;
  373. border-radius:5px 5px 0px 0px;
  374. color:white;
  375. font-family:'chaennie9';
  376. text-transform:uppercase;
  377. letter-spacing:2px;
  378.  
  379. }
  380.  
  381.  
  382. #spotify {
  383. width:115px;
  384. height:170px;
  385. border:1px solid #eee;
  386. padding:5px;
  387. margin-left:325px;
  388. margin-top:0px;
  389. border-radius:0px 0px 5px 5px;
  390. overflow:auto;
  391. }
  392.  
  393. #song {
  394. padding:5px;
  395. font-size:10px;
  396. font-weight:bold;
  397. }
  398.  
  399. #artist {
  400. color:#a8a8a8;
  401. font-size:8px;
  402. padding:5px;
  403. margin-top:-8px;
  404. font-style:italic;
  405. border-bottom:1px dashed black;
  406.  
  407. }
  408.  
  409. /* ------- images ------ */
  410.  
  411. #lilicons {
  412. width:140px;
  413. height:50px;
  414. margin-left:318px;
  415. margin-top:-52px;
  416. display:block;
  417. border-radius:5px;
  418. margin-right:10px;
  419. }
  420.  
  421. #lilicons img {
  422. border:2px solid #eee;
  423. border-radius:5px;
  424. width:50px;
  425. height:50px;
  426. border-radius:5px;
  427. margin-left:10px;
  428. }
  429.  
  430.  
  431. /* ------- tabs base code by alyofrp ------ */
  432.  
  433. .tabz {
  434. margin-top:-45px;
  435. margin-left:-14px;
  436. padding:10px;
  437. position:fixed;
  438. width:180px;
  439. overflow:hidden;
  440.  
  441. }
  442.  
  443. .tabz a {
  444. padding:5px;
  445. width:20px;
  446. border-radius:5px;
  447. text-align:center;
  448. font-family:'arial';
  449. background-color:#eee; /* tablinks bg color */
  450. color:#c6a29a; /* tablinks color */
  451. font-size:20px;
  452. display:inline-block;
  453. margin-left:12px;
  454. box-shadow:inset 0px 0px #7aa68d; /* tablinks hover bg color */
  455. -webkit-transition: all .3s;
  456. -moz-transition: all .3s;
  457. -o-transition: all .3s;
  458. -ms-transition: all .3s;
  459. transition: all .3s;
  460. }
  461.  
  462. .tabz a:hover {
  463. box-shadow:inset 0px -30px #7aa68d; /* tablinks hover bg color */
  464. color:#dddcdc; /* tablinks hover color */
  465. -webkit-transition: all .3s;
  466. -moz-transition: all .3s;
  467. -o-transition: all .3s;
  468. -ms-transition: all .3s;
  469. transition: all .3s;
  470. }
  471.  
  472. .tabz a:focus, .active {
  473. background-color: #c6a29a; /* tablinks clicked bg color */
  474. color:#dddcdc; /* tablinks clicked color */
  475. }
  476.  
  477. .tabzcon { /* tablinks content aka the box under the tablinks */
  478. margin-top:-260px;
  479. margin-left:185px;
  480. padding:10px;
  481. position:absolute;
  482. width:250px;
  483. height:250px;
  484. background-color:#eee;
  485. border-radius:5px;
  486. overflow:auto;
  487. }
  488.  
  489. #base { /* the box when no tabs are selected */
  490. margin-top:45px;
  491. margin-left:0px;
  492. position:fixed;
  493. padding:10px;
  494. width:205px;
  495. height:250px;
  496. background-color:#e1c9bf;
  497. }
  498.  
  499. .tabzclose { /* the close button, u prob dont need to touch this */
  500. text-transform:uppercase;
  501. font-weight:bold;
  502. font-size:8px;
  503. padding:3px;
  504. color:inherit;
  505. margin-top:-8px;
  506. margin-right:-5px;
  507. float:right;
  508. }
  509.  
  510. .tabzclose:hover {
  511. cursor:pointer;
  512. }
  513.  
  514.  
  515.  
  516. /* ------- phone ------ */
  517.  
  518. #conts {
  519. width:240px;
  520. height:225px;
  521. padding:5px;
  522. margin-top:15px;
  523. overflow-y:auto;
  524. overflow-x:hidden;
  525. background-color:white;
  526. padding:5px;
  527. border-radius:5px;
  528. }
  529.  
  530. #contitle {
  531. font-size:15px;
  532. padding:10px;
  533. font-weight:bold;
  534. font-family:'chaennie9';
  535. text-transform:uppercase;
  536. letter-spacing:2px;
  537. }
  538.  
  539. #search {
  540. width:200px;
  541. padding:5px;
  542. background:#eee;
  543. margin-left:8px;
  544. border-radius:3px;
  545. margin-bottom:10px;
  546. margin-top:-5px;
  547. }
  548.  
  549. #magnify {
  550. font-size:15px;
  551. margin-top:-5px;
  552. }
  553.  
  554. #contcat {
  555. background-color:#eee;
  556. padding:3px;
  557. font-weight:bold;
  558. font-family:'chaennie9';
  559. text-transform:uppercase;
  560. letter-spacing:2px;
  561. }
  562.  
  563. #contname {
  564. border-bottom:1px solid #eee;
  565. background:white;
  566. padding:5px;
  567. }
  568.  
  569. /* ------- texts ------ */
  570.  
  571. #msgs {
  572. margin-left:auto;
  573. margin-right:auto;
  574. width:240px;
  575. height:130px;
  576. margin-top:15px;
  577. padding:5px;
  578. overflow-y:auto;
  579. overflow-x:hidden;
  580. background-color:white;
  581. padding:5px;
  582. border-radius:5px;
  583. }
  584.  
  585. #contact {
  586. font-size:15px;
  587. padding:5;
  588. text-align:center;
  589. width:220px;
  590. font-weight:bold;
  591. margin-bottom:0px;
  592. color:#6c4b45;
  593. font-family:'chaennie9';
  594. text-transform:uppercase;
  595. letter-spacing:2px;
  596. }
  597.  
  598. #line {
  599. width:240;
  600. border-top:1px solid #eee;
  601. margin-bottom:10px;
  602. }
  603.  
  604. .imsg {
  605. background:white;
  606. padding:15px;
  607. border-radius:5px;
  608. overflow:auto;
  609. height:205px;
  610. width:180px;
  611. }
  612.  
  613.  
  614. .leftbubble {
  615. position: relative;
  616. background: #e5e5ea; /* LEFT TEXT BUBBLE BACKGROUND COLOR */
  617. padding:5px;
  618. line-height:125%;
  619. padding-left:8px;
  620. width:130px;
  621. height:auto;
  622. font-size:8px;
  623. text-align:left;
  624. border-radius:10px;
  625. margin-bottom:10px;
  626. margin:5px;
  627. }
  628. .rightbubble {
  629. position: relative;
  630. background:#c6a29a; /* RIGHT TEXT BUBBLE BACKGROUND COLOR */
  631. line-height:125%;
  632. float:right;
  633. color:white;
  634. padding:5px;
  635. width:130px;
  636. height:auto;
  637. font-size:8px;
  638. text-align:left;
  639. border-radius:10px;
  640. margin-bottom:10px;
  641. margin:5px;
  642. }
  643.  
  644. .leftbubble::after {
  645. content:"";
  646. position:relative;
  647. float:left;
  648. margin-left:-8px;
  649. bottom:-12px;
  650. width:.5em;
  651. height:1em;
  652. border-right:.5em solid #e5e5ea;
  653. border-bottom-right-radius:1em .5em;
  654. }
  655.  
  656. .rightbubble:after {
  657. content:"";
  658. position:relative;
  659. float:right;
  660. bottom:-12px;
  661. width:.5em;
  662. height:1em;
  663. margin-right:-5px;
  664. margin-top:-2px;
  665. border-left:.5em solid #c6a29a;
  666. border-bottom-left-radius:1em .5em;
  667.  
  668. }
  669.  
  670. #keyboard {
  671. width:250px;
  672. margin-left:auto;
  673. margin-right:auto;
  674. }
  675.  
  676. #keyboard img {
  677. width:250px;
  678. margin-top:-5px;
  679. border-radius:5px;
  680. }
  681.  
  682. /* ------- instagram ------ */
  683.  
  684. #igcon {
  685. width:240px;
  686. height:227px;
  687. margin-top:10px;
  688. padding:5px;
  689. overflow-y:auto;
  690. overflow-x:hidden;
  691. background:white;
  692. border-radius:5px;
  693. }
  694.  
  695. #igbar {
  696. width:220px;
  697. height:100px;
  698. padding:5px;
  699. }
  700.  
  701. #igicon img {
  702. width:60px;
  703. height:60px;
  704. border:1px solid #cccccc;
  705. border-radius:100%;
  706. }
  707.  
  708. #igbar h2 {
  709. font-size:13px;
  710. margin-top:-55px;
  711. margin-left:70px;
  712. }
  713.  
  714. #igbar h3 {
  715. background-color:#c6a29a; /* INSTAGRAM FOLLOW BACKGROUND COLOR */
  716. border-radius:5px;
  717. padding:1px 3px;
  718. width:28px;
  719. margin-top:-25px;
  720. margin-left:160px;
  721. color:white;
  722. font-size:6.5px;
  723. text-transform:uppercase;
  724. letter-spacing:1.5px;
  725. }
  726.  
  727. #igbar h3 a {
  728. color:white;
  729. }
  730.  
  731. #igbar h4 {
  732. width:160px;
  733. font-size:8px;
  734. margin-left:72px;
  735. margin-top:0px;
  736. }
  737.  
  738. #igbar h5 {
  739. width:160px;
  740. font-size:6.5px;
  741. text-transform:uppercase;
  742. letter-spacing:0.5px;
  743. margin-left:72px;
  744. margin-top:-5px;
  745. }
  746.  
  747. #igpics {
  748. width:235px;
  749. display:inline-block;
  750. margin-left:20px;
  751. overflow:scroll;
  752. margin-left:3px;
  753. margin-top:-40px;
  754. }
  755.  
  756. #igpics img {
  757. border-radius:5px;
  758. margin:5px;
  759. width:65px;
  760. }
  761.  
  762. /* ------- twitter ------ */
  763.  
  764. #twitcon {
  765. width:240px;
  766. margin-top:15px;
  767. height:225px;
  768. padding:5px ;
  769. overflow-y:auto;
  770. overflow-x:hidden;
  771. background:white;
  772. border-radius:5px;
  773. }
  774.  
  775. #twitbar {
  776. width:233px;
  777. height:100px;
  778. padding:5px;
  779. }
  780.  
  781. #twiticon img {
  782. width:50px;
  783. height:50px;
  784. border:3px solid #fff;
  785. border-radius:100%;
  786. margin-top:-20px;
  787. margin-left:5px;
  788. }
  789.  
  790. #twitheader img {
  791. width:228px;
  792. }
  793.  
  794. #twitbar h2 {
  795. font-size:10px;
  796. margin-top:-15px;
  797. margin-left:10px;
  798. color:#888888;
  799. }
  800.  
  801. #twitbar h3 {
  802. background-color:white;
  803. border:1px solid #c6a29a; /* TWITTER FOLLOW BORDER COLOR */
  804. border-radius:5px;
  805. padding:1px 3px;
  806. width:26px;
  807. margin-top:-30px;
  808. margin-left:190px;
  809. color:#c6a29a; /* TWITTER FOLLOW COLOR */
  810. font-size:6.5px;
  811. text-transform:uppercase;
  812. letter-spacing:1px;
  813. }
  814.  
  815. #twitbar h3 a {
  816. color:#c6a29a; /* FOLLOW LINK COLOR */
  817. }
  818.  
  819. #twitbar h4 {
  820. width:200px;
  821. font-size:12px;
  822. margin-left:10px;
  823. margin-top:3px;
  824. }
  825.  
  826. #twitbar h5 {
  827. width:200px;
  828. font-size:8px;
  829. margin-left:10px;
  830. margin-top:5px;
  831. }
  832.  
  833. #twitbar h6 {
  834. width:200px;
  835. font-size:8px;
  836. margin-left:10px;
  837. margin-top:-5px;
  838. margin-bottom:0px;
  839. color:black;
  840. }
  841.  
  842. #line2 {
  843. width:225px;
  844. border-top:1px solid #eee;
  845. margin-bottom:10px;
  846. }
  847.  
  848. #tweet {
  849. margin-top:75px;
  850. height:auto;
  851. width:215px;
  852. padding:10px 5px;
  853. margin-left:5px;
  854. border-bottom:1px solid #eee;
  855. margin-bottom:3px;
  856. }
  857.  
  858. #tweet2 {
  859. margin-top:-5px;
  860. height:auto;
  861. width:215px;
  862. padding:10px 5px;
  863. margin-left:5px;
  864. border-bottom:1px solid #eee;
  865. margin-bottom:3px;
  866. }
  867.  
  868. #tweet img {
  869. width:30px;
  870. border-radius:100%
  871. }
  872.  
  873. #tweetname {
  874. font-size:8px;
  875. margin-top:-30px;
  876. margin-left:40px;
  877. }
  878.  
  879. #tweetz {
  880. margin-top:0px;
  881. font-size:9px;
  882. }
  883.  
  884. #tweet2 img {
  885. width:30px;
  886. border-radius:100%
  887. }
  888.  
  889. /* ------- credit; DO NOT TOUCH ------ */
  890.  
  891. .credit, .credit a {
  892. position:fixed;
  893. left:10px;
  894. bottom:20px;
  895. width:11px;
  896. height:11px;
  897. border-radius:50%;
  898. background-color:transparent;
  899. font-size:20px;
  900. color:#c6a29a;
  901. letter-spacing:1px;
  902. padding:5px;
  903. line-height:0%;
  904. opacity:0.75;
  905. z-index:9999999999999;
  906. -webkit-transition: all 0.5s ease;
  907. -moz-transition: all 0.5s ease;
  908. transition: all 0.5s ease;
  909. }
  910. .credit i{
  911. padding:4px 4px 4px 6px;
  912. font-style:normal;
  913. color:#333;
  914. font-size:17px;
  915. background-color:#eee;
  916. border:2px solid #eee;
  917. border-radius:50%;
  918. -webkit-transition: all 0.5s ease;
  919. -moz-transition: all 0.5s ease;
  920. transition: all 0.5s ease;
  921. }
  922.  
  923. .credit a:hover i{
  924. color:black;
  925. background-color:#c6a29a;
  926. border:2px solid #c6a29a;
  927. box-shadow: 0px 0px 0px 1px #333 inset;
  928. text-shadow:none;
  929. -webkit-transition: all 0.5s ease;
  930. -moz-transition: all 0.5s ease;
  931. transition: all 0.5s ease;
  932. }
  933.  
  934. .credit a:hover {
  935. opacity:1;
  936. background:none;
  937. color:#333;
  938. }
  939.  
  940. .credit:hover {
  941. opacity:1;
  942. background:none;
  943. color:#fff;
  944. }
  945. .credit a span{
  946. width: 75px;
  947. height: auto;
  948. padding: 3px;
  949. left: 0%;
  950. line-height:150%;
  951. margin-left: 15px;
  952. font-weight: 600;
  953. font-size:7px;
  954. text-align: center;
  955. border: 4px solid white;
  956. background-color:white;
  957. text-indent: 0px;
  958. text-transform:uppercase;
  959. border-radius: 0px;
  960. position: absolute;
  961. color:{color:text};
  962. pointer-events: none;
  963. opacity: 0;
  964. text-shadow:none;
  965. transition: all 0.3s ease-in-out;
  966. -webkit-transform: translate3d(20px,20px,0px) rotate(45deg);
  967. transform: translate3d(20px,20px,0px) rotate(45deg);
  968. }
  969. .credit a span:before,
  970. .credit a span:after{
  971. content: '';
  972. position: absolute;
  973. bottom: -10px;
  974. left: 50%;
  975. margin-left: -21px;
  976. width: 0;
  977. height: 0;
  978. border-left: 6px solid transparent;
  979. border-right: 6px solid transparent;
  980. border-top: 6px solid #fff;
  981. }
  982.  
  983. .credit a:hover span{
  984. opacity: 0.9;
  985. -webkit-transform: translate3d(-15px,-50px,0px) rotate(0deg);
  986. transform: translate3d(-15px,-50px,0px) rotate(0deg);
  987. }
  988.  
  989. .credit span b{
  990. font-style:none;
  991. font-family:'chaennie10';
  992. font-weight:800;
  993. text-transform:lowercase;
  994. letter-spacing:0.5px;
  995. font-size:11px;
  996. }
  997.  
  998. </style>
  999.  
  1000. </head>
  1001.  
  1002. <body>
  1003.  
  1004. <!--------------- CREDIT — DO NOT REMOVE ------------->
  1005.  
  1006. <div class="credit"><a href="http://glcssiers.tumblr.com"><span>code by <b>glcssiers</b></span><br><i class="ion-ios-game-controller-b-outline"></i></a></div>
  1007.  
  1008.  
  1009.  
  1010. <div id="container">
  1011.  
  1012. <div id="pagelabel">SUBTITLE HERE</div>
  1013. <div id="pagetitle">PAGE TITLE</div>
  1014.  
  1015.  
  1016. <div id="sideimg">
  1017. <img src="url">
  1018.  
  1019. <div id="desc">description
  1020. </div>
  1021. </div>
  1022.  
  1023. <div id="minicon">
  1024. <div id="statstitle"><i class="ion-android-options ic"></i> statistics</div>
  1025.  
  1026. <div id="stats">
  1027.  
  1028. stats!!
  1029.  
  1030. </div>
  1031.  
  1032. <div id="connectionstitle"><i class="ion-android-contacts ic"></i> connections</div>
  1033.  
  1034. <div id="connections">
  1035.  
  1036.  
  1037. <!-- COPY + PASTE THIS TO ADD MORE -->
  1038. <!-- START -->
  1039. <p><y><img src="url"></y> <b>name:</b> desc.</p>
  1040.  
  1041. <p><z><img src="url"></z> <b>name:</b> desc.</p>
  1042. <!-- END -->
  1043.  
  1044. </div>
  1045.  
  1046.  
  1047.  
  1048. <div id="spotifytitle"><i class="ion-ios-musical-notes ic"></i> spotify</div>
  1049.  
  1050. <div id="spotify">
  1051. <!-- COPY + PASTE THIS TO ADD MORE -->
  1052. <!-- START -->
  1053. <div id="song"><b>01.</b> song
  1054. </div>
  1055. <div id="artist">artist</div>
  1056. <!-- END -->
  1057.  
  1058. </div>
  1059. </div>
  1060.  
  1061.  
  1062.  
  1063. <div id="lilicons">
  1064. <!-- ICONS UNDER SPOTIFY -->
  1065. <img src="url" class="hvr-bounce-in">
  1066. <img src="url" class="hvr-bounce-in">
  1067. </div>
  1068.  
  1069. <!-- TAB LINKS -->
  1070. <div class="tabz">
  1071. <a href="javascript:void(0)" class="tablink tabzact hvr-pop" onclick="openAlytut(event, 'TabzOne');"><i class="ion-ios-telephone"></i></a>
  1072.  
  1073. <a href="javascript:void(0)" class="tablink tabzact hvr-pop" onclick="openAlytut(event, 'TabzTwo');"><i class="ion-ios-chatbubble"></i></a>
  1074.  
  1075. <a href="javascript:void(0)" class="tablink hvr-pop" onclick="openAlytut(event, 'TabzThree');"><i class="ion-social-instagram-outline"></i></a>
  1076.  
  1077. <a href="javascript:void(0)" class="tablink hvr-pop" onclick="openAlytut(event, 'TabzFour');"><i class="ion-social-twitter"></i></a>
  1078. </div>
  1079.  
  1080. <!-- TABS START -->
  1081.  
  1082. <div id="TabzOne" class="tabzcon alytut" style="display:none">
  1083. <span onclick="this.parentElement.style.display='none'" class="tabzclose">
  1084. x
  1085. </span>
  1086. <div id="conts">
  1087. <div id="contitle">Contacts</div>
  1088. <div id="search"><i class="ion-ios-search"></i> Search</div>
  1089. <div id="line"></div>
  1090. <div id="contcat">A</div>
  1091. <div id="contname">name</div>
  1092.  
  1093. <div id="contcat">B</div>
  1094. <div id="contname">name</div>
  1095.  
  1096. <div id="contcat">C</div>
  1097. <div id="contname">name</div>
  1098.  
  1099. <div id="contcat">D</div>
  1100. <div id="contname">name</div>
  1101.  
  1102. <div id="contcat">E</div>
  1103. <div id="contname">name</div>
  1104.  
  1105. <div id="contcat">F</div>
  1106. <div id="contname">name</div>
  1107.  
  1108. <div id="contcat">G</div>
  1109. <div id="contname">name</div>
  1110.  
  1111. <div id="contcat">H</div>
  1112. <div id="contname">name</div>
  1113.  
  1114. <div id="contcat">I</div>
  1115. <div id="contname">name</div>
  1116.  
  1117. <div id="contcat">J</div>
  1118. <div id="contname">name</div>
  1119.  
  1120. <div id="contcat">K</div>
  1121. <div id="contname">name</div>
  1122.  
  1123. <div id="contcat">L</div>
  1124. <div id="contname">name</div>
  1125.  
  1126. <div id="contcat">M</div>
  1127. <div id="contname">name</div>
  1128.  
  1129. <div id="contcat">N</div>
  1130. <div id="contname">name</div>
  1131.  
  1132. <div id="contcat">O</div>
  1133. <div id="contname">name</div>
  1134.  
  1135. <div id="contcat">P</div>
  1136. <div id="contname">name</div>
  1137.  
  1138. <div id="contcat">Q</div>
  1139. <div id="contname">name</div>
  1140.  
  1141. <div id="contcat">R</div>
  1142. <div id="contname">name</div>
  1143.  
  1144. <div id="contcat">S</div>
  1145. <div id="contname">name</div>
  1146.  
  1147. <div id="contcat">T</div>
  1148. <div id="contname">name</div>
  1149.  
  1150. <div id="contcat">U</div>
  1151. <div id="contname">name</div>
  1152.  
  1153. <div id="contcat">V</div>
  1154. <div id="contname">name</div>
  1155.  
  1156. <div id="contcat">W</div>
  1157. <div id="contname">name</div>
  1158.  
  1159. <div id="contcat">X</div>
  1160. <div id="contname">name</div>
  1161.  
  1162. <div id="contcat">Y</div>
  1163. <div id="contname">name</div>
  1164.  
  1165. <div id="contcat">Z</div>
  1166. <div id="contname">name</div>
  1167.  
  1168. <div id="contcat">#</div>
  1169. <div id="contname">name</div>
  1170. </div>
  1171. </div>
  1172.  
  1173.  
  1174.  
  1175.  
  1176.  
  1177.  
  1178. <div id="TabzTwo" class="tabzcon alytut" style="display:none">
  1179. <span onclick="this.parentElement.style.display='none'" class="tabzclose">
  1180. x
  1181. </span>
  1182.  
  1183. <div id="msgs">
  1184. <div id="contact">contact</div>
  1185. <div id="line"></div>
  1186. <div id="imsg">
  1187.  
  1188. <!----- START OF RIGHT BUBBLE ----->
  1189. <div class="leftbubble">ttext
  1190. </div>
  1191. <!----- END OF RIGHT BUBBLE ----->
  1192. <!----- START OF LEFT BUBBLE ----->
  1193. <div class="rightbubble">text</div>
  1194. <!----- END OF LEFT BUBBLE ----->
  1195.  
  1196.  
  1197. </div>
  1198.  
  1199. </div>
  1200. <div id="keyboard"><img src="https://78.media.tumblr.com/74acf5df6e112553348cad01de8cb0c4/tumblr_p22xvzrrjU1w1r5t0o1_400.gif"></div>
  1201.  
  1202. </div>
  1203.  
  1204.  
  1205.  
  1206.  
  1207.  
  1208. <div id="TabzThree" class="tabzcon alytut" style="display:none">
  1209. <span onclick="this.parentElement.style.display='none'" class="tabzclose">
  1210. x
  1211. </span>
  1212. <div id="igcon">
  1213. <div id="igbar">
  1214. <div id="igicon"><img src="url" class="hvr-bounce-in"></div>
  1215. <h2><b>@username</b></h2>
  1216. <h3 class="hvr-pop"><a href="#" style="text-decoration:none;">follow</a></h3>
  1217. <h4><b>name</b> | bio</h4>
  1218. <h5><b>#</b> posts <b>#</b> followers <b>#</b> following</h5>
  1219. </div>
  1220.  
  1221. <div id="igpics">
  1222.  
  1223. <img src="url" class="hvr-bounce-in">
  1224. <img src="url" class="hvr-bounce-in">
  1225. <img src="url" class="hvr-bounce-in">
  1226. <img src="url" class="hvr-bounce-in">
  1227. <img src="url" class="hvr-bounce-in">
  1228. <img src="url" class="hvr-bounce-in">
  1229. <img src="url" class="hvr-bounce-in">
  1230. <img src="url" class="hvr-bounce-in">
  1231. <img src="url" class="hvr-bounce-in">
  1232.  
  1233. <!-- COPY + PASTE THIS TO ADD A NEW ROW
  1234.  
  1235. <img src="url" class="hvr-bounce-in">
  1236. <img src="url" class="hvr-bounce-in">
  1237. <img src="url" class="hvr-bounce-in">
  1238.  
  1239. -->
  1240. </div>
  1241.  
  1242. </div>
  1243. </div>
  1244.  
  1245.  
  1246.  
  1247.  
  1248.  
  1249. <div id="TabzFour" class="tabzcon alytut" style="display:none">
  1250. <span onclick="this.parentElement.style.display='none'" class="tabzclose">
  1251. x
  1252. </span>
  1253. <div id="twitcon">
  1254. <div id="twitbar">
  1255. <div id="twitheader"><img src="url"></div>
  1256. <div id="twiticon"><img src="url" class="hvr-bounce-in"></div>
  1257. <h3 class="hvr-pop"><a href="#" style="text-decoration:none;">follow</a></h3>
  1258. <h4><b>display name</b></h4>
  1259. <h2>@username</h2>
  1260. <h6>bio</h6>
  1261. <h5><b>#</b> following&nbsp;&nbsp;&nbsp;&nbsp;<b>#</b> followers</h5>
  1262. <div id="line2"></div>
  1263. </div>
  1264.  
  1265. <div id="tweet">
  1266. <img src="url">
  1267. <div id="tweetname"><b>display name</b> @username
  1268. <div id="tweetz">tweet</div>
  1269. </div>
  1270. </div>
  1271.  
  1272. <div id="tweet2">
  1273. <img src="url">
  1274. <div id="tweetname"><b>display name</b> @username
  1275. <div id="tweetz">tweet</div>
  1276. </div>
  1277. </div>
  1278.  
  1279. <div id="tweet2">
  1280. <img src="url">
  1281. <div id="tweetname"><b>display name</b> @username
  1282. <div id="tweetz">tweet</div>
  1283. </div>
  1284. </div>
  1285.  
  1286. <div id="tweet2">
  1287. <img src="url">
  1288. <div id="tweetname"><b>display name</b> @username
  1289. <div id="tweetz">tweet</div>
  1290. </div>
  1291. </div>
  1292. </div>
  1293.  
  1294. </div>
  1295.  
  1296.  
  1297. <!-- TABS END -->
  1298.  
  1299. </div>
  1300.  
  1301. <!-- TABS SCRIPT -->
  1302.  
  1303. <script>
  1304. function openAlytut(evt, alytutName) {
  1305. var i, x, tablinks;
  1306. x = document.getElementsByClassName("alytut");
  1307. for (i = 0; i < x.length; i++) {
  1308. x[i].style.display = "none";
  1309. }
  1310. tablinks = document.getElementsByClassName("tablink");
  1311. for (i = 0; i < x.length; i++) {
  1312. tablinks[i].className = tablinks[i].className.replace(" tabzact", "");
  1313. }
  1314. document.getElementById(alytutName).style.display = "block";
  1315. evt.currentTarget.className += " tabzact";
  1316. }
  1317. </script>
  1318.  
  1319. </body>
  1320.  
  1321. </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!