silbrigthemes

Koralle (Page #17)

Feb 5th, 2019 (edited)
958
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.04 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. KORALLE
  7. Theme #17 by silbrigthemes
  8.  
  9. A responsive about page, inspired by Pantone®'s color of the year 2019, Living Coral.
  10.  
  11. Rules:
  12.  
  13. 1) Do not steal (parts of) the code.
  14. 2) Do not redistribute on other websites.
  15. 3) Do not claim as your own.
  16. 4) Do not edit beyond recognition.
  17. 5) Do not alter or delete the credit.
  18.  
  19. Useful comments to this code have been made.
  20.  
  21. If you need any help for a problem that is not listed in the customization guide or where you cannot find a solution, feel free to send me a message via silbrigthemes.tumblr.com/ask or send a message to my official support blog, silbrigsupport.tumblr.com.
  22.  
  23. -->
  24.  
  25. <head>
  26.  
  27. <meta charset="utf-16">
  28. <!-- Change the title here! -->
  29. <title>{Title} | About</title>
  30. <link rel="shortcut icon" href="{Favicon}"/>
  31. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  32. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  33.  
  34. <!-- Necessary for the theme to be responsive. -->
  35. <meta name="viewport" content="width=device-width, initial-scale=1">
  36.  
  37. <!-- "Honeybee" icon font, by @themehive. -->
  38. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  39.  
  40. <!-- Necessary for the scripts to work. -->
  41. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  42.  
  43. <!-- Changes the toolbar color on mobile. -->
  44. <meta name="theme-color" content="#ff6f61"/>
  45.  
  46. <!-- Tooltip Script -->
  47. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  48. <script>
  49. (function($){
  50. $(document).ready(function(){
  51. $("[title]").style_my_tooltips({
  52. tip_follows_cursor:true,
  53. tip_delay_time:200,
  54. tip_fade_speed:300
  55. }
  56. );
  57. });
  58. })(jQuery);
  59. </script>
  60.  
  61. <!-- Custom title font. -->
  62. <!-- Josefin Sans -->
  63. <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700&amp;subset=latin-ext,vietnamese" rel="stylesheet">
  64.  
  65. <!-- Custom font. -->
  66. <!-- Open Sans -->
  67. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  68.  
  69. <!-- Other fonts. -->
  70. <!-- Roboto Mono -->
  71. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&amp;subset=cyrillic-ext,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  72. <!-- Cormorant Garamond -->
  73. <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
  74. <!-- Dancing Script -->
  75. <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
  76.  
  77. <style>
  78.  
  79. body{
  80. margin:0;
  81. top:0;
  82. left:0;
  83. text-align:justify; /* alt.: left, right, center */
  84. font-size:1em; /* 1em = 16px */
  85. color:#333; /* text color */
  86. background-color:#ff6f61;
  87. font-family:"Open Sans", Verdana;
  88. /* custom font, fallback */
  89. overflow-x:hidden; /* hides horizontal scroll */
  90. }
  91.  
  92. /* Custom Scrollbar */
  93. ::-webkit-scrollbar{
  94. width:10px; /* scrollbar width */
  95. background-color:#ff6f61; /* scrollbar background */
  96. border:4px solid white; /* scrollbar border */
  97. /* width line-type color */
  98. }
  99.  
  100. ::-webkit-scrollbar-thumb{
  101. width:10px; /* scrollbar thumb width */
  102. background-color:white; /* scrollbar thumb background */
  103. border:4px solid #ff6f61; /* scrollbar thumb border */
  104. /* width line-type color */
  105. }
  106.  
  107. /* Custom Text Selection */
  108. ::selection{
  109. background-color:#ff6f61; /* background color */
  110. color:white; /* text color */
  111. text-shadow:none; /* no text shadows */
  112. }
  113.  
  114. ::-moz-selection{
  115. background-color:#ff6f61;
  116. color:white;
  117. text-shadow:none;
  118. }
  119.  
  120. ::-o-selection{
  121. background-color:#ff6f61;
  122. color:white;
  123. text-shadow:none;
  124. }
  125.  
  126. ::-webkit-selection{
  127. background-color:#ff6f61;
  128. color:white;
  129. text-shadow:none;
  130. }
  131.  
  132. /* Custom Tooltips */
  133. #s-m-t-tooltip{
  134. max-width:300px;
  135. margin:15px;
  136. padding:0.5em;
  137. background-color: #ff6f61; /* tooltip background color */
  138. color:white; /* text color */
  139. border:2px solid white; /* tooltip border */
  140. /* width line-type color */
  141. z-index:9999999999999;
  142. /* places tooltip above other elements */
  143. font-size:12px; /* tooltip font-size */
  144. /* 4px smaller than global font-size */
  145. text-transform:uppercase; /* alt.: normal, lowercase */
  146. font-weight:300; /* alt.: 400 (normal), 700 (bold) */
  147. font-family:"Open Sans", Verdana;
  148. /* custom font, fallback */
  149. }
  150.  
  151. /* ––– START TEXT STYLES ––– */
  152.  
  153. /* Text Line */
  154. hr{
  155. width:80%;
  156. height:4px;
  157. border:none; /* no border */
  158. background-color:#ff6f61; /* hr background color */
  159. }
  160.  
  161. /* Underlined Text */
  162. u{
  163. text-decoration:none; /* no text-decoration */
  164. border-bottom:2px solid #333; /* replaces text-decoration */
  165. /* width line-type color */
  166. }
  167.  
  168. /* Empty Paragraphs */
  169. p:empty{
  170. display:none; /* hidden */
  171. }
  172.  
  173. /* Small Text */
  174. small{
  175. font-size:14px; /* 2px smaller than global font-size */
  176. }
  177.  
  178. /* Bold Text */
  179. b, strong{
  180. font-weight:bold;
  181. color:#555; /* text color */
  182. }
  183.  
  184. /* Italic Text */
  185. i, em{
  186. font-weight:300; /* thin text, alt.: 400 (normal) */
  187. font-style:italic;
  188. color:#111; /* text color */
  189. }
  190.  
  191. /* Marked Text */
  192. #long mark{
  193. background-color:#ff6f61; /* background color */
  194. color:white; /* text color */
  195. padding:2px 4px; /* top/bottom and left/right padding */
  196. }
  197.  
  198. /* Blockquote */
  199. blockquote{
  200. border-left:2px solid #ff6f61;
  201. border-top:2px solid #ff6f61;
  202. /* width line-type color */
  203. padding:2px 4px; /* top/bottom and left/right padding */
  204. }
  205.  
  206. /* Preformatted Text */
  207. pre{
  208. font-size:14px; /* font-size */
  209. font-family:"Roboto Mono", "Courier New", Courier;
  210. /* custom font, fallback, fallback */
  211. padding-left:0.25em;
  212. padding-top:0.125em;
  213. padding-right:0.25em;
  214. padding-bottom:0.125em;
  215. color:#ff6f61; /* text color */
  216. word-wrap:break-all;
  217. white-space:pre-wrap;
  218. /* important; breaks text instead of displaying it in a
  219. single line */
  220. }
  221.  
  222. /* LINKS */
  223. /* Link */
  224. a{
  225. color:#ff6f61; /* text color */
  226. border-bottom:2px solid #ff6f61;
  227. /* width line-type color */
  228. text-decoration:none; /* no text-decoration*/
  229. transition:0.5s;
  230. -moz-transition:0.5s;
  231. -o-transition:0.5s;
  232. -webkit-transition:0.5s;
  233. }
  234.  
  235. /* Link on Hover */
  236. a:hover{
  237. color:#ff2713; /* text color */
  238. border-bottom:2px solid #ff2713;
  239. /* width line-type color */
  240. transition:0.5s;
  241. -moz-transition:0.5s;
  242. -o-transition:0.5s;
  243. -webkit-transition:0.5s;
  244. }
  245.  
  246. /* LISTS */
  247. /* Ordered Lists */
  248. #long ol{
  249. list-style-type:decimal;
  250. /* alt.: upper-roman, lower-alpha, etc. pp. */
  251. }
  252.  
  253. /* Unordered Lists */
  254. #long ul{
  255. list-style-type:none; /* no list-style-type */
  256. /* if you want to change this to standard styles
  257. (e.g.: disc, square, circle), you can delete the CSS for #long ul li:before */
  258. }
  259.  
  260. #long ul li:before{
  261. content:"\ec79"; /* icon unicode */
  262. font-family:"honeybee"; /* icon font, by @suiomi */
  263. font-weight:300; /* thin, alt.: 400 (normal), 700 (bold) */
  264. color:#ff6f61; /* text color */
  265. position:relative;
  266. font-size:1em; /* same as global font-size */
  267. z-index:10!important;
  268. margin-right:0.25em;
  269. margin-left:-1.5em;
  270. /* margins are necessary for the correct placement */
  271. }
  272.  
  273. /* HEADINGS */
  274. /* First Heading */
  275. h1{
  276. font-size:1.5em; /* 1.5em = 24px */
  277. color:#ff6f61; /* text color */
  278. text-align:center; /* alt.: left, right, justify */
  279. }
  280.  
  281. /* Second Heading */
  282. h2{
  283. font-size:1.25em; /* 1.25em = 20px */
  284. border-bottom:4px solid #ff6f61;
  285. /* width line-type color */
  286. color:#333; /* text color */
  287. }
  288.  
  289. /* Third Heading */
  290. h3{
  291. font-size:1em; /* same as global font-size */
  292. font-weight:400; /* alt.: 300 (thin), 700 (bold) */
  293. border-bottom:2px solid #ff6f61;
  294. /* width line-type color */
  295. color:#333; /* text color */
  296. }
  297.  
  298. /* SPECIAL FONTS */
  299. /* Quirky Font */
  300. p.npf_quirky, span.npf_quirky{
  301. font-family: 'Dancing Script', cursive;
  302. font-size:1.5em; /* 1.5em = 24px */
  303. }
  304.  
  305. /* Chat Font */
  306. p.npf_chat, span.npf_chat{
  307. font-family:Courier;
  308. }
  309.  
  310. /* Quote Font */
  311. p.npf_quote, span.npf_quote{
  312. font-family:"Cormorant Garamond", "Palatino";
  313. font-size:1.5em; /* 1.5em = 24px */
  314. }
  315.  
  316. /* COLORED TEXT */
  317. /* Red Text */
  318. .npf_color_joey {
  319. color:#ff6f61; /* red text color */
  320. }
  321.  
  322. /* Orange Text */
  323. .npf_color_monica {
  324. color:#fdaf65; /* orange text color */
  325. }
  326.  
  327. /* Yellow Text */
  328. .npf_color_phoebe {
  329. color:#fcd419; /* yellow text color */
  330. }
  331.  
  332. /* Green Text */
  333. .npf_color_ross {
  334. color:#03c350; /* green text color */
  335. }
  336.  
  337. /* Blue Text */
  338. .npf_color_rachel {
  339. color:#6580fd; /* blue text color */
  340. }
  341.  
  342. /* Purple Text */
  343. .npf_color_chandler {
  344. color:#bc65fd; /* purple text color */
  345. }
  346.  
  347. /* Pink Text */
  348. .npf_color_niles {
  349. color:#fd65cc; /* pink text color */
  350. }
  351.  
  352. /* ––– END OF TEXT STYLES | START LAYOUT ––– */
  353.  
  354. /** CONTAINER **/
  355. /* Container */
  356. #about{
  357. width:60vw; /* vw = viewport width */
  358. height:80vh; /* vh = viewport height */
  359. margin-left:20vw; /* 20vw from left side */
  360. margin-top:10vh; /* 10vw from top */
  361. background-color:white; /* background color */
  362. border-radius:1em; /* rounded borders */
  363. }
  364.  
  365. /* Container Title */
  366. #a-title{
  367. font-size:2.5em; /* 2.5em = 40px */
  368. font-family:"Josefin Sans", Georgia;
  369. /* custom font, fallback */
  370. padding:16px 8px; /* top/bottom and left/right padding */
  371. text-align:center; /* alt.: left, right, justify */
  372. color:#ff6f61; /* text color */
  373. border-bottom:4px solid #ff6f61;
  374. /* width line-type color */
  375. }
  376.  
  377. /* Section 1 (Quick Info + Long Text) */
  378. #section-1{
  379. display:flex;
  380. }
  381.  
  382. /* QUICK INFORMATION */
  383. /* Container */
  384. #quick-info{
  385. width:calc(20vw - 1em);
  386. padding:8px;
  387. height:calc(70vh - 5.75em);
  388. }
  389.  
  390. /* Unordered List */
  391. #quick-info ul{
  392. list-style-type:none;
  393. }
  394.  
  395. /* List Elements */
  396. #quick-info li{
  397. margin-left:-2.25em;
  398. line-height:1.5em;
  399. }
  400.  
  401. /* Marked Text */
  402. #quick-info mark{
  403. background-color:#ff6f61; /* background color */
  404. color:white; /* text color */
  405. font-weight:bold; /* alt.: 300 (thin), normal */
  406. }
  407.  
  408. /* Icon */
  409. #icon img{
  410. width:64px;
  411. height:64px;
  412. border-radius:50%; /* circle */
  413. border:4px solid #ff6f61;
  414. /* width line-type color */
  415. margin-left:calc(10vw - 36px);
  416. }
  417.  
  418. /* LONG TEXT */
  419. #long{
  420. width:calc(40vw - 1em);
  421. padding:8px;
  422. max-height:calc(70vh - 5.75em);
  423. height:calc(70vh - 5.75em);
  424. overflow-y:scroll; /* scrolls if text gets too long */
  425. border-left:4px solid #ff6f61;
  426. /* width line-type color */
  427. }
  428.  
  429. /* NAVIGATION */
  430. /* Navigation Container */
  431. #navigation{
  432. height:10vh;
  433. border-top:4px solid #ff6f61;
  434. /* width line-type color */
  435. display:flex;
  436. align-items:center;
  437. justify-content:space-evenly;
  438. flex-wrap:wrap;
  439. }
  440.  
  441. /* Navigation Links */
  442. a.navlink{
  443. text-decoration:none; /* no text-decoration */
  444. border-bottom:none; /* no border */
  445. }
  446.  
  447. /* Navigation Bubble */
  448. .nav{
  449. width:36px;
  450. height:36px;
  451. background-color:white; /* background color */
  452. border:4px solid #ff6f61;
  453. /* width line-type color */
  454. border-radius:50%; /* circle */
  455. font-size:20px;
  456. margin:2px;
  457. color:#ff6f61; /* text color */
  458. display:flex;
  459. align-items:center;
  460. justify-content:center;
  461. transition:0.5s;
  462. -moz-transition:0.5s;
  463. -o-transition:0.5s;
  464. -webkit-transition:0.5s;
  465. /* ensures smooth transition */
  466. }
  467.  
  468. /* Navigation Bubble on Hover */
  469. .nav:hover{
  470. background-color:#ff6f61; /* background color */
  471. color:white; /* text color */
  472. transition:0.5s;
  473. -moz-transition:0.5s;
  474. -o-transition:0.5s;
  475. -webkit-transition:0.5s;
  476. }
  477.  
  478. /* ––– END OF LAYOUT | START CUSTOM CONTROLS ––– */
  479.  
  480. /** CUSTOM TUMBLR CONTROLS **/
  481. /* Hides standard tumblr controls */
  482. body > iframe:first-child {
  483. display: none !important;
  484. }
  485.  
  486. /* Container for controls */
  487. #big-box{
  488. width:240px;
  489. height:40px;
  490. top:1em; /* margin from top */
  491. right:1em; /* margin from right side */
  492. position:fixed; /* does not change position */
  493. z-index:999999!important;
  494. display:flex;
  495. align-items:center;
  496. justify-content:space-evenly;
  497. }
  498.  
  499. /* Control links */
  500. a.boxlink{
  501. text-decoration:none; /* no text-decoration */
  502. border-bottom:none; /* no border */
  503. box-shadow:none; /* no box-shadow */
  504. }
  505.  
  506. /* Control Bubble */
  507. .box{
  508. width:36px;
  509. height:36px;
  510. border-radius:50%; /* circle */
  511. border:2px solid white;
  512. /* width line-type color */
  513. color:white; /* text color */
  514. background-color:#ff6f61; /* background color */
  515. display:flex;
  516. align-items:center;
  517. justify-content:center;
  518. transition:0.5s;
  519. -moz-transition:0.5s;
  520. -o-transition:0.5s;
  521. -webkit-transition:0.5s;
  522. }
  523.  
  524. /* Control Bubble on Hover */
  525. .box:hover{
  526. background-color:white; /* background color */
  527. color:#ff6f61; /* text color */
  528. transition:0.5s;
  529. -moz-transition:0.5s;
  530. -o-transition:0.5s;
  531. -webkit-transition:0.5s;
  532. }
  533.  
  534. /* Hides the tumblr app button, by @yeoli-thm */
  535. .tmblr-iframe--app-cta-button {
  536. display: none!important;
  537. }
  538.  
  539. /* ––– END OF CUSTOM CONTROLS | START RESPONSIVE CODES ––– */
  540.  
  541. /* LARGE SCREENS */
  542. @media only screen and (min-width:900px){
  543. .m-box{
  544. display:none; /* hidden */
  545. }
  546.  
  547. a.m-boxlink{
  548. display:none; /* hidden */
  549. }
  550.  
  551. /* These lines hide the custom controls for tablets and
  552. phones on large screens. */
  553. }
  554.  
  555. /* RESPONSIVE LAYOUT FOR TABLETS */
  556. @media only screen and (max-width:900px){
  557. /* Container */
  558. #about{
  559. width:100vw;
  560. height:100vh;
  561. margin:0;
  562. border-radius:0;
  563. }
  564.  
  565. /* Quick Info Container */
  566. #quick-info{
  567. width:25%;
  568. height:auto;
  569. }
  570.  
  571. /* Long Text Container */
  572. #long{
  573. width:75%;
  574. height:75vh;
  575. max-height:75vh;
  576. }
  577.  
  578. /* Custom Tumblr Controls */
  579. #big-box{
  580. display:none; /* hidden */
  581. }
  582.  
  583. /* MOBILE CONTROLS */
  584. /* Mobile Controls Bubble */
  585. .m-box{
  586. width:36px;
  587. height:36px;
  588. background-color:white; /* background color */
  589. border:4px solid #ff6f61;
  590. /* width line-type color */
  591. border-radius:50%; /* circle */
  592. font-size:20px;
  593. margin:2px;
  594. color:#ff6f61; /* text color */
  595. display:flex;
  596. align-items:center;
  597. justify-content:center;
  598. transition:0.5s;
  599. -moz-transition:0.5s;
  600. -o-transition:0.5s;
  601. -webkit-transition:0.5s;
  602. }
  603.  
  604. /* Mobile Controls Bubble on Hover */
  605. .m-box:hover{
  606. background-color:#ff6f61; /* background color */
  607. color:white; /* text color */
  608. transition:0.5s;
  609. -moz-transition:0.5s;
  610. -o-transition:0.5s;
  611. -webkit-transition:0.5s;
  612. }
  613.  
  614. /* Mobile Controls Link */
  615. a.m-boxlink{
  616. border-bottom:none; /* no border */
  617. text-decoration:none; /* no text decoration */
  618. }
  619. }
  620.  
  621. /* RESPONSIVE LAYOUT FOR (SMART)PHONES */
  622. @media only screen and (max-width:650px){
  623. /* Container */
  624. #about{
  625. min-height:100vh;
  626. height:auto;
  627. }
  628.  
  629. /* Section (Quick Info + Long Text) */
  630. #section-1{
  631. flex-direction:column;
  632. }
  633.  
  634. /* Quick Info Container */
  635. #quick-info{
  636. width:100%;
  637. }
  638.  
  639. /* Long Text Container */
  640. #long{
  641. border-left:none; /* no border */
  642. border-top:4px solid #ff6f61;
  643. /* width line-type color */
  644. width:100%;
  645. height:auto;
  646. overflow-y:hidden;
  647. }
  648.  
  649. /* Navigation Container */
  650. #navigation{
  651. height:auto;
  652. }
  653.  
  654. /* Icon */
  655. #icon img{
  656. margin-left:calc(50vw - 36px);
  657. }
  658. }
  659.  
  660. </style>
  661. </head>
  662.  
  663. <body>
  664.  
  665. <!-- CONTAINER -->
  666. <div id="about">
  667.  
  668. <!-- CONTAINER TITLE -->
  669. <div id="a-title">About Me!</div>
  670. <!-- SECTION 1 -->
  671.  
  672. <div id="section-1">
  673.  
  674. <!-- QUICK INFO CONTAINER -->
  675. <div id="quick-info">
  676. <!-- Icon -->
  677. <div id="icon">
  678. <!-- Change icon image here! -->
  679. <img src="https://66.media.tumblr.com/a19829918f8a1b80b927b14a777b21da/tumblr_pe2p4mneUx1wsskx3o2_r1_1280.jpg" alt="user icon">
  680. </div>
  681. <!-- Title -->
  682. <h1>Quick Info</h1> <!-- change title here -->
  683. <ul>
  684. <li><mark>Name:</mark> <!-- your name here | not your full name! --> </li>
  685. <li><mark>Age:</mark> <!-- your age here --> </li>
  686. <li><mark>Birthday:</mark> <!-- your birthdate here --> </li>
  687. <li><mark>Location:</mark> <!-- your location here | keep it vague! --> </li>
  688. <li><mark>Languages:</mark> <!-- languages you speak here --> </li>
  689. <li><mark>Likes:</mark> <!-- your likes here --> </li>
  690. <li><mark>Dislikes:</mark> <!-- your dislikes here --> </li>
  691. <!-- add other info or delete some, it's your choice! -->
  692. </ul>
  693. </div> <!-- / end quick info container -->
  694.  
  695. <!-- LONG TEXT CONTAINER -->
  696. <div id="long">
  697. <h1><!-- put a title here --></h1>
  698. <p>
  699. <!-- go wild! write whatever you want here! -->
  700. </p>
  701. </div> <!-- / end long text container -->
  702. </div> <!-- / end section 1 container -->
  703.  
  704. <!-- NAVIGATION CONTAINER -->
  705. <div id="navigation">
  706. <!-- Index Link -->
  707. <a href="/" title="return to index" class="navlink">
  708. <div class="nav">
  709. <span class="th th-home-o"></span>
  710. </div>
  711. </a>
  712.  
  713. <!-- Ask Link -->
  714. <!-- Only visible if ask is enabled. -->
  715. {block:AskEnabled}
  716. <a href="/ask" title="{AskLabel}" class="navlink">
  717. <div class="nav">
  718. <span class="th th-envelope-o"></span>
  719. </div>
  720. </a>
  721. {/block:AskEnabled}
  722.  
  723. <!-- Submissions Link -->
  724. <!-- Only visible if submissions are enabled. -->
  725. {block:SubmissionsEnabled}
  726. <a href="/submit" title="{SubmitLabel}" class="navlink">
  727. <div class="nav">
  728. <span class="th th-paper-plane-o"></span>
  729. </div>
  730. </a>
  731. {/block:SubmissionsEnabled}
  732.  
  733. <!-- Archive Link -->
  734. <a href="/archive" title="browse archive" class="navlink">
  735. <div class="nav">
  736. <span class="th th-box-2-o"></span>
  737. </div>
  738. </a>
  739.  
  740. <!-- First Custom Link -->
  741. <!-- change link and title here -->
  742. <a href="/" title="custom link 1" class="navlink">
  743. <div class="nav">
  744. <!-- change icon here -->
  745. <span class="th th-link"></span>
  746. </div>
  747. </a>
  748.  
  749. <!-- Second Custom Link -->
  750. <!-- change link and title here -->
  751. <a href="/" title="custom link 2" class="navlink">
  752. <div class="nav">
  753. <!-- change icon here -->
  754. <span class="th th-link"></span>
  755. </div>
  756. </a>
  757.  
  758. <!-- Third Custom Link -->
  759. <!-- change link and title here -->
  760. <a href="/" title="custom link 3" class="navlink">
  761. <div class="nav">
  762. <!-- change icon here -->
  763. <span class="th th-link"></span>
  764. </div>
  765. </a>
  766.  
  767. <!-- Credit -->
  768. <!-- If you delete this, you will be blocked and
  769. reported. -->
  770. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="navlink">
  771. <div class="nav">
  772. <span class="th th-code"></span>
  773. </div>
  774. </a>
  775.  
  776. <!-- MOBILE CONTROLS -->
  777. <!-- Link takes visitors back to dashboard. -->
  778. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="m-boxlink">
  779. <div class="m-box">
  780. <span class="th th-tumblr-o"></span>
  781. </div>
  782. </a>
  783.  
  784. <!-- Link takes visitors to dashboard to send you a
  785. message. -->
  786. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="m-boxlink">
  787. <div class="m-box">
  788. <span class="th th-chat-bubble-o"></span>
  789. </div>
  790. </a>
  791.  
  792. <!-- Link takes you to the customization panel. -->
  793. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize page" class="m-boxlink">
  794. <div class="m-box">
  795. <span class="th th-pencil-o"></span>
  796. </div>
  797. </a>
  798.  
  799. <!-- Link takes you to your blog's settings. -->
  800. <a href="https://www.tumblr.com/settings/blog/{Name}" title="change settings" class="m-boxlink">
  801. <div class="m-box">
  802. <span class="th th-settings-o"></span>
  803. </div>
  804. </a>
  805.  
  806. <!-- Link takes visitors to a page where they can follow
  807. your blog. -->
  808. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="m-boxlink">
  809. <div class="m-box">
  810. <span class="th th-plus-1-o"></span>
  811. </div>
  812. </a>
  813. </div>
  814. </div>
  815.  
  816. <!-- CUSTOM TUMBLR CONTROLS -->
  817. <!-- Same links as the ones in the mobile controls. -->
  818. <div id="big-box">
  819. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="boxlink">
  820. <div class="box">
  821. <span class="th th-tumblr-o"></span>
  822. </div>
  823. </a>
  824.  
  825. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="boxlink">
  826. <div class="box">
  827. <span class="th th-chat-bubble-o"></span>
  828. </div>
  829. </a>
  830.  
  831. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize page" class="boxlink">
  832. <div class="box">
  833. <span class="th th-pencil-o"></span>
  834. </div>
  835. </a>
  836.  
  837. <a href="https://www.tumblr.com/settings/blog/{Name}" title="change settings" class="boxlink">
  838. <div class="box">
  839. <span class="th th-settings-o"></span>
  840. </div>
  841. </a>
  842.  
  843. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="boxlink">
  844. <div class="box">
  845. <span class="th th-plus-1-o"></span>
  846. </div>
  847. </a>
  848. </div>
  849.  
  850. </body>
  851. </html>
Advertisement
Add Comment
Please, Sign In to add comment