API tools faq
paste
Advertisement
paigeh987

About Page 2 - neonbike themes

paigeh987
Dec 26th, 2015
32,867
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.91 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. ABOUT PAGE #2
  7. By Paige @ neonbikethemes.tumblr.com
  8.  
  9. Rules:
  10.  
  11. - Do not steal code or design
  12. - Do not remove/alter credit
  13. - Please like/reblog the post
  14.  
  15. Thanks!
  16.  
  17. -->
  18.  
  19. <meta charset="utf-8">
  20. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  21. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  22. <link rel="shortcut icon" href="{Favicon}">
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24.  
  25.  
  26. <!-- MASONRY SCRIPTS -->
  27.  
  28. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  29. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  30. <script type="text/javascript" src="http://static.tumblr.com/me5sfsd/12Qlmj66n/script.js"></script>
  31.  
  32. <script type="text/javascript">
  33. $(window).load(function(){
  34. var $wall = $('.container');
  35. $wall.imagesLoaded(function(){
  36. $wall.masonry({
  37. itemSelector: 'article',
  38. isAnimated : true
  39. });
  40. });
  41. $wall.infinitescroll({
  42. navSelector : "div#navigation",
  43. nextSelector : "div#navigation a#nextPage",
  44. itemSelector : 'article',
  45. loadingImg : "",
  46. loadingText : " ",
  47. donetext : " ",
  48. extraScrollPx : 0,
  49. bufferPx : 10000,
  50. debug : false,
  51. });
  52. </script>
  53.  
  54.  
  55. <!-- TOOLTIPS -->
  56.  
  57. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  58. <script>
  59. (function($){
  60. $(document).ready(function(){
  61. $("[title]").style_my_tooltips({
  62. tip_follows_cursor:true,
  63. tip_delay_time:100,
  64. tip_fade_speed:200
  65. }
  66. );
  67. });
  68. })(jQuery);
  69. </script>
  70.  
  71.  
  72. <!-- FONT SCRIPTS -->
  73.  
  74. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,300,400,600,700|PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  75.  
  76.  
  77. <!-- CSS -->
  78.  
  79. <style type=text/css>
  80.  
  81.  
  82. /* TOOLTIPS */
  83.  
  84. #s-m-t-tooltip{
  85. max-width:250px;
  86. margin:15px;
  87. padding: 0px 5px 2px 5px;
  88. border-radius:3px;
  89. background:#000;
  90. color:#fff;
  91. z-index:999999;
  92. font-size:10px;
  93. font-style:italic;
  94. text-transform:lowercase;
  95. }
  96.  
  97. /* STUFF */
  98.  
  99. body{
  100. font-family:'Open Sans', Helvetica, sans-serif;
  101. color:#000000;
  102. margin:0;
  103. background:#f0f0f0 url('');
  104. background-attachment:fixed;
  105. }
  106.  
  107. a {
  108. text-decoration:none;
  109. color:#000;
  110. }
  111.  
  112. a:hover {
  113. text-decoration:none;
  114. color:#a0a0a0;
  115. }
  116.  
  117. p{
  118. margin: 0px 0px 10px 0px;
  119. }
  120.  
  121. ul{
  122. list-style-type:square;
  123. }
  124.  
  125. ol{
  126. list-style-type:lower-roman;
  127. }
  128.  
  129. .navbar{
  130. position:fixed;
  131. background:#fff;
  132. text-align:left;
  133. width:100%;
  134. height:50px;
  135. top:0px;
  136. z-index:99999999999999;
  137. }
  138.  
  139. #title{
  140. float:left;
  141. margin-left:25px;
  142. margin-top:18px;
  143. text-transform:uppercase;
  144. text-align:center;
  145. font-size:10px;
  146. letter-spacing:1px;
  147. font-weight:bold;
  148. z-index:9999999999;
  149. }
  150.  
  151. #navlinks{
  152. float:right;
  153. margin-top:13px;
  154. margin-right:20px;
  155. text-align:right;
  156. z-index:999999999;
  157. }
  158.  
  159. .navlink{
  160. background:#fff;
  161. border:0px solid #a0a0a0;
  162. padding:4px;
  163. padding-left:8px;
  164. padding-right:8px;
  165. margin-left:3px;
  166. margin-right:3px;
  167. font-size:10px;
  168. letter-spacing:1px;
  169. position:relative;
  170. display:inline-block;
  171. text-transform:uppercase;
  172. }
  173.  
  174. /* CONTAINER */
  175.  
  176. .container{
  177. width:700px;
  178. text-align:left;
  179. margin-left:auto;
  180. margin-right:auto;
  181. margin-top:120px;
  182. margin-bottom:100px;
  183. }
  184.  
  185. article{
  186. float:left;
  187. border: 0px solid #dbdbdb;
  188. padding:0px;
  189. margin: 15px 25px 30px 0px;
  190. font-size:9px;
  191. text-align:left;
  192. }
  193.  
  194. article img{
  195. max-width:100%;
  196. margin-bottom:-4px;
  197. }
  198.  
  199. .sectiontitle{
  200. background:#fff;
  201. font-size:10px;
  202. padding:10px;
  203. margin:0px;
  204. margin-bottom:1px;
  205. text-align:center;
  206. text-transform:uppercase;
  207. font-weight:bold;
  208. letter-spacing:2px;
  209. border-bottom: 0px solid #dbdbdb;
  210. }
  211.  
  212. .subtitle{
  213. background:#fff;
  214. font-size:10px;
  215. padding:10px;
  216. margin:0px;
  217. margin-bottom:1px;
  218. text-align:left;
  219. text-transform:lowercase;
  220. font-weight:bold;
  221. font-style:italic;
  222. border-bottom: 0px solid #dbdbdb;
  223. }
  224.  
  225. .tag{
  226. font-size:9px;
  227. font-style:italic;
  228. letter-spacing:1px;
  229. margin-bottom:-1px;
  230. padding:7px;
  231. padding-left:11px;
  232. background:#fff;
  233. border-bottom:1px solid #eeeeee;
  234. margin-bottom:0px;
  235. -webkit-transition: all .5s;
  236. text-align:left;
  237. text-transform:lowercase;
  238. }
  239.  
  240. .tag:hover{
  241. padding-left:15px;
  242. -webkit-transition: all .5s;
  243. }
  244.  
  245. .abt{
  246. font-size:9px;
  247. font-style:italic;
  248. letter-spacing:1px;
  249. margin-bottom:-1px;
  250. padding:7px;
  251. padding-left:11px;
  252. background:#fff;
  253. border-bottom:1px solid #eeeeee;
  254. margin-bottom:0px;
  255. -webkit-transition: all .5s;
  256. text-align:left;
  257. text-transform:lowercase;
  258. }
  259.  
  260. .quote{
  261. font-size:9px;
  262. font-style:italic;
  263. letter-spacing:1px;
  264. margin-bottom:-1px;
  265. padding:20px;
  266. background:#fff;
  267. border-bottom:1px solid #eeeeee;
  268. margin-bottom:0px;
  269. -webkit-transition: all .5s;
  270. text-align:center;
  271. text-transform:lowercase;
  272. }
  273.  
  274. .friends{
  275. margin-right:-10px;
  276. }
  277.  
  278. .friend{
  279. width:48px;
  280. display:inline-block;
  281. padding:6px;
  282. background:#fff;
  283. margin: 5px 3px 0px 0px;
  284. }
  285.  
  286. </style>
  287.  
  288. </head>
  289.  
  290. <body>
  291.  
  292.  
  293.  
  294. <div class="navbar">
  295.  
  296. <div id="title">ABOUT</div>
  297.  
  298. <div id="navlinks">
  299.  
  300. <a href="/">
  301. <div class="navlink">Home</div></a>
  302.  
  303. <a href="http://tumblr.com/dashboard">
  304. <div class="navlink">Dashboard</div></a>
  305.  
  306. <a href="http://neonbikethemes.tumblr.com">
  307. <div class="navlink">Credit</div></a>
  308.  
  309. </div>
  310.  
  311. </div>
  312.  
  313.  
  314. <!-- START CONTAINER --->
  315. <div class="container">
  316.  
  317.  
  318.  
  319. <!-- START SECTION -->
  320. <article style="width:150px;">
  321.  
  322. <!-- TOP LEFT IMAGE HERE -->
  323. <!-- paste the source url for the image below: -->
  324. <div class="sectiontitle"><img src="http://41.media.tumblr.com/41ca51ddc01dbd02f792c6a2e248cce6/tumblr_nqpz97a2GX1u2baazo2_250.png"></div>
  325.  
  326. <!-- BASICS SECTION -->
  327. <div class="sectiontitle" style="margin-top:25px;">Basics</div>
  328. <!-- you can add more categories by copying and pasting one of the lines -->
  329. <div class="abt"><b>Name:</b> Paige</div>
  330. <div class="abt"><b>pronouns:</b> she/hers</div>
  331. <div class="abt"><b>Age:</b> 18</div>
  332. <div class="abt"><b>Location:</b> nyc</div>
  333. <div class="abt"><b>Personality:</b> intj/intp</div>
  334. <div class="abt"><b>fav drink:</b> chocolate milk</div>
  335.  
  336. <!-- SOCIAL LINKS SECTION -->
  337. <div class="sectiontitle" style="margin-top:25px;">social</div>
  338. <a href="/"><div class="tag">Instagram</div></a>
  339. <a href="/"><div class="tag">Twitter</div></a>
  340. <a href="/"><div class="tag">Ello</div></a>
  341. <a href="/"><div class="tag">8tracks</div></a>
  342.  
  343. </article>
  344. <!-- END SECTION -->
  345.  
  346.  
  347.  
  348.  
  349. <!-- START SECOND COLUMN -->
  350. <article style="width:270px;">
  351.  
  352. <div class="sectiontitle">About</div>
  353. <div class="quote">
  354. "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget tincidunt turpis."
  355. </div>
  356.  
  357. <div class="subtitle" style="margin-top:25px;">The blog</div>
  358. <div class="abt">
  359. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget tincidunt turpis. Nam mollis commodo purus, nec elementum tortor condimentum a. Ut at sapien id nibh faucibus viverra non nec nulla. Aliquam sed pharetra massa, non posuere mi. Quisque sit amet sagittis metus. Ut quis enim faucibus, dictum orci nec, finibus neque.</p>
  360. </div>
  361.  
  362.  
  363. <div class="subtitle">The blogger</div>
  364. <div class="abt">
  365. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget tincidunt turpis. Nam mollis commodo purus, nec elementum tortor condimentum a. Ut at sapien id nibh faucibus viverra non nec nulla. Aliquam sed pharetra massa, non posuere mi. Quisque sit amet sagittis metus. Ut quis enim faucibus, dictum orci nec, finibus neque.</p>
  366.  
  367. <ol>
  368. <li>Lorem ipsum</li>
  369. <li>viverra non nec nulla</li>
  370. </ol>
  371.  
  372. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget tincidunt turpis. Nam mollis commodo purus, nec elementum tortor condimentum a. Ut at sapien id nibh faucibus viverra non nec nulla. </p>
  373.  
  374. <ul>
  375. <li>Massa non posuere mi</li>
  376. <li>Lorem ipsum</li>
  377. <li>viverra non nec nulla</li>
  378. </ul>
  379.  
  380. <p>Aliquam sed pharetra massa, non posuere mi. Quisque sit amet sagittis metus. Ut quis enim faucibus, dictum orci nec, finibus neque.</p>
  381. </div>
  382.  
  383. </article>
  384. <!-- END SECOND COLUMN -->
  385.  
  386.  
  387.  
  388.  
  389. <!-- START THIRD COLUMN -->
  390. <article style="width:190px; margin:15px 0px 0px 0px;">
  391.  
  392. <div class="sectiontitle">Playlist</div>
  393. <div class="subtitle"><center>
  394. Place billy player code here or a link to listen online
  395. <!-- INSERT BILLY MUSIC PLAYER CODE HERE
  396. XXX
  397. <!-- generate the code here: http://www.sheepproductions.com/billy/ -->
  398. </center>
  399. </div>
  400.  
  401.  
  402. <div class="abt">1. <b>Overdose</b> Exo</div>
  403. <div class="abt">2. <b>Shake That Brass</b> Amber </div>
  404. <div class="abt">3. <b>Her</b> Block B</div>
  405. <div class="abt">4. <b>Red Light</b> f(x)</div>
  406. <div class="abt">5. <b>Awoo</b> Lim Kim</div>
  407.  
  408. <div class="sectiontitle" style="margin-top:25px;">Friends</div>
  409. <div class="friends">
  410. <a href="http://url.tumblr.com" title="Name">
  411. <div class="friend"><img src="http://static.tumblr.com/gbexkz9/Kb2npyjnt/icon_10.jpg"></div></a>
  412. <a href="http://url.tumblr.com" title="Name">
  413. <div class="friend"><img src="http://static.tumblr.com/gbexkz9/EgPnpzwst/icon_2.jpg"></div></a>
  414. <a href="http://url.tumblr.com" title="Name">
  415. <div class="friend"><img src="http://static.tumblr.com/gbexkz9/6lAnpyjcj/icon_3.jpg"></div></a>
  416. <a href="http://url.tumblr.com" title="Name">
  417. <div class="friend"><img src="http://static.tumblr.com/gbexkz9/OK7npyjmr/icon_7.jpg"></div></a>
  418. <a href="http://url.tumblr.com" title="Name">
  419. <div class="friend"><img src="http://static.tumblr.com/gbexkz9/7aRnpzwq1/icon_6.jpg"></div></a>
  420. <a href="http://url.tumblr.com" title="Name">
  421. <div class="friend"><img src="http://static.tumblr.com/gbexkz9/4Qenpyjkc/icon_4.jpg"></div></a>
  422. </div>
  423.  
  424.  
  425. </article>
  426. <!-- END THIRD COLUMN -->
  427.  
  428.  
  429.  
  430.  
  431.  
  432.  
  433. </div>
  434.  
  435. </div>
  436.  
  437.  
  438.  
  439. </body>
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!