API tools faq
paste
silbrigthemes

Messenger (Page 29)

silbrigthemes
Mar 18th, 2020
1,633
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.23 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. MESSENGER
  7. Page #29 by silbrigthemes
  8.  
  9. Messenger is a responsive page inspired by messenger apps.
  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. 6) Do not redistribute to other sites.
  21.  
  22. ----------
  23.  
  24. Useful comments to this code have been made.
  25.  
  26. If you need any help for a problem , feel free to send me a message via silbrigthemes.tumblr.com/ask or send a message to my official support blog, silbrigsupport.tumblr.com.
  27.  
  28. Have fun!
  29.  
  30. Love,
  31. Julia <3
  32.  
  33. ----------
  34.  
  35. Note:
  36.  
  37. This work is protected by a creative commons
  38. Attribution-NonCommercial-NoDerivatives 4.0 International
  39. (CC BY-NC-ND 4.0)
  40. license.
  41.  
  42. -->
  43.  
  44. <head>
  45.  
  46. <meta charset="utf-16">
  47. <title>{Title} | Messenger</title> <!-- {Title} is your blog title. Change after the "|". -->
  48. <link rel="shortcut icon" href="{Favicon}"/>
  49. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  50. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  51.  
  52. <!-- Changes the toolbar color on mobile. -->
  53. <meta name="theme-color" content="#aa20f9"/>
  54.  
  55. <!-- Necessary for the theme to be responsive. -->
  56. <meta name="viewport" content="width=device-width, initial-scale=1">
  57.  
  58. <!-- Icon font, by fontawesome -->
  59. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  60.  
  61. <!-- Necessary for the scripts to work. -->
  62. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  63.  
  64. <!-- Body Font | Open Sans -->
  65. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  66.  
  67. <!-- Title Font | Raleway -->
  68. <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap&subset=latin-ext" rel="stylesheet">
  69.  
  70. <!-- OTHER FONTS -->
  71. <!-- Cormorant Garamond -->
  72. <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400,700&amp;subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  73. <!-- Dancing Script -->
  74. <link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700&amp;subset=latin-ext,vietnamese" rel="stylesheet">
  75. <!-- Roboto Mono -->
  76. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  77.  
  78.  
  79. <style>
  80.  
  81. body{
  82. margin:0;
  83. top:0;
  84. left:0;
  85. background-color:#aa20f9; /* background color */
  86. background:linear-gradient(to bottom right, #204bf9, #f920a6); /* gradient background: direction, first color, second color */
  87. background-attachment:fixed;
  88. font-size:1em; /* font size */
  89. color:#222; /* text color */
  90. font-family:"Open Sans", Verdana; /* font family */
  91. overflow-x:hidden;
  92. text-align:justify; /* alt.: left */
  93. }
  94.  
  95. /* Custom Scrollbar */
  96. ::-webkit-scrollbar{
  97. width:10px;
  98. }
  99.  
  100. ::-webkit-scrollbar-thumb{
  101. width:10px;
  102. background-color:#aa20f9; /* background color */
  103. background:linear-gradient(to bottom, #204bf9, #f920a6);
  104. /* gradient background: direction, first color, second color */
  105. border-radius:5px; /* rounded corners */
  106. }
  107.  
  108. /* Custom Text Selection */
  109. ::selection{
  110. background-color:#aa20f9; /* background color */
  111. color:#fff; /* text color */
  112. }
  113.  
  114. ::-moz-selection{
  115. background-color:#aa20f9; /* background color */
  116. color:#fff; /* text color */
  117. }
  118.  
  119. ::-o-selection{
  120. background-color:#aa20f9; /* background color */
  121. color:#fff; /* text color */
  122. }
  123.  
  124. ::-webkit-selection{
  125. background-color:#aa20f9; /* background color */
  126. color:#fff; /* text color */
  127. }
  128.  
  129. /* Custom Tooltips */
  130. .tippy-tooltip.messenger-theme {
  131. background-color:#aa20f9; /* background color */
  132. background:linear-gradient(to bottom right, #204bf9, #f920a6); /* gradient background: direction, first color, second color */
  133. color:#fff; /* text color */
  134. box-shadow:0 0 4px #aa20f9;
  135. /* left-offset top-offset blur color */
  136. text-transform:lowercase;
  137. /* alt.: normal, capitalize, uppercase */
  138. }
  139.  
  140. /* ––– END GENERAL | START TEXT STYLES ––– */
  141.  
  142. /* Bold Text */
  143. b, strong{
  144. color:#444; /* text color */
  145. font-weight:bold;
  146. font-weight:700;
  147. }
  148.  
  149. /* Italic Text */
  150. i, em{
  151. color:#000; /* text color */
  152. font-weight:300; /* light text, alt.: 400 */
  153. font-style:italic;
  154. }
  155.  
  156. /* Marked Text */
  157. #about mark, #faq mark{
  158. background-color:#aa20f9; /* background color */
  159. background:linear-gradient(to bottom right, #204bf9, #f920a6); /* gradient background: direction, first color, second color */
  160. color:#fff; /* text color */
  161. padding:0 4px;
  162. border-radius:4px; /* rounded corners */
  163. }
  164.  
  165. /* Preformatted Text */
  166. pre{
  167. background-color:#aa20f9; /* background color */
  168. color:#fff; /* text color */
  169. font-family:"Roboto Mono", Courier; /* font-family */
  170. font-size:calc(1em - 2px);
  171. word-wrap:break-all;
  172. white-space:pre-wrap;
  173. padding:1em;
  174. }
  175.  
  176. /* Small Text */
  177. small{
  178. font-size:calc(1em - 4px);
  179. }
  180.  
  181. /* Underlined Text */
  182. u{
  183. text-decoration:none;
  184. border-bottom:2px solid #222; /* width style color */
  185. }
  186.  
  187. /* Blockquote */
  188. blockquote{
  189. border-left:4px solid #aa20f9; /* width style color */
  190. padding-left:1em;
  191. }
  192.  
  193. /* Embedded Media */
  194. img, iframe{
  195. max-width:100%;
  196. height:auto;
  197. }
  198.  
  199. /* Empty Paragraphs */
  200. p:empty{
  201. display:none;
  202. }
  203.  
  204. /* Text Line */
  205. hr{
  206. width:80%;
  207. height:4px;
  208. border-radius:2px; /* rounded corners */
  209. background-color:#aa20f9; /* background color */
  210. background:linear-gradient(to right, #204bf9, #f920a6);
  211. /* gradient background: direction, first color, second color */
  212. box-shadow:0 0 2px #aa20f9;
  213. /* left-offset top-offset blur color */
  214. border:none;
  215. }
  216.  
  217. /* LINKS */
  218. /* Link */
  219. a{
  220. color:#204bf9; /* text color */
  221. border-bottom:2px solid #204bf9; /* width style color */
  222. text-decoration:none;
  223. }
  224.  
  225. /* Link | Hover */
  226. a:hover{
  227. color:#f920a6; /* text color */
  228. border-bottom:2px solid #f920a6; /* width style color */
  229. }
  230.  
  231. /* Link | Transitions */
  232. a, a:hover{
  233. transition:0.5s;
  234. -moz-transition:0.5s;
  235. -o-transition:0.5s;
  236. -webkit-transition:0.5s;
  237. }
  238.  
  239. /* LISTS */
  240. /* Ordered Lists */
  241. ol{
  242. list-style-type:decimal;
  243. }
  244.  
  245. /* Unordered Lists */
  246. ul{
  247. list-style-type:disc;
  248. }
  249.  
  250. /* COLORED TEXT */
  251. /* Red Text */
  252. .npf_color_joey {
  253. color:#f92020; /* text color */
  254. }
  255.  
  256. /* Needed due to the background colors of question and answer.
  257. This keeps the readability. */
  258. .question .npf_color_joey, .answer .npf_color_joey{
  259. color:#ff0000; /* text color */
  260. }
  261.  
  262. /* Orange Text */
  263. .npf_color_monica {
  264. color:#f96c20; /* text color */
  265. }
  266.  
  267. /* Needed due to the background colors of question and answer.
  268. This keeps the readability. */
  269. .question .npf_color_monica, .answer .npf_color_monica{
  270. color:#ff7700; /* text color */
  271. }
  272.  
  273. /* Yellow Text */
  274. .npf_color_phoebe {
  275. color:#f9c320; /* text color */
  276. }
  277.  
  278. /* Needed due to the background colors of question and answer.
  279. This keeps the readability. */
  280. .question .npf_color_phoebe, .answer .npf_color_phoebe{
  281. color:#ffff00; /* text color */
  282. }
  283.  
  284. /* Green Text */
  285. .npf_color_ross {
  286. color:#37e21d; /* text color */
  287. }
  288.  
  289. /* Needed due to the background colors of question and answer.
  290. This keeps the readability. */
  291. .question .npf_color_ross, .answer .npf_color_ross{
  292. color:#00b100; /* text color */
  293. }
  294.  
  295. /* Blue Text */
  296. .npf_color_rachel {
  297. color:#204bf9; /* text color */
  298. }
  299.  
  300. /* Needed due to the background colors of question and answer.
  301. This keeps the readability. */
  302. .question .npf_color_rachel, .answer .npf_color_rachel{
  303. color:#008fff; /* text color */
  304. }
  305.  
  306. /* Purple Text */
  307. .npf_color_chandler {
  308. color:#aa20f9; /* text color */
  309. }
  310.  
  311. /* Needed due to the background colors of question and answer.
  312. This keeps the readability. */
  313. .question .npf_color_chandler, .answer .npf_color_chandler{
  314. color:#8848e9; /* text color */
  315. }
  316.  
  317. /* Pink Text */
  318. .npf_color_niles {
  319. color:#f920a6; /* text color */
  320. }
  321.  
  322. /* Needed due to the background colors of question and answer.
  323. This keeps the readability. */
  324. .question .npf_color_niles, .answer .npf_color_niles{
  325. color:#ff48ea; /* text color */
  326. }
  327.  
  328. /* SPECIAL FONTS */
  329. /* Quirky Font */
  330. .npf_quirky{
  331. font-family: "Dancing Script", cursive;
  332. font-size:1.5em;
  333. }
  334.  
  335. /* Chat Font */
  336. .npf_chat{
  337. font-family:"Roboto Mono", Courier;
  338. }
  339.  
  340. /* Quote Font */
  341. .npf_quote{
  342. font-family:"Cormorant Garamond", "Palatino";
  343. font-size:1.25em;
  344. }
  345.  
  346. /* HEADINGS */
  347. /* First Heading */
  348. h1{
  349. font-size:1.75em;
  350. border-bottom:2px solid #f920a6; /* width style color */
  351. }
  352.  
  353. /* Second Heading */
  354. h2{
  355. font-size:1.5em;
  356. border-bottom:2px solid #aa20f9; /* width style color */
  357. }
  358.  
  359. /* Third Heading */
  360. h3{
  361. font-size:1.25em;
  362. border-bottom:2px solid #204bf9; /* width style color */
  363. }
  364.  
  365. /* Fourth Heading */
  366. h4{
  367. font-size:1em;
  368. background-color:#f920a6; /* background color */
  369. }
  370.  
  371. /* Fifth Heading */
  372. h5{
  373. font-size:calc(1em - 2px);
  374. background-color:#aa20f9; /* background color */
  375. }
  376.  
  377. /* Sixth Heading */
  378. h6{
  379. font-size:calc(1em - 4px);
  380. background-color:#204bf9; /* background color */
  381. }
  382.  
  383. /* All Headings */
  384. h1, h2, h3{
  385. color:#222; /* text color */
  386. font-family:"Raleway", Verdana; /* font family */
  387. }
  388.  
  389. h1, h3, h5{
  390. font-weight:400; /* 400 = normal */
  391. }
  392.  
  393. h2, h4, h6{
  394. font-weight:300; /* 300 = light */
  395. }
  396.  
  397. h4, h5, h6{
  398. text-transform:uppercase;
  399. /* alt.: normal, lowercase, capitalize */
  400. color:#fff; /* text color */
  401. padding:4px 8px;
  402. }
  403.  
  404. /* ––– END TEXT STYLES | START LAYOUT ––– */
  405.  
  406. /* GRID CONTAINER */
  407. #grid{
  408. width:calc(90vw - 2em);
  409. height:80vh;
  410. margin-left:calc(5vw);
  411. margin-top:calc(10vh - 1em);
  412. padding:1em;
  413. display:grid;
  414. grid-template-columns:calc(30vw - 2em) calc(30vw - 2em) calc(30vw - 2em);
  415. grid-column-gap:2em;
  416. }
  417.  
  418. /* SECTIONS */
  419. #about, #faq, #blogroll{
  420. border-radius:1em; /* rounded corners */
  421. background-color:#fff; /* background color */
  422. padding:1em;
  423. overflow-y:scroll;
  424. }
  425.  
  426. /* ABOUT */
  427. #about{
  428. grid-column-start:1;
  429. grid-column-end:2;
  430. display:flex;
  431. align-items:center;
  432. justify-content:center;
  433. flex-direction:column;
  434. }
  435.  
  436. /* About | Icon */
  437. #ab-icon img{
  438. width:128px;
  439. height:128px;
  440. border-radius:50%; /* round */
  441. }
  442.  
  443. /* About | Title */
  444. #ab-title{
  445. font-size:2em;
  446. font-family:"Raleway", Verdana; /* font family */
  447. font-weight:bold;
  448. margin-bottom:8px;
  449. margin-top:8px;
  450. }
  451.  
  452. /* About | Text */
  453. #ab-text{
  454. max-height:40vh;
  455. overflow:auto;
  456. padding-right:1em;
  457. }
  458.  
  459. /* About | Links */
  460. #ab-links{
  461. margin-top:16px;
  462. width:100%;
  463. display:flex;
  464. align-items:center;
  465. justify-content:space-between;
  466. }
  467.  
  468. /* -- Links */
  469. a.ablinks{
  470. border-bottom:none;
  471. }
  472.  
  473. /* -- Link Element */
  474. .ablink{
  475. width:36px;
  476. height:36px;
  477. border-radius:4px; /* rounded corners */
  478. font-size:calc(1em - 2px);
  479. background-color:#fff; /* background color */
  480. background:linear-gradient(to top left, #fff, #fff);
  481. /* gradient background: direction, first color, second color */
  482. background: -webkit-linear-gradient(#204bf9, #f920a6);
  483. /* gradient text: first color, second color */
  484. -webkit-background-clip: text;
  485. -webkit-text-fill-color: transparent;
  486. box-shadow:0 0 4px #aa20f9;
  487. /* left-offset top-offset blur color */
  488. display:flex;
  489. align-items:center;
  490. justify-content:center;
  491. }
  492.  
  493. /* -- Link Element | Hover */
  494. .ablink:hover{
  495. transform:scale(1.05) rotate(5deg); /* increase tilt */
  496. }
  497.  
  498. /* -- Link Element | Transitions */
  499. .ablink, .ablink:hover{
  500. transition:0.5s;
  501. -moz-transition:0.5s;
  502. -o-transition:0.5s;
  503. -webkit-transition:0.5s;
  504. }
  505.  
  506. /* FAQ */
  507. #faq{
  508. grid-column-start:2;
  509. grid-column-end:3;
  510. }
  511.  
  512. /* Question */
  513. .question{
  514. max-width:80%;
  515. background-color:#cfd7f9; /* background color */
  516. padding:4px 8px;
  517. border-radius:0 8px 8px 8px;
  518. /* top-left top-right bottom-right bottom-left */
  519. }
  520.  
  521. /* Answer */
  522. .answer{
  523. max-width:80%;
  524. background-color:#f9cfe9; /* background color */
  525. padding:4px 8px;
  526. border-radius:8px 0 8px 8px;
  527. /* top-left top-right bottom-right bottom-left */
  528. margin-top:8px;
  529. margin-left:calc(20% - 16px);
  530. margin-bottom:8px;
  531. }
  532.  
  533. /* Answer | Last One */
  534. .answer:last-child{
  535. margin-bottom:0;
  536. }
  537.  
  538. /* BLOGROLL */
  539. #blogroll{
  540. grid-column-start:3;
  541. grid-column-end:4;
  542. }
  543.  
  544. /* Followed Blog */
  545. .fllw{
  546. padding:1em;
  547. width:calc(100% - 2em);
  548. margin-top:8px;
  549. margin-bottom:8px;
  550. border-radius:8px;
  551. display:flex;
  552. align-items:center;
  553. justify-content:flex-start;
  554. }
  555.  
  556. /* Followed Blog | First One */
  557. .fllw:first-child{
  558. margin-top:0;
  559. }
  560.  
  561. /* Followed Blog | Last One */
  562. .fllw:last-child{
  563. margin-bottom:0;
  564. }
  565.  
  566. /* Followed Blog | Each One */
  567. .fllw:nth-child(n){
  568. background-color:#f9cfe9; /* background color */
  569. }
  570.  
  571. /* Followed Blog | Every Second (2nd) One */
  572. .fllw:nth-child(2n){
  573. background-color:#eacff9; /* background color */
  574. }
  575.  
  576. /* Followed Blog | Every Third (3rd) One */
  577. .fllw:nth-child(3n){
  578. background-color:#cfd7f9; /* background color */
  579. }
  580.  
  581. /* –– Blog Icon */
  582. .fllw-icon img{
  583. width:48px;
  584. height:48px;
  585. margin-right:8px;
  586. border-radius:50%; /* round */
  587. }
  588.  
  589. /* -- Blog Icon | Each One */
  590. .fllw:nth-child(n) .fllw-icon img{
  591. border:4px solid #f920a6; /* width style color */
  592. }
  593.  
  594. /* -- Blog Icon | Every Second (2nd) One */
  595. .fllw:nth-child(2n) .fllw-icon img{
  596. border:4px solid #aa20f9; /* width style color */
  597. }
  598.  
  599. /* -- Blog Icon | Every Third (3rd) One */
  600. .fllw:nth-child(3n) .fllw-icon img{
  601. border:4px solid #204bf9; /* width style color */
  602. }
  603.  
  604. /* -- Follow Link */
  605. a.fllw-link{
  606. border-bottom:none;
  607. }
  608.  
  609. /* -- Blog Title */
  610. .fllw-title{
  611. font-size:1.25em;
  612. font-weight:bold;
  613. font-family:"Raleway", Verdana; /* font family */
  614. margin-bottom:4px;
  615. color:#222; /* text color */
  616. }
  617.  
  618. /* -- Blog Title | Each Element | Hover */
  619. .fllw:nth-child(n) .fllw-title:hover{
  620. color:#f920a6; /* text color */
  621. }
  622.  
  623. /* -- Blog Title | Every Second (2nd) Element | Hover */
  624. .fllw:nth-child(2n) .fllw-title:hover{
  625. color:#aa20f9; /* text color */
  626. }
  627.  
  628. /* -- Blog Title | Every Third (3rd) Element | Hover */
  629. .fllw:nth-child(3n) .fllw-title:hover{
  630. color:#204bf9; /* text color */
  631. }
  632.  
  633. /* -- Blog Title | Transitions */
  634. .fllw-title, .fllw-title:hover{
  635. transition:0.5s;
  636. -moz-transition:0.5s;
  637. -o-transition:0.5s;
  638. -webkit-transition:0.5s;
  639. }
  640.  
  641. /* -- Username */
  642. .fllw-name{
  643. word-break:break-all;
  644. }
  645.  
  646. /* -- Username | Mark */
  647. .fllw mark{
  648. color:#fff; /* text color */
  649. padding:4px 8px;
  650. border-radius:4px; /* rounded corners */
  651. font-size:calc(1em - 2px);
  652. line-height:2em;
  653. }
  654.  
  655. /* -- Username | Mark | Each One */
  656. .fllw:nth-child(n) mark{
  657. background-color:#f920a6; /* background color */
  658. }
  659.  
  660. /* -- Username | Mark | Each Second (2nd) One */
  661. .fllw:nth-child(2n) mark{
  662. background-color:#aa20f9; /* background color */
  663. }
  664.  
  665. /* -- Username | Mark | Each Third (3rd One) */
  666. .fllw:nth-child(3n) mark{
  667. background-color:#204bf9; /* background color */
  668. }
  669.  
  670. /* -- Username | Mark | Hover */
  671. .fllw mark:hover{
  672. background-color:#fff; /* background color */
  673. }
  674.  
  675. /* -- Username | Mark | Hover | Each One */
  676. .fllw:nth-child(n) mark:hover{
  677. color:#f920a6; /* text color */
  678. }
  679.  
  680. /* -- Username | Mark | Hover | Each Second (2nd) One */
  681. .fllw:nth-child(2n) mark:hover{
  682. color:#aa20f9; /* text color */
  683. }
  684.  
  685. /* -- Username | Mark | Hover | Each Third (3rd One) */
  686. .fllw:nth-child(3n) mark:hover{
  687. color:#204bf9; /* text color */
  688. }
  689.  
  690. /* -- Username | Mark | Transitions */
  691. .fllw mark, .fllw mark:hover{
  692. transition:0.5s;
  693. -moz-transition:0.5s;
  694. -o-transition:0.5s;
  695. -webkit-transition:0.5s;
  696. }
  697.  
  698. /* ––– END LAYOUT | START EXTRAS ––– */
  699.  
  700. /* Hides standard tumblr controls */
  701. body > iframe:first-child {
  702. display: none !important;
  703. }
  704.  
  705. /* CUSTOM CONTROLS */
  706. #custom-controls{
  707. width:calc(4 * 36px + 3 * 8px);
  708. height:36px;
  709. position:fixed;
  710. top:8px;
  711. right:8px;
  712. display:flex;
  713. align-items:center;
  714. justify-content:space-between;
  715. }
  716.  
  717. /* CREDIT */
  718. /* Do not touch! */
  719. #cd{
  720. position:fixed;
  721. bottom:8px;
  722. left:8px;
  723. }
  724.  
  725. /* Control Element */
  726. .cont{
  727. width:36px;
  728. height:36px;
  729. border-radius:4px; /* rounded corners */
  730. font-size:calc(1em - 2px);
  731. background-color:#aa20f9; /* background color */
  732. background:linear-gradient(to top left, #204bf9, #f920a6);
  733. /* gradient background: direction, first color, second color */
  734. color:#fff; /* text color */
  735. box-shadow:0 0 4px 1px #aa20f9;
  736. /* left-offset top-offset blur spread color */
  737. display:flex;
  738. align-items:center;
  739. justify-content:center;
  740. }
  741.  
  742. /* Control Element | Hover */
  743. .cont:hover{
  744. transform:scale(1.05) rotate(5deg); /* increase tilt */
  745. }
  746.  
  747. /* Control Element | Transitions */
  748. .cont, .cont:hover{
  749. transition:0.5s;
  750. -moz-transition:0.5s;
  751. -o-transition:0.5s;
  752. -webkit-transition:0.5s;
  753. }
  754.  
  755. /* Control Link */
  756. a.conlink{
  757. border-bottom:none;
  758. }
  759.  
  760. /* Hides the tumblr app button, by @yeoli-thm */
  761. .tmblr-iframe--app-cta-button {
  762. display:none!important;
  763. }
  764.  
  765. /* ––– END EXTRAS | START RESPONSIVE LAYOUT ––– */
  766.  
  767. /* LARGE SCREENS (DESKTOP) */
  768. @media only screen and (min-width: 800px){
  769. /* Mobile Footer */
  770. #mobile-footer{
  771. display:none;
  772. }
  773. }
  774.  
  775. /* SMALL SCREENS (TABLET, PHONE) */
  776. @media only screen and (max-width:800px){
  777. /* Custom Scrollbar */
  778. ::-webkit-scrollbar{
  779. width:10px;
  780. background-color:#aa20f9; /* background color */
  781. background:linear-gradient(to bottom, #204bf9, #f920a6);
  782. /* gradient background: direction, first color, second color */
  783. }
  784.  
  785. ::-webkit-scrollbar-thumb{
  786. width:10px;
  787. background-color:#fff!important; /* background color */
  788. background:#fff; /* background color */
  789. border-radius:5px; /* rounded corners */
  790. }
  791.  
  792. /* GRID CONTAINER */
  793. #grid{
  794. display:block;
  795. margin-top:1em;
  796. }
  797.  
  798. /* SECTIONS */
  799. #about, #faq, #blogroll{
  800. margin-bottom:2em;
  801. height:auto;
  802. overflow-y:auto;
  803. overflow-x:hidden;
  804. }
  805.  
  806. /* BLOGROLL */
  807. #blogroll{
  808. margin-bottom:calc(10vh + 2em);
  809. }
  810.  
  811. /* ABOUT */
  812. /* About Icon */
  813. #ab-icon img{
  814. width:96px;
  815. height:96px;
  816. }
  817.  
  818. /* About Text */
  819. #ab-text{
  820. max-height:none;
  821. }
  822.  
  823. /* CUSTOM CONTROLS, CREDIT */
  824. #custom-controls, #cd{
  825. display:none;
  826. }
  827.  
  828. /* MOBILE FOOTER */
  829. #mobile-footer{
  830. display:flex;
  831. align-items:center;
  832. justify-content:space-evenly;
  833. background-color:#fff; /* background color */
  834. position:fixed;
  835. bottom:0;
  836. left:0;
  837. width:100vw;
  838. height:10vh;
  839. }
  840.  
  841. /* Navigation Element */
  842. .mf-nav{
  843. width:36px;
  844. height:36px;
  845. font-size:calc(1em - 2px);
  846. background-color:#aa20f9; /* background color */
  847. background:linear-gradient(to top left, #204bf9, #f920a6); /* gradient background: direction, first color, second color */
  848. color:#fff; /* text color */
  849. box-shadow:0 0 4px #aa20f9;
  850. border-radius:4px; /* rounded corners */
  851. display:flex;
  852. align-items:center;
  853. justify-content:center;
  854. }
  855.  
  856. /* Navigation Element | Hover */
  857. .mf-nav:hover{
  858. background-color:#fff; /* background color */
  859. background:linear-gradient(to top left, #fff, #fff);
  860. /* gradient background: direction, first color, second color */
  861. background: -webkit-linear-gradient(#204bf9, #f920a6);
  862. /* gradient text: first color, second color */
  863. -webkit-background-clip: text;
  864. -webkit-text-fill-color: transparent;
  865. cursor:pointer;
  866. }
  867.  
  868. /* Navigation Element | Transitions */
  869. .mf-nav, .mf-nav:hover{
  870. transition:0.5s;
  871. -moz-transition:0.5s;
  872. -o-transition:0.5s;
  873. -webkit-transition:0.5s;
  874. }
  875.  
  876. /* Navigation Element | Links */
  877. a.mf-link{
  878. border-bottom:none;
  879. }
  880. }
  881.  
  882. </style>
  883. </head>
  884.  
  885. <body>
  886.  
  887. <!-- GRID CONTAINER -->
  888. <div id="grid">
  889. <!-- ABOUT SECTION -->
  890. <div id="about">
  891. <!-- About Icon -->
  892. <div id="ab-icon">
  893. <img src="https://66.media.tumblr.com/b263aa59b74fe9ea966c780303de67ba/tumblr_puzwuolTTZ1ushqcjo7_1280.png" alt="icon"/>
  894. </div>
  895. <!-- About Title -->
  896. <div id="ab-title">About</div>
  897. <!-- About Text -->
  898. <div id="ab-text">
  899. [text goes here!]
  900. </div> <!-- // end about text -->
  901.  
  902. <!-- About Links -->
  903. <div id="ab-links">
  904. <!-- Home Link -->
  905. <a href="/" title="home" class="ablinks">
  906. <div class="ablink">
  907. <span class="fas fa-home"></span>
  908. </div>
  909. </a>
  910.  
  911. <!-- Ask Link -->
  912. {block:AskEnabled}
  913. <a href="/ask" title="{AskLabel}" class="ablinks">
  914. <div class="ablink">
  915. <span class="fas fa-envelope"></span>
  916. </div>
  917. </a>
  918. {/block:AskEnabled}
  919.  
  920. <!-- Archive Link -->
  921. <a href="/archive" title="archive" class="ablinks">
  922. <div class="ablink">
  923. <span class="fas fa-archive"></span>
  924. </div>
  925. </a>
  926.  
  927. <!-- 1st Custom Link -->
  928. <a href="/" title="link" class="ablinks">
  929. <div class="ablink">
  930. <span class="fas fa-link"></span>
  931. </div>
  932. </a>
  933.  
  934. <!-- 2nd Custom Link -->
  935. <a href="/" title="link" class="ablinks">
  936. <div class="ablink">
  937. <span class="fas fa-link"></span>
  938. </div>
  939. </a>
  940.  
  941. <!-- 3rd Custom Link -->
  942. <a href="/" title="link" class="ablinks">
  943. <div class="ablink">
  944. <span class="fas fa-link"></span>
  945. </div>
  946. </a>
  947. </div> <!-- // end about links -->
  948. </div> <!-- // end about -->
  949.  
  950. <!-- FAQ SECTION -->
  951. <div id="faq">
  952. <!-- Question -->
  953. <div class="question">
  954. [question here]
  955. </div>
  956. <!-- Answer -->
  957. <div class="answer">
  958. [answer here]
  959. </div>
  960.  
  961. <!-- Question -->
  962. <div class="question">
  963. [question here]
  964. </div>
  965. <!-- Answer -->
  966. <div class="answer">
  967. [answer here]
  968. </div>
  969. </div>
  970.  
  971. <!-- BLOGROLL SECTION -->
  972. {block:Following}
  973. <div id="blogroll">
  974. {block:Followed}
  975. <div class="fllw">
  976. <!-- Followed User Icon -->
  977. <div class="fllw-icon">
  978. <img src="{FollowedPortraitURL-128}" alt="{FollowedName}'s Blog Icon"/>
  979. </div>
  980. <!-- Followed User Info -->
  981. <a href="{FollowedURL}" class="fllw-link" >
  982. <div class="fllw-info" title="go to {FollowedName}">
  983. <!-- Folowed User Blog Title -->
  984. <div class="fllw-title">{FollowedTitle}</div>
  985. <!-- Followed User Name -->
  986. <div class="fllw-name">
  987. <mark>@{FollowedName}</mark>
  988. </div>
  989. </div>
  990. </a>
  991. </div>
  992. {/block:Followed}
  993. </div>
  994. {/block:Following} <!-- // end blogroll section -->
  995. </div> <!-- // end grid container -->
  996.  
  997. <!-- MOBILE FOOTER -->
  998. <div id="mobile-footer">
  999. <!-- Follow -->
  1000. <!-- Takes people to a page so that they can follow you. -->
  1001. <a href="https://www.tumblr.com/follow/{Name}" class="mf-link">
  1002. <div class="mf-nav" title="follow {Name}">
  1003. <span class="fas fa-plus" aria-hidden="true"></span>
  1004. </div>
  1005. </a>
  1006.  
  1007. <!-- Desktop Link -->
  1008. <a href="https://www.tumblr.com/dashboard" class="mf-link">
  1009. <div class="mf-nav" title="go to dashboard">
  1010. <span class="fab fa-tumblr" aria-hidden="true"></span>
  1011. </div>
  1012. </a>
  1013.  
  1014. <!-- Home Link -->
  1015. <a href="/" class="mf-link">
  1016. <div class="mf-nav" title="return to blog">
  1017. <span class="fas fa-home" aria-hidden="true"></span>
  1018. </div>
  1019. </a>
  1020.  
  1021. <!-- Chat Link -->
  1022. <a href="https://www.tumblr.com/message/{Name}" class="mf-link">
  1023. <div class="mf-nav" title="send a message to {Name}">
  1024. <span class="fas fa-comment-dots" aria-hidden="true"></span>
  1025. </div>
  1026. </a>
  1027.  
  1028. <!-- Credit – Do not touch! -->
  1029. <a href="https://silbrigthemes.tumblr.com/" class="mf-link">
  1030. <div class="mf-nav" title="page by silbrigthemes">
  1031. <span class="fas fa-code" aria-hidden="true"></span>
  1032. </div>
  1033. </a>
  1034. </div> <!-- // end mobile footer -->
  1035.  
  1036. <!-- CUSTOM CONTROLS -->
  1037. <div id="custom-controls">
  1038. <!-- Dashboard Link -->
  1039. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="conlink">
  1040. <div class="cont">
  1041. <span class="fab fa-tumblr" aria-hidden="true"></span>
  1042. </div>
  1043. </a>
  1044.  
  1045. <!-- Message -->
  1046. <!-- Takes people to dashboard to send you a message. -->
  1047. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="conlink">
  1048. <div class="cont">
  1049. <span class="fas fa-comment-dots" aria-hidden="true"></span>
  1050. </div>
  1051. </a>
  1052.  
  1053. <!-- Customize -->
  1054. <!-- Takes you, the blog owner, to the customization. -->
  1055. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize page" class="conlink">
  1056. <div class="cont">
  1057. <span class="fas fa-palette" aria-hidden="true"></span>
  1058. </div>
  1059. </a>
  1060.  
  1061. <!-- Follow -->
  1062. <!-- Takes people to a page so that they can follow you. -->
  1063. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="conlink">
  1064. <div class="cont">
  1065. <span class="fas fa-plus" aria-hidden="true"></span>
  1066. </div>
  1067. </a>
  1068. </div> <!-- // end custom controls -->
  1069.  
  1070. <!-- CREDIT -->
  1071. <!-- Do not touch! Otherwise you will be blocked and reported for theft. -->
  1072. <a href="https://silbrigthemes.tumblr.com/" class="conlink">
  1073. <div id="cd" class="cont" title="page by silbrigthemes">
  1074. <span class="fas fa-code"></span>
  1075. </div>
  1076. </a>
  1077.  
  1078. <!-- Tooltips, TippyJs -->
  1079. <script src="https://unpkg.com/popper.js@1"></script>
  1080. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1081. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1082.  
  1083. <script>
  1084. tippy('a[title], .fllw-info, #cd, .mf-nav', {
  1085. theme: 'messenger',
  1086. zIndex: 9999999999,
  1087. arrow: false,
  1088. maxWidth: 300,
  1089.  
  1090. content(reference) {
  1091. const title = reference.getAttribute('title');
  1092. reference.removeAttribute('title');
  1093. return title;
  1094. },
  1095. });
  1096. </script>
  1097.  
  1098. </body>
  1099. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!