API tools faq
paste
Advertisement
jungjnsoul

♡ JUNGJNSOUL'S THEME PACK - 3

jungjnsoul
Apr 1st, 2019
1,341
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.78 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. </head>
  7.  
  8. <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  9. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  10.  
  11. <!-- HI EVERYONE! i've tried to make customizing this page as easy
  12. as possible, meaning everything that you need to change has
  13. been labelled. i wouldn't reccomend adding more boxes unless
  14. you're in the mood to genuinely wanna fight a code and know
  15. you're way around tumblr coding.
  16.  
  17.  
  18. -->
  19.  
  20. <style type="text/css">
  21.  
  22.  
  23. /* IMAGE HOVER ANIMATION */
  24. img {
  25. border-radius:100%;
  26. }
  27.  
  28. img:hover {
  29. animation: bounceIn 5s ease-in-out;
  30. }
  31.  
  32. @keyframes bounceIn {
  33. 0% { transform: scale(0.9) rotate(0deg); }
  34. 10% { transform: scale(0.8) rotate(-1deg); }
  35. 80% { transform: scale(0.7) rotate(1deg); }
  36. 90% { transform: scale(0.8) rotate(0deg); }
  37. 100% { transform: scale(1) rotate(-1deg); }
  38. }
  39.  
  40.  
  41. /* -------- SCROLLBAR ------- */
  42.  
  43. ::-webkit-scrollbar {
  44. width:3px;
  45. }
  46.  
  47. /* Track */
  48. ::-webkit-scrollbar-track {
  49. background:transparent;
  50. border-radius:15px;
  51. }
  52.  
  53. /* Handle */
  54. ::-webkit-scrollbar-thumb {
  55. background:#7d8482; /* SCROLLBAR COLOR */
  56. border-radius:15px;
  57. }
  58.  
  59. ::-webkit-scrollbar-thumb:window-inactive {
  60. background: transparent;
  61. }
  62.  
  63.  
  64. body {
  65. background-color:#A2A69D;
  66. /* MAIN BACKGROUND^ (only matters if you don't wanna use an image) */
  67. background-image:url('URL HERE');
  68. /* ^ REPLACE "URL HERE" WITH YOUR IMAGE URL */
  69.  
  70.  
  71. /* BODY FONT DETAILS (won't really change much) */
  72. color:#fff;
  73. font-family:quicksand;
  74. font-size:10px;
  75. }
  76.  
  77. /* SECTION ONE - BACKGROUND STUFF */
  78.  
  79. .container {
  80. width:700px; height:450px;
  81. position:fixed; margin:auto;
  82. top:0px; bottom:0px; left:0px; right:0px;
  83. border-radius:0px 0px 7px 7px;
  84.  
  85. background-color:#8e8e8e;
  86. /* CHANGE CONTAINER COLOR */
  87. }
  88.  
  89. .topper {
  90. position:fixed; margin:auto;
  91. top:0px; bottom:465px; left:0px; right:0px;
  92. border-radius:7px 7px 0px 0px;
  93. width:690px; height:15px;
  94. padding:5px;
  95. z-index:2;
  96.  
  97. background-color:#222;
  98. /* CHANGE CONTAINER TOPPER COLOR */
  99. }
  100.  
  101. #dot1 {
  102. width:8px; height:8px;
  103. border-radius:100%;
  104. margin-top:4px;
  105. margin-left:3px;
  106.  
  107. background-color:#c83229;
  108. /* change dot color */
  109. }
  110.  
  111. #dot2 {
  112. width:8px; height:8px;
  113. border-radius:100%;
  114. margin-left:18px;
  115. margin-top:-8px;
  116.  
  117. background-color:#4d4d4d;
  118. /* change dot color */
  119. }
  120.  
  121. #dot3 {
  122. width:8px; height:8px;
  123. border-radius:100%;
  124. margin-left:33px;
  125. margin-top:-8px;
  126.  
  127. background-color:#7d8482;
  128. /* change dot color */
  129. }
  130.  
  131. #linear {
  132. position:fixed; margin:auto;
  133. top:0px; bottom:0px; left:0px; right:0px;
  134.  
  135. background-color:#222;
  136. /* CHANGE MIDDLE LINE COLOR */
  137. height:400px; width:1px;
  138. }
  139.  
  140. /* FIRST LEFT BOX */
  141.  
  142. .dot1 {
  143. border-radius:100%;
  144. width:9px; height:9px;
  145. position:fixed; margin:auto;
  146. left:0px; right:0px; top:225px;
  147. z-index:5;
  148.  
  149. background-color:#c83229;
  150. /* CHANGE TIMELINE DOT COLOR */
  151. }
  152.  
  153. #lin {
  154. height:1px; width:20px;
  155. background-color:#fff;
  156. /* CHANGE DASH COLOR */
  157. position:fixed; margin:auto;
  158. top:229px; left:1px; right:40px;
  159. z-index:4;
  160. }
  161.  
  162. .boxl {
  163. position:fixed; margin:auto;
  164. top:0px; bottom:270px; left:0px; right:355px;
  165. width:280px; height:90px;
  166. border-radius:0px 0px 7px 7px;
  167.  
  168. background-color:#111;
  169. /* CHANGE BOX COLOR */
  170. }
  171.  
  172. .boxltop {
  173. position:fixed; margin:auto;
  174. top:0px; bottom:360px; left:0px; right:355px;
  175. width:270px; height:8px;
  176. padding:5px; z-index:2;
  177. border-radius:7px 7px 0px 0px;
  178.  
  179. background-color:#222;
  180. /* CHANGE BOX TOPPER COLOR */
  181. }
  182.  
  183. #boxltxt {
  184. color:#fff; /* CHANGE TOPPER TEXT COLOR */
  185. text-align:center;
  186. margin-top:-11px;
  187. }
  188.  
  189. #button {
  190. width:8px; height:8px;
  191. border-radius:100%;
  192. margin-top:1px;
  193. margin-left:3px;
  194.  
  195. background-color:#7d8482;
  196. /* change dot color */
  197. }
  198.  
  199. .descl {
  200. color:#fff; /* CHANGE BOX TEXT COLOR */
  201. font-family:quicksand;
  202. text-align:left;
  203.  
  204. width:185px; height:56px;
  205. margin-top:20px; overflow:auto;
  206. margin-left:10px;
  207. }
  208.  
  209. .iconl {
  210. border-radius:100%;
  211. height:60px; width:60px;
  212. z-index:3;
  213. margin-top:-58px; margin-right:10px;
  214.  
  215. background-color:#7d8482;
  216. /* WILL SHOW UP WHEN U HOVER IMG; CHANGE COLOR. */
  217. }
  218.  
  219. /* SECOND LEFT BOX */
  220. .dot12 {
  221. border-radius:100%;
  222. width:9px; height:9px;
  223. position:fixed; margin:auto;
  224. left:0px; right:0px; top:380px;
  225. z-index:5;
  226.  
  227. background-color:#c83229;
  228. /* CHANGE TIMELINE DOT COLOR */
  229. }
  230.  
  231. #lin2 {
  232. height:1px; width:20px;
  233. background-color:#fff; /* CHANGE DASH COLOR */
  234. position:fixed; margin:auto;
  235. top:384px; left:1px; right:40px;
  236. z-index:4;
  237. }
  238.  
  239. .boxl2 {
  240. position:fixed; margin:auto;
  241. top:40px; bottom:0px; left:0px; right:355px;
  242. width:280px; height:90px;
  243. border-radius:0px 0px 7px 7px;
  244.  
  245. background-color:#111;
  246. /* CHANGE BOX COLOR */
  247. }
  248.  
  249. .boxltop2 {
  250. position:fixed; margin:auto;
  251. top:0px; bottom:53px; left:0px; right:355px;
  252. width:270px; height:8px;
  253. padding:5px; z-index:2;
  254. border-radius:7px 7px 0px 0px;
  255.  
  256. background-color:#222;
  257. /* CHANGE BOX TOPPER COLOR */
  258. }
  259.  
  260. #boxltxt2 {
  261. color:#fff; /* CHANGE TOPPER TEXT COLOR */
  262. text-align:center;
  263. margin-top:-11px;
  264. }
  265.  
  266. #button2 {
  267. width:8px; height:8px;
  268. border-radius:100%;
  269. margin-top:1px;
  270. margin-left:3px;
  271.  
  272. background-color:#7d8482;
  273. /* change dot color */
  274. }
  275.  
  276. .descl2 {
  277. color:#fff; /* CHANGE BOX TEXT COLOR */
  278. font-family:quicksand;
  279. text-align:left;
  280.  
  281. width:185px; height:56px;
  282. margin-top:20px; overflow:auto;
  283. margin-left:10px;
  284. }
  285.  
  286. .iconl2 {
  287. border-radius:100%;
  288. height:60px; width:60px;
  289. z-index:3;
  290. margin-top:-58px; margin-right:10px;
  291.  
  292. background-color:#7d8482;
  293. /* WILL SHOW UP WHEN U HOVER IMG, CHANGE COLOR. */
  294. }
  295.  
  296. /* THIRD LEFT BOX */
  297.  
  298. .dot13 {
  299. border-radius:100%;
  300. width:9px; height:9px;
  301. position:fixed; margin:auto;
  302. left:0px; right:0px; top:520px;
  303. z-index:5;
  304.  
  305. background-color:#c83229;
  306. /* CHANGE TIMELINE DOT COLOR */
  307. }
  308.  
  309. #lin3 {
  310. height:1px; width:20px;
  311. background-color:#fff; /* CHANGE DASH COLOR */
  312. position:fixed; margin:auto;
  313. top:524px; left:1px; right:40px;
  314. z-index:4;
  315. }
  316.  
  317. .boxl3 {
  318. position:fixed; margin:auto;
  319. top:310px; bottom:0px; left:0px; right:355px;
  320. width:280px; height:90px;
  321. border-radius:0px 0px 7px 7px;
  322.  
  323. background-color:#111;
  324. /* CHANGE BOX COLOR */
  325. }
  326.  
  327. .boxltop3 {
  328. position:fixed; margin:auto;
  329. top:225px; bottom:0px; left:0px; right:355px;
  330. width:270px; height:8px;
  331. padding:5px; z-index:2;
  332. border-radius:7px 7px 0px 0px;
  333.  
  334. background-color:#222;
  335. /* BOX TOPPER */
  336. }
  337.  
  338. #boxltxt3 {
  339. color:#fff; /*TOPPER TEXT*/
  340. text-align:center;
  341. margin-top:-11px;
  342. }
  343.  
  344. #button3 {
  345. width:8px; height:8px;
  346. border-radius:100%;
  347. margin-top:1px;
  348. margin-left:3px;
  349.  
  350. background-color:#7d8482;
  351. /* change dot color */
  352. }
  353.  
  354. .descl3 {
  355. color:#fff; /* BOX TEXT */
  356. font-family:quicksand;
  357. text-align:left;
  358.  
  359. width:185px; height:56px;
  360. margin-top:20px; overflow:auto;
  361. margin-left:10px;
  362. }
  363.  
  364. .iconl3 {
  365. border-radius:100%;
  366. height:60px; width:60px;
  367. z-index:3;
  368. margin-top:-58px; margin-right:10px;
  369.  
  370. background-color:#7d8482;
  371. /* WILL SHOW UP WHEN U HOVER; CHANGE COLOR. */
  372. }
  373.  
  374.  
  375. /* FIRST RIGHT BOX */
  376.  
  377. .dot2 {
  378. border-radius:100%;
  379. width:9px; height:9px;
  380. position:fixed; margin:auto;
  381. left:0px; right:0px; top:305px;
  382. z-index:5;
  383.  
  384. background-color:#111;
  385. /* TIMELINE DOT */
  386. }
  387.  
  388. #linr {
  389. height:1px; width:20px;
  390. background-color:#fff; /* DASH */
  391. position:fixed; margin:auto;
  392. top:309px; left:40px; right:1px;
  393. z-index:4;
  394. }
  395.  
  396. .boxr {
  397. position:fixed; margin:auto;
  398. top:0px; bottom:110px; left:355px; right:0px;
  399. width:280px; height:90px;
  400. border-radius:0px 0px 7px 7px;
  401.  
  402. background-color:#111;
  403. /* BOX COLOR */
  404. }
  405.  
  406. .boxrtop {
  407. position:fixed; margin:auto;
  408. top:0px; bottom:200px; left:355px; right:0px;
  409. width:270px; height:8px;
  410. padding:5px; z-index:2;
  411. border-radius:7px 7px 0px 0px;
  412.  
  413. background-color:#222;
  414. /* BOX TOPPER */
  415. }
  416.  
  417. #boxrtxt {
  418. color:#fff; /* TOPPER TEXT */
  419. text-align:center;
  420. margin-top:-11px;
  421. }
  422.  
  423. #buttonr {
  424. width:8px; height:8px;
  425. border-radius:100%;
  426. margin-top:1px;
  427. margin-left:3px;
  428.  
  429. background-color:#c83229;
  430. /* change dot color */
  431. }
  432.  
  433. .descr {
  434. color:#fff; /* BOX TEXT */
  435. font-family:quicksand;
  436. text-align:left;
  437.  
  438. width:185px; height:56px;
  439. margin-top:20px; overflow:auto;
  440. margin-right:10px;
  441. }
  442.  
  443. .iconr {
  444. border-radius:100%;
  445. height:60px; width:60px;
  446. z-index:3;
  447. margin-top:-58px; margin-left:10px;
  448.  
  449. background-color:#7d8482;
  450. /* WILL SHOW UP WHEN U HOVER; CHANGE COLOR. */
  451. }
  452.  
  453. /* SECOND RIGHT BOX */
  454.  
  455. .dot22 {
  456. border-radius:100%;
  457. width:9px; height:9px;
  458. position:fixed; margin:auto;
  459. left:0px; right:0px; top:465px;
  460. z-index:5;
  461.  
  462. background-color:#111;
  463. /* TIMELINE DOT */
  464. }
  465.  
  466. #linr2 {
  467. height:1px; width:20px;
  468. background-color:#fff; /* DASH */
  469. position:fixed; margin:auto;
  470. top:469px; left:40px; right:1px;
  471. z-index:4;
  472. }
  473.  
  474. .boxr2 {
  475. position:fixed; margin:auto;
  476. top:210px; bottom:0px; left:355px; right:0px;
  477. width:280px; height:90px;
  478. border-radius:0px 0px 7px 7px;
  479.  
  480. background-color:#111;
  481. /* BOX COLOR */
  482. }
  483.  
  484. .boxrtop2 {
  485. position:fixed; margin:auto;
  486. top:115px; bottom:0px; left:355px; right:0px;
  487. width:270px; height:8px;
  488. padding:5px; z-index:2;
  489. border-radius:7px 7px 0px 0px;
  490.  
  491. background-color:#222;
  492. /* BOX TOPPER */
  493. }
  494.  
  495. #boxrtxt2 {
  496. color:#fff; /* TOPPER TEXT */
  497. text-align:center;
  498. margin-top:-11px;
  499. }
  500.  
  501. #buttonr2 {
  502. width:8px; height:8px;
  503. border-radius:100%;
  504. margin-top:1px;
  505. margin-left:3px;
  506.  
  507. background-color:#c83229;
  508. /* change dot color */
  509. }
  510.  
  511. .descr2 {
  512. color:#fff; /* BOX TEXT */
  513. font-family:quicksand;
  514. text-align:left;
  515.  
  516. width:185px; height:56px;
  517. margin-top:20px; overflow:auto;
  518. margin-right:10px;
  519. }
  520.  
  521. .iconr2 {
  522. border-radius:100%;
  523. height:60px; width:60px;
  524. z-index:3;
  525. margin-top:-58px; margin-left:10px;
  526.  
  527. background-color:#7d8482;
  528. /* WILL SHOW UP WHEN U HOVER; CHANGE COLOR. */
  529. }
  530.  
  531. #toptext {
  532. text-align:center;
  533. margin-top:-11px;
  534. }
  535.  
  536. b, strong { color:#c83229; } /* change bold color */
  537. a, href { text-decoration:none; }
  538.  
  539.  
  540.  
  541. /* pwease don't touch ty */
  542. #cred {
  543. width:15px; height:15px;
  544. position:bottom;
  545. background-color:#222;
  546. padding:5px;
  547. border-radius:5px;
  548.  
  549. position:fixed;
  550. bottom:0px; right:0px;
  551. }
  552.  
  553. .credit {
  554. margin-top:3px; margin-left:3px;
  555. }
  556.  
  557. .credit a {
  558. color:#fff; text-decoration:none;
  559. }
  560.  
  561. </style>
  562.  
  563. <body>
  564.  
  565. <div class="topper">
  566. <div id="dot1"></div><div id="dot2"></div><div id="dot3"></div>
  567. <div id="toptext">TIMELINE FOR <B>GROUP NAME</B></div>
  568. </div>
  569. <div class="container">
  570.  
  571. <!-- FIRST LEFT BOX -->
  572. <div class="dot1"></div><div id="lin"></div>
  573. <div class="boxltop"><div id="button"></div>
  574. <div id="boxltxt">
  575. MONTH #, ####: <i>text here</i>
  576. </div></div>
  577. <div class="boxl">
  578. <div class="descl">
  579. TEXT HERE
  580. </div>
  581. <div align="right"><div class="iconl"><img src="IMAGEURL"/></div></div>
  582. <!-- END -->
  583.  
  584. <!-- SECOND LEFT BOX -->
  585. <div class="dot12"></div><div id="lin2"></div>
  586. <div class="boxltop2"><div id="button2"></div>
  587. <div id="boxltxt2">
  588. MONTH #, ####: <i>text here</i>
  589. </div></div>
  590. <div class="boxl2">
  591. <div class="descl2">
  592. TEXT HERE
  593. </div>
  594. <div align="right"><div class="iconl2"><img src="IMAGEURL"/></div></div>
  595. <!-- END -->
  596.  
  597. <!-- THIRD LEFT BOX -->
  598. <div class="dot13"></div><div id="lin3"></div>
  599. <div class="boxltop3"><div id="button3"></div>
  600. <div id="boxltxt3">
  601. MONTH #, ####: <i>text here</i>
  602. </div></div>
  603. <div class="boxl3">
  604. <div class="descl3">
  605. TEXT HERE!
  606. </div>
  607. <div align="right"><div class="iconl3"><img src="IMAGEURL"/></div></div>
  608. <!-- END BOX -->
  609.  
  610.  
  611. <!-- 1ST RIGHT BOX -->
  612. <div class="dot2"></div><div id="linr"></div>
  613. <div class="boxrtop"><div id="buttonr"></div>
  614. <div id="boxrtxt">
  615. MONTH #, ####: <i>text here</i>
  616. </div></div>
  617. <div class="boxr">
  618. <div align="right"><div class="descr">
  619. TEXT HERE
  620. </div></div>
  621. <div align="left"><div class="iconr"><img src="IMAGEURL"/></div></div>
  622. <!-- box end -->
  623.  
  624. <!-- 2ND RIGHT BOX -->
  625. <div class="dot22"></div><div id="linr2"></div>
  626. <div class="boxrtop2"><div id="buttonr2"></div>
  627. <div id="boxrtxt2">
  628. MONTH #, ####: <i>text here</i>
  629. </div></div>
  630. <div class="boxr2">
  631. <div align="right"><div class="descr2">
  632. TEXT HERE!!!
  633. </div></div>
  634. <div align="left"><div class="iconr2"><img src="IMAGEURL"/></div></div>
  635. <!-- box end -->
  636.  
  637.  
  638. </div>
  639.  
  640. <div id="linear"></div>
  641. </div>
  642.  
  643. <div id="cred"><div class="credit"><a title="theme credit" href="http://jungjnsoul.tumblr.com/"><span class="lnr lnr-paw"></span></a></div></div>
  644.  
  645. </body>
  646. </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!