API tools faq
paste
Advertisement
themesbyces

Page — Soda

themesbyces
Apr 18th, 2019 (edited)
1,613
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 13.70 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.  
  5. <html>
  6.  
  7. <head>
  8.  
  9. <title>{Title}</title>
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <!-- Soda by Franchesca (extasisthemes) -->
  14.  
  15. <!-- Google Fonts Script -->
  16.  
  17. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i&display=swap" rel="stylesheet">
  18.  
  19. <!-- Styled Tooltips Script -->
  20.  
  21. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  22.  
  23. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  24.  
  25. <script>
  26. (function($){
  27. $(document).ready(function(){
  28. $("a[title]").style_my_tooltips({
  29. tip_follows_cursor:true,
  30. tip_delay_time:90,
  31. tip_fade_speed:600,
  32. attribute:"title"
  33. });
  34. });
  35. })(jQuery);
  36. </script>
  37.  
  38. <!-- Font Awesome Script -->
  39.  
  40. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  41.  
  42. <!-- Hide & Show Script -->
  43.  
  44. <script type="text/javascript" src="https://pastebin.com/raw/0QibYDaZ"></script>
  45.  
  46. <script>
  47. $(document).ready(function(){
  48. $(".answerb").hide();
  49. $(".questionb").click(function(){
  50. $(this).next(".answerb").slideToggle('fast');
  51. });
  52. });
  53. </script>
  54.  
  55. <style type="text/css">
  56.  
  57. .tmblr-iframe--app-cta-button {
  58. display: none!important;
  59. }
  60.  
  61. ::-webkit-scrollbar-thumb:vertical {
  62. background: #000000;
  63. }
  64.  
  65. ::-webkit-scrollbar {
  66. width: 1px;
  67. }
  68.  
  69. ::selection {
  70. background: #669999;
  71. color: white;
  72. }
  73.  
  74. ::-moz-selection {
  75. background: #669999;
  76. color: white;
  77. }
  78.  
  79. #s-m-t-tooltip {
  80. background: #000000;
  81. border-radius: 5px;
  82. color: #ffffff;
  83. font-size: 0.9rem;
  84. margin-top: 30px;
  85. padding: 5px;
  86. text-align: center;
  87. text-transform: uppercase;
  88. z-index: 999999999999999999999999999999999999;
  89. }
  90.  
  91. body {
  92. background: #ffffff;
  93. background-attachment: fixed;
  94. background-image: url(https://i.imgur.com/JYaCY8U.jpg);
  95. background-repeat: repeat;
  96. color: #555555;
  97. cursor: url(https://i.imgur.com/lhPqll6.png), progress;
  98. font-family: 'Karla', sans-serif;
  99. font-size: 1rem;
  100. font-style: normal;
  101. font-weight: 400;
  102. hyphens: auto;
  103. letter-spacing: 1px;
  104. margin: 0px;
  105. text-align: left;
  106. text-transform: none;
  107. word-wrap: break-word;
  108. }
  109.  
  110. a {
  111. color: #99bbcc;
  112. text-decoration: none;
  113. -webkit-transition: all 0.5s ease;
  114. -moz-transition: all 0.5s ease;
  115. -o-transition: all 0.5s ease;
  116. }
  117.  
  118. a:hover {
  119. color: #cfcfcf;
  120. }
  121.  
  122. b {
  123. font-weight: 700;
  124. }
  125.  
  126. h1 {
  127. font-size: 1.2rem;
  128. font-weight: bold;
  129. margin-block-start: 0em;
  130. text-transform: lowercase;
  131. }
  132.  
  133. h2 {
  134. font-size: 1rem;
  135. font-weight: bold;
  136. margin-block-start: 0em;
  137. }
  138.  
  139. blockquote {
  140. border-left: 1px solid #eeeeee;
  141. margin: 5px;
  142. padding-left: 5px;
  143. }
  144.  
  145. #container {
  146. background: #ffffff;
  147. margin-bottom: 100px;
  148. margin-left: auto;
  149. margin-right: auto;
  150. margin-top: 100px;
  151. width: 700px;
  152. }
  153.  
  154. .tab {
  155. background: #ffffff;
  156. border: 1px solid #eeeeee;
  157. font-size: 0.9rem;
  158. padding: 25px;
  159. text-transform: uppercase;
  160. }
  161.  
  162. .tab a {
  163. background: #f5f5f5;
  164. border: 1px solid #669999;
  165. border-radius: 5px;
  166. color: #555555;
  167. margin-right: 10px;
  168. padding: 5px 10px 5px 10px;
  169. transition: 0.3s;
  170. }
  171.  
  172. .tab a:hover {
  173. background: #669999;
  174. color: #ffffff;
  175. }
  176.  
  177. .tab a.active {
  178. background: #669999;
  179. color: #ffffff;
  180. }
  181.  
  182. .tab-content {
  183. animation: fadeEffect 1s;
  184. border: 1px solid #eeeeee;
  185. border-top: none;
  186. display: none;
  187. padding: 25px;
  188. }
  189.  
  190. @-webkit-keyframes fadeEffect {
  191. from {
  192. opacity: 0;
  193. }
  194.  
  195. to {
  196. opacity: 1;
  197. }
  198. }
  199.  
  200. @keyframes fadeEffect {
  201. from {
  202. opacity: 0;
  203. }
  204.  
  205. to {
  206. opacity: 1;
  207. }
  208. }
  209.  
  210. #image-title-wrapper {
  211. height: 65px;
  212. width: 630px;
  213. }
  214.  
  215. .icon-image {
  216. height: 65px;
  217. position: absolute;
  218. width: 65px ;
  219. }
  220.  
  221. .icon-image img {
  222. border-radius: 100px;
  223. height: 65px;
  224. width: 65px;
  225. }
  226.  
  227. .title {
  228. font-weight: bold;
  229. font-size: 0.9rem;
  230. margin-left: 95px;
  231. position: relative;
  232. text-transform: uppercase;
  233. top: 25.3px;
  234. }
  235.  
  236. .info {
  237. margin-bottom: 15px;
  238. margin-top: 25px;
  239. overflow: hidden;
  240. }
  241.  
  242. .info-column {
  243. display: inline-block;
  244. float: left;
  245. width: 33.33%;
  246. }
  247.  
  248. .social {
  249. border-top: 1px solid #eeeeee;
  250. margin-top: 25px;
  251. padding-top: 25px;
  252. text-transform: uppercase;
  253. }
  254.  
  255. .social a {
  256. background: #f5f5f5;
  257. border: 1px solid #669999;
  258. border-radius: 5px;
  259. color: #555555;
  260. display: inline-block;
  261. font-size: 0.9rem;
  262. margin-right: 10px;
  263. padding: 5px 10px 5px 10px;
  264. }
  265.  
  266. .social a:hover {
  267. background: #669999;
  268. color: #ffffff;
  269. }
  270.  
  271. .important {
  272. background: #f0f0f0;
  273. padding: 10px;
  274. }
  275.  
  276. .question-wrapper {
  277. margin-top: 10px;
  278. }
  279.  
  280. .questiona {
  281. background: #669999;
  282. color: #ffffff;
  283. padding: 10px;
  284. }
  285.  
  286. .answera {
  287. margin-top: 10px;
  288. }
  289.  
  290. .questionb {
  291. background: #669999;
  292. color: #ffffff;
  293. padding: 10px;
  294. -webkit-transition: all 0.5s ease;
  295. -moz-transition: all 0.5s ease;
  296. -o-transition: all 0.5s ease;
  297. }
  298.  
  299. .questionb:hover {
  300. background: #f8f8f8;
  301. color: #555555;
  302. }
  303.  
  304. .answerb {
  305. margin-top: 10px;
  306. }
  307.  
  308. .navigation-wrapper {
  309. border-bottom: 1px solid #eeeeee;
  310. margin-top: 25px;
  311. padding-bottom: 25px;
  312. }
  313.  
  314. .navigation-links {
  315. font-size: 0.9rem;
  316. margin: -5px;
  317. text-transform: uppercase;
  318. }
  319.  
  320. .navigation-links a {
  321. display: inline-block;
  322. margin: 5px;
  323. }
  324.  
  325. .navigation-title {
  326. font-weight: bold;
  327. display: inline-block;
  328. margin: 5px;
  329. }
  330.  
  331. #blogroll {
  332. margin: -10px;
  333. overflow: hidden;
  334. width: 670px;
  335. }
  336.  
  337. .following-wrapper {
  338. align-items: center;
  339. border: 1px solid #eeeeee;
  340. display: flex;
  341. float: left;
  342. height: 48px;
  343. margin: 10px;
  344. padding: 10px;
  345. width: 293px;
  346. }
  347.  
  348. .following-image {
  349. height: 48px;
  350. width: 48px;
  351. }
  352.  
  353. .following-image img {
  354. height: 48px;
  355. width: 48px;
  356. }
  357.  
  358. .following-details {
  359. font-size: 0.9rem;
  360. margin-left: 20px;  
  361. overflow: hidden;
  362. text-align: left;
  363. text-overflow: ellipsis;
  364. text-transform: uppercase;
  365. white-space: nowrap;
  366. }
  367.  
  368. #credit {
  369. bottom: 15px;
  370. font-size: 0.9em;
  371. position: fixed;
  372. right: 15px;
  373. text-transform: uppercase;
  374. }
  375.  
  376. #credit a {
  377. color: #000000;
  378. }
  379.  
  380. #credit a:hover {
  381. color: #cfcfcf;
  382. }
  383.  
  384. {CustomCSS}
  385.    
  386. </style>
  387.    
  388. </head>
  389.  
  390. <body>
  391.  
  392. <div id="container">
  393.  
  394. <div class="tab">
  395. <a href="/">Back To Blog</a>
  396. <a class="tab-links" onclick="openPanel(event, 'one')" id="defaultOpen">About</a>
  397. <a class="tab-links" onclick="openPanel(event, 'two')" id="defaultOpen">Message</a>
  398. <a class="tab-links" onclick="openPanel(event, 'three')" id="defaultOpen">Navigation</a>
  399. <a class="tab-links" onclick="openPanel(event, 'four')" id="defaultOpen">Blogroll</a>
  400. </div>
  401.  
  402. <div id="one" class="tab-content">
  403.  
  404. <div id="image-title-wrapper">
  405.  
  406. <div class="icon-image"><img src="https://i.imgur.com/K3F7MCS.png"/></div>
  407.  
  408. <div class="title">About The Blogger</div>
  409.  
  410. </div>
  411.  
  412. <div class="info">
  413.  
  414. <div class="info-column">
  415. <u style="margin-right: 5px;">Name</u> Franchesca
  416. </div>
  417. <div class="info-column">
  418. <u style="margin-right: 5px;">Age</u> 22 years old
  419. </div>
  420. <div class="info-column">
  421. <u style="margin-right: 5px;">B-Day</u> March 8, 1997
  422. </div>
  423. <div class="info-column">
  424. <u style="margin-right: 5px;">Occupation</u> Student
  425. </div>
  426. <div class="info-column">
  427. <u style="margin-right: 5px;">Location</u> Philippines
  428. </div>
  429.  
  430. </div>
  431.  
  432. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  433. <br><br>
  434. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Praesent elit pede, iaculis facilisis, vehicula mattis, tempus non, arcu.
  435. <br><br>
  436. Suspendisse ac pede. Cras tincidunt pretium felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque porttitor mi id felis. Maecenas nec augue. Praesent a quam pretium leo congue accumsan.
  437.  
  438. <div class="social">
  439. <a href="/" title="username"><i class="fab fa-facebook-square" style="margin-right: 10px;"></i>Facebook</a>
  440. <a href="/" title="username"><i class="fab fa-twitter" style="margin-right: 10px;"></i>Twitter</a>
  441. <a href="/" title="username"><i class="fab fa-youtube" style="margin-right: 10px;"></i>Youtube</a>
  442. <a href="/" title="username"><i class="fab fa-instagram" style="margin-right: 10px;"></i>Instagram</a>
  443. <a href="/" title="username"><i class="fab fa-weibo" style="margin-right: 10px;"></i>Weibo</a>
  444. </div>
  445.  
  446. </div>
  447.  
  448. <div id="two" class="tab-content">
  449.  
  450. <div class="title" style="margin-bottom: 25px;margin-left: 0px;top: 0px;">Ask Me Anything</div>
  451.  
  452. <div class="important">
  453. <b>Please Read The Following:</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna.
  454. </div>
  455.  
  456. <div class="question-wrapper">
  457.  
  458. <div class="questiona">Lorem ipsum dolor sit amet, consectetuer adipiscing elit?</div>
  459.  
  460. <div class="answera">
  461. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  462. </div>
  463.  
  464. </div>
  465.  
  466. <div class="question-wrapper">
  467.  
  468. <p class="questionb" style="margin-bottom: 0px;margin-top: 0px;">Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris? (click for the answer)</p>
  469.  
  470. <div class="answerb">
  471. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  472. </div>
  473.  
  474. </div>
  475.  
  476. <div class="question-wrapper">
  477.  
  478. <div class="questiona">Aliquam mattis porta urna?</div>
  479.  
  480. <div class="answera">
  481. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  482. </div>
  483.  
  484. </div>
  485.  
  486. <p><iframe frameborder="0" height="200" id="ask_form" scrolling="no" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%"></iframe></p>
  487.  
  488. </div>
  489.  
  490. <div id="three" class="tab-content">
  491.  
  492. <div class="title" style="margin-bottom: 0px;margin-left: 0px;top: 0px;">Things I Post</div>
  493.  
  494. <div class="navigation-wrapper">
  495.  
  496. <div class="navigation-links">
  497. <div class="navigation-title">Navigation Title</div>
  498. <a href="/">Link One</a>
  499. <a href="/">Link Two</a>
  500. <a href="/">Link Three</a>
  501. <a href="/">Link Four</a>
  502. <a href="/">Link Five</a>
  503. <a href="/">Link Six</a>
  504. <a href="/">Link Seven</a>
  505. <a href="/">Link Eight</a>
  506. <a href="/">Link Nine</a>
  507. </div>
  508.  
  509. </div>
  510.  
  511. <div class="navigation-wrapper">
  512.  
  513. <div class="navigation-links">
  514. <div class="navigation-title">Navigation Title</div>
  515. <a href="/">Link One</a>
  516. <a href="/">Link Two</a>
  517. <a href="/">Link Three</a>
  518. <a href="/">Link Four</a>
  519. <a href="/">Link Five</a>
  520. <a href="/">Link Six</a>
  521. <a href="/">Link Seven</a>
  522. <a href="/">Link Eight</a>
  523. <a href="/">Link Nine</a>
  524. </div>
  525.  
  526. </div>
  527.  
  528. <div class="navigation-wrapper">
  529.  
  530. <div class="navigation-links">
  531. <div class="navigation-title">Navigation Title</div>
  532. <a href="/">Link One</a>
  533. <a href="/">Link Two</a>
  534. <a href="/">Link Three</a>
  535. <a href="/">Link Four</a>
  536. <a href="/">Link Five</a>
  537. <a href="/">Link Six</a>
  538. <a href="/">Link Seven</a>
  539. <a href="/">Link Eight</a>
  540. <a href="/">Link Nine</a>
  541. </div>
  542.  
  543. </div>
  544.  
  545. <div class="navigation-wrapper">
  546.  
  547. <div class="navigation-links">
  548. <div class="navigation-title">Navigation Title</div>
  549. <a href="/">Link One</a>
  550. <a href="/">Link Two</a>
  551. <a href="/">Link Three</a>
  552. <a href="/">Link Four</a>
  553. <a href="/">Link Five</a>
  554. <a href="/">Link Six</a>
  555. <a href="/">Link Seven</a>
  556. <a href="/">Link Eight</a>
  557. <a href="/">Link Nine</a>
  558. </div>
  559.  
  560. </div>
  561.  
  562. <div class="navigation-wrapper" style="border-bottom: none;padding-bottom: 0px;">
  563.  
  564. <div class="navigation-links">
  565. <div class="navigation-title">Navigation Title</div>
  566. <a href="/">Link One</a>
  567. <a href="/">Link Two</a>
  568. <a href="/">Link Three</a>
  569. <a href="/">Link Four</a>
  570. <a href="/">Link Five</a>
  571. <a href="/">Link Six</a>
  572. <a href="/">Link Seven</a>
  573. <a href="/">Link Eight</a>
  574. <a href="/">Link Nine</a>
  575. </div>
  576.  
  577. </div>
  578.  
  579. </div>
  580.  
  581. <div id="four" class="tab-content">
  582.  
  583. <div class="title" style="margin-bottom: 25px;margin-left: 0px;top: 0px;">People I Follow</div>
  584.  
  585. <div id="blogroll">
  586.  
  587. {block:Following}
  588. {block:Followed}
  589. <a href="{FollowedURL}">
  590. <div class="following-wrapper">
  591. <div class="following-image">
  592. <img src="{FollowedPortraitURL-48}"/>
  593. </div>
  594. <div class="following-details">
  595. {FollowedName}
  596. <br>
  597. <font style="color: #555555;">{FollowedTitle}</font>
  598. </div>
  599. </div>
  600. </a>
  601. {/block:Followed}
  602. {/block:Following}
  603.  
  604. </div>
  605.  
  606. </div>
  607.  
  608. </div>
  609.  
  610. <div id="credit"><a href="http://extasisthemes.tumblr.com/" title="extasisthemes" target="_blank">EXT</a></div>
  611.  
  612. </body>
  613.  
  614. <!-- Tabs Script -->
  615.  
  616. <script>
  617. function openPanel(evt, number) {
  618. var i, tabcontent, tablinks;
  619. tabcontent = document.getElementsByClassName("tab-content");
  620. for (i = 0; i < tabcontent.length; i++) {
  621. tabcontent[i].style.display = "none";
  622. }
  623. tablinks = document.getElementsByClassName("tab-links");
  624. for (i = 0; i < tablinks.length; i++) {
  625. tablinks[i].className = tablinks[i].className.replace(" active", "");
  626. }
  627. document.getElementById(number).style.display = "block";
  628. evt.currentTarget.className += " active";
  629. }
  630. document.getElementById("defaultOpen").click();
  631. </script>
  632.  
  633. </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!