API tools faq
paste
plutoniumthm

Page 02 - Cosmonaut

plutoniumthm
Aug 23rd, 2019
6,497
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.91 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!---
  6.  
  7. Cosmonaut
  8.  
  9. plutoniumthm @ tumblr.com
  10.  
  11. --->
  12.  
  13. <link href="https://fonts.googleapis.com/css?family=Overpass:100,100i,200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
  14.  
  15. <script src="https://kit.fontawesome.com/c2d255a331.js" crossorigin="anonymous"></script>
  16.  
  17. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  18.  
  19. <style>
  20.  
  21. @import url('https://rsms.me/inter/inter.css');
  22.  
  23. body {
  24. font-family:'Overpass', sans-serif; /* font for the entire page */
  25. background-color:#f0b041;
  26. }
  27.  
  28. a {
  29. text-decoration:none;
  30. transition:0.25s;
  31. color:#f0b041;
  32. }
  33.  
  34. a:hover {
  35. transition:0.25s;
  36. color:#31312d;
  37. }
  38.  
  39. /* DON'T EDIT ANYTHING FROM HERE ... */
  40.  
  41. ::-webkit-scrollbar {
  42. width: 20px;
  43. }
  44.  
  45. ::-webkit-scrollbar-thumb {
  46. background:#31312d;
  47. border-left:4px solid #31312d;
  48. }
  49.  
  50. ::-webkit-scrollbar-thumb:active {
  51. background:#f0b041; /* except this; you can change this if u want. this is the color of the scrollbar handle when you click on it */
  52. }
  53.  
  54. ::-webkit-scrollbar-button:start:decrement {
  55. background:#31312d url('https://66.media.tumblr.com/44d9420ea4dcc913aec4b0f0f64e69e3/400ea74849283ed6-e7/s540x810/69bb44842644d66f653f0d96d629dcf82ad00e7d.png');
  56. background-position: 4px -1px;
  57. background-repeat:no-repeat;
  58. padding:2px;
  59. }
  60.  
  61. ::-webkit-scrollbar-button:start:decrement:active {
  62. background:#31312d url('https://66.media.tumblr.com/44d9420ea4dcc913aec4b0f0f64e69e3/400ea74849283ed6-e7/s540x810/69bb44842644d66f653f0d96d629dcf82ad00e7d.png');
  63. background-position: 4px -1px;
  64. background-repeat:no-repeat;
  65. padding:2px;
  66. }
  67.  
  68. ::-webkit-scrollbar-button:end:increment {
  69. background:#31312d url('https://66.media.tumblr.com/ff5409edca562e7ff9ecc22e57441296/f04e3000270d9ca7-bc/s540x810/2eb78db50d3a7e562ca2d94e21488d394563e471.png');
  70. background-position: 4px 1px;
  71. background-repeat:no-repeat;
  72. padding-right:2px;
  73. }
  74.  
  75. ::-webkit-scrollbar-button:end:increment:active {
  76. background:#31312d url('https://66.media.tumblr.com/ff5409edca562e7ff9ecc22e57441296/f04e3000270d9ca7-bc/s540x810/2eb78db50d3a7e562ca2d94e21488d394563e471.png');
  77. background-position: 4px 1px;
  78. background-repeat:no-repeat;
  79. padding-right:2px;
  80. }
  81.  
  82. ::-webkit-scrollbar-track {
  83. border-left:4px solid #31312d;
  84. background:url('https://66.media.tumblr.com/186b40f3db599886ed29be054e505672/tumblr_inline_pm3vyaTvgo1rdf769_75sq.png');
  85. background:#faf4e7;
  86. }
  87.  
  88. /* ... TO HERE */
  89.  
  90. ::selection {
  91. background-color:#f0b041; /* background color for text selection */
  92. }
  93.  
  94.  
  95.  
  96.  
  97. /* --- MAIN WINDOW/CONTAINER --- */
  98.  
  99. /* --- all colors below this point can be changed. other elements can be changed as well, though i'd recommend being familiar with css first --- */
  100.  
  101. #window {
  102. background-color:#faf4e7;
  103. border:4px solid #31312d;
  104. border-radius:20px;
  105. width:800px;
  106. height:500px;
  107. margin-top:20vh;
  108. box-shadow: 15px 15px 0px 0px #31312d;
  109. overflow:hidden;
  110. }
  111.  
  112. #window_header {
  113. background-color:rgba(49,49,45,0.2);
  114. border-bottom:4px solid #31312d;
  115. padding:15px;
  116. font-size:22px;
  117. text-transform:capitalize;
  118. color:#31312d;
  119. font-weight:900;
  120. }
  121.  
  122. .window_header_button-1 {
  123. height:12px;
  124. width:12px;
  125. position:absolute;
  126. border:4px solid #31312d;
  127. border-radius:100%;
  128. background:#31312d;
  129. margin-top:2px;
  130. }
  131.  
  132. .window_header_button-2 {
  133. height:12px;
  134. width:12px;
  135. position:absolute;
  136. border:4px solid #31312d;
  137. border-radius:100%;
  138. background-color:#faf4e7;
  139. margin-left:27px;
  140. margin-top:2px;
  141. transition:0.25s;
  142. }
  143.  
  144. .window_header_button-2:hover {
  145. cursor:pointer;
  146. background-color:rgba(49,49,45,0.6);
  147. transition:0.25s;
  148. }
  149.  
  150. .window_header_button-3 {
  151. height:12px;
  152. width:12px;
  153. position:absolute;
  154. border:4px solid #31312d;
  155. border-radius:100%;
  156. background-color:#faf4e7;
  157. margin-left:54px;
  158. margin-top:2px;
  159. transition:0.25s;
  160. }
  161.  
  162. .window_header_button-3:hover {
  163. cursor:pointer;
  164. background-color:rgba(49,49,45,0.6);
  165. transition:0.25s;
  166. }
  167.  
  168. #window_sidebar {
  169. border-right:4px solid #31312d;
  170. width:250px;
  171. height:394px;
  172. float:left;
  173. text-align:left;
  174. overflow:auto;
  175. }
  176.  
  177. #window_header_nav {
  178. font-size:14px;
  179. padding:10px;
  180. text-align:left;
  181. padding-bottom:0px;
  182. padding-top:0px;
  183. background-color:rgba(49,49,45,0.1);
  184. }
  185.  
  186. #window_header_nav_links {
  187. width:220px;
  188. border-bottom:4px solid #31312d;
  189. border-right:4px solid #31312d;
  190. padding:10px;
  191. padding-left:20px;
  192. margin-left:-10px;
  193. }
  194.  
  195. #window_header_nav_links a {
  196. text-align:center;
  197. display:inline-block;
  198. color:#31312d;
  199. font-size:16px;
  200. margin-right:15px;
  201. }
  202.  
  203. #window_header_nav_links a:hover {
  204. color:#f0b041;
  205. }
  206.  
  207.  
  208.  
  209.  
  210. /* --- TABS --- */
  211.  
  212. .tab {
  213.  
  214. }
  215.  
  216. .tab button {
  217. display:block;
  218. color:black;
  219. margin-bottom:0px;
  220. padding:20px;
  221. padding-left:20px;
  222. font-weight:700;
  223. width:100%;
  224. border:none;
  225. outline:none;
  226. text-align:left;
  227. cursor:pointer;
  228. transition:0.3s;
  229. font-size:14px;
  230. font-family:inherit;
  231. background-color:inherit;
  232. color:#31312d;
  233. }
  234.  
  235. .tab button:hover {
  236. background-color:rgba(240,176,65,0.4);
  237. /* the rgba values above correspond to #f0b041 in the '.tab button.active' div below. to get these values, just go to any color picker site, choose a color, and it should give you rgb values. just copy and paste the three numbers and you're good to go */
  238.  
  239. /* this can also be changed to any color you want, and doesn't have to be an rgb one */
  240. }
  241.  
  242. .tab button.active {
  243. background-color:#f0b041;
  244. font-style:italic;
  245. font-weight:700;
  246. transition:0.25s;
  247. }
  248.  
  249. .tab button.active .fa-user {
  250. margin-right:15px;
  251. transition:0.25s;
  252. }
  253.  
  254. .tab button.active .fa-books {
  255. margin-right:15px;
  256. transition:0.25s;
  257. }
  258.  
  259. .tab button.active .fa-video {
  260. margin-right:15px;
  261. transition:0.25s;
  262. }
  263.  
  264. .tab button.active .fa-music {
  265. margin-right:15px;
  266. transition:0.25s;
  267. }
  268.  
  269. .tab button.active .fa-users {
  270. margin-right:15px;
  271. transition:0.25s;
  272. }
  273.  
  274. .tab button.active .fa-tags {
  275. margin-right:15px;
  276. transition:0.25s;
  277. }
  278.  
  279. .tab button.active .fa-tv-retro {
  280. margin-right:15px;
  281. transition:0.25s;
  282. }
  283.  
  284. .fa-user, .fa-books, .fa-video, .fa-music, .fa-users, .fa-tags, .fa-tv-retro {
  285. transition:0.25s;
  286. font-size:16px;
  287. vertical-align:middle;
  288. margin-right:10px;
  289. }
  290.  
  291.  
  292.  
  293.  
  294. /* --- TAB CONTENT --- */
  295.  
  296. .tabcontent {
  297. position:absolute;
  298. height:353px;
  299. width:486px;
  300. margin-top:0px;
  301. margin-left:254px;
  302. padding:20px;
  303. padding-left:30px;
  304. padding-right:30px;
  305. border-bottom-right-radius:20px;
  306. text-align:left;
  307. overflow:auto;
  308. font-size:14px;
  309. line-height:28px;
  310. color:#31312d;
  311. }
  312.  
  313. .tabcontent_header {
  314. border-bottom:4px solid #31312d;
  315. padding:5px;
  316. padding-bottom:6px;
  317. width:486px;
  318. padding-left:30px;
  319. padding-right:30px;
  320. margin-left:-30px;
  321. margin-top:-63px;
  322. margin-bottom:30px;
  323. font-weight:700;
  324. position:fixed;
  325. background-color:rgba(49,49,45,0.01);
  326. text-align:right;
  327. }
  328.  
  329.  
  330.  
  331.  
  332. /* --- TAB ONE (BIO) CONTENT --- */
  333.  
  334. .info_header {
  335. padding:10px;
  336. border:4px solid #31312d;
  337. border-radius:10px;
  338. font-size:16px;
  339. font-weight:700;
  340. margin-bottom:30px;
  341. }
  342.  
  343. .fa-smile, .fa-grin, .fa-grin-beam, .fa-grin-stars, .fa-grin-tongue-wink, .fa-grin-wink, .fa-kiss-wink-heart, .fa-laugh, .fa-laugh-beam, .fa-laugh-wink, .fa-meh, .fa-smile-beam, .fa-grin-hearts {
  344. background:#31312d;
  345. color:#faf4e7;
  346. padding:10px;
  347. padding-bottom:6px;
  348. border-radius:10px;
  349. font-size:40px;
  350. vertical-align:middle;
  351. margin-right:10px;
  352. }
  353.  
  354. .info_piece {
  355. padding:5px;
  356. border:4px solid #31312d;
  357. border-radius:10px;
  358. font-size:13px;
  359. width:220px;
  360. margin-right:3px;
  361. display:inline-block;
  362. margin-bottom:10px;
  363. font-weight:700;
  364. text-align:center;
  365. transition:0.25s;
  366. }
  367.  
  368. .info_piece:hover {
  369. background-color:rgba(49,49,45,0.2);
  370. transition:0.25s;
  371. }
  372.  
  373.  
  374.  
  375.  
  376. /* --- TAB TWO (BOOKS) CONTENT --- */
  377.  
  378. .book {
  379. display:block;
  380. padding:15px;
  381. border:4px solid #31312d;
  382. border-radius:10px;
  383. font-size:16px;
  384. font-weight:700;
  385. margin-bottom:20px;
  386. text-align:left;
  387. min-height:55px;
  388. line-height:18px;
  389. transition:0.25s;
  390. }
  391.  
  392. .book:hover {
  393. background-color:rgba(49,49,45,0.2);
  394. transition:0.25s;
  395. }
  396.  
  397. .book_content {
  398. font-size:20px;
  399. margin-top:10px;
  400. }
  401.  
  402. .book_author {
  403. font-size:12px;
  404. font-weight:500;
  405. margin-top:5px;
  406. font-style:italic;
  407. }
  408.  
  409. .book_info {
  410. font-size:12px;
  411. font-weight:500;
  412. margin-top:5px;
  413. line-height:20px;
  414. }
  415.  
  416. .fa-book {
  417. background:#31312d;
  418. color:#faf4e7;
  419. padding:10px;
  420. padding-bottom:6px;
  421. border-radius:10px;
  422. font-size:40px;
  423. vertical-align:middle;
  424. margin-right:15px;
  425. float:left;
  426. }
  427.  
  428.  
  429.  
  430.  
  431. /* --- TAB THREE (MOVIES) CONTENT --- */
  432.  
  433. .movie {
  434. display:block;
  435. padding:15px;
  436. border:4px solid #31312d;
  437. border-radius:10px;
  438. font-size:16px;
  439. font-weight:700;
  440. margin-bottom:20px;
  441. text-align:left;
  442. min-height:55px;
  443. line-height:18px;
  444. transition:0.25s;
  445. }
  446.  
  447. .movie:hover {
  448. background-color:rgba(49,49,45,0.2);
  449. transition:0.25s;
  450. }
  451.  
  452. .movie_content {
  453. font-size:20px;
  454. margin-top:20px;
  455. }
  456.  
  457. .movie_info {
  458. font-size:12px;
  459. font-weight:500;
  460. margin-top:0px;
  461. line-height:20px;
  462. }
  463.  
  464. .fa-film-alt {
  465. background:#31312d;
  466. color:#faf4e7;
  467. padding:10px;
  468. padding-bottom:6px;
  469. border-radius:10px;
  470. font-size:40px;
  471. vertical-align:middle;
  472. margin-right:15px;
  473. float:left;
  474. }
  475.  
  476.  
  477.  
  478.  
  479. /* --- TAB FOUR (MUSIC) CONTENT --- */
  480.  
  481. .album_wrapper {
  482. display:block;
  483. margin-bottom:30px;
  484. transition:0.35s;
  485. padding-bottom:30px;
  486. border-bottom:4px solid #31312d;
  487. }
  488.  
  489. .album_wrapper:last-of-type {
  490. border-bottom:none;
  491. margin-bottom:10px;
  492. padding-bottom:0px;
  493. }
  494.  
  495. .album_art {
  496. width:150px;
  497. height:150px;
  498. transition:0.35s;
  499. }
  500.  
  501. .album_art img {
  502. width:150px;
  503. height:150px;
  504. border-radius:5px;
  505. }
  506.  
  507. .album_disc {
  508. z-index:1;
  509. width:140px;
  510. height:140px;
  511. border-radius:100%;
  512. background-color:#31312d;
  513. margin-top:-154px;
  514. margin-left:70px;
  515. transition:0.35s;
  516. }
  517.  
  518. .album_disc_inner {
  519. width:60px;
  520. height:60px;
  521. border-radius:100%;
  522. margin-left:110px;
  523. margin-top:-101px;
  524. transition:0.35s;
  525. }
  526.  
  527. .album_disc_inner_inner {
  528. background-color:#faf4e7;
  529. width:10px;
  530. height:10px;
  531. border-radius:100%;
  532. margin-top:-35px;
  533. margin-left:105px;
  534. transition:0.35s;
  535. }
  536.  
  537. .album_art:hover .album_disc {
  538. margin-left:90px;
  539. transition:0.35s;
  540. }
  541.  
  542. .album_art:hover .album_disc_inner {
  543. margin-left:130px;
  544. transition:0.35s;
  545. }
  546.  
  547. .album_art:hover .album_disc_inner_inner {
  548. margin-left:155px;
  549. transition:0.35s;
  550. }
  551.  
  552. .album_title {
  553. float:right;
  554. text-align:right;
  555. font-size:18px;
  556. font-weight:800;
  557. margin-top:-100px;
  558. opacity:0;
  559. transition:0.35s;
  560. transform:translateX(20px);
  561. }
  562.  
  563. .album_artist {
  564. float:right;
  565. font-size:14px;
  566. font-weight:500;
  567. font-style:italic;
  568. text-align:right;
  569. }
  570.  
  571. .album_wrapper:hover .album_title {
  572. opacity:1;
  573. transform:translateX(0px);
  574. transition:0.35s;
  575. transition-delay:0.5s;
  576. }
  577.  
  578.  
  579.  
  580.  
  581. /* --- TAB FIVE (TV) CONTENT --- */
  582.  
  583. .tv_show {
  584. display:block;
  585. padding:15px;
  586. border:4px solid #31312d;
  587. border-radius:10px;
  588. font-size:16px;
  589. font-weight:700;
  590. margin-bottom:20px;
  591. text-align:left;
  592. min-height:55px;
  593. line-height:18px;
  594. transition:0.25s;
  595. }
  596.  
  597. .tv_show_content {
  598. font-size:20px;
  599. margin-top:20px;
  600. }
  601.  
  602. .tv_show_info {
  603. font-size:12px;
  604. font-weight:500;
  605. margin-top:0px;
  606. line-height:20px;
  607. }
  608.  
  609. .fa-tv {
  610. background:#31312d;
  611. color:#faf4e7;
  612. padding:10px;
  613. padding-bottom:6px;
  614. border-radius:10px;
  615. font-size:40px;
  616. vertical-align:middle;
  617. margin-right:15px;
  618. float:left;
  619. }
  620.  
  621. .tv_show_info_piece {
  622. padding:5px;
  623. border:4px solid #31312d;
  624. background-color:#f0b041;
  625. border-radius:10px;
  626. font-size:13px;
  627. width:190px;
  628. margin-right:3px;
  629. display:inline-block;
  630. text-align:center;
  631. margin-bottom:10px;
  632. font-weight:700;
  633. transition:0.25s;
  634. }
  635.  
  636.  
  637.  
  638.  
  639. /* --- TAB SIX (SOCIAL MEDIA) CONTENT --- */
  640.  
  641. .social_media_card {
  642. border:4px solid #31312d;
  643. padding:10px;
  644. border-radius:10px;
  645. margin-left:5px;
  646. margin-right:5px;
  647. width:112px;
  648. display:inline-block;
  649. text-align:center;
  650. line-height:20px;
  651. font-size:12px;
  652. font-weight:600;
  653. margin-bottom:10px;
  654. transition:0.2s;
  655. }
  656.  
  657. .social_media_card:hover {
  658. background-color:#f0b041;
  659. transition:0.2s;
  660. transform:scale(1.1);
  661. cursor:pointer;
  662. }
  663.  
  664. .fa-behance, .fa-codepen, .fa-deviantart, .fa-discord, .fa-dribbble, .fa-ello, .fa-flickr, .fa-github, .fa-instagram, .fa-pinterest, .fa-reddit-alien, .fa-snapchat-ghost, .fa-skype, .fa-steam, .fa-spotify, .fa-twitch, .fa-twitter {
  665. font-size:25px;
  666. vertical-align:middle;
  667. font-weight:normal;
  668. }
  669.  
  670.  
  671.  
  672.  
  673. /* --- TAB SEVEN (TAGS) CONTENT --- */
  674.  
  675. .tags {
  676.  
  677. }
  678.  
  679. .tags a {
  680. display:inline-block;
  681. background-color:#f0b041;
  682. padding:5px;
  683. color:#31312d;
  684. font-weight:600;
  685. border-radius:10px;
  686. margin:5px;
  687. }
  688.  
  689. .tags a:hover {
  690. background-color:#31312d;
  691. color:#faf4e7;
  692. }
  693.  
  694. .tags_category_name {
  695. font-size:18px;
  696. font-weight:700;
  697. margin-bottom:10px;
  698. margin-top:30px;
  699. }
  700.  
  701. .tags_category_name:first-of-type {
  702. margin-top:0px;
  703. }
  704.  
  705. </style>
  706. </head>
  707.  
  708.  
  709. <body>
  710.  
  711. <div align="center">
  712. <div id="window">
  713.  
  714. <div id="window_header">
  715. <div class="window_header_button-1"></div>
  716. <div class="window_header_button-2"></div>
  717. <div class="window_header_button-3"></div>
  718.  
  719. Cosmonaut <!--- the title/name of the page; change to whatever you want --->
  720. </div> <!--- END OF DIV ID 'WINDOW_HEADER' --->
  721.  
  722.  
  723. <div id="window_header_nav">
  724. <div id="window_header_nav_links">
  725. <a href="/follow/{Name}"><i class="fas fa-plus"></i></a>
  726. <a href="/ask"><i class="fas fa-comment"></i></a>
  727. <a href="https://{Name}.tumblr.com/"><i class="fas fa-reply"></i></a>
  728. <!-- DON'T TOUCH THE CREDIT LINK -->
  729. <a href="https://plutoniumthm.tumblr.com/"><i class="fas fa-radiation-alt"></i></a>
  730. </div>
  731. </div> <!--- END OF DIV ID 'WINDOW_HEADER_NAV' --->
  732.  
  733.  
  734. <div id="window_sidebar">
  735. <div class="tab">
  736. <button class="tablinks" onclick="openTab(event, 'one')" id="defaultOpen"><i class="fas fa-user"></i> Bio</button>
  737. <button class="tablinks" onclick="openTab(event, 'two')"><i class="fas fa-books"></i> Books</button>
  738. <button class="tablinks" onclick="openTab(event, 'three')"><i class="fas fa-video"></i> Movies</button>
  739. <button class="tablinks" onclick="openTab(event, 'four')"><i class="fas fa-music"></i> Music</button>
  740. <button class="tablinks" onclick="openTab(event, 'five')"><i class="fad fa-tv-retro"></i> TV</button>
  741. <button class="tablinks" onclick="openTab(event, 'six')"><i class="fas fa-users"></i> Social</button>
  742. <button class="tablinks" onclick="openTab(event, 'seven')"><i class="fas fa-tags"></i> Tags</button>
  743. </div>
  744. </div> <!--- END OF DIV ID 'WINDOW_SIDEBAR' --->
  745.  
  746.  
  747.  
  748. <!--- TAB ONE CONTENT ------------------------------------------------------->
  749.  
  750. <div id="one" class="tabcontent">
  751. <div id="one" class="tabcontent_header">About me</div>
  752.  
  753. <!---
  754.  
  755. BIO CUSTOMIZATION GUIDE:
  756.  
  757. - simply replace the text below with your own text about yourself
  758.  
  759. - for example, you'd replace 'Kay' with your name, 'Pronouns: she/her' with your pronouns, 'Location: USA' with where you live, and so on
  760.  
  761. --->
  762.  
  763. <div class="info_header">
  764. <i class="fad fa-laugh"></i> Hi, I'm Kay! <!-- replace with your name -->
  765. </div>
  766.  
  767. <!---
  768.  
  769. NOTE: 'fa-laugh' can be replaced with the following:
  770.  
  771. - fa-grin
  772. - fa-grin-beam
  773. - fa-grin-stars
  774. - fa-grin-tongue-wink
  775. - fa-grin-wink
  776. - fa-kiss-wink-heart
  777. - fa-smile
  778. - fa-laugh-beam
  779. - fa-laugh-wink
  780. - fa-meh
  781. - fa-smile-beam
  782. - fa-grin-hearts
  783.  
  784. also, 'fad' can be replaced with fas, far, and fal. play around with it and see which combo you like best!
  785.  
  786. --->
  787.  
  788. <div class="info_piece">Pronouns: she/her</div>
  789. <div class="info_piece">Location: USA</div>
  790. <br>
  791. <div class="info_piece">Age: 23 years young</div>
  792. <div class="info_piece">Birthday: august 7th</div>
  793. <br>
  794. <div class="info_piece">Fav color: yellow ochre</div>
  795. <div class="info_piece">Sign: leo</div>
  796.  
  797. </div>
  798.  
  799.  
  800.  
  801. <!--- TAB TWO CONTENT ------------------------------------------------------->
  802.  
  803. <div id="two" class="tabcontent">
  804. <div id="two" class="tabcontent_header">My favorite books</div>
  805.  
  806. <!---
  807.  
  808. BOOK CUSTOMIZATION GUIDE:
  809.  
  810. - simply replace the text below with your own text about your favorite books
  811.  
  812. - for example, you'd replace 'The Hobbit' with your title, 'J. R. R. Tolkien' with your author, and the 'Lorem ipsum' paragraph with your own info about the book (such as a synopsis, rating, and why you like it so much)
  813.  
  814. --->
  815.  
  816. <div class="book">
  817. <i class="fad fa-book"></i>
  818. <div class="book_content">
  819. The Hobbit<br>
  820. <div class="book_author">
  821. J. R. R. Tolkien
  822. </div>
  823. <br>
  824. <div class="book_info">
  825. Lorem ipsum dolor sit amet, <b>consectetur</b> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget egestas purus viverra accumsan in nisl nisi. Adipiscing commodo elit at imperdiet dui accumsan sit. Risus viverra adipiscing at in tellus. Semper viverra nam <a href="#">libero justo</a> laoreet sit amet.
  826. </div>
  827. </div>
  828. </div>
  829.  
  830. <!--- copy from here... --->
  831. <div class="book">
  832. <i class="fad fa-book"></i>
  833. <div class="book_content">
  834. Wuthering Heights<br>
  835. <div class="book_author">
  836. Emily Brontë
  837. </div>
  838. <br>
  839. <div class="book_info">
  840. Vivamus at augue eget arcu <a href="#">dictum varius</a> duis at. Sagittis purus sit amet volutpat. Risus nec feugiat in fermentum. Ultricies leo integer malesuada nunc vel risus. Quis enim lobortis scelerisque fermentum dui faucibus in ornare.
  841. </div>
  842. </div>
  843. </div>
  844. <!--- ... to here, and paste below this text to add a new book --->
  845.  
  846. </div>
  847.  
  848.  
  849.  
  850. <!--- TAB THREE CONTENT ----------------------------------------------------->
  851.  
  852. <div id="three" class="tabcontent">
  853. <div id="three" class="tabcontent_header">My favorite movies</div>
  854.  
  855. <!---
  856.  
  857. MOVIE CUSTOMIZATION GUIDE:
  858.  
  859. - simply replace the text below with your own text about your favorite movies
  860.  
  861. - for example, you'd replace 'Donnie Darko' with your movie title, and the 'Lorem ipsum' paragraph with your own info about the movie (such as a synopsis, rating, and why you like it so much)
  862.  
  863. --->
  864.  
  865. <div class="movie">
  866. <i class="fad fa-film-alt"></i>
  867. <div class="movie_content">
  868. Donnie Darko
  869. <br>
  870. <br>
  871. <br>
  872. <div class="movie_info">
  873. Vivamus at augue eget arcu <a href="#">dictum varius</a> duis at. Sagittis purus sit amet volutpat. Risus nec feugiat in fermentum. Ultricies leo integer malesuada nunc vel risus. Quis enim lobortis scelerisque fermentum dui faucibus in ornare.
  874. </div>
  875. </div>
  876. </div>
  877.  
  878. <div class="movie">
  879. <i class="fad fa-film-alt"></i>
  880. <div class="movie_content">
  881. Scott Pilgrim vs. The World
  882. <br>
  883. <br>
  884. <br>
  885. <div class="movie_info">
  886. Lorem ipsum dolor sit amet, <b>consectetur</b> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget egestas purus viverra accumsan in nisl nisi. Adipiscing commodo elit at imperdiet dui accumsan sit. Risus viverra adipiscing at in tellus. Semper viverra nam <a href="#">libero justo</a> laoreet sit amet.
  887. </div>
  888. </div>
  889. </div>
  890.  
  891. <!--- copy from here... --->
  892. <div class="movie">
  893. <i class="fad fa-film-alt"></i>
  894. <div class="movie_content">
  895. Inglorious Basterds
  896. <br>
  897. <br>
  898. <br>
  899. <div class="movie_info">
  900. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Platea dictumst quisque sagittis purus sit amet volutpat consequat mauris. <b>Sollicitudin</b> aliquam ultrices sagittis orci. Neque laoreet suspendisse interdum consectetur. <br><br>Egestas egestas fringilla phasellus faucibus scelerisque eleifend. Diam donec adipiscing tristique risus nec feugiat in fermentum. Eleifend mi in nulla posuere sollicitudin aliquam ultrices.
  901. </div>
  902. </div>
  903. </div>
  904. <!--- ... to here, and paste below this text to add a new movie --->
  905.  
  906. </div>
  907.  
  908.  
  909.  
  910. <!--- TAB FOUR CONTENT ------------------------------------------------------>
  911.  
  912. <div id="four" class="tabcontent">
  913. <div id="four" class="tabcontent_header">My favorite albums</div>
  914.  
  915. <!---
  916.  
  917. ALBUM CUSTOMIZATION GUIDE:
  918.  
  919. - simply replace the information below with your own
  920.  
  921. - for example, you'd replace 'https://media.pitchfork.com/photos/5929abe85e6ef95969321827/1:1/w_320/8a2cb994.jpg' with the url to the image of your album, 'Father John Misty' with your artist, and 'I Love You, Honeybear' with your album title
  922.  
  923. - additionally, the part 'background-color:#FEBCC8;' can be changed too. personally, i used an image color picker and chose a color that complemented the album cover, so you can either do that or pick literally any color you want
  924.  
  925. --->
  926.  
  927. <div class="album_wrapper">
  928. <div class="album_art">
  929. <img src="https://media.pitchfork.com/photos/5929abe85e6ef95969321827/1:1/w_320/8a2cb994.jpg">
  930.  
  931. <div class="album_disc"></div>
  932. <div class="album_disc_inner" style="background-color:#FEBCC8;"></div>
  933. <div class="album_disc_inner_inner"></div>
  934. </div>
  935.  
  936. <div class="album_title">
  937. I Love You, Honeybear<br>
  938. <div class="album_artist">Father John Misty</div>
  939. </div>
  940. </div>
  941.  
  942.  
  943. <div class="album_wrapper">
  944. <div class="album_art">
  945. <img src="https://www.themontrealreview.com/pics2/FJM_FEAR_FUN_COVER.jpg">
  946.  
  947. <div class="album_disc"></div>
  948. <div class="album_disc_inner" style="background-color:#84C9C6;"></div>
  949. <div class="album_disc_inner_inner"></div>
  950. </div>
  951.  
  952. <div class="album_title">
  953. Fear Fun<br>
  954. <div class="album_artist">Father John Misty</div>
  955. </div>
  956. </div>
  957.  
  958.  
  959. <!--- to add a new album, copy from here... --->
  960. <div class="album_wrapper">
  961. <div class="album_art">
  962. <img src="https://images-na.ssl-images-amazon.com/images/I/51wMEJc0T3L._SY355_.jpg">
  963.  
  964. <div class="album_disc"></div>
  965. <div class="album_disc_inner" style="background-color:#AC7C56;"></div>
  966. <div class="album_disc_inner_inner"></div>
  967. </div>
  968.  
  969. <div class="album_title">
  970. The Hawk Is Howling<br>
  971. <div class="album_artist">Mogwai</div>
  972. </div>
  973. </div>
  974. <!--- ...to here, and paste below this text --->
  975.  
  976. </div>
  977.  
  978.  
  979.  
  980. <!--- TAB FIVE CONTENT ------------------------------------------------------>
  981.  
  982. <div id="five" class="tabcontent">
  983. <div id="five" class="tabcontent_header">My favorite TV shows</div>
  984.  
  985. <!---
  986.  
  987. TV CUSTOMIZATION GUIDE:
  988.  
  989. - simply replace the text below with your own text about your favorite shows
  990.  
  991. - for example, you'd replace 'The Office' with your show title, 'Jim Halpert' with your own favorite character, 'Fun Run' with your own favorite episode, and the 'Vivamus at augue' paragraph with your own info about the show (such as a synopsis, rating, and why you like it so much)
  992.  
  993. --->
  994.  
  995. <div class="tv_show">
  996. <i class="fad fa-tv"></i>
  997. <div class="tv_show_content">
  998. The Office
  999. <br>
  1000. <br>
  1001. <br>
  1002. <div class="tv_show_info_piece">Favorite character<br>Jim Halpert</div>
  1003. <div class="tv_show_info_piece">Favorite episode<br>Fun Run</div>
  1004. <br><br>
  1005. <div class="tv_show_info">
  1006. Vivamus at augue eget arcu <a href="#">dictum varius</a> duis at. Sagittis purus sit amet volutpat. Risus nec feugiat in fermentum. Ultricies leo integer malesuada nunc vel risus. Quis enim lobortis scelerisque fermentum dui faucibus in ornare.
  1007. </div>
  1008. </div>
  1009. </div>
  1010.  
  1011. <!--- copy from here... --->
  1012. <div class="tv_show">
  1013. <i class="fad fa-tv"></i>
  1014. <div class="tv_show_content">
  1015. Game of Thrones
  1016. <br>
  1017. <br>
  1018. <br>
  1019. <div class="tv_show_info_piece">Favorite character<br>Daenerys Targaryen</div>
  1020. <div class="tv_show_info_piece">Favorite episode<br>The Spoils of War</div>
  1021. <br><br>
  1022. <div class="tv_show_info">
  1023. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Platea dictumst quisque sagittis purus sit amet volutpat consequat mauris. <b>Sollicitudin</b> aliquam ultrices sagittis orci. Neque laoreet suspendisse interdum consectetur. <br><br>Egestas egestas fringilla phasellus faucibus scelerisque eleifend.
  1024. </div>
  1025. </div>
  1026. </div>
  1027. <!--- ... to here, and paste below this text to add a new tv show --->
  1028.  
  1029. </div>
  1030.  
  1031.  
  1032.  
  1033. <!--- TAB SIX CONTENT ------------------------------------------------------->
  1034.  
  1035. <div id="six" class="tabcontent">
  1036. <div id="six" class="tabcontent_header">Social media links</div>
  1037.  
  1038. <!---
  1039.  
  1040. SOCIAL MEDIA HANDLES CUSTOMIZATION GUIDE:
  1041.  
  1042. 1. it's SUPER simple - just replace the names of the social media sites with your username for that site
  1043.  
  1044. of course, you can delete any of the ones you don't have, or don't want to share. they're all listed purely to show you all of the options
  1045.  
  1046. additionally, if there's a site that i haven't included and that you want to add, just go here: https://fontawesome.com/icons?d=gallery&s=brands, click on the icon you want, and then click on the '<i class=""' bit on the icon page to copy it. follow the template for the handle cards below and you're good to go
  1047.  
  1048. --->
  1049.  
  1050. <div class="social_media_card">
  1051. <i class="fab fa-behance"></i><br>Behance
  1052. </div>
  1053.  
  1054. <div class="social_media_card">
  1055. <i class="fab fa-codepen"></i><br>Codepen
  1056. </div>
  1057.  
  1058. <div class="social_media_card">
  1059. <i class="fab fa-deviantart"></i><br>DeviantArt
  1060. </div>
  1061.  
  1062. <div class="social_media_card">
  1063. <i class="fab fa-discord"></i><br>Discord
  1064. </div>
  1065.  
  1066. <div class="social_media_card">
  1067. <i class="fab fa-dribbble"></i><br>Dribbble
  1068. </div>
  1069.  
  1070. <div class="social_media_card">
  1071. <i class="fab fa-ello"></i><br>Ello
  1072. </div>
  1073.  
  1074. <div class="social_media_card">
  1075. <i class="fab fa-flickr"></i><br>Flickr
  1076. </div>
  1077.  
  1078. <div class="social_media_card">
  1079. <i class="fab fa-github"></i><br>Github
  1080. </div>
  1081.  
  1082. <div class="social_media_card">
  1083. <i class="fab fa-instagram"></i><br>Instagram
  1084. </div>
  1085.  
  1086. <div class="social_media_card">
  1087. <i class="fab fa-pinterest"></i><br>Pinterest
  1088. </div>
  1089.  
  1090. <div class="social_media_card">
  1091. <i class="fab fa-reddit-alien"></i><br>Reddit
  1092. </div>
  1093.  
  1094. <div class="social_media_card">
  1095. <i class="fab fa-snapchat-ghost"></i><br>Snapchat
  1096. </div>
  1097.  
  1098. <div class="social_media_card">
  1099. <i class="fab fa-skype"></i><br>Skype
  1100. </div>
  1101.  
  1102. <div class="social_media_card">
  1103. <i class="fab fa-steam"></i><br>Steam
  1104. </div>
  1105.  
  1106. <div class="social_media_card">
  1107. <i class="fab fa-spotify"></i><br>Spotify
  1108. </div>
  1109.  
  1110. <div class="social_media_card">
  1111. <i class="fab fa-twitch"></i><br>Twitch
  1112. </div>
  1113.  
  1114. <div class="social_media_card">
  1115. <i class="fab fa-twitter"></i><br>Twitter
  1116. </div>
  1117.  
  1118. </div>
  1119.  
  1120.  
  1121.  
  1122. <!--- TAB SEVEN CONTENT ----------------------------------------------------->
  1123.  
  1124. <div id="seven" class="tabcontent">
  1125. <div id="seven" class="tabcontent_header">Blog tags</div>
  1126.  
  1127. <!---
  1128.  
  1129. TAGS CUSTOMIZATION GUIDE:
  1130.  
  1131. 1. another really simple one! all you have to do is replace the tag category names, pound signs, and tag names with your own info
  1132.  
  1133. --->
  1134.  
  1135. <div class="tags">
  1136. <div class="tags_category_name">Tag category 1</div>
  1137. <a href="#">tag one</a>
  1138. <a href="#">tag two</a>
  1139. <a href="#">tag three</a>
  1140. <a href="#">tag four</a>
  1141. <a href="#">tag five</a>
  1142. <a href="#">tag six</a>
  1143. <a href="#">tag seven</a>
  1144. <a href="#">tag eight</a>
  1145.  
  1146. <div class="tags_category_name">Tag category 2</div>
  1147. <a href="#">tag one</a>
  1148. <a href="#">tag two</a>
  1149. <a href="#">tag three</a>
  1150. <a href="#">tag four</a>
  1151. <a href="#">tag five</a>
  1152.  
  1153. <!--- copy from here... --->
  1154. <div class="tags_category_name">Tag category 3</div>
  1155. <a href="#">tag one</a>
  1156. <a href="#">tag two</a>
  1157. <a href="#">tag three</a>
  1158. <a href="#">tag four</a>
  1159. <a href="#">tag five</a>
  1160. <a href="#">tag six</a>
  1161. <a href="#">tag seven</a>
  1162. <a href="#">tag eight</a>
  1163. <a href="#">tag nine</a>
  1164. <a href="#">tag ten</a>
  1165. <!--- ...to here, and paste below this text to add a new tag group --->
  1166. </div>
  1167.  
  1168. </div>
  1169.  
  1170. </div> <!--- END OF DIV ID 'WINDOW' --->
  1171. </div> <!--- END OF DIV ALIGN --->
  1172.  
  1173. <!---
  1174.  
  1175. HOW TO ADD TABS:
  1176.  
  1177. 1. find this bit of the code: '<button class="tablinks" onclick="openTab(event, 'seven')">Tags</button>'...
  1178.  
  1179. 2. ...and copy it and paste directly below it
  1180.  
  1181. 3. change the 'seven' to 'eight', and the 'Tags' to whatever you want the tab to be called
  1182.  
  1183. 4. then find this bit of the code: '<div id="seven" class="tabcontent">tab seven's content</div>...
  1184.  
  1185. 5. ...and copy and paste directly below it
  1186.  
  1187. 6. change the 'seven' to 'eight' and 'tab seven's content' to whatever you want to put instead. do the same thing with '<div id="one" class="tabcontent_header">My favorite books</div>' too
  1188.  
  1189. basically, it's just copy/pasting those bits and changing the numbers and content. it's pretty simple once you get the hang of it
  1190.  
  1191.  
  1192.  
  1193. HOW TO REMOVE TABS:
  1194.  
  1195. 1. delete '<button class="tablinks" onclick="openTab(event, 'seven')"><i class="fas fa-tags"></i> Tags</button>' (or any other tab you want to remove)
  1196.  
  1197. 2. each individual tab's html is marked by 'TAB SIX CONTENT'; select all of the coding below that marker until you get to the next marker. delete the code
  1198.  
  1199.  
  1200.  
  1201. hopefully everything in the code is pretty clear - however, if you need additional help with any part of it, definitely let me know
  1202.  
  1203. --->
  1204.  
  1205.  
  1206.  
  1207. <!--- DON'T EDIT ANY OF THIS --->
  1208. <script>
  1209. function openTab(evt, tabName) {
  1210. var i, tabcontent, tablinks;
  1211. tabcontent = document.getElementsByClassName("tabcontent");
  1212. for (i = 0; i < tabcontent.length; i++) {
  1213. tabcontent[i].style.display = "none";
  1214. }
  1215. tablinks = document.getElementsByClassName("tablinks");
  1216. for (i = 0; i < tablinks.length; i++) {
  1217. tablinks[i].className = tablinks[i].className.replace(" active", "");
  1218. }
  1219. document.getElementById(tabName).style.display = "block";
  1220. evt.currentTarget.className += " active";
  1221. }
  1222.  
  1223. // Get the element with id="defaultOpen" and click on it
  1224. document.getElementById("defaultOpen").click();
  1225. </script>
  1226.  
  1227. </body>
  1228. </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!