API tools faq
paste
LiterallyMeg

tumblr v.3: about

LiterallyMeg
Sep 14th, 2016
108
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. ==============================================
  8.  
  9. 「 CODES BY POHRORO 」
  10. @ http://pohroro.com
  11. Theme ▸ 002. Judith (Comely II Revamp)
  12. Last Updated: 3 July 2016
  13.  
  14. ==============================================
  15.  
  16. -->
  17.  
  18. <title>{Title}</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21.  
  22. <link href="https://static.tumblr.com/yzs4yqx/v9Xo33tyj/reset.css" rel="stylesheet" type="text/css">
  23. <link href="https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700,700italic|Droid+Serif:400,400italic,700,700italic" rel="stylesheet" type="text/css">
  24.  
  25. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  26. <script type="text/javascript" src="https://static.tumblr.com/yzs4yqx/hKGo8vgj6/jquery.slimscroll.min.js"></script>
  27. <script>
  28. $(function(){
  29. $('#biography').slimScroll({
  30. height: '294px',
  31. color: '#EEE',
  32. size: '3px',
  33. });
  34. });
  35. </script>
  36.  
  37. <style>
  38.  
  39. body {
  40. background: #F5F5F5; /*background color*/
  41. font-family: Droid Serif;
  42. font-size: 9px; /*font size*/
  43. line-height: 19px;
  44. color: #000; /*body font color*/
  45. }
  46.  
  47. a {
  48. color: #58BAB1; /*link color*/
  49. text-decoration: none;
  50. -webkit-transition: all 0.5s ease;
  51. transition: all 0.5s ease;
  52. }
  53.  
  54. a:hover {
  55. color: #000; /*hover link color*/
  56. -webkit-transition: all 0.5s ease;
  57. transition: all 0.5s ease;
  58. }
  59.  
  60. #container {
  61. width: 565px;
  62. height: 493px;
  63. margin: auto;
  64. top: 0;
  65. left: 0;
  66. bottom: 0;
  67. right: 0;
  68. position: absolute;
  69. }
  70.  
  71. #sidebar {
  72. background: #FFF; /*sidebar background color*/
  73. width: 190px;
  74. text-align: center;
  75. padding-bottom: 5px;
  76. text-transform: uppercase;
  77. }
  78.  
  79. #initial {
  80. display: block;
  81. width: 33px;
  82. height: 33px;
  83. background: #FBDED0; /*initial background color*/
  84. color: #FFF; /*initial font color*/
  85. margin: -25px auto 10px;
  86. z-index: 1;
  87. position: relative;
  88. line-height: 35px;
  89. border-radius: 100%;
  90. font-size: 18px;
  91. font-family: Old Standard TT;
  92. font-weight: bold;
  93. }
  94.  
  95. #title, #heading {
  96. font-size: 12px; /*titles size*/
  97. font-weight: bold;
  98. color: #000; /*titles color*/
  99. letter-spacing: 2px;
  100. font-family: Old Standard TT;
  101. }
  102.  
  103. #title {
  104. text-align: center;
  105. }
  106.  
  107. #heading {
  108. text-align: left;
  109. border-bottom: 1px solid #E1E1E1; /*heading border color*/
  110. margin: 0 15px;
  111. padding: 0px 15px 5px 2px;
  112. width: 310px;
  113. }
  114.  
  115. .bullet {
  116. color: #FBDED0; /*heading bullet color*/
  117. }
  118.  
  119. .divider {
  120. color: #D1D1D1; /*links divider color*/
  121. font-size: 8px;
  122. }
  123.  
  124. #sidebar img {
  125. width: 190px;
  126. height: 290px;
  127. }
  128.  
  129. #links a {
  130. margin: 0 3px;
  131. font-size: 7px;
  132. font-weight: bold;
  133. color: #FBDED0; /*sidebar top links color*/
  134. letter-spacing: 1px;
  135. }
  136.  
  137. nav {
  138. text-align: center;
  139. padding: 6px 0;
  140. }
  141.  
  142. nav a {
  143. font-size: 7px;
  144. height: 30px;
  145. line-height: 30px;
  146. display: block;
  147. letter-spacing: 1px;
  148. width: 190px;
  149. color: #AAA; /*sidebar navigation color*/
  150. }
  151.  
  152. nav .divider {
  153. width: 170px;
  154. height: 1px;
  155. background: #F1F1F1; /*sidebar navigation border color*/
  156. margin-left: 10px;
  157. }
  158.  
  159. table {
  160. width: 360px;
  161. line-height: 18px;
  162. margin-top: 15px;
  163. }
  164.  
  165. td {
  166. width: 50%;
  167. padding: 12px 15px 15px 15px;
  168. vertical-align: top;
  169. }
  170.  
  171. table b {
  172. text-transform: uppercase;
  173. font-size: 7px;
  174. font-weight: bold;
  175. color: #FFF; /*stat background color*/
  176. background: #FBDED0; /*stat font color*/
  177. letter-spacing: 1px;
  178. padding: 1px 2px 1px 3px;
  179. margin-right: 2px;
  180. }
  181.  
  182. #backing {
  183. width: 350px;
  184. height: 493px;
  185. top: 0;
  186. padding-right: 10px;
  187. margin-left: 205px;
  188. background: #FFF; /*content background color*/
  189. position: absolute;
  190. }
  191.  
  192. #biography {
  193. text-align: justify;
  194. overflow: auto;
  195. margin-top: 5px;
  196. padding: 0px 10px 15px 15px;
  197. }
  198.  
  199. #c {
  200. width: 55px;
  201. height: 18px;
  202. right: 8px;
  203. text-transform: uppercase;
  204. text-align: center;
  205. bottom: 10px;
  206. letter-spacing: 1px;
  207. font: 7px/4px Arial;
  208. padding: 10px 3px;
  209. display: block;
  210. border-color: #F1F1F1; /*credit border color*/
  211. background: #FFF; /*credit background color*/
  212. border-radius: 3px;
  213. position: fixed;
  214. z-index: 999999999999999 !important;
  215. }
  216.  
  217. #c a {
  218. font: italic bold 15px/17px Times New Roman;
  219. text-transform: lowercase;
  220. letter-spacing: -1px;
  221. }
  222.  
  223. </style>
  224. </head>
  225. <body>
  226. <div id="container">
  227.  
  228. <div id="sidebar">
  229. <img src="http://i.imgur.com/un0qdcI.png"> <!--sidebar image-->
  230. <div id="initial">
  231. J <!--initial-->
  232. </div>
  233. <div id="title">
  234. Judith <!--title-->
  235. </div>
  236.  
  237. <div id="links">
  238. <a href="http://tumblr.com">Index</a>
  239. <span class="divider">&#x25CF;</span>
  240. <a href="http://tumblr.com">Ask</a>
  241. <span class="divider">&#x25CF;</span>
  242. <a href="http://tumblr.com">Archive</a>
  243. </div>
  244.  
  245. <nav>
  246. <a href="http://tumblr.com">Link One</a> <!--custom link-->
  247. <div class="divider"></div>
  248. <a href="http://tumblr.com">Link Two</a> <!--custom link-->
  249. <div class="divider"></div>
  250. <a href="http://tumblr.com">Link Three</a> <!--custom link-->
  251. <div class="divider"></div>
  252. <a href="http://tumblr.com">Link Four</a> <!--custom link-->
  253. </nav>
  254.  
  255. </div>
  256.  
  257.  
  258. <div id="backing">
  259.  
  260. <table>
  261. <th colspan="2"><div id="heading">
  262. <span class="bullet">&#xBB;</span>
  263. PROFILE</div></th>
  264. <tr>
  265. <td>
  266.  
  267. <!--start of stats; try to keep the same number of stats-->
  268.  
  269. <b>Name</b> Jessica Jung<br>
  270. <b>Date Of Birth</b> 18/04/89<br>
  271. <b>Occupation</b> Singer, Actress<br>
  272. <b>Location</b> Seoul, SK<br>
  273. </td>
  274. <td style="padding: 10px 0px;">
  275. <b>Age</b> 27<br>
  276. <b>R/S Status</b> Single<br>
  277. <b>Gender</b> Female<br>
  278. <b>Hometown</b> California, US
  279.  
  280.  
  281. <!--end of stats-->
  282.  
  283. </td>
  284. </tr>
  285. </table>
  286.  
  287. <div id="heading" style="margin: 5px 0px 10px 15px;">
  288. <span class="bullet">&#xBB;</span>
  289. ABOUT</div>
  290. <div id="biography">
  291.  
  292. <!--start of biography-->
  293.  
  294. <b>Bold</b>. <i>Italic.</i> <u>Underline.</u> <a href="/">Link.</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis feugiat iaculis. Integer vitae eleifend magna. Morbi vitae dui in ipsum bibendum faucibus id non diam. Nulla facilisi. In viverra, velit vitae porta luctus, enim dui lobortis magna, ac vehicula tortor neque vel orci. Cras odio mauris, sollicitudin eu lacinia vitae, placerat ut purus. Quisque quis diam metus. Maecenas sollicitudin euismod mauris, at mattis justo consequat id. Fusce ornare sagittis odio a blandit.
  295.  
  296. <p>In quis risus eu metus congue pharetra mattis eget orci. Phasellus velit nunc, interdum at iaculis interdum, imperdiet eu tortor. Nulla consequat porttitor orci, eget bibendum diam iaculis ut. Nulla auctor lorem a nunc vulputate vitae venenatis turpis accumsan. Curabitur lacinia, ante eu dapibus interdum, ligula purus rutrum justo, sit amet cursus tortor tellus et. Donec quis diam quis magna interdum adipiscing id et felis. Phasellus sit amet libero vitae metus tincidunt dignissim. Nam posuere odio id tortor pellentesque, non tristique quam.</p>
  297.  
  298. <p>Pellentesque facilisis hendrerit est, eget auctor libero fermentum sed. Ut vel venenatis erat. Proin sit amet justo varius elit fermentum aliquet id a velit. Proin porta dolor sem, sed fringilla libero ullamcorper sit amet. Pellentesque ultricies libero quis urna sagittis, eu tristique mi tincidunt. Sed lacus leo, lobortis rutrum bibendum et, imperdiet non dui.</p>
  299.  
  300. <!--end of biography-->
  301.  
  302. </div>
  303. </div>
  304.  
  305. </div>
  306.  
  307. <div id="c">Codes by<br><a href="http://pohroro.com">Pohroro</a></div>
  308. </body>
  309. </html>
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!