API tools faq
paste
Advertisement
silbrigthemes

Himmel (Page #21)

silbrigthemes
Oct 6th, 2019
697
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.69 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. HIMMEL
  7. Page #21 by silbrigthemes
  8.  
  9. This responsive about page matches with Leben | Chai (Theme #18).
  10.  
  11. ----------
  12.  
  13. Rules:
  14.  
  15. 1) Do not use as base code.
  16. 2) Do not customize beyond recognition.
  17. 3) Do not steal (parts of) the code.
  18. 4) Do not claim as your own.
  19. 5) Do not delete or alter the credit.
  20.  
  21. ----------
  22.  
  23. Useful comments to this code have been made.
  24.  
  25. If you need any help, feel free to send me a message via silbrigthemes.tumblr.com/ask or send a message to my official support blog, silbrigsupport.tumblr.com.
  26.  
  27. Have fun!
  28.  
  29. Love,
  30. Julia <3
  31.  
  32. ----------
  33.  
  34. Note:
  35.  
  36. This work is protected by a creative commons
  37. Attribution-NonCommercial-NoDerivatives 4.0 International
  38. (CC BY-NC-ND 4.0)
  39. license.
  40.  
  41. -->
  42.  
  43. <head>
  44.  
  45. <meta charset="utf-16">
  46. <title>{Title} | About</title>
  47. {block:Description}
  48. <meta name="description" content="{MetaDescription}" />
  49. {/block:Description}
  50. <link rel="shortcut icon" href="{Favicon}"/>
  51. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  52. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  53.  
  54. <!-- Necessary for the theme to be responsive. -->
  55. <meta name="viewport" content="width=device-width, initial-scale=1">
  56.  
  57. <!-- Necessary for the scripts to work. -->
  58. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  59.  
  60. <!-- Icon font, by fontawesome -->
  61. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  62.  
  63. <!-- Changes the toolbar color on mobile. -->
  64. <meta name="theme-color" content="#6791db"/>
  65.  
  66. <!-- Tooltip Script -->
  67. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  68. <script>
  69. (function($){
  70. $(document).ready(function(){
  71. $("[title]").style_my_tooltips({
  72. tip_follows_cursor:true,
  73. tip_delay_time:200,
  74. tip_fade_speed:300
  75. }
  76. );
  77. });
  78. })(jQuery);
  79. </script>
  80.  
  81. <!-- Custom Font -->
  82. <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700&display=swap&subset=cyrillic,hebrew,latin-ext" rel="stylesheet">
  83.  
  84. <style>
  85.  
  86. body{
  87. margin:0;
  88. top:0;
  89. left:0;
  90. font-size:18px; /* font size */
  91. font-family:"Rubik", Verdana; /* font family */
  92. color:#333; /* text color */
  93. background-color:#e0edf9; /* background color */
  94. overflow-x:hidden;
  95. text-align:justify; /* alt.: left */
  96. /*
  97. background-image:url("IMAGE URL HERE");
  98. background-attachment:fixed;
  99. background-size:cover;
  100. background-position:center center;
  101. */
  102. }
  103.  
  104. /* CUSTOM SCROLLBAR */
  105. ::-webkit-scrollbar{
  106. width:10px;
  107. background-color:white; /* background color */
  108. border-radius:9px;
  109. }
  110.  
  111. ::-webkit-scrollbar-thumb{
  112. width:10px;
  113. background-color:#c8dff7; /* background color */
  114. border-radius:5px; /* round corners */
  115. }
  116.  
  117. /* CUSTOM TEXT SELECTION */
  118. /* Text Selection */
  119. ::selection{
  120. background-color:#6791db; /* background color */
  121. color:#fff; /* text color */
  122. }
  123.  
  124. /* Mozilla Firefox */
  125. ::-moz-selection{
  126. background-color:#6791db; /* background color */
  127. color:#fff; /* text color */
  128. }
  129.  
  130. /* Opera */
  131. ::-o-selection{
  132. background-color:#6791db; /* background color */
  133. color:#fff; /* text color */
  134. }
  135.  
  136. /* Chrome */
  137. ::-webkit-selection{
  138. background-color:#6791db; /* background color */
  139. color:#fff; /* text color */
  140. }
  141.  
  142. /* Custom Tooltips */
  143. #s-m-t-tooltip{
  144. max-width:300px;
  145. margin:15px;
  146. padding:0.5em;
  147. background-color:#e0edf9; /* background color */
  148. color:#306bac; /* text color */
  149. z-index:9999999999999;
  150. font-size:12px; /* font size */
  151. text-transform:uppercase; /* alt.: normal, lowercase */
  152. font-weight:300; /* alt.: 400 (normal), 700 (bold) */
  153. font-family:"Rubik", Verdana; /* font family, fallback */
  154. border-radius:1em; /* rounded corners */
  155. }
  156.  
  157. /* TEXT STYLES */
  158. /* Bold Text */
  159. b, strong{
  160. font-weight:bold;
  161. color:#555; /* text color */
  162. }
  163.  
  164. /* Italic Text */
  165. i, em{
  166. font-weight:300; /* alt.: 400 (normal), 700 (bold) */
  167. font-style:italic;
  168. color:#111; /* text color */
  169. }
  170.  
  171. /* Marked Text */
  172. mark{
  173. color:#333; /* text color */
  174. background-color:#e0edf9; /* background color */
  175. padding:0 0.25em;
  176. border-radius:1em; /* rounded corners */
  177. }
  178.  
  179. /* Underlined Text */
  180. u{
  181. text-decoration:none;
  182. border-bottom:2px solid #333; /* height type color */
  183. }
  184.  
  185. /* Small Text */
  186. small{
  187. font-size:calc(1em - 4px); /* font-size */
  188. }
  189.  
  190. /* Preformatted Text */
  191. pre{
  192. word-wrap:break-all;
  193. white-space:pre-wrap;
  194. background-color:#e0edf9; /* background color */
  195. padding:0.75em 1em;
  196. margin-left:-1em;
  197. margin-right:-1em;
  198. border-top:1px solid #c8dff7; /* height type color */
  199. border-bottom:1px solid #c8dff7; /* height type color */
  200. }
  201.  
  202. /* Blockquote */
  203. blockquote{
  204. border-left:4px solid #306bac; /* height type color */
  205. background-color:#c8dff7; /* background color */
  206. padding:0.5em 1em;
  207. border-radius:0 0.5em 0.5em 0; /* rounded corners */
  208. }
  209.  
  210. /* Text Line */
  211. hr{
  212. width:80%;
  213. height:4px;
  214. background-color:#e0edf9; /* background color */
  215. border:none;
  216. border-radius:4px; /* rounded corners */
  217. box-shadow:0 8px #c8dff7; /* to left, to top, color */
  218. }
  219.  
  220. /* Empty Paragraphs */
  221. p:empty{
  222. display:none;
  223. }
  224.  
  225. /* LISTS */
  226. /* Ordered List */
  227. ol{
  228. list-style-type:decimal;
  229. /* alt.: lower roman, lower alpha, etc. pp. */
  230. }
  231.  
  232. /* Unordered List */
  233. ul{
  234. list-style-type:none;
  235. }
  236.  
  237. /* List Element */
  238. ul li{
  239. margin-left:-1.25em;
  240. }
  241.  
  242. /* Icon Before List Elements */
  243. ul li:before{
  244. font-family:"Font Awesome\ 5 Free";
  245. content:"\f0c2"; /* add unicode to change icon */
  246. font-weight:700;
  247. font-size:calc(1em - 4px);
  248. position:relative;
  249. margin-right:6px;
  250. color:#306bac; /* text color */
  251. }
  252.  
  253. /* Even list elements */
  254. li:nth-child(even){
  255. color:#999; /* text color */
  256. }
  257.  
  258. /* Odd List Elements */
  259. li:nth-child(odd){
  260. color:#333; /* text color */
  261. }
  262.  
  263. /* LINKS */
  264. /* Link */
  265. a{
  266. text-decoration:none;
  267. border-bottom:2px solid #6791db; /* height type color */
  268. color:#6791db; /* text color */
  269. }
  270.  
  271. /* Link on Hover */
  272. a:hover{
  273. text-decoration:none;
  274. border-bottom:2px solid #306bac; /* height type color */
  275. color:#306bac; /* text color */
  276. }
  277.  
  278. /* Transitions */
  279. a, a:hover{
  280. transition:0.5s;
  281. -moz-transition:0.5s;
  282. -o-transition:0.5s;
  283. -webkit-transition:0.5s;
  284. }
  285.  
  286. /* HEADINGS */
  287. /* First Heading */
  288. h1{
  289. font-size:1.75em; /* font-size */
  290. border-bottom:2px solid #6791db; /* height type color */
  291. color:#6791db; /* text color */
  292. font-weight:400; /* alt.: 300 (thin), 700 (bold) */
  293. }
  294.  
  295. /* Second Heading */
  296. h2{
  297. font-size:1.5em; /* font-size */
  298. border-bottom:2px solid #306bac; /* height type color */
  299. color:#306bac; /* text color */
  300. font-weight:300; /* alt.: 400 (normal), 700 (bold) */
  301. }
  302.  
  303. /* Third Heading */
  304. h3{
  305. font-size:1.25em; /* font-size */
  306. border-bottom:2px dashed #6791db; /* height type color */
  307. color:#6791db; /* text color */
  308. }
  309.  
  310. h1 b, h1 strong, h3 b, h3 strong{
  311. color:#82a5e1; /* text color */
  312. }
  313.  
  314. h1 i, h1 em, h3 i, h3 em{
  315. color:#5577b4; /* text color */
  316. }
  317.  
  318. /* Fourth Heading */
  319. h4{
  320. font-size:1em; /* font-size */
  321. border-bottom:2px dashed #306bac; /* height type color */
  322. color:#306bac; /* text color */
  323. }
  324.  
  325. h2 b, h2 strong, h4 b, h4 strong{
  326. color:#5585bb; /* text color */
  327. }
  328.  
  329. h2 i, h2 em, h4 i, h4 em{
  330. color:#28588d; /* text color */
  331. }
  332.  
  333. /* Fifth Heading */
  334. h5{
  335. font-size:calc(1em - 2px); /* font-size */
  336. background-color:#6791db; /* background color */
  337. }
  338.  
  339. /* Sixth Heading */
  340. h6{
  341. font-size:calc(1em - 4px); /* font-size */
  342. background-color:#306bac; /* background color */
  343. }
  344.  
  345. h5, h6{
  346. padding:0.25em 0.5em;
  347. color:#f9fcff; /* text color */
  348. }
  349.  
  350. h5 b, h5 strong, h6 b, h6 strong{
  351. color:#e5f2ff; /* text color */
  352. }
  353.  
  354. h5 i, h5 em, h6 i, h6 em{
  355. color:#fbfdff; /* text color */
  356. }
  357.  
  358. /* COLORED TEXT */
  359. /* Red Text */
  360. .npf_color_joey {
  361. color:#f15156!important; /* text color */
  362. }
  363.  
  364. /* Orange Text */
  365. .npf_color_monica {
  366. color:#f19c51!important; /* text color */
  367. }
  368.  
  369. /* Yellow Text */
  370. .npf_color_phoebe {
  371. color:#f1d251!important; /* text color */
  372. }
  373.  
  374. /* Green Text */
  375. .npf_color_ross {
  376. color:#19e312!important; /* text color */
  377. }
  378.  
  379. /* Blue Text */
  380. .npf_color_rachel {
  381. color:#518bf1!important; /* text color */
  382. }
  383.  
  384. /* Purple Text */
  385. .npf_color_chandler {
  386. color:#9c51f1!important; /* text color */
  387. }
  388.  
  389. /* Pink Text */
  390. .npf_color_niles {
  391. color:#f151a6!important; /* text color */
  392. }
  393.  
  394. /* –– END TEXT STYLES || START LAYOUT –– */
  395.  
  396. /* BUBBLES */
  397. #bubble1, #bubble2, #bubble3, #bubble4{
  398. position:fixed;
  399. border-radius:50%; /* rounded corners */
  400. z-index:-100!important;
  401. }
  402.  
  403. /* Large Bubble, Top Left */
  404. #bubble1{
  405. top:-250px;
  406. left:-100px;
  407. width:400px;
  408. height:400px;
  409. background-color:#f9fcff; /* background color */
  410. background-image:url("https://66.media.tumblr.com/45aed361cf13da925c613966fed4ae29/tumblr_pqoxykOdiM1qa6y0bo1_1280.jpg");
  411. background-size:cover;
  412. }
  413.  
  414. /* Large Bubble, Bottom Right */
  415. #bubble2{
  416. width:300px;
  417. height:300px;
  418. background-color:#c8dff7; /* background color */
  419. bottom:-150px;
  420. right:-100px;
  421. background-image:url("https://66.media.tumblr.com/45aed361cf13da925c613966fed4ae29/tumblr_pqoxykOdiM1qa6y0bo1_1280.jpg");
  422. background-size:cover;
  423. }
  424.  
  425. /* Small Bubble, Top Left */
  426. #bubble3{
  427. width:200px;
  428. height:200px;
  429. left:-120px;
  430. top:50px;
  431. background-color:#c8dff7; /* background color */
  432. /*
  433. background-image:url("IMAGE URL GOES HERE");
  434. background-size:cover;
  435. */
  436. }
  437.  
  438. /* Small Bubble, Bottom Right */
  439. #bubble4{
  440. width:150px;
  441. height:150px;
  442. right:150px;
  443. bottom:-100px;
  444. background-color:#f9fcff; /* background color */
  445. /*
  446. background-image:url("IMAGE URL GOES HERE");
  447. background-size:cover;
  448. */
  449. }
  450.  
  451. /* GRID */
  452. /* Grid Container */
  453. #grid{
  454. width:calc(50vw + 2 * 18px);
  455. margin-top:calc((100vh - (57.5vh + 88px + 72px)) / 2);
  456. margin-left:calc(25vw - 2 * 18px);
  457. display:grid;
  458. grid-template-columns:126px calc(20vw - 126px) 30vw;
  459. grid-column-gap:18px;
  460. grid-template-rows:12.5vh 45vh 88px;
  461. grid-row-gap:18px;
  462. padding:18px;
  463. background-color:#6791db; /* background color */
  464. border-radius:18px; /* rounded corners */
  465. }
  466.  
  467. /* Title */
  468. #g-title{
  469. padding:18px;
  470. font-size:3em; /* font-size */
  471. color:#306bac; /* text color */
  472. text-align:center; /* alt.: left */
  473. grid-rows:1/2;
  474. grid-column-start:1;
  475. grid-column-end:4;
  476. background-color:white; /* background color */
  477. border-radius:9px; /* rounded corners */
  478. }
  479.  
  480. /* Quick Info */
  481. #short-info{
  482. padding:18px;
  483. background-color:white; /* background color */
  484. border-radius:9px; /* rounded corners */
  485. grid-row-start:2;
  486. grid-row-end:3;
  487. grid-column-start:1;
  488. grid-column-end:3;
  489. }
  490.  
  491. /* Quick Info Title */
  492. #si-title{
  493. font-size:1.5em; /* font-size */
  494. text-align:center; /* alt.: left */
  495. color:#306bac; /* text color */
  496. margin-bottom:8px;
  497. }
  498.  
  499. /* Table Columns */
  500. td{
  501. vertical-align:top;
  502. padding-right:8px;
  503. border-bottom:1px solid #c8dff7; /* height style color */
  504. }
  505.  
  506. td:nth-child(odd){
  507. font-weight:bold; /* left column has bold text */
  508. }
  509.  
  510. /* About Section */
  511. #about{
  512. padding:18px;
  513. background-color:white; /* background color */
  514. border-radius:9px; /* rounded corners */
  515. grid-row-start:2;
  516. grid-row-end:4;
  517. grid-columns:2/3;
  518. overflow-y:scroll; /* scrolls for vertical overflow */
  519. }
  520.  
  521. /* Navigation */
  522. #navigation{
  523. grid-rows:3/4;
  524. grid-columns:1/2;
  525. display:flex;
  526. align-items:space-between;
  527. justify-content:space-between;
  528. flex-wrap:wrap;
  529. }
  530.  
  531. /* Navigation Link */
  532. a.navlink{
  533. border-bottom:none;
  534. margin-bottom:0;
  535. }
  536.  
  537. /* Navigation Element */
  538. .nav{
  539. width:36px;
  540. height:36px;
  541. background-color:white; /* background color */
  542. border-radius:9px; /* rounded corners */
  543. display:flex;
  544. align-items:center;
  545. justify-content:center;
  546. }
  547.  
  548. /* Navigation Element on Hover */
  549. .nav:hover{
  550. transform:scale(1.05); /* increase size */
  551. }
  552.  
  553. /* Transitions */
  554. .nav, .nav:hover{
  555. transition:0.5s;
  556. -moz-transition:0.5s;
  557. -o-transition:0.5s;
  558. -webkit-transition:0.5s;
  559. }
  560.  
  561. /* Small Text Field */
  562. #image{
  563. background-color:white; /* background color */
  564. border-radius:9px; /* rounded corners */
  565. display:flex;
  566. align-items:center;
  567. justify-content:center;
  568. color:#306bac; /* text color */
  569. text-align:center; /* alt.: left, justify, right */
  570. padding:18px;
  571. }
  572.  
  573. /* CREDIT */
  574. /* Don't touch! */
  575. #credit{
  576. position:fixed;
  577. bottom:18px;
  578. left:18px;
  579. }
  580.  
  581. /* Control Element */
  582. .s-nav{
  583. width:36px;
  584. height:36px;
  585. border-radius:50%; /* rounded corners */
  586. background-color:#f9fcff; /* background color */
  587. color:#6791db; /* text color */
  588. font-size:calc(1em - 4px); /* font-size */
  589. display:flex;
  590. align-items:center;
  591. justify-content:center;
  592. }
  593.  
  594. /* Control Element on Hover */
  595. .s-nav:hover{
  596. transform:scale(1.05); /* increase size */
  597. cursor:pointer;
  598. color:#306bac; /* text color */
  599. }
  600.  
  601. /* Transitions */
  602. .s-nav, .s-nav:hover{
  603. transition:0.5s;
  604. -moz-transition:0.5s;
  605. -o-transition:0.5s;
  606. -webkit-transition:0.5s;
  607. }
  608.  
  609. /* Control Link */
  610. a.s-link{
  611. border-bottom:none;
  612. }
  613.  
  614. /* CUSTOM CONTROLS */
  615. /* Hides standard tumblr controls */
  616. body > iframe:first-child {
  617. display: none !important;
  618. }
  619.  
  620. /* Container */
  621. #custom-controls{
  622. width:calc(36px * 5 + 8px * 4);
  623. position:fixed;
  624. right:18px;
  625. top:18px;
  626. z-index:1000!important;
  627. display:flex;
  628. align-items:center;
  629. justify-content:space-between;
  630. }
  631.  
  632. /* –– END LAYOUT || START RESPONSIVE LAYOUT –– */
  633.  
  634. @media only screen and (min-width:800px){
  635. /* Mobile Footer */
  636. #mb-footer{
  637. display:none;
  638. }
  639.  
  640. /* About Section Title */
  641. #a-title{
  642. display:none;
  643. }
  644. }
  645.  
  646. /* RESPONSIVE LAYOUT | TABLETS */
  647. @media only screen and (max-width:800px){
  648. /* Grid Container */
  649. #grid{
  650. width:calc(80vw + 2 * 18px);
  651. margin-top:calc((100vh - (57.5vh + 88px + 72px)) / 2);
  652. margin-left:calc(10vw - 2 * 18px);
  653. grid-template-columns:126px calc(35vw - 126px) 45vw;
  654. }
  655.  
  656. /* Grid Title */
  657. #g-title{
  658. display:flex;
  659. align-items:center;
  660. justify-content:center;
  661. }
  662. }
  663.  
  664. @media only screen and (min-width:450px){
  665. /* Mobile Footer */
  666. #mb-footer{
  667. display:none;
  668. }
  669.  
  670. /* About Section Title */
  671. #a-title{
  672. display:none;
  673. }
  674. }
  675.  
  676. /* RESPONSIVE LAYOUT | PHONES */
  677. @media only screen and (max-width:450px){
  678. /* Bubbles */
  679. #bubble1, #bubble2, #bubble3, #bubble4{
  680. display:none;
  681. }
  682.  
  683. /* Grid Container */
  684. #grid{
  685. display:block;
  686. margin-left:0;
  687. margin-top:0;
  688. background-color:transparent;
  689. padding:0;
  690. width:100vw;
  691. margin-bottom:10vh;
  692. }
  693.  
  694. /* About Section Title */
  695. #a-title{
  696. font-size:1.5em; /* font-size */
  697. text-align:center; /* alt.: left */
  698. color:#306bac; /* text color */
  699. background-color:white; /* background color */
  700. }
  701.  
  702. /* Grid Title, Quick Info, About Section */
  703. #g-title, #short-info, #about{
  704. border-radius:0;
  705. }
  706.  
  707. /* Navigation, Small Text Field */
  708. #navigation, #image{
  709. display:none;
  710. }
  711.  
  712. /* MOBILE FOOTER */
  713. #mb-footer{
  714. position:fixed;
  715. width:100vw;
  716. height:10vh;
  717. margin-left:0;
  718. margin-bottom:0;
  719. left:0;
  720. bottom:0;
  721. border-radius:0;
  722. border:none;
  723. background-color:#c8dff7; /* background color */
  724. display:flex;
  725. align-items:center;
  726. justify-content:space-between;
  727. }
  728.  
  729. /* Mobile Footer Navigation */
  730. .mbf-nav{
  731. height:10vh;
  732. width:20vw;
  733. background-color:inherit; /* background color */
  734. color:#6791db; /* text color */
  735. display:flex;
  736. align-items:center;
  737. justify-content:center;
  738. }
  739.  
  740. .mbfn2{
  741. background-color:#6791db; /* background color */
  742. color:#c8dff7; /* text color */
  743. }
  744.  
  745. /* Mobile Footer Navigation Icon */
  746. .mbf-nav span{
  747. font-size:1em; /* font size */
  748. }
  749.  
  750. /* Mobile Footer Navigation on Hover */
  751. .mbf-nav:hover{
  752. color:#3264ba; /* text color */
  753. cursor:pointer;
  754. }
  755.  
  756. .mbfn2:hover{
  757. background-color:#3264ba; /* background color */
  758. color:#c8dff7; /* text color */
  759. }
  760.  
  761. /* Transitions */
  762. .mbf-nav, .mbf-nav:hover{
  763. transition:0.5s;
  764. -moz-transition:0.5s;
  765. -o-transition:0.5s;
  766. -webkit-transition:0.5s;
  767. }
  768.  
  769. /* Mobile Footer Navigation Link */
  770. a.mbf-link{
  771. border-bottom:none;
  772. }
  773.  
  774. /* Credit, Custom Controls */
  775. #credit, #custom-controls{
  776. display:none;
  777. }
  778. }
  779.  
  780. </style>
  781. </head>
  782.  
  783. <body>
  784.  
  785. <!-- GRID -->
  786. <div id="grid">
  787. <!-- Grid Title -->
  788. <div id="g-title">Title</div>
  789. <!-- Quick Info -->
  790. <div id="short-info">
  791. <!-- Quick Info Title -->
  792. <div id="si-title">Quick Info</div>
  793. <table>
  794. <tr>
  795. <td>Name:</td>
  796. <td>…</td>
  797. </tr>
  798. <tr>
  799. <td>Age:</td>
  800. <td>…</td>
  801. </tr>
  802. <tr>
  803. <td>Location:</td>
  804. <td>…</td>
  805. </tr>
  806. <tr>
  807. <td>Occupation:</td>
  808. <td>…</td>
  809. </tr>
  810. <tr>
  811. <td>Likes:</td>
  812. <td>…</td>
  813. </tr>
  814. <tr>
  815. <td>Dislikes:</td>
  816. <td>…</td>
  817. </tr>
  818. </table>
  819. </div> <!-- // end quick info -->
  820. <!-- About Section Title | mobile only -->
  821. <div id="a-title">About Me</div>
  822. <!-- About Section -->
  823. <div id="about">
  824. long description here
  825. </div> <!-- // end about section -->
  826. <!-- Navigation -->
  827. <div id="navigation">
  828. <!-- Index Link -->
  829. <a href="/" title="home" class="navlink">
  830. <div class="nav">
  831. <span class="fas fa-home"></span>
  832. </div>
  833. </a>
  834. <!-- Ask Link -->
  835. <a href="/ask" title="{AskLabel}" class="navlink">
  836. <div class="nav">
  837. <span class="fas fa-envelope"></span>
  838. </div>
  839. </a>
  840. <!-- Archive Link -->
  841. <a href="/archive" title="browse archive" class="navlink">
  842. <div class="nav">
  843. <span class="fas fa-archive"></span>
  844. </div>
  845. </a>
  846. <!-- Custom Link 1 -->
  847. <a href="/" title="custom link 1" class="navlink">
  848. <div class="nav">
  849. <span class="fas fa-link"></span>
  850. </div>
  851. </a>
  852. <!-- Custom Link 2 -->
  853. <a href="/" title="custom link 2" class="navlink">
  854. <div class="nav">
  855. <span class="fas fa-link"></span>
  856. </div>
  857. </a>
  858. <!-- Custom Link 3 -->
  859. <a href="/" title="custom link 3" class="navlink">
  860. <div class="nav">
  861. <span class="fas fa-link"></span>
  862. </div>
  863. </a>
  864. </div> <!-- // end navigation -->
  865. <!-- Small Text Field -->
  866. <div id="image">
  867. small text here
  868. </div>
  869. </div> <!-- // end grid -->
  870.  
  871. <!-- /// END GRID || START MOBILE FOOTER /// -->
  872.  
  873. <!-- MOBILE FOOTER -->
  874. <div id="mb-footer">
  875. <!-- Archive Link -->
  876. <a href="/archive" title="browse archive" class="mbf-link">
  877. <div class="mbf-nav mbfn1">
  878. <span class="fas fa-archive"></span>
  879. </div>
  880. </a>
  881. <!-- Ask Link -->
  882. <a href="/ask" title="{AskLabel}" class="mbf-link">
  883. <div class="mbf-nav mbfn2">
  884. <span class="fas fa-envelope"></span>
  885. </div>
  886. </a>
  887. <!-- Index -->
  888. <a href="/" title="index" class="mbf-link">
  889. <div class="mbf-nav mbfn1">
  890. <span class="fas fa-home"></span>
  891. </div>
  892. </a>
  893. <!-- Tumblr Dashboard -->
  894. <a href="https://www.tumblr.com/dashboard" title="tumblr dashboard" class="mbf-link">
  895. <div class="mbf-nav mbfn2">
  896. <span class="fab fa-tumblr"></span>
  897. </div>
  898. </a>
  899. <!-- Theme Credit -->
  900. <!-- Don't touch! -->
  901. <a href="https://silbrigthemes.tumblr.com/" title="theme credit" class="mbf-link">
  902. <div class="mbf-nav mbfn1">
  903. <span class="fas fa-code"></span>
  904. </div>
  905. </a>
  906. </div> <!-- // end mobile footer -->
  907.  
  908. <!-- /// END MOBILE FOOTER || START BUBBLES /// -->
  909.  
  910. <!-- BUBBLES -->
  911. <div id="bubble1"></div>
  912. <div id="bubble2"></div>
  913. <div id="bubble3"></div>
  914. <div id="bubble4"></div>
  915.  
  916. <!-- /// END BUBBLES || START CUSTOM CONTROLS /// -->
  917.  
  918. <!-- CUSTOM CONTROLS -->
  919. <div id="custom-controls">
  920. <!-- Dashboard Link -->
  921. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="s-link">
  922. <div class="s-nav">
  923. <span class="fab fa-tumblr" aria-hidden="true"></span>
  924. </div>
  925. </a>
  926. <!-- Message -->
  927. <!-- Takes people to dashboard to send you a message. -->
  928. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="s-link">
  929. <div class="s-nav">
  930. <span class="fas fa-comment-dots" aria-hidden="true"></span>
  931. </div>
  932. </a>
  933. <!-- Customize -->
  934. <!-- Takes you, the blog owner, to the customization. -->
  935. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize theme" class="s-link">
  936. <div class="s-nav">
  937. <span class="fas fa-palette" aria-hidden="true"></span>
  938. </div>
  939. </a>
  940. <!-- Settings -->
  941. <!-- Takes you to your blog's settings. -->
  942. <a href="https://www.tumblr.com/settings/blog/{Name}" title="change settings" class="s-link">
  943. <div class="s-nav">
  944. <span class="fas fa-cog" aria-hidden="true"></span>
  945. </div>
  946. </a>
  947. <!-- Follow -->
  948. <!-- Takes people to a page so that they can follow you. -->
  949. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="s-link">
  950. <div class="s-nav">
  951. <span class="fas fa-plus" aria-hidden="true"></span>
  952. </div>
  953. </a>
  954. </div> <!-- // end custom controls -->
  955.  
  956. <!-- /// END CUSTOM CONTROLS || START CREDIT /// -->
  957.  
  958. <!-- CREDIT -->
  959. <!-- Don't touch! -->
  960. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="s-link">
  961. <div class="s-nav" id="credit">
  962. <span class="fas fa-code"></span>
  963. </div>
  964. </a>
  965.  
  966. </body>
  967. </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!