API tools faq
paste
themesbyext

(Responsive) Page — Flames On My Skin

themesbyext
Dec 9th, 2020 (edited)
2,614
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.30 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. <!-- Flames On My Skin 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]").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: 1px;
  72. }
  73.  
  74. ::selection {
  75. background: #cc3333;
  76. color: white;
  77. }
  78.  
  79. ::-moz-selection {
  80. background: #cc3333;
  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. #container {
  148. background: #ffffff;
  149. border: 1px solid #eeeeee;
  150. border-radius: 5px;
  151. margin-bottom: 100px;
  152. margin-left: auto;
  153. margin-right: auto;
  154. margin-top: 100px;
  155. padding: 20px;
  156. width: 860px;
  157. }
  158.  
  159. #header {
  160. background: #000000;
  161. border-bottom: 1px solid #eeeeee;
  162. border-top-left-radius: 5px;
  163. border-top-right-radius: 5px;
  164. margin: -20px;
  165. margin-bottom: 30px;
  166. padding: 20px;
  167. }
  168.  
  169. .icon-image {
  170. height: 100px;
  171. margin-left: auto;
  172. margin-right: auto;
  173. width: 100px;
  174. }
  175.  
  176. .icon-image img {
  177. border-radius: 5px;
  178. height: 100px;
  179. width: 100px;
  180. }
  181.  
  182. .title {
  183. color: #ffffff;
  184. font-size: 1.2rem;
  185. font-weight: 700;
  186. margin-top: 20px;
  187. text-align: center;
  188. text-transform: uppercase;
  189. }
  190.  
  191. .links {
  192. font-size: 0.9rem;
  193. margin-left: auto;
  194. margin-right: auto;
  195. text-align: center;
  196. text-transform: uppercase;
  197. }
  198.  
  199. .links a {
  200. color: #ffffff;
  201. display: inline-block;
  202. margin-left: 5px;
  203. margin-right: 5px;
  204. }
  205.  
  206. .links a:hover {
  207. color: #cfcfcf;
  208. }
  209.  
  210. #navigation {
  211. width: 860px;
  212. }
  213.  
  214. .nint-wrapper {
  215. align-items: center;
  216. border-bottom: 1px solid #eeeeee;
  217. display: flex;
  218. margin: 10px;
  219. padding-bottom: 20px;
  220. width: calc(100% - 20px);
  221. }
  222.  
  223. .navigation-icon {
  224. height: 75px;
  225. margin-right: 20px;
  226. width: 75px;
  227. }
  228.  
  229. .navigation-icon img {
  230. border-radius: 5px;
  231. height: 75px;
  232. width: 75px;
  233. }
  234.  
  235. .navigation-title {
  236. font-weight: 700;
  237. text-transform: uppercase;
  238. }
  239.  
  240. .tags {
  241. display: flex;
  242. flex-direction: row;
  243. flex-wrap: wrap;
  244. width: 860px;
  245. }
  246.  
  247. .tags li {
  248. border-bottom: 1px solid #eeeeee;
  249. font-size: 0.9rem;
  250. list-style-type: none;
  251. margin: 10px;
  252. padding-bottom: 10px;
  253. text-transform: uppercase;
  254. width: calc(33.33% - 20px);
  255. }
  256.  
  257. #top {
  258. background: #cc3333;
  259. border: 1px solid #eeeeee;
  260. border-radius: 100px;
  261. bottom: 66px;
  262. color: #ffffff;
  263. display: none;
  264. font-size: 0.9rem;
  265. font-variant: normal;
  266. height: 0.9rem;
  267. line-height: 1;
  268. padding: 10px;
  269. position: fixed;
  270. right: 20px;
  271. text-rendering: auto;
  272. width: 0.9rem;
  273. z-index: 1;
  274. -webkit-transition: all 0.5s ease;
  275. -moz-transition: all 0.5s ease;
  276. -o-transition: all 0.5s ease;
  277. }
  278.  
  279. #top:hover {
  280. background: #ffffff;
  281. color: #cfcfcf;
  282. }
  283.  
  284. #credit {
  285. bottom: 20px;
  286. font-size: 0.9rem;
  287. height: 36px;
  288. position: fixed;
  289. right: 20px;
  290. text-transform: uppercase;
  291. z-index: 1;
  292. width: auto;
  293. }
  294.  
  295. #credit a {
  296. background: #cc3333;
  297. border: 1px solid #eeeeee;
  298. border-radius: 100px;
  299. color: #ffffff;
  300. display: inline-block;
  301. font-size: 0.9rem;
  302. font-variant: normal;
  303. height: 0.9rem;
  304. line-height: 1;
  305. padding: 10px;
  306. width: 0.9rem;
  307. }
  308.  
  309. #credit a:hover  {
  310. background: #ffffff;
  311. color: #cfcfcf;
  312. }
  313.  
  314. #credit:hover .credit-name {
  315. right: 20px;
  316. opacity: 1;
  317. }
  318.  
  319. .credit-name {
  320. background: #333333;
  321. border: 1px solid #eeeeee;
  322. border-radius: 100px;
  323. bottom: 20px;
  324. color: #ffffff;
  325. display: inline-block;
  326. font-size: 0.9rem;
  327. font-variant: normal;
  328. height: 0.9rem;
  329. line-height: 1;
  330. opacity: 0;
  331. padding: 10px;
  332. padding-right: 46.8px;
  333. position: fixed;
  334. right: -20px;
  335. text-align: center;
  336. z-index: -1;
  337. -webkit-transition: all 0.9s ease;
  338. -moz-transition: all 0.9s ease;
  339. -o-transition: all 0.9s ease;
  340. }
  341.  
  342. @media only screen and (max-width: 1000px) {
  343.  
  344. #container {
  345. width: 560px;
  346. }
  347.  
  348. #navigation {
  349. width: 560px;
  350. }
  351.    
  352. .tags {
  353. width: 560px;
  354. }
  355.    
  356. .tags li {
  357. width: calc(50% - 20px);
  358. }
  359.    
  360. }
  361.  
  362. @media only screen and (max-width: 500px) {
  363.    
  364. #container {
  365. width: 270px;
  366. }
  367.  
  368. #navigation {
  369. width: 270px;
  370. }
  371.    
  372. .tags {
  373. width: 270px;
  374. }
  375.    
  376. .tags li {
  377. width: calc(100% - 20px);
  378. }
  379.  
  380. }
  381.  
  382. {CustomCSS}
  383.    
  384. </style>
  385.    
  386. </head>
  387.  
  388. <body>
  389.  
  390. <div id="container">
  391.  
  392. <!-- Start of Header -->
  393.  
  394. <div id="header">
  395.  
  396. <div class="icon-image"><img src="https://i.imgur.com/9yjxUFV.png"/></div>
  397.  
  398. <div class="title">Lorem Ipsum</div>
  399.  
  400. <div class="links">
  401. <a href="/">Home</a>
  402. <a href=“/ask”>Ask</a>
  403. <a href="/">Link One</a>
  404. <a href="/">Link Two</a>
  405. <a href=“/archive”>Archive</a>
  406. </div>
  407.  
  408. </div>
  409.  
  410. <!-- End of Header -->
  411.  
  412. <!-- Start of Navigation -->
  413.  
  414. <div id="navigation">
  415.  
  416. <!-- Start of Navigation Icon and Navigation Title -->
  417.  
  418. <div class="nint-wrapper">
  419.  
  420. <div class="navigation-icon"><img src="https://i.imgur.com/FdVqzim.png"/></div>
  421.  
  422. <div class="navigation-title">Navigation Title</div>
  423.  
  424. </div>
  425.  
  426. <!-- End of Navigation Icon and Main Navigation Title -->
  427.  
  428. <!-- Start of Cateogry Title and Tags -->
  429.  
  430. <div class="tags">
  431. <li><b>Links Title</b></li>
  432. <li><a href="/">Link One</a></li>
  433. <li><a href="/">Link Two</a></li>
  434. <li><a href="/">Link Three</a></li>
  435. <li><a href="/">Link Four</a></li>
  436. <li><a href="/">Link Five</a></li>
  437. <li><a href="/">Link Six</a></li>
  438. <li><a href="/">Link Seven</a></li>
  439. </div>
  440.  
  441. <!-- End of Cateogry Title and Tags -->
  442.  
  443. </div>
  444.  
  445. <!-- End of Navigation -->
  446.  
  447. <!-- Start of Navigation -->
  448.  
  449. <div id="navigation">
  450.  
  451. <!-- Start of Navigation Icon and Navigation Title -->
  452.  
  453. <div class="nint-wrapper">
  454.  
  455. <div class="navigation-icon"><img src="https://i.imgur.com/INpJEK0.png"/></div>
  456.  
  457. <div class="navigation-title">Navigation Title</div>
  458.  
  459. </div>
  460.  
  461. <!-- End of Navigation Icon and Main Navigation Title -->
  462.  
  463. <!-- Start of Cateogry Title and Tags -->
  464.  
  465. <div class="tags">
  466. <li><b>Links Title</b></li>
  467. <li><a href="/">Link One</a></li>
  468. <li><a href="/">Link Two</a></li>
  469. <li><a href="/">Link Three</a></li>
  470. <li><a href="/">Link Four</a></li>
  471. <li><a href="/">Link Five</a></li>
  472. <li><a href="/">Link Six</a></li>
  473. <li><a href="/">Link Seven</a></li>
  474. </div>
  475.  
  476. <!-- End of Cateogry Title and Tags -->
  477.  
  478. <!-- Start of Cateogry Title and Tags -->
  479.  
  480. <div class="tags">
  481. <li><b>Links Title</b></li>
  482. <li><a href="/">Link One</a></li>
  483. <li><a href="/">Link Two</a></li>
  484. <li><a href="/">Link Three</a></li>
  485. <li><a href="/">Link Four</a></li>
  486. <li><a href="/">Link Five</a></li>
  487. <li><a href="/">Link Six</a></li>
  488. <li><a href="/">Link Seven</a></li>
  489. </div>
  490.  
  491. <!-- End of Cateogry Title and Tags -->
  492.  
  493. </div>
  494.  
  495. <!-- End of Navigation -->
  496.  
  497. <!-- Start of Navigation -->
  498.  
  499. <div id="navigation">
  500.  
  501. <!-- Start of Navigation Icon and Navigation Title -->
  502.  
  503. <div class="nint-wrapper">
  504.  
  505. <div class="navigation-title">Navigation Title</div>
  506.  
  507. </div>
  508.  
  509. <!-- End of Navigation Icon and Main Navigation Title -->
  510.  
  511. <!-- Start of Cateogry Title and Tags -->
  512.  
  513. <div class="tags">
  514. <li><b>Links Title</b></li>
  515. <li><a href="/">Link One</a></li>
  516. <li><a href="/">Link Two</a></li>
  517. <li><a href="/">Link Three</a></li>
  518. <li><a href="/">Link Four</a></li>
  519. <li><a href="/">Link Five</a></li>
  520. <li><a href="/">Link Six</a></li>
  521. <li><a href="/">Link Seven</a></li>
  522. </div>
  523.  
  524. <!-- End of Cateogry Title and Tags -->
  525.  
  526. <!-- Start of Cateogry Title and Tags -->
  527.  
  528. <div class="tags">
  529. <li><b>Links Title</b></li>
  530. <li><a href="/">Link One</a></li>
  531. <li><a href="/">Link Two</a></li>
  532. <li><a href="/">Link Three</a></li>
  533. <li><a href="/">Link Four</a></li>
  534. <li><a href="/">Link Five</a></li>
  535. <li><a href="/">Link Six</a></li>
  536. <li><a href="/">Link Seven</a></li>
  537. </div>
  538.  
  539. <!-- End of Cateogry Title and Tags -->
  540.  
  541. <!-- Start of Cateogry Title and Tags -->
  542.  
  543. <div class="tags">
  544. <li><b>Links Title</b></li>
  545. <li><a href="/">Link One</a></li>
  546. <li><a href="/">Link Two</a></li>
  547. <li><a href="/">Link Three</a></li>
  548. <li><a href="/">Link Four</a></li>
  549. <li><a href="/">Link Five</a></li>
  550. <li><a href="/">Link Six</a></li>
  551. <li><a href="/">Link Seven</a></li>
  552. </div>
  553.  
  554. <!-- End of Cateogry Title and Tags -->
  555.  
  556. </div>
  557.  
  558. <!-- End of Navigation -->
  559.  
  560. </div>
  561.  
  562. <div id="top"><i class="fas fa-arrow-circle-up"></i></div>
  563.  
  564. <!-- Start of Theme Credit -->
  565.  
  566. <div id="credit"><a href="https://extasisthemes.tumblr.com/"><i class="fas fa-feather-alt"></i></a><div class="credit-name">EXT</div></div>
  567.  
  568. <!-- End of Theme Credit -->
  569.  
  570. </body>
  571.  
  572. </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!