API tools faq
paste
Advertisement
Laighlin

#1: Facts and Figures

Laighlin
Nov 29th, 2017
1,248
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.13 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE xhtml>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <!--
  5.  
  6. Page #1: Facts and Figures by @laighlin
  7. (http://linthm.tumblr.com)
  8.  
  9. Note:
  10.  1. The sidebar image is 250px by 400px.
  11.  2. The personal data icon is 70px square.
  12.  3. The friend's icon is 65px square.
  13.  
  14. The placeholder artwork is the property of Mizushiro Setona.
  15.  
  16. -->
  17.  
  18. <head>
  19. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  20.  
  21. <!--Replace favicon-url.png with {Favicon} to just use your blog icon-->
  22. <link rel="shortcut icon" href="favicon-url.png">
  23.  
  24. <!--If changing any of the default fonts, make sure to change their names here as well-->
  25. <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:700|Oswald:700|Karla" rel="stylesheet">
  26.  
  27. <!--Page title, will show up as tab label in the browser-->
  28. <title>Page #1: Facts and Figures</title>
  29.  
  30. <style>
  31.  
  32. * {
  33.     transition:.2s all ease;
  34. }
  35.  
  36. body {
  37.     /*main background color*/
  38.     background-color:#c3c1b9;
  39.     /*see note near the top about changing fonts*/
  40.     font:13px 'Karla', sans-serif;
  41.     overflow:hidden;
  42.     margin:0; padding:0;
  43. }
  44.  
  45. /*Description scrollbar*/
  46. ::-webkit-scrollbar {
  47.     width:5px;
  48. }
  49.  
  50. ::-webkit-scrollbar-thumb {
  51.     background:#000 padding-box;
  52.    
  53.     border:1px solid transparent;
  54. }
  55.  
  56. ::-webkit-scrollbar-track {
  57.     background:#aaa padding-box;
  58.    
  59.     border:2px solid transparent;
  60. }
  61.  
  62. /* Please do not make any fundamental changes here */
  63. main {
  64.     height:535px;
  65.     width:500px;
  66.     padding:15px;
  67.     position:fixed;
  68.     top:calc(50% - 280px);
  69.     left:calc(50% - 265px);
  70. }
  71.  
  72. main:before, main:after {
  73.     content:'';
  74.     position:absolute;
  75.     border-radius:2px;
  76. }
  77.  
  78. /* This section onward can be changed */
  79. main:before {
  80.     /*BG image for the crooked container beneath the main one*/
  81.     background:url('http://static.tumblr.com/xwoxjom/xzXp05udq/stripes.png') repeat;
  82.     background-color:#444;
  83.    
  84.     transform:rotate(-1.5deg);
  85.     top:-6px; left:-3px; bottom:-8px; right:-5px;
  86.     /*low z-index value so it stays below everything else*/
  87.     z-index:-5;
  88. }
  89.  
  90. main:after {
  91.     /*background of the main container*/
  92.     background-color:#fff;
  93.    
  94.     transform:rotate(.5deg);
  95.     top:0; left:0; bottom:0; right:0;
  96.     border-radius:5px;
  97.     /*low z-index value so it stays below everything else*/
  98.     z-index:-4;
  99. }
  100.  
  101. main:after, #icon, #friendicon {
  102.     border:2px solid #555;
  103. }
  104.  
  105. p { margin:5px 0; }
  106.  
  107. a {
  108.     /*link color*/
  109.     color:#444;
  110.    
  111.     text-decoration:none;
  112.     outline:none;
  113. }
  114.  
  115. #top {
  116.     margin-top:-25px;
  117. }
  118.  
  119. /*Navigation links*/
  120. .links {
  121.     background:#222;
  122.     font-size:15px;
  123.     color:#ddd;
  124.     text-transform:uppercase;
  125.    
  126.     padding:5px 7px;
  127.     margin-right:7px;
  128. }
  129.  
  130. .links:hover {
  131.     color:#f0f0f0;
  132. }
  133.  
  134. /*Title bar*/
  135.  
  136. #title, #title:after {
  137.     background-color:#111;
  138. }
  139.  
  140. #title {
  141.     margin:0;
  142.     font:bold 20px 'Roboto Slab';
  143.     margin-top:15px;
  144.     margin-left:-11px;
  145.     width:300px;
  146.     color:#fff;
  147.     line-height:1em;
  148.     padding:10px;
  149.     font-variant:small-caps;
  150.     position:relative;
  151. }
  152.  
  153. #title:before, #title:after {
  154.     content:'';
  155.     position:absolute;
  156.     bottom:0;
  157.     left:320px;
  158.     z-index:-1;
  159. }
  160.  
  161. #title:before {
  162.     height:0;
  163.     width:0;
  164.     border:20px solid;
  165.     border-color:transparent transparent #111 #111;
  166.     bottom:0;
  167. }
  168.  
  169. #title:after {
  170.     width:207px;
  171.     height:10px;
  172. }
  173.  
  174. /*Data block*/
  175.  
  176. #data, #sidebar {
  177.     top:73px;
  178.     position:absolute;
  179. }
  180.  
  181. #data {
  182.     /*remove the line below to get rid of the light stripes in the personal data block*/
  183.     background:url('https://i.imgur.com/fl0oxz5.png') repeat;
  184.     background-color:#eee;
  185.     border:3px solid #555;
  186.    
  187.     margin-left:-3px;
  188.     width:222px;
  189.     height:374px;
  190.     padding:10px;
  191. }
  192.  
  193. #icon {
  194.     float:left;
  195.     height:70px;
  196.     margin-right:5px;
  197. }
  198.  
  199. /* "Personal Data" label */
  200. #pd {
  201.     color:#222;
  202.     /* changing the font here is not recommended, since it is very precisely packed in next to the icon */
  203.     font:bold 34px 'Oswald', sans-serif;
  204.    
  205.     line-height:1.1em;
  206.     margin:0;
  207.     margin-top:-2px;
  208.     margin-right:-13px;
  209.     text-transform:uppercase;
  210.     text-shadow:1px 1px 2px;
  211. }
  212.  
  213. #desc {
  214.     display:block;
  215.     margin-top:8px;
  216.     padding-right:10px;
  217.     line-height:1.35em;
  218.     height:120px;
  219.     overflow-y:scroll;
  220.     overflow-x:hidden;
  221. }
  222.  
  223. /*Stats section*/
  224.  
  225. #stat { margin-top:12px; }
  226. #stat h3 { margin-bottom:6px; }
  227.  
  228. /* Overall stat bar colors */
  229. .bar, .grade {
  230.     background:#222;
  231.     color:#fff;
  232. }
  233.  
  234. .bar {
  235.     margin:3px 0 7px;
  236.     border-radius:2px;
  237.     position:relative;
  238.     padding:5px;
  239.     line-height:14px;
  240. }
  241.  
  242. /* Stat labels */
  243. .lbl {
  244.     font:12px 'Karla', sans-serif;
  245.    
  246.     text-transform:uppercase;
  247.     width:50px;
  248.     margin-top:-2px;
  249.     float:left;
  250.     display:inline-block;
  251. }
  252.  
  253. .br {
  254.     /*the color of the levels in each stat bar*/
  255.     background:#fff;
  256.    
  257.     display:inline-block;
  258.     height:11px;
  259. }
  260.  
  261. /*
  262. Stat bar levels -
  263. Each block corresponds to the level of one stat bar, with b1 controlling the first bar, b2 the second, and so on.
  264. The numeric value of the width can be set to any number between 0 (an empty bar) and 140 (a full bar).
  265. */
  266. .b1 { width:120px; }
  267. .b2 { width:40px; }
  268. .b3 { width:140px; }
  269. .b4 { width:110px; }
  270. .b5 { width:80px; }
  271.  
  272. .grade {
  273.     font:bold 13px 'Oswald', sans-serif;
  274.     border-radius:5px;
  275.    
  276.     position:absolute;
  277.     padding:3px 6px;
  278.     width:15px;
  279.     text-align:center;
  280.     right:0;
  281.     top:0;
  282.     text-transform:uppercase;
  283. }
  284.  
  285. /* Sidebar image - changing dimensions not advised */
  286. #sidebar {
  287.     width:250px;
  288.     height:400px;
  289.     right:11px;
  290. }
  291.  
  292. /* "Words from a friend" section */
  293.  
  294. #words {
  295.     position:absolute;
  296.     bottom:13px;
  297.     margin-left:-3px;
  298. }
  299.  
  300. h3 {
  301.     font:bold 17px 'Oswald';
  302.     color:#333;
  303.    
  304.     margin:0;
  305.     line-height:1em;
  306.     margin-top:5px;
  307.     text-transform:uppercase;
  308. }
  309.  
  310. #friendicon, #bubbl {
  311.     /*the border around the friend's icon and their speech bubble*/
  312.     border:3px solid;
  313.     border-color:#111;
  314. }
  315.  
  316. #friendicon {
  317.     height:65px;
  318.     width:65px;
  319.     margin-right:7px;
  320.     margin-top:2px;
  321.     border-radius:50%;
  322.     float:left;
  323. }
  324.  
  325. /* Url leading to the friend's blog */
  326. #friendurl {
  327.     color:#aaa;
  328.     text-transform:lowercase;
  329. }
  330.  
  331. #friendurl:hover {
  332.     color:#777;
  333. }
  334.  
  335. #words h3 {
  336.     margin-top:0;
  337. }
  338.  
  339. /* The "words from a friend" label */
  340. h3 div {
  341.     color:#fff;
  342.     background:#666;
  343.     font:normal 10px 'Karla', sans-serif;
  344.     /* remove this line if you don't want the rounded corners */
  345.     border-radius:10px;
  346.    
  347.     position:relative;
  348.     margin-top:1px;
  349.     margin-right:5px;
  350.     padding:2px 4px;
  351.     float:left;
  352. }
  353.  
  354. /*Friend's speech bubble*/
  355. #bubbl {
  356.     background:#ddd;
  357.     border-radius:10px;
  358.    
  359.     width:405px;
  360.     padding:5px 7px;
  361.     margin-left:78px;
  362.     margin-top:6px;
  363.     line-height:1.35em;
  364.     position:relative;
  365. }
  366.  
  367. /* Do not change this section! It controls the small arrow attached to the speech bubble */
  368. #bubbl:before, #bubbl:after {
  369.     content:'';
  370.     position:absolute;
  371.     height:0;
  372.     width:0;
  373.     border:10px solid;
  374.     bottom:6px;
  375. }
  376.  
  377. #bubbl:before {
  378.     /*change this part too if changing the bubble's border color*/
  379.     border-color:#111 #111 transparent transparent;
  380.    
  381.     left:-20px;
  382. }
  383.  
  384. #bubbl:after {
  385.     /*change this part too if changing the bubble's bg color*/
  386.     border-color:#ddd #ddd transparent transparent;
  387.    
  388.     left:-13px;
  389.     bottom:3px;
  390. }
  391.  
  392. /*DO NOT TOUCH THIS*/
  393. .clear {
  394.     clear:both;
  395. }
  396.  
  397. </head></style>
  398.  
  399. <body>
  400.     <main>
  401.         <!--Sidebar image goes here-->
  402.         <img id="sidebar" src="https://i.imgur.com/tdbibGi.png">
  403.        
  404.         <!--Navigation links go here - add more by copy-pasting the last line!-->
  405.         <nav id="top">
  406.             <a class="links" href="/">Index</a>
  407.             <a class="links" href="/ask">Ask</a>
  408.             <a class="links" href="http://tumblr.com/dashboard">Dash</a>
  409.             <a class="links" href="http://linthm.tumblr.com/thm">Credit</a>
  410.             <a class="links" href="link destination">Link 5</a>
  411.         </nav>
  412.        
  413.         <!--Main title-->
  414.         <h1 id="title">Page #1: Facts and Figures</h1>
  415.        
  416.         <div id="data">
  417.        
  418.             <!--Personal data icon-->
  419.             <img id="icon" src="https://i.imgur.com/iyrbRIu.png">
  420.            
  421.             <h2 id="pd">Personal Data</h2>
  422.             <div class="clear"></div>
  423.            
  424.             <!--Description-->
  425.             <aside id="desc">
  426.                 Custom info goes in this section. It scrolls if it gets too long, so put in as much as you'd like.
  427.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  428.             </aside>
  429.            
  430.             <!--Stat block-->
  431.             <div id="stat">
  432.                 <h3>Hero's Stats</h3>
  433.                 <div class="bar">
  434.                     <!--Stat label-->
  435.                     <div class="lbl">power</div>
  436.                     <div class="br b1"></div>
  437.                     <!--Stat grade-->
  438.                     <div class="grade">B</div>
  439.                 </div>
  440.                 <div class="bar">
  441.                     <div class="lbl">speed</div>
  442.                     <div class="br b2"></div>
  443.                     <div class="grade">E</div>
  444.                 </div>
  445.                 <div class="bar">
  446.                     <div class="lbl">tech</div>
  447.                     <div class="br b3"></div>
  448.                     <div class="grade">A</div>
  449.                 </div>
  450.                 <div class="bar">
  451.                     <div class="lbl">int</div>
  452.                     <div class="br b4"></div>
  453.                     <div class="grade">B</div>
  454.                 </div>
  455.                 <div class="bar">
  456.                     <div class="lbl">co-op</div>
  457.                     <div class="br b5"></div>
  458.                     <div class="grade">C</div>
  459.                 </div>
  460.             </div>
  461.         </div>
  462.        
  463.         <!--Words from a friend-->
  464.         <footer id="words">
  465.             <!--Friend's icon-->
  466.             <img src="https://i.imgur.com/HCEAgJm.png" id="friendicon">
  467.             <h3>
  468.                 <div>Words From a Friend</div>
  469.                 Friend Name
  470.                
  471.                 <!--Remove the following line if you don't want the blog link-->
  472.                 <a id="friendurl" href="http://EXAMPLE-FRIEND-BLOG-URL.tumblr.com">@blog-url</a>
  473.             </h3>
  474.                
  475.             <!--Friend's speech bubble-->
  476.             <div id="bubbl">
  477.                 You can put a sort of testimonial here! It doesn't scroll, though, so be mindful of the length.
  478.             </div>
  479.            
  480.         </footer>
  481.     </main>
  482. </body>
  483. </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!