API tools faq
paste
longituddeonda

escrito / fanfic page

longituddeonda
Feb 21st, 2020 (edited)
2,788
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.40 KB | None | 0 0
raw download clone embed print report
  1. <!-----
  2.  
  3. ;; escrito ;;
  4.  
  5. fanfic page by ebrothemes (originally posted by me on my main, @longtud-de-onda)
  6.  
  7. CREDITS
  8.  
  9. tab script from w3schools.com
  10. icons from fontawesome
  11.  
  12. TERMS OF USE:
  13. - do not remove the credit.
  14. - do not repost/redistribute.
  15. - do not take parts of the code and use it as your own.
  16. - do not use as a base code.
  17.  
  18. COLORS:
  19. if you want to change the colors, search for these colors and replace
  20.  
  21. light blue ------------------ #b5d1cf
  22. med blue (hover/scrollbar) -- #86b4b0
  23. background white ------------ #fcf7ff
  24. text color ------------------ #424b54
  25. light grey for borders ------ #e5e5e5
  26. link icon yellow ------------ #e1ce7a
  27.  
  28. ----->
  29.  
  30.  
  31. <!DOCTYPE html>
  32. <html>
  33. <html lang="en-US">
  34. <head>
  35.  
  36. <title>about me</title>
  37. <link rel="shortcut icon" href="{Favicon}">
  38.  
  39. <meta name="viewport" content="width=device-width, initial-scale=1">
  40.  
  41. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,500,500i,700,700i|Open+Sans:400,400i,700,700i&display=swap" rel="stylesheet">
  42.  
  43. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  44.  
  45. <style type="text/css">
  46.  
  47.  
  48. /*----- REMOVES TUMBLR CONTROLS -----*/
  49. body > iframe:first-child { display: none !important; }
  50.  
  51.  
  52. /*----- BASIC PAGE INFO -----*/
  53. body {
  54.     background-color:#fcf7ff;
  55. }
  56.  
  57. a {
  58.     color:#424b54;
  59.     text-decoration: none
  60.    
  61. }
  62.  
  63. a:hover {
  64.     color: #86b4b0;
  65. }
  66.  
  67. /*----- SCROLL BAR -----*/
  68.  
  69. ::-webkit-scrollbar {
  70.     width: 13px;
  71.     background-color: grey;
  72. }
  73.  
  74. ::-webkit-scrollbar-track {
  75.     border: 6px solid #fcf7ff;
  76.     background-color: #e5e5e5;
  77.    
  78. }
  79.  
  80. ::-webkit-scrollbar-thumb {
  81.    border: 5px solid #fcf7ff;
  82.    background-color: #86b4b0;
  83. }
  84.    
  85. /*----- MAIN STRUCTURE -----*/
  86.  
  87. .box {
  88.     position: fixed;
  89.     width: 700px;
  90.     height: 400px;
  91.     left: 50%;
  92.     top: 50%;
  93.     transform: translate(-50%, -50%);
  94. }
  95.  
  96. .sidebar {
  97.     width:150px;
  98.     height:400px;
  99.     float:left;
  100. }
  101.  
  102. .iconbox {
  103.     width:150px;
  104.     height:190px;
  105. }
  106.  
  107. .tabcontent {
  108.     width:520px;
  109.     height:400px;
  110.     float: right;
  111. }
  112.  
  113. .tabbox {
  114.     width:150px;
  115.     height:210px;}
  116.  
  117. /*----- ICON BOX CONTENT -----*/
  118.  
  119. .user {
  120.     font-family: 'Open Sans', sans-serif;
  121.     font-size:9pt; /*----- change size of username text -----*/
  122.     width:150px;
  123.     height:40px;
  124.     margin-top:15px;
  125.     color: #808080; /*----- change color of username -----*/
  126. }
  127.  
  128. /*----- TAB CONTENT -----*/
  129.  
  130. .tabbox button {
  131.     width:150px;
  132.     height:50px;
  133.     outline: none;
  134.     background: none;
  135.     border: none;
  136.     font-size: 15px;
  137.     line-height: 0px;
  138.     letter-spacing: 2px;
  139.     color: #424b54;
  140.     font-family: 'Open Sans', sans-serif ;
  141.     margin-top: 15px;
  142.     margin-bottom:1px;
  143. }
  144.  
  145. .tabbox button:hover {
  146.     background-color:#b5d1cf; /*----- tab color on hover -----*/
  147. }
  148.  
  149. .tabbox button.active {
  150.     background-color:#b5d1cf; /*----- tab color when selected -----*/
  151. }
  152.  
  153. /*----- MAIN PAGE CONTENT -----*/
  154.  
  155. .name {
  156.     font-family: 'Playfair Display', sans-serif;
  157.     color: #424b54;
  158.     font-size: 100pt; /*----- change size of name font -----*/
  159.     width:520px;
  160.     height:150px;
  161.     line-height:130px;
  162. }
  163.  
  164. .mainimg {
  165.     width:508px;
  166.     height:38px;
  167.     margin-top:15px;
  168.     margin-bottom:15px;
  169.     overflow: hidden;
  170.     padding: 5px;
  171.     border:1px solid #e5e5e5;
  172.     clear: all
  173. }
  174.  
  175. .maintxt {
  176.     width:518px;
  177.     height:48px;
  178.     margin-top:15px;
  179.     margin-bottom:15px;
  180.     font: 9pt 'Open Sans', sans-serif;
  181.     text-align: justify;
  182.     text-align-last: justify;
  183.     color:#424b54;
  184.     overflow: hidden;
  185.     letter-spacing:1px;
  186.     border:1px solid #e5e5e5;
  187.     clear: all
  188. }
  189.  
  190. .cropimg {
  191.     max-height:38px;
  192.     overflow:hidden;
  193.    
  194. }
  195.  
  196. .links {
  197.     width:104px;
  198.     height:90px;
  199.     float:left;
  200.     margin-top:15px;
  201.     margin-bottom:17px;
  202. }
  203.  
  204. .linktxt {
  205.     width:80px;
  206.     height:20px;
  207.     font: 10px 'Open Sans', sans-serif;
  208.     text-align: center;
  209.     letter-spacing:1px;
  210.     line-height:20px;
  211.     color: #424b54;
  212.     text-transform: uppercase;
  213.     background-color:#b5d1cf;
  214. }
  215.  
  216. .links:hover .linktxt {background-color: #86b4b0; }  
  217.  
  218. .linkicon {
  219.     width:60px;
  220.     height:40px;
  221.     font-size:40px;
  222.     color: #e1ce7a;
  223.     padding:10px;
  224. }
  225.  
  226.  
  227. /*----- FICS PAGE CONTENT -----*/
  228.  
  229. .oneshots {
  230.     width:158px;
  231.     height:388px;
  232.     padding: 5px;
  233.     float:left;
  234.     border:1px solid #e5e5e5;
  235.     /*overflow-x: hidden;
  236.     overflow-y: scroll;*/
  237.    
  238.     /*if oneshots go beyond the length of the box remove the comments from the overflow lines to enable scroll*/
  239. }
  240.  
  241. .chapters {
  242.     width:320px;
  243.     height:400px;
  244.     float:right;
  245.     /*overflow-x: hidden;
  246.     overflow-y: scroll;*/
  247.    
  248.     /*if more than 3 fics remove the comments from the overflow lines*/
  249. }
  250.  
  251. .cfic {
  252.     width:320px;
  253.     height:120px;
  254.     margin-bottom: 20px;
  255. }
  256.  
  257. .cover {
  258.     width:80px;
  259.     height:120px;
  260.     background-color: red;
  261.     float:left;
  262.     filter: grayscale(100%);
  263. }
  264.  
  265. .finfo {
  266.     width: 220px;
  267.     height:120px;
  268.     float:right;
  269. }
  270.  
  271. .title {
  272.     width:220px;
  273.     height:28px;
  274.     margin-bottom: 10px;
  275.     font: bold italic 10pt 'Open Sans', sans-serif;
  276.     text-transform: uppercase;
  277.     letter-spacing: 1px;
  278.     line-height:28px;
  279.     color:#424b54;
  280.     border-bottom: 2px solid #b5d1cf;
  281. }
  282.  
  283. .content {
  284.     width:190px:
  285.     height:80px;
  286. }
  287.  
  288. .desc {
  289.     width:110px;
  290.     height:70px;
  291.     padding:5px;
  292.     margin-right: 5px;
  293.     float:left;
  294.     font: 8px 'Open Sans', sans-serif;
  295.     letter-spacing:.5px;
  296.     text-align: justify;
  297.     overflow-x: hidden;
  298.     overflow-y: scroll;
  299. }
  300.  
  301. .chaps {
  302.     width:80px;
  303.     height:70px;
  304.     padding: 5px;
  305.     margin-left: 5px;
  306.     float:left;
  307.     font: italic 9px 'Open Sans', sans-serif;
  308.     text-transform: uppercase;
  309.     letter-spacing:.5px;
  310.     text-align: left;
  311.     /*overflow-x: hidden;
  312.     overflow-y: scroll;*/
  313.    
  314.     /*if chapters go beyond box, remove the comments from the overflow lines to enable scrolling*/
  315. }
  316.  
  317. .story {
  318.     width:158 px;
  319.     padding-top: 10px;
  320.     padding-bottom: 10px;
  321.     margin-bottom:2px;
  322.     border-bottom: 2px solid #b5d1cf;
  323. }
  324.  
  325. .nombre {
  326.     font: bold italic 10pt 'Open Sans', sans-serif;
  327.     text-transform: uppercase;
  328.     letter-spacing: 1px;
  329.     color:#424b54;
  330. }
  331.  
  332. .info {
  333.     font: 7pt 'Open Sans', sans-serif;
  334.     text-transform: lowercase;
  335.     letter-spacing: 1px;
  336.     color:#424b54;
  337. }
  338.  
  339. .story:hover .nombre{color: #86b4b0;}
  340.  
  341. /*----- BIO PAGE CONTENT -----*/
  342.  
  343. .gblock {
  344.     width:520px;
  345.     height: 30px;
  346. }
  347.  
  348. .tidbit {
  349.     width:121px;
  350.     height:30px;
  351.     background-color: #b5d1cf;
  352.     color: #fff;
  353.     font: 9pt 'Open Sans', sans-serif;
  354.     text-transform: uppercase;
  355.     letter-spacing: 2px;
  356.     line-height: 30px;
  357.     float:left;
  358. }
  359.  
  360. .tidbit:hover {
  361.     background-color:#86b4b0;
  362. }
  363.  
  364. .b {
  365.     width: 12px;
  366.     height: 30px;
  367.     float:left;
  368. }
  369.  
  370. .bio {
  371.     width:498px;
  372.     height:288px;
  373.     margin-top: 15px;
  374.     margin-bottom: 15px;
  375.     border:1px solid #e5e5e5;
  376.     padding:10px;
  377. }
  378.  
  379. .btxt {
  380.     height:288px;
  381.     font: 9pt 'Open Sans', sans-serif;
  382.     text-align: justify;
  383.     overflow-x: hidden;
  384.     overflow-y: auto;
  385.     color: #424b54;
  386. }
  387.  
  388. .btxt p{
  389.     margin-top: 0px;
  390. }
  391.  
  392.    
  393. </style>
  394.    
  395. </head>
  396.  
  397. <!--- HTML STARTS HERE -->
  398.  
  399. <body>
  400.  
  401. <center>
  402. <div class='box'>
  403. <div class='sidebar'>
  404.  
  405. <!-- ICON and URL -->
  406.  
  407. <div class='iconbox'>
  408.    
  409. <!-- ICON IMAGE, SQUARE, WILL RESIZE -->
  410. <img src='ICON LINK'
  411. style='border-radius:50%;width:130px;height:130px;margin-top:10px;border:2px solid #e5e5e5;'>
  412.  
  413. <div class='user'>usename</div> <!-- username -->
  414. </div>
  415.    
  416.    
  417. <!-- TABS -->
  418. <!--messing with anything other than the all-caps text
  419. will mess up the tab functioning -->
  420.  
  421. <div class='tabbox'>
  422. <button class="tablinks" onclick="openPage(event, 'Welcome')" id="defaultOpen"><p><b>WELCOME</b><p></button>
  423. <button class="tablinks" onclick="openPage(event, 'Writing')"><p><b>WRITING</b><p></button>
  424. <button class="tablinks" onclick="openPage(event, 'About')"><p><b>ABOUT ME</b><p></button>
  425. </div>
  426. </div>    
  427.  
  428. <!-- WELCOME TAB -->    
  429.  
  430. <div id='Welcome' class='tabcontent'>
  431. <div class='name'>name,</div> <!-- name here -->
  432.      
  433. <!--LINKS
  434. icon can be changed by looking up fontawesome icons
  435. and replacing the 'fa fa-x' with the apprpriate name
  436. -->
  437.  
  438. <div class='links'><a href='LINK TO TUMBLR'>
  439. <div class='linkicon'><i class="fa fa-step-backward"></i></div>
  440. <div class='linktxt'><p>back</p></div></a></div>
  441.  
  442. <div class='links'><a href='LINK TO ASK PAGE'>
  443. <div class='linkicon'><i class="fa fa-commenting"></i></div>
  444. <div class='linktxt'><p>ask</p></div></a></div>
  445.  
  446. <div class='links'><a href='LINK TO MASTERLIST'> <!-- or other pages -->
  447. <div class='linkicon'><i class="fa fa-list"></i></div>
  448. <div class='linktxt'><p>masterlist</p></div></a></div>
  449.  
  450. <div class='links'><a href='LINK TO AO3'>
  451. <div class='linkicon'><i class="fa fa-pencil-square-o"></i></div>
  452. <div class='linktxt'><p>ao3</p></div></a></div>
  453.  
  454. <div class='links'><a href='LINK TO KO-FI'>
  455. <div class='linkicon'><i class="fa fa-coffee"></i></div>
  456. <div class='linktxt'><p>ko-fi</p></div></a></div>
  457.        
  458. <!-- IMAGE
  459. takes the top strip of an image and crops out everything else
  460. -->
  461. <div class='mainimg'><div class='cropimg'>
  462. <img src='IMAGE LINK'></div></div>
  463.  
  464. <!-- TEXT/LYRIC -->
  465. <div class='maintxt'><p style='position:relative;top:-14px;padding:10px;padding-bottom:15px'>LYRICS</div></div>
  466.    
  467. <!-- WRITING TAB -->
  468.    
  469. <div id="Writing" class="tabcontent">
  470.  
  471.  
  472. <!-- ONESHOTS -->
  473.  
  474. <!-- sample fic
  475.  
  476. <div class="story"><a href="LINK HERE">
  477.    <div class="nombre">TITLE</div>
  478.    <div class="info">pairing | rating</div>
  479. </a></div>
  480.  
  481. -->
  482.  
  483. <div class="oneshots">
  484.  
  485. <div class="story"><a href="LINK HERE">
  486.     <div class="nombre">TITLE</div>
  487.     <div class="info">pairing | rating</div>
  488. </a></div>
  489.  
  490. <div class="story"><a href="LINK HERE">
  491.     <div class="nombre">TITLE</div>
  492.     <div class="info">pairing | rating</div>
  493. </a></div>
  494.  
  495. <div class="story"><a href="LINK HERE">
  496.     <div class="nombre">TITLE</div>
  497.     <div class="info">pairing | rating</div>
  498. </a></div>
  499.            
  500. <div class="story"><a href="LINK HERE">
  501.     <div class="nombre">TITLE</div>
  502.     <div class="info">pairing | rating</div>
  503. </a></div>
  504.  
  505. <div class="story"><a href="LINK HERE">
  506.     <div class="nombre">TITLE</div>
  507.     <div class="info">pairing | rating</div>
  508. </a></div>            
  509. </div>
  510.  
  511. <!-- CHAPTERED FICS -->
  512.  
  513. <!-- sample fic
  514.  
  515. <div class="cfic">
  516. <div class="cover"><img src="COVER IMAGE LINK"
  517.        style="width:100%;height:100%;"></div>
  518. <div class="finfo">
  519. <div class="title"> TITLE </div>
  520. <div class="content">
  521. <div class="desc">
  522. DESC HERE
  523. </div>
  524. <div class="chaps">
  525. <a href="CHAPTER ONE LINK">chapter one</a><br>
  526. <a href="CHAPTER ONE LINK">chapter two</a><br>
  527. <a href="CHAPTER ONE LINK">chapter three</a><br>
  528. <a href="CHAPTER ONE LINK">chapter four</a><br>
  529. <a href="CHAPTER ONE LINK">chapter five</a><br>
  530. </div></div></div></div>
  531.  
  532. -->
  533.  
  534. <div class="chapters">
  535.  
  536. <div class="cfic">
  537. <div class="cover"><img src="COVER IMG"
  538.        style="width:100%;height:100%;"></div> <!-- 4x6 image ratio -->
  539. <div class="finfo">
  540. <div class="title"> TITLE </div>
  541. <div class="content">
  542. <div class="desc">
  543. DESC HERE
  544. </div>
  545. <div class="chaps">
  546. <a href="CHAPTER ONE LINK">chapter one</a><br>
  547. <a href="CHAPTER ONE LINK">chapter two</a><br>
  548. <a href="CHAPTER ONE LINK">chapter three</a><br>
  549. <a href="CHAPTER ONE LINK">chapter four</a><br>
  550. <a href="CHAPTER ONE LINK">chapter five</a><br>
  551. </div></div></div></div>
  552.  
  553. <div class="cfic">
  554. <div class="cover"><img src="COVER IMG"
  555.        style="width:100%;height:100%;"></div> <!-- 4x6 image ratio -->
  556. <div class="finfo">
  557. <div class="title"> TITLE </div>
  558. <div class="content">
  559. <div class="desc">
  560. DESC HERE
  561. </div>
  562. <div class="chaps">
  563. <a href="CHAPTER ONE LINK">chapter one</a><br>
  564. <a href="CHAPTER ONE LINK">chapter two</a><br>
  565. <a href="CHAPTER ONE LINK">chapter three</a><br>
  566. <a href="CHAPTER ONE LINK">chapter four</a><br>
  567. <a href="CHAPTER ONE LINK">chapter five</a><br>
  568. </div></div></div></div>
  569.  
  570.  
  571. <div class="cfic">
  572. <div class="cover"><img src="COVER IMG"
  573.        style="width:100%;height:100%;"></div> <!-- 4x6 image ratio -->
  574. <div class="finfo">
  575. <div class="title"> TITLE </div>
  576. <div class="content">
  577. <div class="desc">
  578. DESC HERE
  579. </div>
  580. <div class="chaps">
  581. <a href="CHAPTER ONE LINK">chapter one</a><br>
  582. <a href="CHAPTER ONE LINK">chapter two</a><br>
  583. <a href="CHAPTER ONE LINK">chapter three</a><br>
  584. <a href="CHAPTER ONE LINK">chapter four</a><br>
  585. <a href="CHAPTER ONE LINK">chapter five</a><br>
  586. </div></div></div></div>
  587.          
  588. </div>
  589. </div>
  590.  
  591. <!-- ABOUT TAB -->
  592.  
  593.    
  594. <div id="About" class="tabcontent">
  595. <div class="gblock">
  596.             <div class="tidbit">name</div>
  597. <div class="b"></div>
  598.             <div class="tidbit">age</div>
  599. <div class="b"></div>
  600.             <div class="tidbit">location</div>
  601. <div class="b"></div>
  602.             <div class="tidbit">pronouns</div>
  603. </div>
  604. <div class="bio"><div class="btxt">
  605.            
  606. BIO GOES HERE
  607.            
  608.         </div></div>
  609. <div class="gblock">
  610.             <div class="tidbit">mbti</div>
  611. <div class="b"></div>
  612.             <div class="tidbit">star sign</div>
  613. <div class="b"></div>
  614.             <div class="tidbit">house</div>
  615.             <!--intended to be the hogwarts house but like,
  616.                put whatever you want here -->
  617. <div class="b"></div>
  618.             <div class="tidbit">profession</div>
  619. </div></div>
  620. </div>
  621. <div style="font-family:'Open Sans', sans-serif;position:fixed;bottom:15px;right:10px;font-size:14.5px;line-height:14px;height:14px;width:14px;padding:4px;"><a href="https://ebrothemes.tumblr.com" title="ebrothemes" style="color:#86b4b0;">E</a></div>
  622. </center>
  623.  
  624. <!-- JAVASCRIPT THAT MAKES THE TABS WORK -->
  625.  
  626. <script>
  627. function openPage(evt, pageName) {
  628.   var i, tabcontent, tablinks;
  629.   tabcontent = document.getElementsByClassName("tabcontent");
  630.   for (i = 0; i < tabcontent.length; i++) {
  631.    tabcontent[i].style.display = "none";
  632.  }
  633.  tablinks = document.getElementsByClassName("tablinks");
  634.  for (i = 0; i < tablinks.length; i++) {
  635.    tablinks[i].className = tablinks[i].className.replace(" active", "");
  636.  }
  637.  document.getElementById(pageName).style.display = "block";
  638.  evt.currentTarget.className += " active";
  639. }
  640.  
  641. document.getElementById("defaultOpen").click();
  642. </script>
  643.  
  644. </body>
  645.    
  646. </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!