API tools faq
paste
Advertisement
oitnbhelps

these streets 3

oitnbhelps
Jul 3rd, 2015
462
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.74 KB | None | 0 0
raw download clone embed print report
  1. <!-----
  2.  
  3. PAGE #1: THESE STREETS BY OITNBHELPS
  4.  
  5. 1. DON'T REMOVE, EDIT OR EVEN TOUCH THE CREDIT
  6. 2. DON'T REPOST
  7. 3. DON'T USE AS A BASE
  8. 4. DON'T CLAIM AS YOUR OWN
  9.  
  10. AS LONG AS YOU FOLLOW THOSE RULES YOU'RE FREE TO EDIT AS MUCH AS YOU WANT!
  11.  
  12. ---->
  13.  
  14. <!DOCTYPE html>
  15. <html>
  16. <head>
  17. <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
  18.  
  19. <title>{Title}</title>
  20. <link rel="shortcut icon" href="{Favicon}">
  21.  
  22. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  23. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  24. <script>
  25.  
  26. (function($){
  27.  
  28. $(document).ready(function(){
  29.  
  30. $("a[title]").style_my_tooltips({
  31.  
  32. tip_follows_cursor:true,
  33.  
  34. tip_delay_time:30,
  35.  
  36. tip_fade_speed:300,
  37.  
  38. attribute:"title"
  39.  
  40. });
  41.  
  42. });
  43.  
  44. })(jQuery);
  45.  
  46. </script>
  47. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  48.  
  49. <script>
  50. jQuery(document).ready(function() {
  51. jQuery('.tabs .tab-links a').on('click', function(e) {
  52. var currentAttrValue = jQuery(this).attr('href');
  53.  
  54. // Show/Hide Tabs
  55. jQuery('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();
  56.  
  57. // Change/remove current tab to active
  58. jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
  59.  
  60. e.preventDefault();
  61. });
  62. });
  63. </script>
  64.  
  65. <style type="text/css"/>
  66.  
  67.  
  68. #s-m-t-tooltip {
  69. font-family: 'Lato', sans-serif; /*tooltip font*/
  70. font-size:11px; /*tooltip font size*/
  71. position:absolute;
  72. z-index:9999;
  73. height:auto;
  74. margin:10px;
  75. margin-bottom:5px;
  76. padding:5px;
  77. border:1px dashed white;
  78. text-align:center;
  79. color:#fff; /*tooltip text color*/
  80. background-color:#000; /*tooltip background color*/
  81. }
  82.  
  83.  
  84. /* -- scrollbar customization -- */
  85.  
  86. ::-webkit-scrollbar-thumb {
  87. background:#42444D;
  88. }
  89.  
  90. ::-webkit-scrollbar {
  91. width:5px;
  92. background:#fff;
  93. }
  94.  
  95. ::-webkit-scrollbar-track {
  96. background-color:#fff;
  97. -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  98. -moz-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  99. box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  100. }
  101.  
  102. /* -- end of scrollbar customization -- */
  103.  
  104. body {
  105. background:url('http://cmendina.net/wp-content/uploads/2015/03/Bardh-e-Zi.jpg') no-repeat center center fixed; /* replace the link with your own link. if you want to use a pattern background delete "no-repeat center center" */
  106. }
  107.  
  108. #container {
  109. background-color:white;
  110. width:400px;
  111. max-height:558px; /*don't change without changing content height too*/
  112. margin:0 auto;
  113. margin-top:50px;
  114. }
  115.  
  116. .content {
  117. background-color:white;
  118. width:390px;
  119. max-height:540px; /*don't change without changing the container height too*/
  120. margin:0 auto;
  121. border:9px solid black;
  122. }
  123.  
  124. /* ---- the picture at the top ---- */
  125.  
  126. .header {
  127. width:400px;
  128. }
  129.  
  130. .header img {
  131. display:block;
  132. margin:0 auto;
  133. padding:10px;
  134. width:100px;
  135. height:100px;
  136. border-radius:100px;
  137. margin-top:10px;
  138. -webkit-filter:grayscale(100%); /* -- delete this if you don't want
  139. the picture to be black and white -- */
  140. }
  141.  
  142. /* --- back button --- */
  143.  
  144. .links {
  145. text-align:center;
  146. font-size:11px;
  147. border-top:1px solid black;
  148. border-bottom:1px solid black;
  149. margin-bottom:5px;
  150. }
  151.  
  152. .links a {
  153. color:black;
  154. text-decoration:none;
  155. transition:all .5s ease-in-out;
  156. }
  157.  
  158. .links a:hover {
  159. letter-spacing:2px;
  160. }
  161.  
  162. /* --------- tabs -------*/
  163.  
  164. .tabs {
  165. width:100%;
  166. display:inline-block;
  167. }
  168.  
  169. .tab-links {
  170. width:300px;
  171. margin:10px auto;
  172. }
  173.  
  174. .tab-links:after {
  175. display:block;
  176. clear:both;
  177. content:'';
  178. }
  179.  
  180. .tab-links li {
  181. float:left;
  182. list-style:none;
  183. }
  184.  
  185. .tab-links a {
  186. margin:1px;
  187. width:108px;
  188. font-family: 'Lato', sans-serif;
  189. padding:9px 15px;
  190. display:inline-block;
  191. background:#000;
  192. color:white;
  193. text-shadow:1px 1px 2px white;
  194. border-radius:8px 8px 2px 2px;
  195. text-decoration:none;
  196. font-size:16px;
  197. text-transform:lowercase;
  198. letter-spacing:3px;
  199. font-weight:400;
  200. transition:all linear 0.15s;
  201. }
  202.  
  203. .tab-links a:hover {
  204. color:#4c4c4c;
  205. }
  206.  
  207. li.active a, li.active a:hover {
  208. background:#fff;
  209. color:#4c4c4c;
  210. text-shadow:1px 1px 2px gray;
  211. }
  212.  
  213. /* --------- tabs content -------*/
  214.  
  215. .tab-content {
  216. border-radius:3px;
  217. background:#fff;
  218. }
  219.  
  220. .tab {
  221. display:none;
  222. }
  223.  
  224. .tab.active {
  225. display:block;
  226. }
  227.  
  228.  
  229. /* --------- about tab -------*/
  230.  
  231. .about {
  232. font-family: 'Lato', sans-serif;
  233. width:300px;
  234. text-align:justify;
  235. height:250px;
  236. margin:0 auto;
  237. padding:5px 10px;
  238. margin-top:5px;
  239. overflow:auto;
  240. font-size:11px;
  241. }
  242.  
  243. /* --------- basics tab -------*/
  244.  
  245. .basics {
  246. font-family: 'Lato', sans-serif;
  247. margin-top:40px;
  248. margin-bottom:40px;
  249. width:300px;
  250. max-height:250px;
  251. margin:0 auto;
  252. padding:10px;
  253. overflow:auto;
  254. margin-top:10px;
  255. font-size:11px;
  256. text-transform:uppercase;
  257. letter-spacing:1px;
  258. }
  259.  
  260. .basics p {
  261. border-bottom:1px solid lightgray;
  262. }
  263.  
  264. /* --------- little boxes at bottom -------*/
  265.  
  266. .boxes {
  267. position:relative;
  268. width:105px;
  269. height:15px;
  270. margin:0 auto;
  271. margin-top:15px;
  272. }
  273. .box {
  274. width:15px;
  275. height:15px;
  276. float:left;
  277. margin:10px;
  278. display:inline-block;
  279. margin-bottom:18px;
  280. }
  281.  
  282. b, strong {
  283. color:#454545;
  284. }
  285.  
  286. em, i {
  287. color:#767676;
  288. }
  289.  
  290. /* -- credit. do not touch (seriously why would you? it's just a triangle)-- */
  291.  
  292. .credit {
  293. position:fixed;
  294. right:10px;
  295. bottom:10px;
  296. color:white;
  297. font-size:20px;
  298. -webkit-transition:all .5s;
  299. }
  300.  
  301. .credit:hover {
  302. font-size:25px;
  303. }
  304.  
  305.  
  306. </style>
  307. </head>
  308. <body>
  309. <div id="container">
  310. <div class=content>
  311.  
  312. <div class="header">
  313. <img src="https://38.media.tumblr.com/f10adee1b4540e731867a5056a632052/tumblr_inline_n6zq2v0SHn1r21036.png"> <!--- replace this link with the link to your own picture --->
  314. </div>
  315.  
  316. <div class=links><a href="/">⇷ back</a></div>
  317.  
  318. <div class="tabs">
  319. <ul class="tab-links">
  320. <li class="active"><a href="#tab1">About</a></li>
  321. <li><a href="#tab2">Basics</a></li>
  322. </ul>
  323.  
  324. <div class="tab-content">
  325.  
  326. <div id="tab1" class="tab active">
  327. <div class="about">
  328.  
  329. <!---- every <p> marks the beginning of a new paragraph, so put each paragraph between a <p></p> if you want to have a break between them. if you want something to be bolded put <b></b> around it, and <em></em> for italics ---->
  330.  
  331. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit ipsum. Nulla non aliquet purus, et imperdiet leo. Cras eu metus vulputate tortor tincidunt sagittis. Praesent pulvinar est elit, non pharetra nisi commodo a. Nullam ante leo, porttitor non dolor ac, dignissim mollis orci. <b>Suspendisse et enim vitae lectus ornare porta. Nam consectetur erat vitae ex eleifend pharetra.</b> Vivamus commodo, urna at auctor gravida, sapien est placerat est, non eleifend nisl tortor eget mi. Duis ut justo faucibus, cursus purus in, auctor augue. Proin tortor ipsum, mollis at semper vitae, tristique quis nulla. Nulla scelerisque, nibh vel pellentesque consectetur, mauris eros aliquam purus, vitae suscipit odio orci ac enim. <em>Donec a tortor justo. Morbi iaculis tincidunt dolor, ut gravida mi ultricies quis.</em> Nunc auctor risus quis elit ullamcorper consectetur.</p>
  332.  
  333. <p>Sed venenatis venenatis lectus, ac finibus velit vehicula nec. Praesent malesuada aliquam tellus, fermentum sodales ante. In dignissim sapien quis nulla interdum, sit amet pulvinar magna commodo. Sed vel placerat est, non cursus mauris. Sed sollicitudin sem nulla, vitae pulvinar orci ullamcorper nec. Duis semper volutpat pulvinar. Proin consectetur pellentesque lacus eu varius. Proin nibh odio, porta eu viverra a, consequat at sem. Maecenas vestibulum ipsum ut euismod luctus. Ut ut hendrerit lectus, vel lobortis justo. Phasellus a massa et quam aliquet vulputate eu at mauris. Nullam pharetra purus sed neque imperdiet, sed viverra odio viverra.</p>
  334.  
  335. <p>Maecenas in ligula condimentum, eleifend eros non, fringilla nibh. Donec nisl turpis, elementum eu erat et, venenatis fermentum leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam feugiat rhoncus varius. Nulla eu posuere sapien, eget viverra tellus. Cras iaculis dui eleifend pulvinar luctus. In accumsan tincidunt malesuada. Donec venenatis vel nisl at ullamcorper. Vestibulum interdum, neque vitae congue commodo, ex mauris volutpat dui, egestas feugiat elit ex in sem. Nunc a facilisis tellus, at consectetur ex. Ut turpis est, vehicula at urna eget, varius molestie libero.</p>
  336. </div>
  337. </div>
  338.  
  339. <div id="tab2" class="tab">
  340. <div class="basics">
  341. <p><b>NAME:</b> Gabriel Moreno</p>
  342. <p><b>AGE:</b> 23</li>
  343. <p><b>BIRTHDAY:</b> 4th December</p>
  344. <p><b>GENDER:</b> Male</p>
  345. <p><b>ETHNICITY</b> White</p>
  346. <p><b>SEXUAL ORIENTATION:</b> Heterosexual</p>
  347. <p><b>RELIGION:</b> None</p>
  348. <p><b>HOMETOWN:</b> Detroit, Michigan</p>
  349. </div>
  350. </div>
  351.  
  352.  
  353.  
  354. </div>
  355.  
  356.  
  357. <!-- these are the little boxes below the bio. if you want to change the color, use an html color picker or something and replace the code after background-color with your own. -->
  358. <div class="boxes">
  359. <div class="box" style="background-color:#000000"></div>
  360. <div class="box" style="background-color:#424242"></div>
  361. <div class="box" style="background-color:#A4A4A4"></div>
  362.  
  363. </div>
  364. </div>
  365. </div>
  366.  
  367. <!-- credit. don't touch (again, why would you?) -->
  368. <a title="made by oitnbhelps" href="http://oitnbhelps.tumblr.com/"><div class="credit">▽</div></a>
  369.  
  370. </body>
  371. </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!