API tools faq
paste
themesbyext

Page — Three Of Cups

themesbyext
Jan 13th, 2021 (edited)
821
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.17 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. <!-- Three of Cups by Franchesca (extasisthemes) -->
  14.  
  15. <!-- Google Fonts Script -->
  16.  
  17. <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&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], i[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. <!-- Scroll To Top Script -->
  43.  
  44. <script type="text/javascript">
  45. $(function() {      
  46. $(window).scroll(function() {
  47. if($(this).scrollTop() != 0) {
  48. $('#top').fadeIn();        
  49. }
  50. else {
  51. $('#top').fadeOut();      
  52. }
  53. });
  54. $('#top').click(function() {
  55. $('body,html').animate({scrollTop:0},600);
  56. });
  57. });
  58. </script>
  59.  
  60. <style type="text/css">
  61.  
  62. .tmblr-iframe--app-cta-button {
  63. display: none!important;
  64. }
  65.  
  66. ::-webkit-scrollbar-thumb:vertical {
  67. background: #000000;
  68. }
  69.  
  70. ::-webkit-scrollbar {
  71. width: 0px;
  72. }
  73.  
  74. ::selection {
  75. background: #eeaa99;
  76. color: white;
  77. }
  78.  
  79. ::-moz-selection {
  80. background: #eeaa99;
  81. color: white;
  82. }
  83.  
  84. #s-m-t-tooltip {
  85. background: #000000;
  86. border-radius: 5px;
  87. color: #ffffff;
  88. font-size: 0.9rem;
  89. margin-top: 30px;
  90. padding: 5px;
  91. text-align: center;
  92. text-transform: uppercase;
  93. z-index: 999999999999999999999999999999999999;
  94. }
  95.  
  96. body {
  97. background: #f8f8f8;
  98. color: #555555;
  99. cursor: url(https://i.imgur.com/lhPqll6.png), progress;
  100. font-family: 'Poppins', sans-serif;
  101. font-size: 1rem;
  102. font-style: normal;
  103. font-weight: 400;
  104. hyphens: auto;
  105. letter-spacing: 1px;
  106. margin: 0px;
  107. text-align: left;
  108. text-transform: none;
  109. word-wrap: break-word;
  110. }
  111.  
  112. a {
  113. color: #000000;
  114. text-decoration: none;
  115. -webkit-transition: all 0.5s ease;
  116. -moz-transition: all 0.5s ease;
  117. -o-transition: all 0.5s ease;
  118. }
  119.  
  120. a:hover {
  121. color: #cfcfcf;
  122. }
  123.  
  124. b {
  125. font-weight: 700;
  126. }
  127.  
  128. h1 {
  129. font-size: 1.2rem;
  130. font-weight: bold;
  131. margin-block-start: 0em;
  132. text-transform: lowercase;
  133. }
  134.  
  135. h2 {
  136. font-size: 1rem;
  137. font-weight: bold;
  138. margin-block-start: 0em;
  139. }
  140.  
  141. blockquote {
  142. border-left: 1px solid #eeeeee;
  143. margin: 5px;
  144. padding-left: 5px;
  145. }
  146.  
  147. #main-links {
  148. left: 30px;
  149. position: fixed;
  150. top: 30px;
  151. width: 34.39px;
  152. z-index: 1;
  153. }
  154.  
  155. #main-links a {
  156. background: #eeaa99;
  157. border-radius: 100px;
  158. color: #ffffff;
  159. display: inline-block;
  160. font-size: 0.9rem;
  161. font-variant: normal;
  162. height: 0.9rem;
  163. line-height: 1;
  164. margin-bottom: 10px;
  165. padding: 10px;
  166. text-rendering: auto;
  167. width: 0.9rem;
  168. }
  169.  
  170. #main-links a:hover {
  171. background: #ffffff;
  172. color: #cfcfcf;
  173. }
  174.  
  175. #container-wrapper {
  176. margin-bottom: 75px;
  177. margin-left: auto;
  178. margin-right: auto;
  179. margin-top: 75px;
  180. width: 660px;
  181. }
  182.  
  183. #title {
  184. border-bottom: 1px solid #eeeeee;
  185. font-size: 1.5rem;
  186. font-weight: bold;
  187. padding-bottom: 25px;
  188. text-transform: lowercase;
  189. width: 660px;
  190. }
  191.  
  192. #container {
  193. align-items: baseline;
  194. display: flex;
  195. margin-top: 50px;
  196. justify-content: space-between;
  197. width: 660px;
  198. }
  199.  
  200. #left {
  201. border-radius: 5px;
  202. width: 200px;
  203. }
  204.  
  205. .basic-info {
  206. font-size: 0.9rem;
  207. text-transform: uppercase;
  208. width: 200px;
  209. }
  210.  
  211. .basic-info li {
  212. background: #ffffff;
  213. border-radius: 5px;
  214. list-style-type: none;
  215. margin-bottom: 10px;
  216. }
  217.  
  218. .basic-info li:last-of-type {
  219. margin-bottom: 0px;
  220. }
  221.  
  222. .likes, .dislikes {
  223. background: #ffffff;
  224. border-radius: 5px;
  225. font-size: 0.9rem;
  226. max-height: 100px;
  227. margin-top: 20px;
  228. overflow-y: scroll;
  229. padding: 20px;
  230. text-transform: uppercase;
  231. width: 160px;
  232. }
  233.  
  234. #center {
  235. width: 200px;
  236. }
  237.  
  238. .center-top-wrapper {
  239. width: 200px;
  240. }
  241.  
  242. .icon {
  243. height: 34px;
  244. margin-left: 17px;
  245. width: 34.39px;
  246. }
  247.  
  248. .main-image {
  249. border-radius: 5px;
  250. background: #ffffff;
  251. height: auto;
  252. margin-top: -17px;
  253. padding: 20px;
  254. padding-bottom: 37px;
  255. padding-top: 37px;
  256. width: 160px;
  257. }
  258.  
  259. .main-image img {
  260. border-radius: 5px;
  261. display: block;
  262. height: auto;
  263. width: 160px;
  264. }
  265.  
  266. .mood-icons {
  267. background: #eeaa99;
  268. border-radius: 100px;
  269. display: flex;
  270. color: #ffffff;
  271. font-size: 0.9rem;
  272. justify-content: center;
  273. margin-left: 80px;
  274. margin-top: -17px;
  275. padding: 10px;
  276. text-align: center;
  277. width: 100px;
  278. }
  279.  
  280. .mood-icons i {
  281. margin-left: 5px;
  282. margin-right: 5px;
  283. }
  284.  
  285. .quote {
  286. background: #ffffff;
  287. border-radius: 5px;
  288. font-style: italic;
  289. margin-top: 20px;
  290. padding: 20px;
  291. }
  292.  
  293. #right {
  294. width: 200px;
  295. }
  296.  
  297. .blogs {
  298. margin-top: 20px;
  299. }
  300.  
  301. .blog-wrapper {
  302. align-items: center;
  303. background: #ffffff;
  304. border-radius: 5px;
  305. display: flex;
  306. height: 48px;
  307. margin-bottom: 1px;
  308. padding: 10px;
  309. width: 180px;
  310. }
  311.  
  312. .blog-wrapper:last-of-type {
  313. margin-bottom: 0px;
  314. }
  315.  
  316. .blog-image {
  317. height: 48px;
  318. width: 48px;
  319. }
  320.  
  321. .blog-image img {
  322. border-radius: 5px;
  323. height: 48px;
  324. width: 48px;
  325. }
  326.  
  327. .blog-details {
  328. font-size: 0.9rem;
  329. margin-left: 20px;  
  330. overflow: hidden;
  331. text-align: left;
  332. text-overflow: ellipsis;
  333. text-transform: uppercase;
  334. white-space: nowrap;
  335. }
  336.  
  337. .links {
  338. font-size: 0.9rem;
  339. margin: -5px;
  340. margin-top: 20px;
  341. text-transform: uppercase;
  342. }
  343.  
  344. .links a {
  345. border-bottom: 1px solid #eeaa99;
  346. display: inline-block;
  347. margin: 5px;
  348. }
  349.  
  350. #top {
  351. background: #eeaa99;
  352. border: 1px solid #eeeeee;
  353. border-radius: 100px;
  354. bottom: 66px;
  355. color: #ffffff;
  356. display: none;
  357. font-size: 0.9rem;
  358. font-variant: normal;
  359. height: 0.9rem;
  360. line-height: 1;
  361. padding: 10px;
  362. position: fixed;
  363. right: 20px;
  364. text-rendering: auto;
  365. width: 0.9rem;
  366. z-index: 1;
  367. -webkit-transition: all 0.5s ease;
  368. -moz-transition: all 0.5s ease;
  369. -o-transition: all 0.5s ease;
  370. }
  371.  
  372. #top:hover {
  373. background: #ffffff;
  374. color: #cfcfcf;
  375. }
  376.  
  377. #credit {
  378. bottom: 20px;
  379. font-size: 0.9rem;
  380. height: 36px;
  381. position: fixed;
  382. right: 20px;
  383. text-transform: uppercase;
  384. z-index: 1;
  385. width: auto;
  386. }
  387.  
  388. #credit a {
  389. background: #eeaa99;
  390. border: 1px solid #eeeeee;
  391. border-radius: 100px;
  392. color: #ffffff;
  393. display: inline-block;
  394. font-size: 0.9rem;
  395. font-variant: normal;
  396. height: 0.9rem;
  397. line-height: 1;
  398. padding: 10px;
  399. width: 0.9rem;
  400. }
  401.  
  402. #credit a:hover  {
  403. background: #ffffff;
  404. color: #cfcfcf;
  405. }
  406.  
  407. #credit:hover .credit-name {
  408. right: 20px;
  409. opacity: 1;
  410. }
  411.  
  412. .credit-name {
  413. background: #333333;
  414. border: 1px solid #eeeeee;
  415. border-radius: 100px;
  416. bottom: 20px;
  417. color: #ffffff;
  418. display: inline-block;
  419. font-size: 0.9rem;
  420. font-variant: normal;
  421. height: 0.9rem;
  422. line-height: 1;
  423. opacity: 0;
  424. padding: 10px;
  425. padding-right: 46.8px;
  426. position: fixed;
  427. right: -20px;
  428. text-align: center;
  429. z-index: -1;
  430. -webkit-transition: all 0.9s ease;
  431. -moz-transition: all 0.9s ease;
  432. -o-transition: all 0.9s ease;
  433. }
  434.  
  435. {CustomCSS}
  436.    
  437. </style>
  438.    
  439. </head>
  440.  
  441. <body>
  442.  
  443. <div id="main-links">
  444. <a href="/" title="Home"><i class="far fa-arrow-alt-circle-left"></i></a>
  445. <a href="/ask" title="Ask"><i class="far fa-envelope"></i></a>
  446. <a href="/archive" title="Archive"><i class="far fa-calendar-plus"></i></a>
  447. </div>
  448.  
  449. <div id="container-wrapper">
  450.  
  451. <div id="title">Three Of Cups</div>
  452.  
  453. <div id="container">
  454.  
  455. <!-- Start of Left Content -->
  456.  
  457. <div id="left">
  458.  
  459. <!-- Start of Basic Info -->
  460.  
  461. <div class="basic-info">
  462. <li><i class="fas fa-signature" style="background: #000000;border-bottom-left-radius: 5px;border-top-left-radius: 5px;color: #ffffff;font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>Name</li>
  463. <li><i class="fas fa-birthday-cake" style="background: #000000;border-bottom-left-radius: 5px;border-top-left-radius: 5px;color: #ffffff;font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>Age<li><i class="fas fa-question" style="background: #000000;border-bottom-left-radius: 5px;border-top-left-radius: 5px;color: #ffffff;font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>Pronouns</li></li>
  464. <li><i class="fas fa-map-marker-alt" style="background: #000000;border-bottom-left-radius: 5px;border-top-left-radius: 5px;color: #ffffff;font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>Location</li>
  465. </div>
  466.  
  467. <!-- End of Basic Info -->
  468.  
  469. <!-- Start of Likes -->
  470.  
  471. <div class="likes">
  472. <i class="far fa-smile-beam" style="background: #000000;border-radius: 100px;color: #ffffff;font-size: 0.9rem;padding: 10px;width: 0.9rem;"></i>
  473. <br><br>
  474. Your likes. Tell your visitors things that makes you happy.
  475. </div>
  476.  
  477. <!-- End of Likes -->
  478.  
  479. <!-- Start of Dislikes -->
  480.  
  481. <div class="dislikes">
  482. <i class="far fa-angry" style="background: #000000;border-radius: 100px;color: #ffffff;font-size: 0.9rem;padding: 10px;width: 0.9rem;"></i>
  483. <br><br>
  484. Your dislikes. What makes you nope out and gives you hives?
  485. </div>
  486.  
  487. <!-- End of Dislikes -->
  488.  
  489. </div>
  490.  
  491. <!-- End of Left Content -->
  492.  
  493. <!-- Start of Center Content -->
  494.  
  495. <div id="center">
  496.  
  497. <!-- Start of Icon, Image and Mood Icons -->
  498.  
  499. <div class="center-top-wrapper">
  500.  
  501. <div class="icon"><i class="far fa-smile-wink" style="background: #000000;border-radius: 100px;color: #ffffff;font-size: 0.9rem;padding: 10px;width: 0.9rem;"></i></div>
  502.  
  503. <div class="main-image"><img src="https://i.imgur.com/XFKiYYI.png"/></div>
  504.  
  505. <!-- Start of Mood Icons / Up to three icons only. -->
  506.  
  507. <div class="mood-icons">
  508. <i class="fas fa-mug-hot" title="Trivia About Yourself"></i>
  509. <i class="fas fa-ice-cream" title="Trivia About Yourself"></i>
  510. <i class="fas fa-cloud-moon" title="Trivia About Yourself"></i>
  511. </div>
  512.  
  513. <!-- End of Mood Icons -->
  514.  
  515. </div>
  516.  
  517. <!-- End of Icon, Image and Mood Icons -->
  518.  
  519. <div class="quote">
  520. <i class="fas fa-quote-left" style="background: #000000;border-radius: 100px;color: #ffffff;font-size: 0.9rem;padding: 10px;width: 0.9rem;"></i>
  521. <br><br>
  522. The path we walked on is colorful.
  523. </div>
  524.  
  525. </div>
  526.  
  527. <!-- End of Center Content -->
  528.  
  529. <!-- Start of Right Content -->
  530.  
  531. <div id="right">
  532.  
  533. <div class="icon" style="margin-left: 0px;"><i class="far fa-edit" style="background: #000000;border-radius: 100px;color: #ffffff;font-size: 0.9rem;padding: 10px;width: 0.9rem;"></i></div>
  534.  
  535. <div class="blogs">
  536.  
  537. <!-- Start of Blog -->
  538.  
  539. <div class="blog-wrapper">
  540.  
  541. <div class="blog-image"><img src="https://i.imgur.com/edf3GyU.png"/></div>
  542.  
  543. <div class="blog-details">
  544. <a href="/">Sample Blog URL</a>
  545. <br>
  546. <a href="/">Sample Blog Title</a>
  547. </div>
  548.  
  549. </div>
  550.  
  551. <!-- End of Blog -->
  552.  
  553. <!-- Start of Blog -->
  554.  
  555. <div class="blog-wrapper">
  556.  
  557. <div class="blog-image"><img src="https://i.imgur.com/RNTzuQL.png"/></div>
  558.  
  559. <div class="blog-details">
  560. <a href="/">Sample Blog URL</a>
  561. <br>
  562. <a href="/">Sample Blog Title</a>
  563. </div>
  564.  
  565. </div>
  566.  
  567. <!-- End of Blog -->
  568.  
  569. <!-- Start of Blog -->
  570.  
  571. <div class="blog-wrapper">
  572.  
  573. <div class="blog-image"><img src="https://i.imgur.com/kPYEUie.png"/></div>
  574.  
  575. <div class="blog-details">
  576. <a href="/">Sample Blog URL</a>
  577. <br>
  578. <a href="/">Sample Blog Title</a>
  579. </div>
  580.  
  581. </div>
  582.  
  583. <!-- End of Blog -->
  584.  
  585. <!-- Start of Blog -->
  586.  
  587. <div class="blog-wrapper">
  588.  
  589. <div class="blog-image"><img src="https://i.imgur.com/3zo8kqG.png"/></div>
  590.  
  591. <div class="blog-details">
  592. <a href="/">Sample Blog URL</a>
  593. <br>
  594. <a href="/">Sample Blog Title</a>
  595. </div>
  596.  
  597. </div>
  598.  
  599. <!-- End of Blog -->
  600.  
  601. <!-- Start of Blog -->
  602.  
  603. <div class="blog-wrapper">
  604.  
  605. <div class="blog-image"><img src="https://i.imgur.com/Ox9TeID.png"/></div>
  606.  
  607. <div class="blog-details">
  608. <a href="/">Sample Blog URL</a>
  609. <br>
  610. <a href="/">Sample Blog Title</a>
  611. </div>
  612.  
  613. </div>
  614.  
  615. <!-- End of Blog -->
  616.  
  617. </div>
  618.  
  619. <div class="links">
  620. <a href="/">Link One</a>
  621. <a href="/">Link Two</a>
  622. <a href="/">Link Three</a>
  623. <a href="/">Link Four</a>
  624. <a href="/">Link Five</a>
  625. </div>
  626.  
  627. </div>
  628.  
  629. <!-- End of Right Content -->
  630.  
  631. </div>
  632.  
  633. </div>
  634.  
  635. <div id="top"><i class="fas fa-arrow-circle-up"></i></div>
  636.  
  637. <!-- Start of Theme Credit -->
  638.  
  639. <div id="credit"><a href="https://extasisthemes.tumblr.com/"><i class="fas fa-feather-alt"></i></a><div class="credit-name">EXT</div></div>
  640.  
  641. <!-- End of Theme Credit -->
  642.  
  643. </body>
  644.  
  645. </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!