API tools faq
paste
Advertisement
southcodes

PAGE 15 hey stranger | book page 3

southcodes
Aug 19th, 2019
1,977
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.77 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - page #15 'hey, stranger' by skye southcodes.tumblr.com
  3.     - modify as you please but please do not touch the credit
  4.     - any errors? need help? have questions? let me know!
  5.     southcodes.tumblr.com/
  6.  
  7. CREDITS:
  8.  
  9.     - fadein tabs by https://www.w3schools.com/howto/howto_js_tabs.asp
  10.     - normalize css by http://necolas.github.io/normalize.css/
  11.  
  12.  -->
  13.  
  14. <!DOCTYPE html>
  15. <html>
  16. <head>
  17.     <title>{title}</title>
  18.  
  19.     <meta charset="UTF-8">
  20.     <meta name="viewport" content="width=device-width">
  21.  
  22.     <link rel="shortcut icon" href="{favicon}">
  23.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24.     <meta name="description" content="{MetaDescription}"/>
  25.  
  26.     <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Merriweather|Open+Sans:400" rel="stylesheet">
  27.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  28.  
  29. <style>
  30. body, figure{margin: 0;padding: 0}
  31. html{font-size: 14px}
  32. body {font: 1.1rem/150% 'Lato', sans-serif;color:#333;
  33. background:url('IMAGE URL') fixed;} /* BACKGROUND IMAGE */
  34. a {text-decoration: none;color:darkred;} /* LINKS COLOR */
  35. a:hover {color:crimson;}/* LINKS COLOR ON HOVER*/
  36. b {font-weight: 700}
  37. hr {border:0;border-bottom:1px solid #ccc;}
  38.  
  39. /*  nav  */
  40.  
  41. nav {position: fixed;top:0;left:0;right: 0;
  42.     width:100%;
  43.     height: 4rem;
  44.     background:rgba(255,255,255,.8);
  45.     padding:0 .5rem;
  46.     border-bottom:1px solid #aaa;
  47.     font:700 1.1rem/4rem 'Lato', sans-serif;
  48.     text-transform: uppercase;
  49. }
  50. nav ul li {
  51.     display: inline-block;margin:0 1rem;letter-spacing: .05rem}
  52. nav ul,nav li {list-style-type:none;margin:0;padding:0;}
  53.  
  54. h1 {font:400 2.6rem 'Lato', sans-serif;}
  55.  
  56. /*  header  */
  57.  
  58. header {
  59.     width: 60rem;
  60.     margin: 7rem auto;
  61.     max-width: 95vw;
  62.     font-size: .95rem
  63. }
  64.  
  65. header h1 {border-bottom: 3px solid darkred; /* TITLE BORDER BOTTOM COLOR */
  66.     padding:0 .3rem .4rem;display:inline;}
  67.  
  68.  
  69. #description {
  70.     border: 1px solid #aaa;
  71.     padding:0rem .7rem;
  72.     box-sizing: border-box;
  73.     background: white;
  74.     font-size:1.1rem;
  75. }
  76. #dimg {
  77.     width: 60rem;
  78.     max-width: 95vw;
  79.     height: 13rem;
  80.     margin-top: 2rem;
  81.     background-image: url('IMAGE URL'); /* HEADER IMAGE */
  82.     background-position: 50% 40%; /* IMAGE POSITION */
  83.     background-size: cover;
  84. }
  85.  
  86. /*  main  */
  87.  
  88. main {
  89.     width: 60rem;
  90.     max-width: 95vw;
  91.     margin:5rem auto;
  92.     text-align:justify;
  93.     line-height: 170%
  94. }
  95.  
  96. main h1 {font-size:1.8rem;margin-bottom: 2rem}
  97.  
  98. /* tabs */
  99.  
  100. .tab {
  101.     width: 60rem;
  102.     max-width: 95vw;
  103.     border:1px solid #aaa;
  104.     background: white;
  105.     display:flex;
  106.     align-items: center;
  107.     justify-content: space-between;
  108. }
  109. .tablinks {
  110.     width:calc(100% / 4);
  111.     text-align: center;
  112.     background: white;
  113.     cursor:pointer;
  114.     padding:1rem 0;
  115.     border:0;
  116.     font-size:1.4rem;
  117.     letter-spacing: .03rem}
  118. .tablinks:hover {background: #f0ebec}/* TABS ON HOVER COLOR */
  119. .tablinks:focus {outline:0;}
  120. .tab div.active {background-color: #e0cccc;} /* ACTIVE TAB COLOR */
  121.  
  122. .tabcontent {
  123.     background: white;
  124.     display: none;
  125.     margin-top:2rem;
  126.     border:1px solid #aaa;
  127.     animation: fadeEffect 1s;
  128. }
  129.  
  130. @keyframes fadeEffect {
  131.   from {opacity: 0;}
  132.   to {opacity: 1;}
  133. }
  134.  
  135.  
  136. /*  story  */
  137.  
  138. #story {
  139.     font:400 1.1rem/170% 'Merriweather', serif;
  140.     padding: 1rem 1.5rem;}
  141.  
  142.  
  143. /*  characters  */
  144.  
  145. #characters {
  146.     padding: 0 1rem;
  147. }
  148.  
  149. .char {
  150.     border-bottom:1px solid #ccc;
  151.     padding: .6rem;
  152.     padding: 2rem 0;}
  153. .char:last-of-type {border:0;}
  154.  
  155. .cimg {
  156.     width:10rem;
  157.     margin-right:1rem;
  158.     border:1px solid #ccc;
  159.     padding:0.3rem;}
  160.  
  161. .cinfo {margin:0;vertical-align: top;}
  162. .char .cinfo p  {margin:.7rem 0;}
  163. .char .cinfo p:first-of-type {margin-top:0;}
  164. .char .cinfo p:last-of-type {margin-bottom:0;}
  165.  
  166. /*  information  */
  167.  
  168. #information {padding: 1.5rem 1rem;font-size:1.15rem;}
  169. #information p:first-of-type {margin-top:0;}
  170. #information p:last-of-type {margin-bottom:0;}
  171.  
  172. .pinfo {
  173.     border-bottom:1px solid #ccc;
  174.     margin:1.5rem 0;
  175.     padding-bottom:1.5rem;}
  176. .pinfo:last-of-type {border:0;padding:0;}
  177.  
  178. .binfo {
  179.     font-size: 1.1rem;
  180.     text-transform: uppercase;
  181.     background: #e3d8da; /* INFORMATION TITLE BACKGROUND */
  182.     padding:.5rem;
  183.     margin-right:.7rem;
  184. }
  185. /*  faq  */
  186.  
  187. #faq {padding: 1rem}
  188.  
  189. .ask {margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #ccc;}
  190. .ask:last-of-type {margin-bottom:0;border:0;}
  191.  
  192. .q {
  193.     margin:0;
  194.     border-bottom:3px solid #e3d8da; /* QUESTION BORDER COLOR */
  195.     background: #f0ebec; /* QUESTION BACKGROUND */
  196.     padding: 1rem;
  197.     font-weight: 700;
  198.     text-align: right;
  199.     font-size: 1.2rem
  200. }
  201.  
  202. .a {
  203.     margin:0;
  204.     padding: 1rem;
  205.     background: #f6f6f6; /* ANSWER BACKGROUND COLOR */
  206. }
  207.  
  208. /*DONT TOUCH*/
  209. footer {z-index:9999;position:fixed;bottom:1.5rem;right:2rem;line-height:0%;padding:1rem .5rem;font-size:.8rem;background:white;font-family:'Open Sans', sans-serif;}
  210. </style>
  211.    
  212. </head>
  213. <body>
  214.  
  215. <!-- !! PLEASE WRAP YOUR PARAGRAPHS IN P TAGS !! -->
  216.  
  217. <nav><ul>
  218.     <li><a href="/">home</a></li>
  219.    
  220.     {block:AskEnabled}<li><a href="/ask">inbox</a></li>{/block:AskEnabled}
  221.    
  222.     <li><a href="/archive">archive</a></li>
  223.    
  224.     <li><a href="https://tumblr.com/dashboard">dashboard</a></li>
  225. </ul></nav>
  226.  
  227. <header>
  228.  
  229.     <h1>Book title</h1>
  230.    
  231.     <figure id="dimg"></figure> <!-- to add image check css -->
  232.    
  233.     <article id="description">
  234.  
  235.         <p>This book is about ...</p>
  236.        
  237.     </article>  <!--END DESCRIPTION-->
  238.    
  239. </header>
  240.  
  241.  
  242. <main>
  243.  
  244. <div class="tab">
  245.     <div class="tablinks" onclick="openTab(event, 'story')" id="defaultOpen">Story</div>   
  246.     <div class="tablinks" onclick="openTab(event, 'characters')">Characters</div>
  247.     <div class="tablinks" onclick="openTab(event, 'information')">Information</div>
  248.     <div class="tablinks" onclick="openTab(event, 'faq')">FAQ</div>
  249. </div>
  250.  
  251.  
  252.     <!-- start story section-->
  253.  
  254.     <article class="tabcontent" id="story">
  255.         <h1>Chapter One</h1>
  256.        
  257.         <p>Text text text.</p>
  258.        
  259.         <hr>   <!--divider-->
  260.        
  261.         <p>text text text</p>
  262.        
  263.         <h1>Chapter Two</h1>
  264.        
  265.         <p>text</p>
  266.  
  267.     </article>
  268.    
  269.     <!-- end story section-->
  270.  
  271.  
  272.  
  273.  
  274.    
  275.     <!-- start characters section -->
  276.  
  277.  
  278.     <article class="tabcontent" id="characters">
  279.  
  280.         <!-- start character-->
  281.         <div class="char">
  282.            
  283.             <img src="IMAGE URL" class="cimg" align="left">
  284.  
  285.             <article class="cinfo">
  286.                 <p><b>name:</b> icarus</p>
  287.                
  288.                 <p><b>age:</b> 21</p>
  289.                
  290.                 <p><b>status:</b> dead</p>
  291.                
  292.                 <p><b>background:</b> example.</p>
  293.             </article>
  294.         </div>
  295.         <!-- end character -->
  296.  
  297.  
  298.  
  299.     </article>
  300.    
  301.         <!-- end characters section -->
  302.        
  303.        
  304.        
  305.        
  306.        
  307.         <!-- start information section-->
  308.  
  309.         <article id="information" class="tabcontent">
  310.  
  311.             <p class="pinfo"><b class="binfo">item 1:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  312.            
  313.             <p class="pinfo"><b class="binfo">item 2:</b> example</p>
  314.  
  315.  
  316.         </article>
  317.        
  318.         <!-- end information section-->
  319.  
  320.  
  321.  
  322.     <!--start FAQ section-->
  323.    
  324.         <article id="faq" class="tabcontent">
  325.            
  326.             <div class="ask">
  327.                 <p class="q">question?</p>
  328.                
  329.                 <p class="a">answer.</p>
  330.             </div>
  331.  
  332.  
  333.             <div class="ask">
  334.                 <p class="q">question?</p>
  335.                
  336.                 <p class="a">answer</p>
  337.             </div>
  338.  
  339.  
  340.         </article>
  341.        
  342.     <!--end FAQ section-->
  343.  
  344. </main>
  345.  
  346. <footer><a href="https://southcodes.tumblr.com" target="_blank" title="southcodes">SC</a></footer>
  347. <script>
  348. document.getElementById("defaultOpen").click();
  349.  
  350. function openTab(evt, tabName) {
  351.   var i, tabcontent, tablinks;
  352.   tabcontent = document.getElementsByClassName("tabcontent");
  353.   for (i = 0; i < tabcontent.length; i++) {
  354.     tabcontent[i].style.display = "none";
  355.   }
  356.   tablinks = document.getElementsByClassName("tablinks");
  357.   for (i = 0; i < tablinks.length; i++) {
  358.     tablinks[i].className = tablinks[i].className.replace(" active", "");
  359.   }
  360.   document.getElementById(tabName).style.display = "block";
  361.   evt.currentTarget.className += " active";}
  362. </script>
  363. </body>
  364. </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!