API tools faq
paste
Advertisement
southcodes

BOOK PAGE #1: garage kids

southcodes
Jan 12th, 2017
1,047
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.88 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - book page 1 'garage kids' by southcodes.tumblr.com
  3.     - modify as you like but keep the credit intact
  4.     - any errors? need help? have questions? let me know!
  5.       southcodes.tumblr.com/ask
  6. -->
  7.  
  8. <!DOCTYPE html>
  9. <head>
  10.  
  11.     <title>{Title}</title>
  12.  
  13.     <link rel="shortcut icon" href="{favicon}">
  14.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15.  
  16.     <link href="https://fonts.googleapis.com/css?family=Crimson+Text:600|Lato" rel="stylesheet">
  17.    
  18. <style type="text/css">
  19.  
  20. ::-webkit-scrollbar-thumb:vertical {
  21.     background-color: #bbb;
  22.     height: 11px;
  23.     border: 4px solid #fff;
  24. }
  25.  
  26.  
  27. ::-webkit-scrollbar {
  28.     background-color: inherit;
  29.     height:10px;
  30.     width:9px;
  31. }
  32.  
  33. .tmblr-iframe {
  34.     margin:10px;
  35.     opacity:.2;
  36.     -moz-transition-duration: 0.2s;
  37.     -o-transition-duration: 0.2s;
  38.     -webkit-transition-duration: 0.2s;q
  39.     transition-duration: 0.2s;
  40. }
  41.  
  42. .tmblr-iframe:hover{
  43.     opacity:.65;
  44.     -moz-transition-duration: 0.6s;
  45.     -o-transition-duration: 0.6s;
  46.     -webkit-transition-duration: 0.6s;q
  47.     transition-duration: 0.6s;
  48. }
  49.    
  50. #s-m-t-tooltip{
  51.     max-width:300px;
  52.     margin-top:25px;
  53.     margin-left:15px;
  54.     z-index:999999;
  55.     letter-spacing:1.6px;
  56.     text-transform:uppercase;
  57.     font-size:8.5px;
  58.     border: solid 1px #ddd;
  59.     background-color:#fcfcfc;
  60.     color:#333;
  61.     padding:3px 5px 3px 5px;
  62. }
  63.  
  64. body {
  65.     color:#333; /* font color */
  66.     font-family: 'lato', sans-serif;
  67.     font-size:14px;
  68.     letter-spacing:.5px;
  69. }
  70.  
  71. a {
  72.     color:#999; /* links color */
  73.     text-decoration:none;
  74.     -moz-transition-duration: 0.6s;
  75.     -o-transition-duration: 0.6s;
  76.     -webkit-transition-duration: 0.6s;
  77.     transition-duration: 0.6s;
  78. }
  79.  
  80. a:hover {
  81.     color:#000; /* links color on hover */
  82.     -moz-transition-duration: 0.6s;
  83.     -o-transition-duration: 0.6s;
  84.     -webkit-transition-duration: 0.6s;
  85.     transition-duration: 0.6s;
  86. }
  87.  
  88. blockquote {
  89.     padding-left:8px;
  90.     border-left:1px solid #ddd;
  91.     margin:0 0 0 5px;
  92.     text-align:left;
  93. }
  94.  
  95. .container {
  96.     width:990px;
  97.     height:auto;
  98.     margin:6% auto 40px;
  99. }
  100.  
  101.             /*              left side box                */
  102.  
  103. .leftbox {
  104.     display:inline-block;
  105.     width:172px;
  106.     float:left;
  107.     margin-right:20px;
  108. }
  109.  
  110. .characters {
  111.     background:#fdfdfd;  /* box background color */
  112.     border:1px solid #ddd;
  113.     padding:8px 0 1px 8px;
  114.     margin-bottom:20px;
  115. }
  116.  
  117. .icon {
  118.     display:inline-block;
  119.     width:60px;
  120.     height:60px;
  121.     background:#fff;
  122.     padding:5px;
  123.     margin: 0 7px 7px 0;
  124.     border:1px solid #ddd;
  125. }
  126.  
  127. .icon img {
  128.     width:60px;
  129.     height:60px;
  130. }
  131.  
  132. .linksbox {
  133.     padding:4px 7px;
  134.     background:#fdfdfd; /* box background color */
  135.     border:1px solid #ddd;
  136.     text-transform:uppercase;
  137.     font-size:10.4px;
  138.     line-height:21px;
  139.     letter-spacing:1px;
  140. }
  141.  
  142. .linksbox a:hover {
  143.     margin-left:7px;
  144. }
  145.         /*              main center box                */
  146.  
  147. .img1 {
  148.     width:620px;
  149.     height:auto;
  150.     margin:auto;
  151.     position:relative;
  152. }
  153.  
  154. .img1 img {
  155.     width:620px;
  156.     height:auto;
  157.     margin-left:7px;
  158. }
  159.  
  160. .box {
  161.     display:inline-block;
  162.     width:618px;
  163.     height:auto;
  164.     margin:-4px 20px 0 0;
  165.     padding-bottom:15px;
  166.     background:#fdfdfd; /* box background color */
  167.     border:1px solid #ddd;
  168. }
  169.  
  170. .img2 img{
  171.     width:170px;
  172.     height:170px;
  173.     position:relative;
  174.     float:right;
  175.     margin:-60px 10px 0 5px;
  176.     border-radius:100px;
  177. }
  178.  
  179. .title {
  180.     word-break:break-all;
  181.     margin:15px 0 5px  7px;
  182.     font-family: 'Crimson Text', serif; /* section title color */
  183.     font-size:30px;
  184.     letter-spacing:0px;
  185. }
  186.  
  187. .bio {
  188.     width:594px;
  189.     height:auto;
  190.     margin:auto;
  191.     line-height:21px;
  192.     text-align:justify;
  193. }
  194.  
  195.         /*              right side box                */
  196.  
  197. .rightbox {
  198.     width:158px;
  199.     float:right;
  200. }
  201.  
  202. .detailsbox {
  203.     margin-bottom:20px;
  204.     padding:5px 8px;
  205.     background:#fdfdfd; /* box background color */
  206.     border:1px solid #ddd;
  207.     line-height:25px;
  208.     letter-spacing:.5px;
  209. }
  210.  
  211. span.line {
  212.     margin-right:2px;
  213.     text-transform:uppercase;
  214.     font-weight:bold;
  215.     font-size:12px;
  216.     letter-spacing:1px;
  217. }
  218.  
  219. .triggerstitle {
  220.     word-break:break-all;
  221.     margin-bottom:2px;
  222.     text-align:center;
  223.     font-weight:bold;
  224.     font-size:18px;
  225.     letter-spacing:1px;
  226. }
  227.  
  228. .triggersbox {
  229.     padding:5px 8px;
  230.     background:#fdfdfd; /* box background color */
  231.     border:1px solid #ddd;
  232.     text-transform:uppercase;
  233.     font-size:10.4px;
  234.     letter-spacing:1px;
  235.     line-height:21px;
  236. }
  237.  
  238.         /*        faq        */
  239.        
  240. .faqbox {
  241.     width:618px;
  242.     height:auto;
  243.     margin:20px auto;
  244. }
  245.  
  246. .faq {
  247.     width:618px;
  248.     height:auto;
  249.     margin-left:7px;
  250.     padding-top:20px;
  251.     background:#fdfdfd; /* box background color */
  252.     border:1px solid #ddd;
  253.     line-height:20px;
  254. }
  255.  
  256. .faqtitle {
  257.     margin-bottom:4px;
  258.     font-weight:bold;
  259.     font-size:20px;
  260.     text-align:center;
  261. }
  262.  
  263. .faqtitle a {
  264.     color:#333;
  265. }
  266.  
  267. .q {
  268.     width:544px;
  269.     margin:auto;
  270.     padding:13px;
  271.     background:#fff;
  272.     border:1px solid #ddd;
  273.     font-weight:bold;
  274. }
  275.  
  276. .ans {
  277.     width:544px;
  278.     margin:auto;
  279.     padding:10px 0 25px;
  280.     text-align:justify;
  281. }
  282.  
  283.         /*        extras        */
  284.  
  285. .sidetitle {
  286.     word-break:break-all;
  287.     margin-bottom:2px;
  288.     text-align:center;
  289.     font-weight:bold;
  290.     font-size:18px;
  291.     letter-spacing:1px;
  292. }
  293.  
  294. /* keep intact <3 */
  295. .credit {
  296.     position:fixed;
  297.     bottom:10px;
  298.     right:5px;
  299. }
  300.  
  301. .credit a{
  302.     color:#333;
  303.     font-size:12px;
  304.     font-variant:small-caps;
  305. }
  306.  
  307. </style>
  308. </head>
  309.  
  310. <!-- tooltips -->
  311. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  312. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  313. <script>
  314. (function($){
  315. $(document).ready(function(){
  316. $("a[title]").style_my_tooltips({
  317. tip_follows_cursor:true,
  318. tip_delay_time:30,
  319. tip_fade_speed:300,
  320. attribute:"title"
  321. });
  322. });
  323. })(jQuery);
  324. </script>
  325. <!-- tooltips -->
  326.  
  327. <body>
  328. <div class="container">
  329.  
  330. <!-- start header image -->
  331. <div class="img1"><a href="/"><img src="header image url"/></a></div>
  332. <!-- header image end -->
  333.  
  334.  
  335.  
  336. <!-- start characters/left sidebar -->
  337. <div class="leftbox">
  338.    
  339. <!-- start characters/top right box -->
  340. <div class="sidetitle">title</div>
  341.  
  342. <div class="characters">
  343.  
  344.     <!-- start character icons -->
  345.     <div class="icon"><a href="char link" title="char name"><img src="image url"/></a></div>
  346.     <div class="icon"><a href="char link" title="char name"><img src="image url"/></a></div>
  347.    
  348. </div>
  349. <!-- end characters/top right box -->
  350.    
  351.    
  352. <!-- start links/bottom box  // add <br> at the end of each line// -->
  353. <div  class="linksbox">
  354.     <a href="/">link 1</a><br>
  355.     <a href="/">link 2</a><br>
  356.     <a href="/">link 3</a><br>
  357.     <a href="#faq">book faq</a> <!-- (optional) anchor link to the faq, be careful if you modify -->
  358. </div>
  359. <!-- end links/bottom box -->
  360.    
  361. </div>
  362. <!-- end characters/left sidebar -->
  363.  
  364.  
  365.  
  366. <!-- start summary/top middle box -->
  367. <div class="box">
  368.  
  369. <!-- start icon image -->
  370. <div class="img2"><a href="/"><img src="icon image url"/></a></div>
  371. <!-- end icon image -->
  372.    
  373.  
  374. <!-- start section 1 -->
  375. <div class="title">title;</div>
  376.        
  377. <div class="bio">
  378. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
  379.  
  380. <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  381. </div>
  382. <!-- end section 1 -->  
  383.  
  384.  
  385. <!-- start section 2 -->
  386. <div class="title">title;</div>
  387.        
  388. <div class="bio">
  389.     add as many as you want!
  390. </div>
  391. <!-- end section 2 -->
  392.  
  393. </div>
  394. <!-- end summary/top middle box -->
  395.  
  396.  
  397.  
  398. <!-- start info + triggers/right sidebar -->
  399. <div class="rightbox">
  400.  
  401. <!-- start info/top box  // add <br> at the end of each line// -->
  402. <div class="sidetitle">title</div>
  403.  
  404. <div class="detailsbox">
  405.     <div class="details">
  406.         <span class="line">title</span> book title<br>
  407.         <span class="line">author</span> author's name<br>
  408.        <span class="line">status</span> status of the book<br>
  409.        <span class="line">genre</span> book genre<br>
  410.        <span class="line">setting</span >book setting<br>
  411.        <span class="line">type</span> book type<br>
  412.        <span class="line">length</span> word length<br>
  413.        <span class="line">start date</span> date<br>
  414.        <span class="line">est. end date</span> date
  415.    </div>
  416. </div>
  417. <!-- end info/top box -->
  418.  
  419.  
  420. <!-- start triggers/bottom left box  // add <br> at the end of each line// -->
  421. <div class="triggerstitle">triggers.</div>
  422.  
  423. <div  class="triggersbox">
  424.    trigger 1<br>
  425.    trigger 2<br>
  426.    trigger 3
  427.    
  428. </div>
  429. <!-- end triggers/bottom left box -->
  430.  
  431. </div>
  432. <!-- end info + triggers/right sidebar -->
  433.  
  434.  
  435.  
  436. <!-- start faq/bottom middle box -->
  437. <div class="faqbox">
  438.  
  439. <div class="faqtitle"><a name="faq">book faq.</a></div>
  440.  
  441. <div class="faq">
  442.    
  443.    <!-- question 1 -->
  444.    <div class="q">this is a question?</div>
  445.    <div class="ans">here's the answer</div>
  446.    
  447.    
  448.     <!-- question 2 -->
  449.     <div class="q">this is a question?</div>
  450.     <div class="ans">here's the answer</div>
  451.    
  452. </div>
  453. </div>
  454. <!-- end faq/bottom middle box -->
  455.  
  456. </div>
  457. <!-- keep intact <3 -->
  458. <div class="credit"><a href="http://southcodes.tumblr.com" title="southcodes">s.</a></div>
  459. </body>
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!