API tools faq
paste
Advertisement
amaanat

shabnam - all in one page

amaanat
Jun 30th, 2019
5,970
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.33 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. PAGE TWO - SHABNAM
  4. AN ALL IN ONE PAGE THAT SUITS YOUR NEEDS
  5. shabnam means dew in urdu
  6.  
  7. MADE FOR YOU WITH ♡ BY AMAANAT THEMES
  8.  
  9. (@amaanat on tumblr)
  10.  
  11.  
  12. please visit https://www.amaanat.tumblr.com/terms to read the terms and conditions before using my page. If you do not agree to the terms of use, you may not use my work.
  13.  
  14. If you have questions about this code or find things difficult, do not hesitate to contact me!
  15.  
  16. please do not steal my code, remove or move the credit or claim this as your own.
  17.  
  18. credits:
  19. - honeybee icon font by suiomi
  20. - custom tumblr controls by cyantists
  21. - google fonts
  22. - tutorial for tabs and codes from https://www.w3schools.com/howto/howto_js_tabs.asp
  23. - suiomi percentage graph - https://suiomi.com/post/181320974554/percentage-graph-by-suiomi-this-is-a-revamp-of-my
  24. - https://www.w3schools.com/css/css3_variables.asp
  25.  
  26.  
  27. a full list of credits used in this theme and others can be found on https://www.amaanat.tumblr.com/credits
  28.  
  29. much thanks to codingcabin for helping me out in difficult times <3
  30. -->
  31.  
  32.  
  33.  
  34. <!DOCTYPE html>
  35. <head>
  36.  
  37. <!-- fonts -->
  38. <link href="https://fonts.googleapis.com/css?family=ABeeZee" rel="stylesheet">
  39. <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  40.  
  41.  
  42. <!-- JQUERY SCRIPT DO NOT TOUCH THIS-->
  43. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  44.  
  45. <!-- HONEYBEE ICON FONT BY SUIOMI | DO NOT TOUCH OR REMOVE THIS AT ALL-->
  46. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  47.  
  48. <!-- css hover effect https://github.com/IanLunn/Hover -->
  49. <link href="css/hover.css" rel="stylesheet" media="all">
  50.  
  51.  
  52. <!-- start of script tooltip -->
  53. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  54.  
  55. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  56.  
  57. <script>
  58.  
  59. (function($){
  60.  
  61. $(document).ready(function(){
  62.  
  63. $("a[title]").style_my_tooltips({
  64.  
  65. tip_follows_cursor:true,
  66.  
  67. tip_delay_time:90,
  68.  
  69. tip_fade_speed:600,
  70.  
  71. attribute:"title"
  72.  
  73. });
  74.  
  75. });
  76.  
  77. })(jQuery);
  78.  
  79. </script>
  80.  
  81. <!-- end of script tooltip -->
  82.  
  83.  
  84. </head>
  85.  
  86.  
  87.  
  88. <style type="text/css">
  89. /* READ THIS!! change the colours for the main colour here! It is currently #660066 but you can change that here and it will change the colour for all the things I accented with the #660066 to your desired one!!!! you WILL have to go to skills bar to change the colour of the skills manually which is currently set at #660066 and is up to you to change manually*/
  90.  
  91. :root {
  92. --main-color:#660066;
  93. }
  94.  
  95. /* tooltips. Do not touch this unless you know what to do. I have customised the tooltips in a way that they are visible on dark AND light backgrounds and would prefer to keep it that way, because of the credits link */
  96.  
  97. #s-m-t-tooltip {
  98.  
  99. max-width:300px; /* maximum width */
  100.  
  101. background-color:#ffffff; /* color background */
  102.  
  103. border:1px solid; /* color, shape and thickness of the border */
  104.  
  105. border-color:#eee;
  106.  
  107. font-size:12px; /* font size */
  108.  
  109. color:#000000; /* font color */
  110.  
  111. letter-spacing:1px; /* font spacing */
  112.  
  113. text-transform:lowercase; /* uppercase, lowercase, none */
  114.  
  115. padding:5px; /* padding size */
  116.  
  117. margin:20px 0px 15px 20px; /* margin size, in order, top, right, bottom, left */
  118.  
  119. z-index:9999999999999999999999;
  120.  
  121. border-radius: 4px; /* border radius */
  122.  
  123. }
  124.  
  125.  
  126. /* body stuff */
  127.  
  128. body {
  129. font-family: 'Roboto', sans-serif;
  130. background-color:white; /* change your background color here */
  131. margin:0;
  132. }
  133.  
  134. /* links */
  135. a {
  136. text-decoration:none;
  137. color:var(--main-color);
  138. transition:.5s ease;
  139. }
  140.  
  141. a:hover {
  142. letter-spacing:1px;
  143. }
  144.  
  145.  
  146. /* body scrollbar */
  147.  
  148. ::-webkit-scrollbar {
  149. width: 6px;
  150. z-index:2;
  151. height:6px;
  152. }
  153.  
  154. /* Track */
  155. ::-webkit-scrollbar-track {
  156. background:transparent;
  157. }
  158.  
  159. /* Handle */
  160. ::-webkit-scrollbar-thumb {
  161. background:var(--main-color);
  162. transition:.5s ease;
  163. width:3px;
  164. border-radius:50px;
  165. }
  166. ::-webkit-scrollbar-corner {
  167. background-color:transparent;
  168. }
  169.  
  170.  
  171. /* tumblr controls DO NOT TOUCH */
  172.  
  173. iframe.tmblr-iframe {
  174. z-index:99999999999999!important;
  175. top:0!important;
  176. right:0!important;
  177. opacity:0.4;
  178. /* delete invert(1) from here */
  179. filter:invert(1) contrast(150%);
  180. -webkit-filter:invert(1) contrast(150%);
  181. -o-filter:invert(1) contrast(150%);
  182. -moz-filter:invert(1) contrast(150%);
  183. -ms-filter:invert(1) contrast(150%);
  184. /* to here if your blog has a dark background */
  185. transform:scale(0.65);
  186. transform-origin:100% 0;
  187. -webkit-transform:scale(0.65);
  188. -webkit-transform-origin:100% 0;
  189. -o-transform:scale(0.65);
  190. -o-transform-origin:100% 0;
  191. -moz-transform:scale(0.65);
  192. -moz-transform-origin:100% 0;
  193. -ms-transform:scale(0.65);
  194. -ms-transform-origin:100% 0;}
  195.  
  196. iframe.tmblr-iframe:hover {
  197. opacity:0.6!important;}
  198.  
  199.  
  200.  
  201. /* body container */
  202. .container {
  203. margin-left:auto;
  204. margin-right:auto;
  205. margin-top:10%;
  206. width:600px;
  207. height:350px;
  208. max-height:400px;
  209. overflow:auto;
  210. background-color:#fff;
  211. border-style:solid;
  212. border-color:#eee;
  213. border-width:1px;
  214. border-radius:10px;
  215. padding:10px;
  216. }
  217.  
  218. /* general links at top stuff */
  219. .aboutconlinks {
  220. position:fixed;
  221. margin-top:-60px;
  222. margin-left:-10px;
  223. margin-left:235px;
  224. text-align:center;
  225. }
  226.  
  227. .th-home-o, .th-envelope-o, .th-link {
  228. font-size:15px;
  229. font-weight:bolder;
  230. padding:10px;
  231. background-color:black;
  232. border-radius:50px;
  233. color:white;
  234. vertical-align:middle;
  235. margin-right:10px;
  236. transition:.5s ease;
  237. }
  238.  
  239. .th-home-o:hover, .th-envelope-o:hover, .th-link:hover {
  240. background-color:var(--main-color);
  241. }
  242.  
  243.  
  244. /* THE NAVI TABS ON THE SIDE */
  245. .tabs {
  246. padding:10px;
  247. margin-left:-150px;
  248. margin-top:20px;
  249. position:absolute;
  250. }
  251.  
  252. .tabs button {
  253. display:block;
  254. padding:5px;
  255. width:auto;
  256. max-width:110px;
  257. border-radius:5px;
  258. font-weight:bold;
  259. margin-top:20px;
  260. text-align:left;
  261. text-transform:uppercase;
  262. transition:0.3s ease;
  263. border: none;
  264. outline: none;
  265. cursor: pointer;
  266. }
  267.  
  268. .tabs button:hover {
  269. background-color:black;
  270. color:white;
  271. }
  272.  
  273. .tabs button.active {
  274. background-color:var(--main-color);
  275. color:white;
  276. margin-left:5px;
  277. }
  278.  
  279. .tabcontent {
  280. animation: fadeEffect 1.5s; /* Fading effect takes 1 second */
  281. }
  282.  
  283. /* Go from zero to full opacity */
  284. @keyframes fadeEffect {
  285. from {opacity: 0;}
  286. to {opacity: 1;}
  287. }
  288.  
  289.  
  290.  
  291. /* START OF INDIVIDUAL TABS */
  292.  
  293. /* THE WELCOME TAB */
  294. .welcometab {
  295. text-align:center;
  296. }
  297.  
  298. .welcometab img {
  299. width:100px;
  300. height:100px;
  301. border-radius:80px;
  302. margin-top:50px;
  303. }
  304. /* quote at the top of welcome tab */
  305. .quotie {
  306. font-size:14px;
  307. font-style:italic;
  308. padding:5px;
  309. background-color:#eee;
  310. border-radius:10px;
  311. }
  312.  
  313. /* text under the image of the welcome tab */
  314. .weltext {
  315. margin-top:55px;
  316. font-size:14px;
  317. font-style:;
  318. padding:5px;
  319. background-color:#eee;
  320. border-radius:10px;
  321. }
  322.  
  323. /* THE ABOUT TAB */
  324.  
  325. /* left side of about section */
  326. .leftside {
  327. font-size:14px;
  328. position:fixed;
  329. max-width:200px;
  330. }
  331. .leftside img {
  332. width:200px;
  333. height:200px;
  334. margin-bottom:10px;
  335. }
  336.  
  337. .leftside span {
  338. background-color:var(--main-color);
  339. padding:3px;
  340. border-radius:5px;
  341. font-weight:bold;
  342. color:white;
  343. margin-right:6px;
  344. font-size:14px;
  345. }
  346.  
  347. /* right side of about section */
  348. .rightside {
  349. margin-left:210px;
  350. position:fixed;
  351. max-width:390px;
  352. }
  353.  
  354. .maintext {
  355. background-color:transparent;
  356. color:black;
  357. height:188px;
  358. max-width:390px;
  359. overflow:auto;
  360. border-style:solid;
  361. border-width:1px;
  362. border-color:#eee;
  363. padding:5px;
  364. font-size:15px;
  365. }
  366.  
  367. /* main text block scrollbar */
  368. .maintext::-webkit-scrollbar {
  369. width: 6px;
  370. z-index:2;
  371. }
  372.  
  373. /* Track */
  374. .maintext::-webkit-scrollbar-track {
  375. background:transparent;
  376. }
  377.  
  378. /* Handle */
  379. .maintext::-webkit-scrollbar-thumb {
  380. background:var(--main-color);
  381. transition:.5s ease;
  382. width:3px;
  383. }
  384. .maintext::-webkit-scrollbar-corner {
  385. background-color:transparent;
  386. }
  387.  
  388.  
  389. /* skills graph */
  390. .skills {
  391. margin-top:15px;
  392. display:flex;
  393. justify-content:space-around;
  394. -webkit-justify-content:space-around;
  395. -moz-justify-content:space-around;
  396. }
  397.  
  398. .skills a {
  399. color:var(--main-color);
  400. }
  401.  
  402. :root{
  403. --graphsize: 100px; /* Graph size. Do not go below 60px */
  404. --emptyprogress: #eee; /* Empty progress bar colour */
  405. --percentage: #333; /* Percentage text colour */
  406. --progress: #660066; /* Progress bar colour */ /* change main colour here */
  407. --fullprogress: #000000; /* Progress bar colour when it's 100% */
  408. --percentagebackground: #fff; /* Percentage text background colour */
  409. }
  410.  
  411.  
  412. /* THE FAQ TAB */
  413.  
  414.  
  415. /* questions */
  416. .quest {
  417. padding:5px;
  418. width:auto;
  419. max-width:400px;
  420. background-color:#eee;
  421. color:black;
  422. margin-bottom:1px;
  423. border-radius:4px;
  424. height:Auto;
  425. }
  426.  
  427. /* answers */
  428. .answ {
  429. text-align:right;
  430. height:auto;
  431. border-radius:4px;
  432. padding:5px;
  433. width:auto;
  434. max-width:400px;
  435. background-color:var(--main-color);
  436. color:white;
  437. margin-left:200px;
  438. margin-bottom:20px;
  439. margin-top:-10px;
  440. }
  441.  
  442.  
  443. /* THE LINKS TAB */
  444. .linkcontent a {
  445. font-weight:bolder;
  446. text-transform:uppercase;
  447. margin-top:10px;
  448. width:auto;
  449. display:block;
  450. padding:10px;
  451. }
  452.  
  453. /* odd number of links such as link number 1, 3, 5, 7, 9 etc etc */
  454. .linkcontent a:nth-child(odd) {
  455. background-color: #eee;
  456. color:black;
  457. transition:.8s ease;
  458. text-align:left;
  459. }
  460.  
  461. /* hover effect of the odd number of links */
  462. .linkcontent a:nth-child(odd):hover {
  463. background-color:var(--main-color);
  464. color:white;
  465. text-align:center;
  466. margin-left:75px;
  467. }
  468.  
  469. /* even number of links such as link number 2, 4, 6, 8, 10 etc etc */
  470. .linkcontent a:nth-child(even) {
  471. background-color:var(--main-color);
  472. color:white;
  473. transition:.8s ease;
  474. text-align:right;
  475.  
  476. }
  477.  
  478. /* hover effect of the odd number of links */
  479. .linkcontent a:nth-child(even):hover {
  480. background-color: #eee;
  481. color:black;
  482. margin-right:75px;
  483. }
  484.  
  485. /* THE TAGS TAB */
  486. .main-content {
  487. margin:0 auto;
  488. width:600px;
  489. text-align:center;
  490. display:flex;
  491. flex-wrap:wrap;
  492. justify-content:center;
  493. margin-bottom:100px;
  494. margin-top:25px;
  495. }
  496.  
  497. /* the circles */
  498. .circle {
  499. margin-top:10px;
  500. width:150px;
  501. height:150px;
  502. border-radius:100px;
  503. background-color:var(--main-color);
  504. transition:all .5s linear;
  505. margin-right:10px;
  506. margin-bottom:50px;
  507. position:relative;
  508.  
  509. }
  510.  
  511. .circle:hover {
  512. height:200px;
  513. width:200px;
  514. border-radius:0px;
  515. }
  516.  
  517. /* the titles of the circles */
  518. .titles {
  519. width:100%;
  520. height:auto;
  521. text-indent:-10px;
  522. position:absolute;
  523. margin-top:50px;
  524. font-weight:bold;
  525. color:white; /* change your title color here */
  526. font-size:20px;
  527. padding:5px;
  528. transition:.7s;
  529.  
  530. }
  531.  
  532. .circle:hover .titles {
  533. margin-top:-30px;
  534. color:black;
  535. }
  536.  
  537. .circle:hover .tags {
  538. opacity:1;
  539. }
  540.  
  541.  
  542. /* customisation of tags */
  543. .tags {
  544. width:100%;
  545. font-size:13px;
  546. margin-top:10px;
  547. opacity:0;
  548. transition:.8s ease;
  549. overflow:auto;
  550. max-height:190px;
  551. z-index:-1;
  552.  
  553. }
  554.  
  555. /* scrollbar of tags */
  556. .tags::-webkit-scrollbar {
  557. width: 6px;
  558. z-index:2;
  559. }
  560.  
  561. /* Track */
  562. .tags::-webkit-scrollbar-track {
  563. background:transparent;
  564. }
  565.  
  566. /* Handle */
  567. .tags::-webkit-scrollbar-thumb {
  568. background:#fff; /* change the thumb color of your scrollbar here */
  569. transition:.5s ease;
  570. width:3px;
  571. }
  572. .tags::-webkit-scrollbar-corner {
  573. background-color:transparent;
  574. }
  575.  
  576. /* tags links */
  577. .tags a {
  578. display:block;
  579. margin-bottom:10px;
  580. text-decoration:none;
  581. z-index:2;
  582. color:white; /* change your tags color here */
  583. transition:.5s ease;
  584. width:auto;
  585. }
  586.  
  587. .tags a:hover {
  588. color:#668dbd; /* change your tags hover color here */
  589. }
  590.  
  591. ul, li {
  592. list-style-type:none;
  593. text-align:center;
  594. }
  595.  
  596. ul {
  597. margin:0 auto;
  598. padding:0;
  599. }
  600.  
  601.  
  602. /* THE BLOGROLL TAB */
  603.  
  604. .blogroll {
  605. display:inline-block;
  606. width:600px;
  607. }
  608.  
  609. .following {
  610. display:inline-block;
  611. padding:10px;
  612. }
  613.  
  614. .following img {
  615. width:50px;
  616. height:50px;
  617. border-radius:50%;
  618. }
  619.  
  620. .following img {
  621. -webkit-filter: saturate(120%);
  622. filter: saturate(120%);
  623. }
  624.  
  625. /* THE SOCIAL STUFF TAB
  626.  
  627. <a href="https://instagram.com/"<span class="th th-instagram"></span></a>
  628.  
  629. <a href="https://twitter.com/"<span class="th th-twitter-o"></span></a>
  630.  
  631. <a href="https://www.spotify.com/"<span class="th th-spotify"></span></a>
  632.  
  633. <a href="https://github.com/"<span class="th th-github"></span></a>
  634.  
  635. <a href="https://www.discord.com"<span class="th th-discord"></span></a>
  636.  
  637. */
  638.  
  639. .socialmedia {
  640. margin-top:40px;
  641. width:600px;
  642. display:flex;
  643. justify-content:space-around;
  644. -webkit-justify-content:space-around;
  645. -moz-justify-content:space-around;
  646. }
  647.  
  648. .th-instagram, .th-twitter-o, .th-spotify, .th-github, .th-discord {
  649. font-size:50px;
  650. }
  651.  
  652. .friendos {
  653. text-align:center;
  654. margin-top:50px;
  655.  
  656. }
  657.  
  658. .friendos img {
  659. height:75px;
  660. width:75px;
  661. border-radius:50%;
  662. margin-right:10px;
  663. margin-bottom:10px;
  664.  
  665. }
  666.  
  667. .friendostext {
  668. text-transform:uppercase;
  669. position:fixed;
  670. font-weight:bold;
  671. width:600px;
  672. background-color:#eee;
  673. color:var(--main-color);
  674. border-bottom-right-radius:10px;
  675. border-bottom-left-radius:10px;
  676. padding:10px;
  677. margin-top:1px;
  678. margin-left:-10px;
  679. text-align:center;
  680. }
  681.  
  682.  
  683. /* CREDIT - you touch this and you feel my wrath */
  684. .credit {
  685. background-color:#e393ff;
  686. line-height:16px;
  687. padding-top:5px;
  688. padding-bottom:5px;
  689. padding-left:5px;
  690. position: fixed;
  691. right:10px;
  692. bottom: 10px;
  693. display: block;
  694. overflow: hidden;
  695. color: #000;
  696. font-size: 14px;
  697. text-align: center;
  698. text-decoration: none;
  699. letter-spacing:normal;
  700. font-family: 'Montserrat', sans-serif;
  701. transition:.5s ease;
  702. border-radius:50px;
  703. border-color:black;
  704. border-width:1px;
  705. border-style:solid;
  706. }
  707.  
  708. .credit:after {
  709. display: inline-block;
  710. width: 0;
  711. padding-right:0px;
  712. content: 'amaanat';
  713. letter-spacing:normal;
  714. transition: width .9s ease;
  715. }
  716. .credit:hover:after {
  717. width: 4em;
  718. padding-right:5px;
  719. }
  720.  
  721.  
  722. .th-diamond-o {
  723. font-size:16px;
  724. vertical-align:middle;
  725.  
  726. }
  727.  
  728. .credit:hover {
  729. color:#450e3e;
  730. border-color:#450e3e;
  731. }
  732.  
  733.  
  734.  
  735. </style>
  736.  
  737. <body>
  738.  
  739. <!-- start of main container -->
  740. <div class="container">
  741.  
  742. <!-- links at the top -->
  743. <div class="aboutconlinks">
  744. <a href="/"><span class="th th-home-o"></span></a>
  745. <a href="/"><span class="th th-envelope-o"></span></a>
  746. <a href="/"><span class="th th-link"></span></a>
  747. </div>
  748.  
  749. <!-- the tabs. Its easier not to change the name, but if you want to, do this:
  750. 1) for instance you want to change the name of the about tab. First, change the name 'about' between (event, 'about') to what you want (dont forget to retype quotation marks), then change the name between >about</button> to the same thing.
  751.  
  752. 2) scroll a bit further down. Where it says 'start tab content', scroll down to the about tab and change the following thing that says about to whatever you want: <div id="about" class="tabcontent"> MAKE SURE ITS THE SAME NAME AS IT SAYS IN THE (event, 'YOUR TEXT HERE') !!! There is no need to change the tab content thing.
  753. -->
  754.  
  755. <div class="tabs">
  756. <id style="display:none"><button class="tablinks" onclick="openCity(event, 'welcome')" id="defaultOpen">welcome</button></id>
  757. <button class="tablinks" onclick="openCity(event, 'about')">about</button>
  758. <button class="tablinks" onclick="openCity(event, 'faq')">faq</button>
  759. <button class="tablinks" onclick="openCity(event, 'links')">links</button>
  760. <button class="tablinks" onclick="openCity(event, 'tags')">tags</button>
  761. <button class="tablinks" onclick="openCity(event, 'blogroll')">blogroll</button>
  762. <button class="tablinks" onclick="openCity(event, 'socstuff')">social stuff</button>
  763.  
  764. </div> <!-- end tabs -->
  765.  
  766.  
  767. <!-- start tab content -->
  768.  
  769. <!-- WELCOME TAB -->
  770. <div id="welcome" class="tabcontent">
  771. <div class="welcometab"><p>
  772.  
  773. <!-- your quote -->
  774. <div class="quotie">
  775.  
  776. Though my soul may set in darkness, it will rise in perfect light; I have loved the stars too truly to be fearful of the night.
  777. </div>
  778.  
  779.  
  780. <img src="{portraitURL-64}"><p>
  781.  
  782. <!-- change this to the text you want displayed, make sure its max 3 lines long -->
  783. <div class="weltext">
  784. Welcome to my all in one page. Click the tabs next to this container to access my about, faq and ask/submit, links, tags, blogroll and social stuff! Click the links above to go somewhere.
  785. </div><p>
  786.  
  787. </div>
  788. </div>
  789.  
  790.  
  791. <!-- ABOUT TAG -->
  792. <div id="about" class="tabcontent">
  793.  
  794. <!-- left side -->
  795. <div class="leftside">
  796.  
  797. <!-- sidebar image, enter an image url here (image will be resized to 200x200px) -->
  798. <img src="https://66.media.tumblr.com/61f9ac526f0b408db4c49c56ea81dce5/tumblr_pt1ccg9MhB1qjm8b5o4_400.gif">
  799.  
  800. <br>
  801.  
  802. <!-- please keep the mini about stats short (max one line) otherwise theyll overflow -->
  803. <div class="minabout">
  804. <span>name</span> nums<p>
  805. <span>age</span> 19<p>
  806. <span>ethnicity</span> pakistani<p>
  807. <span>location</span> netherlands<p>
  808. <span>job</span> student
  809.  
  810. </div>
  811. </div> <!-- end left side -->
  812.  
  813.  
  814. <!-- right side -->
  815. <div class="rightside">
  816.  
  817.  
  818. <div class="maintext">
  819.  
  820. <!-- edit this piece to whatever you want lads its an about section -->
  821. Once upon a midnight dreary, while I pondered, weak and weary,
  822. Over many a quaint and curious volume of forgotten lore—
  823. While I nodded, nearly napping, suddenly there came a tapping,
  824. As of some one gently rapping, rapping at my chamber door.
  825. “’Tis some visitor,” I muttered, “tapping at my chamber door—
  826. Only this and nothing more.”
  827.  
  828. Ah, distinctly I remember it was in the bleak December;
  829. And each separate dying ember wrought its ghost upon the floor.
  830. Eagerly I wished the morrow;—vainly I had sought to borrow
  831. From my books surcease of sorrow—sorrow for the lost Lenore—
  832. For the rare and radiant maiden whom the angels name Lenore—
  833. Nameless here for evermore.
  834.  
  835. </div> <!-- end main text -->
  836.  
  837.  
  838.  
  839. <div class="skills">
  840.  
  841. <!-- please limit it to the three skill bars provided, otherwise it will make the screen look wonky. also please limit the labels of the skill bars to one line / word->
  842.  
  843. <!-- DONT TOUCH THIS -->
  844. <link rel="stylesheet" type="text/css" href="//dl.dropbox.com/s/4ix051mids8op0t/spg.css"/><a href="//suiomi.com" class="spc">
  845.  
  846.  
  847. <!-- SKILL BAR ONE -->
  848.  
  849. <div class="s-pgraph p60"><!-- Change the numbers to the percentage you want. Use only numbers by tens (0, 10, 20, ...). Don't forget to change the p# as well. Make sure both numbers are the same. -->
  850.  
  851.  
  852. <div class="s-pgraph-container"><div class="s-pgraph-empty"></div><div class="s-pgraph-progress"></div></div><div class="s-pgraph-label">
  853.  
  854. skill 1 <!-- change the label skill 1 to whatever you want -->
  855.  
  856. </div></div></a>
  857.  
  858. &nbsp;
  859.  
  860. <!-- SKILL BAR TWO -->
  861.  
  862. <a href="//suiomi.com" class="spc">
  863. <div class="s-pgraph p70"> <!-- Change the numbers to the percentage you want. Use only numbers by tens (0, 10, 20, ...). Don't forget to change the p# as well. Make sure both numbers are the same. -->
  864.  
  865.  
  866. <div class="s-pgraph-container"><div class="s-pgraph-empty"></div><div class="s-pgraph-progress"></div></div><div class="s-pgraph-label">
  867.  
  868. skill 2 <!-- change the label skill 2 to whatever you want -->
  869.  
  870. </div></div></a>
  871.  
  872. &nbsp;
  873.  
  874. <!-- SKILL BAR THREE -->
  875. <a href="//suiomi.com" class="spc">
  876. <div class="s-pgraph p70"> <!-- Change the numbers to the percentage you want. Use only numbers by tens (0, 10, 20, ...). Don't forget to change the p# as well. Make sure both numbers are the same. -->
  877.  
  878.  
  879. <div class="s-pgraph-container"><div class="s-pgraph-empty"></div><div class="s-pgraph-progress"></div></div><div class="s-pgraph-label">
  880.  
  881. skill 3 <!-- change the label skill 3 to whatever you want -->
  882.  
  883. </div></div></a>
  884.  
  885.  
  886.  
  887. </div> <!-- end of skills tab -->
  888.  
  889. </div> <!-- end of right side tab -->
  890.  
  891.  
  892. </div> <!-- end of entire about tab -->
  893.  
  894.  
  895. <!-- FAQ + ASK / SUBMIT -->
  896. <div id="faq" class="tabcontent">
  897.  
  898.  
  899. <!-- faq answer format, just copy paste the code below for as many questions and answers as you could possibly want
  900.  
  901. <div class="quest">your question goes here</div><br>
  902. <div class="answ">your answer goes here</div>
  903.  
  904. -->
  905.  
  906. <div class="quest">question?</div><br>
  907. <div class="answ">answer.</div>
  908.  
  909. <div class="quest">can you follow me back?</div><br>
  910. <div class="answ">say sike.</div>
  911.  
  912. <div class="quest">can I remove your credit?</div><br>
  913. <div class="answ">i will hunt you down if you do.</div>
  914.  
  915. <!-- ask box
  916. change the YOURURLHERE to the url of the blog youre using this on
  917. -->
  918. <p><iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/isqhs.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe></p>
  919.  
  920. <!-- submit box
  921. change the YOURURLHERE to the url of the blog youre using this on
  922. -->
  923. <p><iframe frameborder="0" scrolling="no" width="100%" height="530" id="submit_form" src="https://www.tumblr.com/submit_form/isqhs.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe></p>
  924.  
  925. </div>
  926.  
  927.  
  928. <!-- LINKS
  929. use the following template for adding extra links
  930.  
  931. <a href="/">link one</a>
  932. <a href="/">link two</a>
  933. <a href="/">link three</a>
  934. <a href="/">link four</a>
  935. -->
  936.  
  937. <div id="links" class="tabcontent">
  938. <div class="linkcontent">
  939. <a href="/">link one</a>
  940. <a href="/">link two</a>
  941. <a href="/">link three</a>
  942. <a href="/">link four</a>
  943. <a href="/">link five</a>
  944. <a href="/">link six</a>
  945. <a href="/">link seven</a>
  946. <a href="/">link eight</a>
  947. <a href="/">link nine</a>
  948. <a href="/">link ten</a>
  949. </div>
  950. </div>
  951.  
  952.  
  953. <!-- TAGS -->
  954. <div id="tags" class="tabcontent">
  955.  
  956. <div class="main-content">
  957.  
  958. <!-- ok so i have already included 9 circles for you. Now, to edit the do the following:
  959.  
  960. - CHANGING TITLE OF YOUR CIRCLE
  961. look at where it says :
  962. <div class="titles">title</div>
  963.  
  964. and change the word 'title' to whatever you want!
  965.  
  966. !!!!! make sure it's just one line!!!!!!
  967.  
  968. CHANGING / ADDING TAGS
  969. you can add as many tags as you want btw the circle will add a scrollbar automatically if there are many tags!
  970.  
  971. to add another tags category, copy and paste this where you want:
  972.  
  973. <div class="circle">
  974. <div class="titles">title</div>
  975. <div class="tags">
  976. <ul>
  977. <li><a href="/">tag</a></li>
  978. <li><a href="/">tag</a></li>
  979. <li><a href="/">tag</a></li>
  980. </ul>
  981. </div>
  982. </div>
  983.  
  984. WHEN ADDING NEW TAGS DO NOT FORGET THE <li></li> OTHERWISE THEME WILL LOOK WEIRD
  985. -->
  986.  
  987. <div class="circle">
  988. <div class="titles">title</div>
  989. <div class="tags">
  990. <ul>
  991. <li><a href="/">tag</a></li>
  992. <li><a href="/">tag</a></li>
  993. <li><a href="/">tag</a></li>
  994. <li><a href="/">tag</a></li>
  995. <li><a href="/">tag</a></li>
  996. <li><a href="/">tag</a></li>
  997. <li><a href="/">tag</a></li>
  998. <li><a href="/">tag</a></li>
  999. <li><a href="/">tag</a></li>
  1000. <li><a href="/">tag</a></li>
  1001. <li><a href="/">tag</a></li>
  1002. </ul>
  1003. </div>
  1004. </div>
  1005.  
  1006. <div class="circle">
  1007. <div class="titles">title</div>
  1008. <div class="tags">
  1009. <ul>
  1010. <li><a href="/">tag</a></li>
  1011. <li><a href="/">tag</a></li>
  1012. <li><a href="/">tag</a></li>
  1013. <li><a href="/">tag</a></li>
  1014. <li><a href="/">tag</a></li>
  1015. <li><a href="/">tag</a></li>
  1016. <li><a href="/">tag</a></li>
  1017. <li><a href="/">tag</a></li>
  1018. <li><a href="/">tag</a></li>
  1019. <li><a href="/">tag</a></li>
  1020. <li><a href="/">tag</a></li>
  1021. </ul>
  1022. </div>
  1023. </div>
  1024.  
  1025. <div class="circle">
  1026. <div class="titles">title</div>
  1027. <div class="tags">
  1028. <ul>
  1029. <li><a href="/">tag</a></li>
  1030. <li><a href="/">tag</a></li>
  1031. <li><a href="/">tag</a></li>
  1032. <li><a href="/">tag</a></li>
  1033. <li><a href="/">tag</a></li>
  1034. <li><a href="/">tag</a></li>
  1035. <li><a href="/">tag</a></li>
  1036. <li><a href="/">tag</a></li>
  1037. <li><a href="/">tag</a></li>
  1038. <li><a href="/">tag</a></li>
  1039. <li><a href="/">tag</a></li>
  1040. </ul>
  1041. </div>
  1042. </div>
  1043.  
  1044. <div class="circle">
  1045. <div class="titles">title</div>
  1046. <div class="tags">
  1047. <ul>
  1048. <li><a href="/">tag</a></li>
  1049. <li><a href="/">tag</a></li>
  1050. <li><a href="/">tag</a></li>
  1051. <li><a href="/">tag</a></li>
  1052. <li><a href="/">tag</a></li>
  1053. <li><a href="/">tag</a></li>
  1054. <li><a href="/">tag</a></li>
  1055. <li><a href="/">tag</a></li>
  1056. <li><a href="/">tag</a></li>
  1057. <li><a href="/">tag</a></li>
  1058. <li><a href="/">tag</a></li>
  1059. </ul>
  1060. </div>
  1061. </div>
  1062.  
  1063. <div class="circle">
  1064. <div class="titles">title</div>
  1065. <div class="tags">
  1066. <ul>
  1067. <li><a href="/">tag</a></li>
  1068. <li><a href="/">tag</a></li>
  1069. <li><a href="/">tag</a></li>
  1070. <li><a href="/">tag</a></li>
  1071. <li><a href="/">tag</a></li>
  1072. <li><a href="/">tag</a></li>
  1073. <li><a href="/">tag</a></li>
  1074. <li><a href="/">tag</a></li>
  1075. <li><a href="/">tag</a></li>
  1076. <li><a href="/">tag</a></li>
  1077. <li><a href="/">tag</a></li>
  1078. </ul>
  1079. </div>
  1080. </div>
  1081.  
  1082. <div class="circle">
  1083. <div class="titles">title</div>
  1084. <div class="tags">
  1085. <ul>
  1086. <li><a href="/">tag</a></li>
  1087. <li><a href="/">tag</a></li>
  1088. <li><a href="/">tag</a></li>
  1089. <li><a href="/">tag</a></li>
  1090. <li><a href="/">tag</a></li>
  1091. <li><a href="/">tag</a></li>
  1092. <li><a href="/">tag</a></li>
  1093. <li><a href="/">tag</a></li>
  1094. <li><a href="/">tag</a></li>
  1095. <li><a href="/">tag</a></li>
  1096. <li><a href="/">tag</a></li>
  1097. </ul>
  1098. </div>
  1099. </div>
  1100.  
  1101. <div class="circle">
  1102. <div class="titles">title</div>
  1103. <div class="tags">
  1104. <ul>
  1105. <li><a href="/">tag</a></li>
  1106. <li><a href="/">tag</a></li>
  1107. <li><a href="/">tag</a></li>
  1108. <li><a href="/">tag</a></li>
  1109. <li><a href="/">tag</a></li>
  1110. <li><a href="/">tag</a></li>
  1111. <li><a href="/">tag</a></li>
  1112. <li><a href="/">tag</a></li>
  1113. <li><a href="/">tag</a></li>
  1114. <li><a href="/">tag</a></li>
  1115. <li><a href="/">tag</a></li>
  1116. </ul>
  1117. </div>
  1118. </div>
  1119.  
  1120. <div class="circle">
  1121. <div class="titles">title</div>
  1122. <div class="tags">
  1123. <ul>
  1124. <li><a href="/">tag</a></li>
  1125. <li><a href="/">tag</a></li>
  1126. <li><a href="/">tag</a></li>
  1127. <li><a href="/">tag</a></li>
  1128. <li><a href="/">tag</a></li>
  1129. <li><a href="/">tag</a></li>
  1130. <li><a href="/">tag</a></li>
  1131. <li><a href="/">tag</a></li>
  1132. <li><a href="/">tag</a></li>
  1133. <li><a href="/">tag</a></li>
  1134. <li><a href="/">tag</a></li>
  1135. </ul>
  1136. </div>
  1137. </div>
  1138.  
  1139. <div class="circle">
  1140. <div class="titles">title</div>
  1141. <div class="tags">
  1142. <ul>
  1143. <li><a href="/">tag</a></li>
  1144. <li><a href="/">tag</a></li>
  1145. <li><a href="/">tag</a></li>
  1146. <li><a href="/">tag</a></li>
  1147. <li><a href="/">tag</a></li>
  1148. <li><a href="/">tag</a></li>
  1149. <li><a href="/">tag</a></li>
  1150. <li><a href="/">tag</a></li>
  1151. <li><a href="/">tag</a></li>
  1152. <li><a href="/">tag</a></li>
  1153. <li><a href="/">tag</a></li>
  1154. </ul>
  1155. </div>
  1156. </div>
  1157.  
  1158. <!-- end of tag circles -->
  1159.  
  1160. </div> <!-- end of main content -->
  1161.  
  1162.  
  1163. </div> <!-- end of tags thing -->
  1164.  
  1165. <!-- BLOGROLL -->
  1166. <div id="blogroll" class="tabcontent">
  1167.  
  1168.  
  1169. {block:Following}
  1170. <div class="blogroll">
  1171. {block:Followed}
  1172. <div class="following">
  1173. <a title="{FollowedName}" href="{FollowedURL}"><img src="{FollowedPortraitURL-96}"></a>
  1174. </div>
  1175. {/block:Followed}
  1176. </div>
  1177. {/block:Following}
  1178.  
  1179.  
  1180. </div>
  1181.  
  1182.  
  1183.  
  1184.  
  1185. <!-- SOCIAL STUFF -->
  1186. <div id="socstuff" class="tabcontent">
  1187.  
  1188.  
  1189. <!-- TWITTER INSTA AND STUFF LINKS! GO TO SUIOMI.COM/HONEYBEE TO REPLACE ICONS WITH THE SOCIAL MEDIA ONES YOU WANT BUT LIMIT IT TO FIVE
  1190.  
  1191. IF you are going to use different icons, scroll up to social media css section and change the .th-icon-name thing to the name of your icon
  1192.  
  1193. -->
  1194. <div class="socialmedia">
  1195.  
  1196. <a href="https://instagram.com/"<span class="th th-instagram"></span></a>
  1197.  
  1198. <a href="https://twitter.com/"<span class="th th-twitter-o"></span></a>
  1199.  
  1200. <a href="https://www.spotify.com/"<span class="th th-spotify"></span></a>
  1201.  
  1202. <a href="https://github.com/"<span class="th th-github"></span></a>
  1203.  
  1204. <a href="https://www.discord.com"<span class="th th-discord"></span></a>
  1205.  
  1206. </div> <!-- end of social media icons -->
  1207.  
  1208.  
  1209. <!-- friends stuff
  1210.  
  1211. main template of url is this:
  1212.  
  1213. <a title="friends username here" href="/"><img src=""></a>
  1214.  
  1215. change friends username here to the username of your friend, NOT THE URL
  1216.  
  1217. put the blog url of your friend where the / is, dont remove the quotation marks
  1218.  
  1219. put an image url for the icon of your friend between the "" of img src. Image in preview is of Zendaya.
  1220.  
  1221. PLEASE LIMIT IT TO TEN FRIENDS !!!!!!!
  1222. -->
  1223. <div class="friendos">
  1224.  
  1225. <a title="friends username here" href="/"><img src="https://www.rap-up.com/app/uploads/2015/07/zendaya-square.jpg"></a>
  1226.  
  1227. <a title="friends username here" href="/"><img src="https://www.rap-up.com/app/uploads/2015/07/zendaya-square.jpg"></a>
  1228.  
  1229. <a title="friends username here" href="/"><img src="https://www.rap-up.com/app/uploads/2015/07/zendaya-square.jpg"></a>
  1230.  
  1231. <a title="friends username here" href="/"><img src="https://www.rap-up.com/app/uploads/2015/07/zendaya-square.jpg"></a>
  1232.  
  1233. <a title="friends username here" href="/"><img src="https://www.rap-up.com/app/uploads/2015/07/zendaya-square.jpg"></a>
  1234.  
  1235. <a title="friends username here" href="/"><img src="https://www.rap-up.com/app/uploads/2015/07/zendaya-square.jpg"></a>
  1236.  
  1237. <a title="friends username here" href="/"><img src="https://www.rap-up.com/app/uploads/2015/07/zendaya-square.jpg"></a>
  1238.  
  1239. <a title="friends username here" href="/"><img src="https://www.rap-up.com/app/uploads/2015/07/zendaya-square.jpg"></a>
  1240.  
  1241. <a title="friends username here" href="/"><img src="https://www.rap-up.com/app/uploads/2015/07/zendaya-square.jpg"></a>
  1242.  
  1243. <a title="friends username here" href="/"><img src="https://www.rap-up.com/app/uploads/2015/07/zendaya-square.jpg"></a>
  1244.  
  1245. <a title="friends username here" href="/"><img src="https://www.rap-up.com/app/uploads/2015/07/zendaya-square.jpg"></a>
  1246.  
  1247. <a title="friends username here" href="/"><img src="https://www.rap-up.com/app/uploads/2015/07/zendaya-square.jpg"></a>
  1248.  
  1249.  
  1250.  
  1251.  
  1252.  
  1253. </div>
  1254.  
  1255. <!-- text under the friends tab thing -->
  1256. <div class="friendostext">
  1257. friends and social media
  1258. </div>
  1259.  
  1260.  
  1261.  
  1262.  
  1263.  
  1264. </div>
  1265.  
  1266. <!-- end tab content -->
  1267.  
  1268. <!-- start tab javascript (to get individual tabs to open when clicked -->
  1269. <script>
  1270. function openCity(evt, cityName) {
  1271. var i, tabcontent, tablinks;
  1272. tabcontent = document.getElementsByClassName("tabcontent");
  1273. for (i = 0; i < tabcontent.length; i++) {
  1274. tabcontent[i].style.display = "none";
  1275. }
  1276. tablinks = document.getElementsByClassName("tablinks");
  1277. for (i = 0; i < tablinks.length; i++) {
  1278. tablinks[i].className = tablinks[i].className.replace(" active", "");
  1279. }
  1280. document.getElementById(cityName).style.display = "block";
  1281. evt.currentTarget.className += " active";
  1282. }
  1283.  
  1284. /* this renders the default about tab */
  1285. // Get the element with id="defaultOpen" and click on it
  1286. document.getElementById("defaultOpen").click();
  1287.  
  1288. </script>
  1289.  
  1290.  
  1291. </div> <!-- end container -->
  1292.  
  1293.  
  1294. <!-- credit, i will literally hunt you down if you remove this -->
  1295. <a title="made by amaanat themes" href="https://www.amaanat.tumblr.com" class="credit"><span class="th th-diamond-o"></span>
  1296. </a>
  1297.  
  1298. </body>
  1299.  
  1300. </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!