API tools faq
paste
Noir-Et-Blanc

Page 02. About {002}

Noir-Et-Blanc
Feb 9th, 2016
823
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.77 KB | None | 0 0
raw download clone embed print report
  1. <!-- ABOUT ME
  2.  
  3. Page #02. (About Page)
  4. http://noiretblanc-themes.tumblr.com/
  5.  
  6. Please don't use this theme as a base or claim it as your own.
  7. You are free to edit this page as much as you want, just don't erase the credits.
  8.  
  9. Original background from: http://subtlepatterns.com/-->
  10.  
  11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  12. <html xmlns="http://www.w3.org/1999/xhtml">
  13. <head>
  14. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  15.  
  16. <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
  17. <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
  18. <link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,400italic' rel='stylesheet' type='text/css'>
  19.  
  20. <title>About Me</title>
  21.  
  22. <style>
  23. ::-webkit-scrollbar {
  24. width: 0px;
  25. }
  26.  
  27. ::-webkit-scrollbar-track {
  28. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0);
  29. border-radius: 1px;
  30. }
  31.  
  32. ::-webkit-scrollbar-thumb {
  33. border-radius: 1px;
  34. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0);
  35. }
  36.  
  37. body{
  38. background-image:URL("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/use_your_illusion.png"); /*Change the bg image here */
  39. background-color:#111; /*Change the bg color here */
  40. font-family: 'Poiret One', cursive;
  41. }
  42. #content{
  43. position:absolute;
  44. height:470px;
  45. width:700px;
  46. background-color:transparent;
  47. top:50%;
  48. right:50%;
  49. margin-top:-235px;
  50. margin-right:-350px;
  51. }
  52.  
  53. a{color:#666;} /* Links color (Not in the side bar) */
  54. a:hover{color:#111;} /* Hover links color (Not in the side bar) */
  55. b{color:#111;} /* Bold color */
  56. i{color:#999;} /* Italic color */
  57. s{color:#aaa;} /* Strike color */
  58. u{color:#444;} /* Underline color */
  59.  
  60. #title{
  61. position:absolute;
  62. color:#f1f1f1; /* Change the color of the "About Me" */
  63. top:-28px;
  64. right:0;
  65. font-size:4em;
  66. text-align:center;
  67. width:570px;
  68. font-family: 'Amatic SC', cursive;
  69. -moz-transition:all .5s ease-in-out; /*For Mozilla Browser*/
  70. -webkit-transition:all .5s ease-in-out; /*For Chrome and Safari*/
  71. -o-transition:all .5s ease-in-out; /*For Opera Browser*/
  72. transition:all .5s ease-in-out;
  73. }
  74.  
  75. #content:hover > #title{
  76. letter-spacing:10px;
  77. }
  78.  
  79. #avatardisplay{
  80. position:absolute;
  81. left:-10px;
  82. top:-10px;
  83. z-index:100;
  84. }
  85.  
  86. #avatardisplay img{
  87. max-width:126px;
  88. border-radius:100px;
  89. border: solid 15px #111;
  90. -webkit-filter: grayscale(100%);
  91. filter: grayscale(100%);
  92. -moz-transition:all .5s ease-in-out; /*For Mozilla Browser*/
  93. -webkit-transition:all .5s ease-in-out; /*For Chrome and Safari*/
  94. -o-transition:all .5s ease-in-out; /*For Opera Browser*/
  95. transition:all .5s ease-in-out;
  96. }
  97.  
  98. #content:hover > #avatardisplay img{
  99. -webkit-filter: grayscale(0%);
  100. filter: grayscale(0%);
  101. }
  102.  
  103. #leftbar{
  104. position:absolute;
  105. background-color:#111; /* Change the bg color of the sidebar here */
  106. left:0;
  107. bottom:0;
  108. height:425px;
  109. width:128px;
  110. border-radius:5px 0 0 5px;
  111. }
  112.  
  113.  
  114. #leftbar b{
  115. position:absolute;
  116. top:98px;
  117. display:block;
  118. background-color:#fff; /* Change the bg color of the "Navigation" */
  119. color:#111; /* Change the color of the font */
  120. padding:5px 27px 8px 27px;
  121. z-index:105;
  122. border-bottom:dotted 1px #555; /* Change the color of the borders */
  123. border-top:dotted 1px #555; /* Change the color of the borders */
  124. }
  125.  
  126. #leftbar a{
  127. text-decoration:none;
  128. color:white; /* Change the font color of the sidebar links */
  129. display:block;
  130. width:100%;
  131. margin-top:10px;
  132. position: relative;
  133. -moz-transition:all .4s ease-in-out; /*For Mozilla Browser*/
  134. -webkit-transition:all .4s ease-in-out; /*For Chrome and Safari*/
  135. -o-transition:all .4s ease-in-out; /*For Opera Browser*/
  136. transition:all .4s ease-in-out;
  137. z-index:95;
  138. }
  139.  
  140. #leftbar a:hover{
  141. color:#000; /* Change the font color of the links on hover*/
  142. }
  143.  
  144. #leftbar a:before {
  145. content: "";
  146. position: absolute;
  147. width: 100%;
  148. height: 20px;
  149. bottom: 0;
  150. left: 0;
  151. background-color: #fff; /* Change the bg color of the links on hover*/
  152. visibility: hidden;
  153. -webkit-transform: scaleX(0);
  154. transform: scaleX(0);
  155. -webkit-transition: all 0.4s ease-in-out 0s;
  156. transition: all 0.4s ease-in-out 0s;
  157. z-index:-1;
  158. }
  159.  
  160. #leftbar a:hover:before {
  161. visibility: visible;
  162. -webkit-transform: scaleX(1);
  163. transform: scaleX(1);
  164.  
  165. }
  166.  
  167. .links{
  168. margin: 0;
  169. position: relative;
  170. text-align:center;
  171. top:128px;
  172. }
  173.  
  174. #topbar{
  175. position:absolute;
  176. top:45px;
  177. right:0;
  178. background-color:#111; /* Change the bg color of the top bar */
  179. width:557px;
  180. height:50px;
  181. border-radius:0 5px 0 0;
  182. color:white;
  183. padding-left:15px;
  184. text-align:center;
  185. }
  186.  
  187. #topbar b{
  188. color:#fff; /* Change the font color of the titles in the top bar */
  189. }
  190.  
  191. #topbar p{
  192. display:inline-block;
  193. margin-right:20px;
  194. color:#ccc; /* Change the font color of the info in your top bar */
  195. }
  196.  
  197. #maincontent{
  198. position:absolute;
  199. bottom:0;
  200. right:0;
  201. background-color:white; /* Change the bg color of the main content */
  202. height:380px;
  203. width:572px;
  204. border-radius:0 0 5px 0;
  205. overflow:scroll;
  206. overflow-x: hidden;
  207. font-family: 'Titillium Web', sans-serif;
  208. }
  209.  
  210. #maincontent p{
  211. margin:15px;
  212. text-align:justify;
  213. color:#111; /* Change the font color of the content */
  214. }
  215.  
  216. .newtext{
  217. display:block;
  218. color:#000; /* Font color of the titles in the main content */
  219. text-align:right;
  220. padding:5px 10px 3px 0;
  221. border-bottom:dotted 1px #111;
  222. font-family: 'Amatic SC', cursive;
  223. font-size:1.7em;
  224. font-weight:bold;
  225. }
  226.  
  227. #maincontent li{
  228. display:inline-block;
  229. margin-left:15px;
  230. color:#111 ;/* Change the font color of the lists */
  231. }
  232.  
  233. #maincontent li:before{
  234. position:relative;
  235. top:7px;
  236. content:"•";
  237. font-weight:bold;
  238. font-size:2em;
  239. font-family: 'Amatic SC', cursive;
  240. color:#aaa; /* Change the color of the list bullets */
  241. }
  242.  
  243. #credits{
  244. position:fixed;
  245. bottom:0;
  246. right:0;
  247. }
  248.  
  249. /* IMPORTANT: You can edit the colors of the credits so it fits your entire theme. But please DON'T REMOVE THEM. */
  250.  
  251. #credits a{
  252. background-color:#202020; /* Change the bg color of the credits */
  253. color:#fff; /* Change the font color of the credits */
  254. width:100%;
  255. display:block;
  256. padding:2px 10px 3px 10px;
  257. font-family: 'Titillium Web', sans-serif;
  258. font-size:12px;
  259. text-decoration:none;
  260. -moz-transition:all .4s ease-in-out; /*For Mozilla Browser*/
  261. -webkit-transition:all .4s ease-in-out; /*For Chrome and Safari*/
  262. -o-transition:all .4s ease-in-out; /*For Opera Browser*/
  263. transition:all .4s ease-in-out;
  264. }
  265.  
  266. #credits a:hover{
  267. background-color:#111;
  268. color:#fff;
  269. }
  270.  
  271. </style>
  272. </head>
  273.  
  274. <body>
  275. <div id="content">
  276.  
  277. <div id="title">About Me</div>
  278.  
  279. <div id="avatardisplay">
  280. <a href="/"><img src="{PortraitURL-128}"></a>
  281. </div>
  282.  
  283. <div id="leftbar">
  284. <b>Navigation</b>
  285. <div class="links">
  286. <a href="/">Link 1</a>
  287. <a href="/">Link 2</a>
  288. <a href="/">Link 3</a>
  289. <a href="/">Link 4</a>
  290. <a href="/">Link 5</a>
  291. <a href="/">Link 6</a>
  292. <a href="/">Link 7</a>
  293. <a href="/">Link 8</a>
  294. <a href="/">Link 9</a>
  295. <a href="/">Link 10</a>
  296. </div>
  297. </div>
  298.  
  299. <div id="topbar">
  300. <b>Name:</b> <p>Krome</p>
  301. <b>DOB:</b> <p>March 23th</p>
  302. <b>Gender:</b> <p>Idc</p>
  303. <p>Aries | INTP</p>
  304. </div>
  305.  
  306. <div id="maincontent">
  307. <!-- All the blocks must start after this line -->
  308.  
  309. <!--Copy from here to create a text block-->
  310. <div class="newtext">Bio:</div>
  311. <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."<br>
  312. <a href="">This is a link</a> | <b>Bold</b> | <i>Italic</i> | <s>Strike</s> | <u>Underline</u>
  313. </p>
  314. <!--End of the text block-->
  315.  
  316. <!--Copy from here to create a list block-->
  317. <div class="newtext">Fandoms:</div>
  318. <p>
  319. <li>Content</li>
  320. <li>Content</li>
  321. <li>Content</li>
  322. <li>Content</li>
  323. <li>Content</li>
  324. <li>Content</li>
  325. <li>Content</li>
  326. <li>Content</li>
  327. <li>Content</li>
  328. <li>Content</li>
  329. <li>Content</li>
  330. <li>Content</li>
  331. </p>
  332. <!--End of the list block-->
  333.  
  334. <!--Copy from here to create a text block-->
  335. <div class="newtext">Other:</div>
  336. <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."</p>
  337. <!--End of the text block-->
  338.  
  339. <!-- All the blocks must end before this line -->
  340. </div>
  341. </div>
  342.  
  343. <div id="credits"><a href="http://noiretblanc-themes.tumblr.com/">Theme</a></div>
  344.  
  345.  
  346. </body>
  347. </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!