API tools faq
paste
Advertisement
Noir-Et-Blanc

Page 06. About {Under the Stars}

Noir-Et-Blanc
Apr 9th, 2016
1,261
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.49 KB | None | 0 0
raw download clone embed print report
  1. <!-- About Page
  2.  
  3. {. Under the Stars .}
  4.  
  5. Page #06. (About Me)
  6. http://noiretblanc-themes.tumblr.com/
  7.  
  8. Please don't use this theme as a base or claim it as your own.
  9. You are free to edit this page as much as you want, please just don't erase the credits.
  10.  
  11. CREDITS TO:
  12. Preview Profile: http://www.pixiv.net/member_illust.php?mode=medium&illust_id=25285071
  13. Background Image: Steven Universe
  14.  
  15.  
  16. -->
  17.  
  18. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  19. <html xmlns="http://www.w3.org/1999/xhtml">
  20. <head>
  21. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  22. <link rel="shortcut icon" href="{Favicon}">
  23.  
  24. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  25. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
  26. <link href='https://fonts.googleapis.com/css?family=Megrim|Rajdhani:400,300' rel='stylesheet' type='text/css'>
  27. <title>{Title}</title>
  28.  
  29. <style>
  30.  
  31.  
  32. ::-webkit-scrollbar-track{
  33. border-radius: 7px;
  34. }
  35.  
  36. ::-webkit-scrollbar{
  37. width: 5px;
  38. background-color: rgba(0, 0, 0, 0.16);
  39. border-radius: 7px;
  40. }
  41.  
  42. ::-webkit-scrollbar-thumb{
  43. border-radius: 7px;
  44. background-image: -webkit-gradient(linear,
  45. left bottom,
  46. left top,
  47. color-stop(0.01, rgb(220, 155, 255)),
  48. color-stop(0.32, rgb(162, 72, 209)),
  49. color-stop(0.96, rgb(24, 24, 51)));
  50. }
  51.  
  52. body{
  53. background: url("https://i.imgur.com/69Io82i.jpg") no-repeat center center fixed;
  54. -webkit-background-size: cover;
  55. -moz-background-size: cover;
  56. -o-background-size: cover;
  57. background-size: cover;
  58. margin:0;
  59. padding:0;
  60. font-family: 'Megrim', cursive;
  61. color: #ffffff; /* Main color of the fonts */
  62. overflow: hidden;
  63. }
  64.  
  65. #wonderland{
  66. position: absolute;
  67. width: 800px;
  68. left: 50%;
  69. margin-left: -400px;
  70. height: 450px;
  71. top:50%;
  72. margin-top: -225px;
  73. background: rgba(115, 90, 255, 0.35); /* Color of the box */
  74. border-radius: 10px;
  75. }
  76.  
  77. #wonderland h1{
  78. position: absolute;
  79. top:-55px;
  80. width: 100%;
  81. text-align: center;
  82. }
  83.  
  84. #smb{
  85. background: rgba(0, 0, 0, 0.5);
  86. border-radius: 5px;
  87. box-sizing: border-box;
  88. }
  89.  
  90. .left{
  91. left: 10px;
  92. top: 10px;
  93. bottom: 10px;
  94. position: absolute;
  95. width: 200px;
  96. }
  97.  
  98. .right{
  99. right: 10px;
  100. top: 10px;
  101. bottom: 10px;
  102. position: absolute;
  103. width: 200px;
  104. }
  105.  
  106. .center{
  107. position: absolute;
  108. margin: 0 auto;
  109. width: 350px;
  110. height: 430px;
  111. margin-top:10px;
  112. left:50%;
  113. margin-left: -175px;
  114. }
  115. .bg{
  116. position: absolute;
  117. top: 0;
  118. width: 100%;
  119. height: 100%;
  120. z-index: -1;
  121. border-radius: 5px;
  122. background-image: url("https://i.imgur.com/mK2usNG.png"); /* Transparent background in the main boxes. */
  123. opacity: 0.6;
  124. }
  125.  
  126. #side-p{
  127. width: 200px;
  128. height: 200px;
  129. overflow: hidden;
  130. border-radius:9px 9px 200px 200px;
  131. position: relative;
  132. }
  133.  
  134. #side-p img{
  135. max-height: 200px; /* This will change the size of the profile picture to 200px automatically. Feel free to edit or delet this part. */
  136. }
  137.  
  138. .tx{
  139. margin-top: 15px;
  140. width: 100%;
  141. text-align: center;
  142. }
  143.  
  144. .tx p{
  145. margin:0;
  146. padding: 0;
  147. }
  148.  
  149. .tx b{
  150. display: block;
  151. border-bottom: 1px dotted #9eecff;
  152. width: 140px;
  153. margin: 0 auto;
  154. margin-top: 8px;
  155. font-family: 'Rajdhani', sans-serif;
  156. font-size: 14px;
  157. text-align: left;
  158. }
  159.  
  160. .tx a{
  161. display: block;
  162. width: 95%;
  163. background: rgba(0, 0, 0, 0.6); /* Link background color */
  164. color:inherit; /* Link font color */
  165. margin: 0 auto;
  166. margin-top:7px;
  167. padding: 5px 0;
  168. text-decoration: none;
  169. -moz-transition:all .4s ease-in-out; /*For Mozilla Browser*/
  170. -webkit-transition:all .4s ease-in-out; /*For Chrome and Safari*/
  171. -o-transition:all .4s ease-in-out; /*For Opera Browser*/
  172. transition:all .4s ease-in-out;
  173. }
  174.  
  175. .tx a:hover{
  176. letter-spacing: 3px;
  177. background: black; /* Link bg color on hover */
  178. }
  179.  
  180.  
  181.  
  182. .tx b i{
  183. position: absolute;
  184. right: 30px;
  185. text-align: right;
  186. }
  187.  
  188. .fa{
  189. position: absolute;
  190. left: 15px;
  191. margin-top: 2px;
  192. }
  193.  
  194. .extralink:before{
  195. font-family: FontAwesome;
  196. content: "\f005";
  197. position: absolute;
  198. left: 15px;
  199. margin-top: 2px;
  200. }
  201.  
  202. .mb-content{
  203. width: 100%;
  204. height: 100%;
  205. overflow-y: auto;
  206. }
  207.  
  208. .mb-content p{
  209. padding: 0 10px;
  210. margin: 10px 0 5px 0;
  211. font-family: 'Rajdhani', sans-serif;
  212. text-align: justify;
  213. }
  214.  
  215. .mb-content h2{
  216. margin: 10px 0 5px 0;
  217. padding: 0;
  218. text-align: center;
  219. }
  220.  
  221. .mb-content s{
  222. color: #727272; /* Strike font color. */
  223. }
  224.  
  225. .mb-content a{
  226. color:inherit; /* Links color in description */
  227. text-decoration: none;
  228. -moz-transition:all .4s ease-in-out; /*For Mozilla Browser*/
  229. -webkit-transition:all .4s ease-in-out; /*For Chrome and Safari*/
  230. -o-transition:all .4s ease-in-out; /*For Opera Browser*/
  231. transition:all .4s ease-in-out;
  232. }
  233.  
  234. .mb-content a:hover{
  235. color: #ffade9; /* Links hover color in description */
  236. }
  237.  
  238. .mb-content ul{
  239. list-style: none;
  240. padding: 0 30px;
  241. margin: 10px 0 5px 0;
  242. font-family: 'Rajdhani', sans-serif;
  243. }
  244.  
  245. .mb-content li:before{
  246. content: "★";
  247. margin-right: 3px;
  248. color: #61ffdb; /* List bullet color */
  249. }
  250.  
  251. /*YOU MAY EDIT THE CREDIT'S COLOR TO FIT YOUR THEME, BUT DO NOT ERASE THEM*/
  252.  
  253. #credits{
  254. position: absolute;
  255. bottom: 0;
  256. right: 0;
  257. }
  258.  
  259. #credits a{
  260. display: block;
  261. color: white;
  262. background-color: rgba(42, 23, 77, 0.78);
  263. padding: 5px 5px 5px 8px;
  264. text-decoration: none;
  265. font-size: 13px;
  266. -moz-transition:all .4s ease-in-out; /*For Mozilla Browser*/
  267. -webkit-transition:all .4s ease-in-out; /*For Chrome and Safari*/
  268. -o-transition:all .4s ease-in-out; /*For Opera Browser*/
  269. transition:all .4s ease-in-out;
  270. }
  271.  
  272. #credits a:hover{
  273. background: black;
  274. letter-spacing: 2px;
  275. }
  276.  
  277. .tooltip {
  278. display:none;
  279. position:absolute;
  280. background-color:#000000;
  281. border-radius:2px;
  282. padding:5px;
  283. color:#fff;
  284. font-size:12px;
  285. }
  286. </style>
  287. </head>
  288. <body>
  289. <div id="wonderland">
  290. <h1>. About Me .</h1>
  291.  
  292. <!-- LEFT BAR {PROFILE PICTRE + BASIC INFO}-->
  293. <div id="smb" class="left">
  294. <div class="bg"></div>
  295.  
  296. <!-- PROFILE PICTURE GOES HERE. SIZE RECOMMENDED 200x200-->
  297. <div id="side-p"><img src="http://media3.vindy.com/ellington_defaults/images/avatars/blank_avatar_240x240.gif"></div>
  298.  
  299. <!-- BASIC INFO GOES HERE-->
  300. <div class="tx">
  301. <p>★ Under The Stars ★</p>
  302. <b>Name: <i>xxx</i></b>
  303. <b>Age: <i>xx</i></b>
  304. <b>DOB: <i>xxx xxx</i></b>
  305. <b>Gender:<i>xxx</i></b>
  306. <b>xxx<i>xxx</i></b>
  307. <b>xxx <i>xxx</i></b>
  308. </div>
  309. </div>
  310. <!-- LEFT BAR {PROFILE PICTRE + BASIC INFO}-->
  311.  
  312. <!-- CENTER BAR {FULL INFO}-->
  313. <div id="smb" class="center">
  314. <div class="bg"></div>
  315.  
  316. <div class="mb-content">
  317. <h2>A title goes here (Optional)</h2>
  318.  
  319. <p>Here's some info about you.<br>
  320. <b>Bold</b> <i>Italic</i> <u>Underline</u> <s>Strike</s> <a href="">Link</a></p>
  321.  
  322. <ul><li>A list</li>
  323. <li>A list</li>
  324. <li>A list</li>
  325. <li>A list</li></ul>
  326.  
  327. <p>Cernantur e quis iudicem et ullamco ubi labore pariatur, senserit reprehenderit
  328. nam offendit ex cupidatat duis velit cupidatat veniam, tamen mentitum
  329. praetermissum, arbitror te anim a ad ex legam pariatur, cillum appellat non
  330. lorem quem. Ea si aliqua doctrina et ingeniis minim est quibusdam coniunctione.
  331. Id sint voluptate deserunt et ita nisi mentitum graviterque ubi quae ubi an quis
  332. ullamco o multos quamquam domesticarum eu voluptate varias dolor eiusmod minim,
  333. pariatur amet admodum ne excepteur fugiat cernantur cernantur, appellat quis
  334. cernantur. Laborum do expetendis, non cillum enim tamen possumus. Litteris se
  335. incurreret, et sunt dolore multos mandaremus, amet incididunt ut distinguantur
  336. ubi ad sed veniam mentitum. Non fugiat appellat praesentibus, pariatur
  337. cohaerescant sed laborum. Officia nisi expetendis. Fabulas varias probant te
  338. nostrud multos ut vidisse tractavissent.</p>
  339.  
  340. <!--Add new blocks of text with: <p>New Text Block</p> -->
  341.  
  342.  
  343. </div>
  344. </div>
  345. <!-- CENTER BAR {FULL INFO}-->
  346.  
  347. <!-- RIGHT BAR {LINKS}-->
  348. <div id="smb" class="right">
  349. <div class="bg"></div>
  350. <div class="tx">
  351. <p>★ Out Of This Planet ★</p>
  352.  
  353. <!-- Default links-->
  354. <a href="/"><i class="fa fa-rocket"></i>Home</a>
  355. <a href="/ask"><i class="fa fa-envelope"></i>Ask</a>
  356. <a href="/submit"><i class="fa fa-pencil-square-o"></i>Submit</a>
  357. <!-- Default links-->
  358.  
  359. <!-- Custom links-->
  360. <a href="/" class="extralink">Link</a>
  361. <a href="/" class="extralink">Link</a>
  362. <a href="/" class="extralink">Link</a>
  363. <a href="/" class="extralink">Link</a>
  364. <a href="/" class="extralink">Link</a>
  365. <a href="/" class="extralink">Link</a>
  366. <a href="/" class="extralink">Link</a>
  367. <a href="/" class="extralink">Link</a>
  368. <!-- Custom links-->
  369. </div>
  370. </div>
  371. <!-- RIGHT BAR {LINKS}-->
  372. </div>
  373.  
  374. <div id="credits">
  375. <a href="http://noiretblanc-themes.tumblr.com/" title="Noir Et Blanc" class="masterTooltip">Theme</a>
  376. </div>
  377.  
  378. </body>
  379.  
  380.  
  381.  
  382. <script>
  383. $(document).ready(function() {
  384. // Tooltip only Text
  385. $('.masterTooltip').hover(function(){
  386. // Hover over code
  387. var title = $(this).attr('title');
  388. $(this).data('tipText', title).removeAttr('title');
  389. $('<p class="tooltip"></p>')
  390. .text(title)
  391. .appendTo('body')
  392. .fadeIn('slow');
  393. }, function() {
  394. // Hover out code
  395. $(this).attr('title', $(this).data('tipText'));
  396. $('.tooltip').remove();
  397. }).mousemove(function(e) {
  398. var mousex = e.pageX - 70; //Get X coordinates
  399. var mousey = e.pageY - 45; //Get Y coordinates
  400. $('.tooltip')
  401. .css({ top: mousey, left: mousex })
  402. });
  403. });
  404. </script>
  405. </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!