API tools faq
paste
Advertisement
alinarps

PAGE 005: "HALLIE" // ALINARPS

alinarps
Jun 28th, 2015
2,793
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.46 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!--
  4.  
  5. PAGE 005: "HALLIE" by ALINARPS
  6. - Please don't steal or redistribute, I worked very hard on this.
  7. - You can edit to your own liking, but don't repost any edited versions unless you have talked to me first.
  8. - If you have any questions regarding this page, feel free to ask!
  9. - Have fun with it!
  10.  
  11. -->
  12.  
  13. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  14.  
  15. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script> <script> (function($){ $(document).ready(function(){ $("[title],a[title],img[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:100, tip_fade_speed:300, attribute:"title" }); }); })(jQuery); </script>
  16.  
  17. <title>{Title}</title>
  18.  
  19. <link rel="shortcut icon" href="{Favicon}" />
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  21. <meta name="description" content="{MetaDescription}" />
  22.  
  23. <style type="text/css">
  24.  
  25. /* BASICS */
  26.  
  27. body {
  28. background-color:#ffffff;
  29. font-family:'arial';
  30. font-size:12px;
  31. text-align:justify;
  32. color:#000000;
  33. }
  34.  
  35. small, sup, sub{
  36. font-size:12px;
  37. }
  38.  
  39. a {
  40. text-decoration:none;
  41. color:#eeeeee;
  42. -webkit-transition: all 0.5s ease-out;
  43. -moz-transition: all 0.5s ease-out;
  44. transition: all 0.5s ease-out;
  45. }
  46.  
  47. a:hover {
  48. text-decoration:none;
  49. color:#ffffff;
  50. -webkit-transition: all 0.5s ease-out;
  51. -moz-transition: all 0.5s ease-out;
  52. transition: all 0.5s ease-out;
  53. }
  54.  
  55. blockquote {
  56. background-color:#ffffff;
  57. margin-left:40px;
  58. color:#000000;
  59. border-left:3px solid #000000;
  60. padding:10px;
  61. }
  62.  
  63. blockquote blockquote{
  64. margin-left:3px;
  65. }
  66.  
  67. h1{
  68. background-color:#dddddd;
  69. color:#000000;
  70. padding:5px;
  71. font-size:12px;
  72. font-weight:700;
  73. margin-top:0px;
  74. text-transform:uppercase;
  75. white-space:normal;
  76. }
  77.  
  78. #s-m-t-tooltip {
  79. max-width:150px;
  80. padding:5px;
  81. margin:20px 0px 0px 20px;
  82. background-color: #000000;
  83. font-size:10px;
  84. letter-spacing:0px;
  85. color:#d4d4d4;
  86. font-weight:600;
  87. z-index:999999999999999999999999999999999999;
  88. }
  89.  
  90. /* SCROLLBAR */
  91.  
  92. ::-webkit-scrollbar-thumb {
  93. height:5px;
  94. background-color:#000000;
  95. border:1px solid #000000;
  96. }
  97.  
  98. ::-webkit-scrollbar {
  99. margin-right:5px;
  100. width:2px;
  101. height:5px;
  102. background-color:#d4d4d4;
  103. }
  104.  
  105. /* TABS */
  106.  
  107. .container{
  108. background-color:#eeeeee;
  109. margin:auto;
  110. margin-top:50px;
  111. width:800px;
  112. height:500px;
  113. }
  114.  
  115. .tabs input[type=radio] {
  116. position: absolute;
  117. top: -9999px;
  118. left: -9999px;
  119. }
  120. .tabs {
  121. width: 800px;
  122. float: none;
  123. list-style: none;
  124. position: relative;
  125. padding: 0;
  126. }
  127. .tabs li{
  128. float: left;
  129. }
  130. .tabs label {
  131. display: block;
  132. padding: 7px;
  133. width:150px;
  134. color: #000000;
  135. font-size: 14px;
  136. font-weight: normal;
  137. background: rgba(255,255,255,0.2);
  138. cursor: pointer;
  139. position: relative;
  140. -webkit-transition: all 0.2s ease-in-out;
  141. -moz-transition: all 0.2s ease-in-out;
  142. -o-transition: all 0.2s ease-in-out;
  143. transition: all 0.2s ease-in-out;
  144. }
  145.  
  146. .tabs label:hover {
  147. background: rgba(255,255,255,0.5);
  148. }
  149.  
  150. [id^=tab]:checked + label {
  151. background: #cccccc;
  152. color: #000000;
  153. }
  154.  
  155. [id^=tab]:checked ~ [id^=tab-content] {
  156. display: block;
  157. }
  158. .tab-content{
  159. z-index: 2;
  160. display: none;
  161. text-align: left;
  162. width: 100%;
  163. height:470px;
  164. font-size: 10px;
  165. background: #dddddd;
  166. color: #000000;
  167. position: absolute;
  168. top: 30px;
  169. left: 0;
  170. box-sizing: border-box;
  171. -webkit-animation-duration: 0.5s;
  172. -o-animation-duration: 0.5s;
  173. -moz-animation-duration: 0.5s;
  174. animation-duration: 0.5s;
  175. }
  176.  
  177. .favicon{
  178. float:left;width:17px;margin-right:3px;
  179. }
  180.  
  181. /*LINKS*/
  182.  
  183. .navi {
  184. position:absolute;
  185. margin-left:10px;
  186. margin-top:7px;
  187. z-index:99999999999999999999999999999;
  188. }
  189.  
  190. .m{
  191. padding:3px;
  192. background-color:#F0E15A;
  193. display:inline-block;
  194. width:10px;
  195. height:10px;
  196. border-radius:100px;
  197. text-align:right;
  198. margin-right:5px;
  199. }
  200.  
  201. .h {
  202. background-color:#DB3636;
  203. padding:3px;
  204. display:inline-block;
  205. width:10px;
  206. height:10px;
  207. border-radius:100px;
  208. text-align:right;
  209. margin-right:5px;
  210. }
  211.  
  212. .n {
  213. background-color:#6BCC4C;
  214. padding:3px;
  215. display:inline-block;
  216. width:10px;
  217. height:10px;
  218. border-radius:100px;
  219. text-align:right;
  220. margin-right:5px;
  221. }
  222.  
  223. /* GOOGLE */
  224.  
  225. .google-topbar {
  226. width:100%;background-color:#f1f1f1;height:50px;border-bottom:1px solid #cccccc;
  227. }
  228.  
  229. .google-search {
  230. width:350px;background-color:#ffffff;border:1px solid #aaaaaa;padding:5px;font-size:12px;float:left;margin-left:10px;margin-top:12px;
  231. }
  232.  
  233. .google-left {
  234. width:400px;
  235. height:419px;
  236. background-color:#efefef;
  237. position:absolute;
  238. }
  239.  
  240. .google-result {
  241. padding:10px;
  242. height:127px;
  243. margin-bottom:-10px;
  244. }
  245.  
  246. .google-title {
  247. color:#1a0dab;
  248. font-size:13px;
  249. font-weight:600;
  250. }
  251.  
  252. .google-sub {
  253. font-size:11px;color:#0C9840;float:left;
  254. }
  255.  
  256. .google-icon {
  257. width:127px;height:127px;float:left;margin-right:10px;
  258. }
  259.  
  260. .google-resultinfo {
  261. width:240px;height:100px;margin-top:15px;position:absolute;margin-left:137px;overflow:auto;text-align:justify;padding-right:5px;
  262. }
  263.  
  264. .google-bio {
  265. float:right;
  266. margin-top:10px;
  267. margin-right:10px;
  268. width:380px;
  269. height:400px;
  270. background-color:#ffffff;
  271. }
  272.  
  273. .google-mi {
  274. opacity:0.7;background-color:#000000;color:#ffffff;padding:3px;font-size:13px;text-shadow:1px 1px 4px #aaaaaa;width:75px;float:right;margin-top:-31px;
  275. }
  276.  
  277. .google-name {
  278. font-size:20px;
  279. padding-left:10px;
  280. }
  281.  
  282. .google-subname {
  283. font-size:12px;
  284. color:#aaaaaa;
  285. padding-left:10px;
  286. }
  287.  
  288. .google-subname a {
  289. color:#3363C3;
  290. }
  291.  
  292. .google-subname a:hover {
  293. text-decoration:underline;
  294. }
  295.  
  296. .google-listen {
  297. margin-left:10px;margin-top:5px;
  298. width:360px;
  299. }
  300.  
  301. .google-listen h3 {
  302. padding:5px;
  303. border-top:1px solid #cccccc;
  304. font-size:11px;
  305. font-weight:600;
  306. display:block;
  307. margin-top:0px;
  308. margin-bottom:0px;
  309. text-transform:uppercase;
  310. }
  311.  
  312. /* TWITTER */
  313.  
  314. .twitter-left {
  315. background-color:#cccccc;
  316. width:500px;
  317. height:470px;
  318. float:left;
  319. }
  320.  
  321. .twitter-header {
  322. width:500px;
  323. height:200px;
  324. background-color:#aaaaaa;
  325. background-image:url('HEADER IMAGE HERE 500x200');
  326. }
  327.  
  328. .twitter-info {
  329. margin-top:25px;
  330. width:430px;
  331. height:130px;
  332. padding:10px;
  333. margin-left:25px;
  334. background-color:#eeeeee;
  335. position:absolute;
  336. color:#000000;
  337. }
  338.  
  339. .twitter-icon {
  340. width:130px;
  341. height:130px;
  342. margin-right:10px;
  343. float:left;
  344. }
  345.  
  346. .twitter-ico {
  347. float:left;width:11px;margin-right:3px;
  348. }
  349.  
  350. .twitter-stats {
  351. margin-left:10px;
  352. width:130px;
  353. float:left;
  354. }
  355.  
  356. .twitter-stats h5 {
  357. width:120px;
  358. height:30px;
  359. padding:5px;
  360. background-color:#cccccc;
  361. display:block;
  362. margin-top:0px;
  363. font-size:10px;
  364. text-align:center;
  365. text-transform:uppercase;
  366. margin-bottom:5px;
  367. }
  368.  
  369. .twitter-following {
  370. margin-top:210px;
  371. margin-left:10px;
  372. background-color:#eeeeee;
  373. width:250px;
  374. height:240px;
  375. position:absolute;
  376. color:#000000;
  377. padding:5px;
  378. }
  379.  
  380. .twitter-followers {
  381. margin-top:210px;
  382. margin-left:280px;
  383. background-color:#eeeeee;
  384. width:200px;
  385. position:absolute;
  386. color:#000000;
  387. padding:5px;
  388. }
  389.  
  390. .twitter-pv {
  391. margin-top:300px;
  392. margin-left:280px;
  393. background-color:#eeeeee;
  394. width:210px;
  395. height:160px;
  396. position:absolute;
  397. color:#000000;
  398. }
  399.  
  400. .tweet {
  401. border:1px solid #aaaaaa;
  402. background-color:#ffffff;
  403. width:278px;
  404. height:141px;
  405. float:right;
  406. margin-right:10px;
  407. color:#000000;
  408. margin-top:10px;display:block;
  409. }
  410.  
  411. .tweet-stats {
  412. margin-top:117px;margin-left:10px;border-top:1px solid #aaaaaa;width:258px;padding-top:5px;color:#000000;font-weight:600;position:absolute;
  413. }
  414.  
  415. .tweet-name {
  416. margin:10px 0px 0px 10px;width:257px;position:absolute;height:45px;
  417. }
  418.  
  419. .tweet-text {
  420. position:absolute;width:257px;height:100px;margin-top:55px;margin-left:10px;font-size:12px;text-align:justify;
  421. }
  422.  
  423. .tweet-link {
  424. color:#77A5D1;
  425. }
  426.  
  427. /* INSTAGRAM */
  428.  
  429. .insta-header {
  430. width:480px;
  431. height:470px;
  432. background-color:#f5f5f5;
  433. position:absolute;
  434. }
  435.  
  436. .insta-header img {
  437. width:150px;
  438. height:150px;
  439. border-radius:100px;
  440. float:left;
  441. margin-left:10px;
  442. margin-top:10px;
  443. }
  444.  
  445. .insta-stats {
  446. width:310px;
  447. height:41px;
  448. float:left;
  449. font-size:13px;
  450. margin-top:32px;
  451. }
  452.  
  453. .insta-stats span {
  454. font-size:16px;
  455. font-weight:600;
  456. }
  457.  
  458. .insta-stats div {
  459. width:93.5px;
  460. height:35px;
  461. padding:3px;
  462. text-align:center;
  463. display:inline-block;
  464. border-right:1px solid #dddddd;
  465. }
  466.  
  467. .insta-follow {
  468. border-radius:25px;
  469. width:270px;
  470. padding:10px;
  471. border:1px solid #2EA142;
  472. text-transform:uppercase;
  473. font-size:13px;
  474. float:left;
  475. font-weight:600;
  476. color:#2EA142;
  477. background-color:#ffffff;
  478. text-align:center;
  479. margin-top:20px;
  480. margin-left:15px;
  481. }
  482.  
  483. .insta-desc {
  484. width:145px;
  485. height:96px;
  486. padding:5px;
  487. position:fixed;
  488. text-align:justify;
  489. margin-top:170px;
  490. margin-left:10px;
  491. }
  492.  
  493. .insta-suggest {
  494. margin-left:170px;margin-top:165px;width:300px;height:135px;
  495. }
  496.  
  497. .insta-suggest div {
  498. margin-bottom:5px;width:290px;height:50px;padding:5px;background-color:#ededed;
  499. }
  500.  
  501. .insta-suggest b {
  502. font-size:14px;
  503. }
  504.  
  505. .insta-images {
  506. width:460px;
  507. height:145px;
  508. padding:10px;
  509. position:absolute;
  510. margin-top:300px;
  511. }
  512.  
  513. .insta-images img {
  514. width:145px;
  515. height:145px;
  516. margin-left:3.1px;
  517. margin-right:3.1px;
  518. display:inline-block;
  519. }
  520.  
  521. .insta-icon {
  522. width:40px;height:40px;position:absolute;margin-top:10px;margin-left:10px;border-radius:100px;
  523. }
  524.  
  525. .insta-post {
  526. float:right;margin-right:10px;margin-top:10px;background-color:#ffffff;width:300px;height:450px;
  527. }
  528.  
  529. .insta-posthead {
  530. position:absolute;margin-left:60px;margin-top:20px;font-size:12px;color:#2F5B8F;
  531. }
  532.  
  533. .insta-postdesc {
  534. margin-top:360px;position:absolute;width:290px;height:80px;padding:5px;font-size:12px;text-align:justify;
  535. }
  536.  
  537. .insta-link,.insta-postdesc b {
  538. color:#2F5B8F;
  539. }
  540.  
  541. /* CREDIT (REMOVE THIS AND I'LL KILL YOU...) */
  542.  
  543. .credit{
  544. right:10px;
  545. bottom:10px;
  546. z-index:9999999999999999999999999999999999999999;
  547. padding:3px;
  548. font-size:10px;
  549. background-color:#000000;
  550. color:#000000;
  551. font-weight:600;
  552. position:fixed;
  553. -webkit-transition: all 0.5s ease-out;
  554. -moz-transition: all 0.5s ease-out;
  555. transition: all 0.5s ease-out;
  556. }
  557.  
  558. .credit a:hover{
  559. color:#000000;
  560. }
  561.  
  562. .credit:hover{
  563. background-color:#ffffff;
  564. color:#000000;
  565. }
  566.  
  567. </style>
  568.  
  569. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  570. <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  571.  
  572. </head>
  573.  
  574. <body>
  575.  
  576. <div class="container">
  577. <!----links----->
  578. <div class="navi">
  579. <a href="/" title="home"><div class="h"></div></a>
  580. <a href="/" title="mssg"><div class="m"></div></a>
  581. <a href="http://tumblr.com/dashboard" title="dash"><div class="n"></div></a>
  582. </div>
  583.  
  584. <ul class="tabs">
  585.  
  586. <!--------------facebook------------->
  587. <li>
  588. <input type="radio" checked name="tabs" id="tab1">
  589. <label for="tab1" style="margin-left:85px;"><img src="https://i.embed.ly/1/display/resize?key=1e6a1a1efdb011df84894040444cdc60&url=http%3A%2F%2Fwww.google.com%2Fs2%2Ffavicons%3Fdomain%3Dhttp%3A%2F%2Fwww.google.ca" class="favicon"/> Google</label>
  590. <div id="tab-content1" class="tab-content animated fadeIn">
  591.  
  592. <!-------searchbar--------->
  593. <div class="google-topbar">
  594. <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" style="width:80px;margin-left:10px;float:left;"/>
  595.  
  596. <div class="google-search">Search Bar</div><!----name here---->
  597.  
  598. <div style="float:left;background-color:#507BD7;padding:5px 20px 5px 20px;font-size:14px;margin-top:12px;"><img src="http://i.imgur.com/KNcvsUD.png" style="width:16px;"/></div>
  599. </div>
  600.  
  601. <!--------left side (searches)----------->
  602. <div class="google-left">
  603.  
  604. <!----------search 1---------->
  605. <div class="google-result">
  606. <img src="/" class="google-icon"/><!---127x127--->
  607. <span class="google-title">Title</span><br/>
  608. <span class="google-sub">Subtitle</span>
  609. <div class="google-resultinfo">
  610. here you can put a bunch of information!! you can put the basics of your character here, like the name, fc, age, occupation, label, etc. !! this is also meant to look like a website result on a google search page. you can use the title to put lyrics or a quote or something and the subtitle to describe what the section is or the other way around !! those are just suggestions though. look, it even scrolls so you can put as much info (or as little) as you want here!!
  611. </div>
  612. </div>
  613.  
  614. <!----------search 2---------->
  615. <div class="google-result">
  616. <img src="/" class="google-icon"/><!---127x127--->
  617. <span class="google-title">Title</span><br/>
  618. <span class="google-sub">Subtitle</span>
  619. <div class="google-resultinfo">
  620. or you don't even have 2 put info like that !! you can put your personality/traits separately or this can be part of a mini bio for your character!! you can even put connections here which is a good idea in my opinion :~)) just do what you like with these sections and have fun!!
  621. </div>
  622. </div>
  623.  
  624. <!----------search 3---------->
  625. <div class="google-result">
  626. <img src="/" class="google-icon"/><!---127x127--->
  627. <span class="google-title">Title</span><br/>
  628. <span class="google-sub">Subtitle</span>
  629. <div class="google-resultinfo">
  630. 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.
  631.  
  632. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
  633. </div>
  634. </div>
  635.  
  636. </div>
  637.  
  638.  
  639. <!------right side, google bio------->
  640. <div class="google-bio">
  641.  
  642. <img src="380x150" style="width:380px;height:150px;margin-bottom:10px;"/>
  643. <div class="google-mi">More images</div>
  644.  
  645. <span class="google-name">First Last</span>
  646. <br/>
  647. <span class="google-subname">Mini Description · <a href="#">fakeurl.com</a></span>
  648.  
  649. <!------top 3 songs------->
  650. <div class="google-listen">
  651. <span style="font-size:14px;font-weight:600;">Listen Now · Most Played Songs</span>
  652. <h3 style="margin-top:5px;">song <span style="float:right">artist</span></h3>
  653. <h3>song <span style="float:right">artist</span></h3>
  654. <h3>song <span style="float:right">artist</span></h3>
  655. </div>
  656.  
  657. <!-----------google bio spot------------>
  658. <div style="width:355px;margin-left:10px;margin-top:3px;height:95px;overflow:auto;text-align:justify;padding-right:5px;">
  659. This is where you can put a proper description for your character bio thing! You can put it in a format like this:<br/><br/>
  660. <b>Born:</b> Month Date, Year<br/>
  661. <b>Hometown:</b> New York, New York<br/><br/>
  662. Or just leave it in paragraph form; it's up to you! This is how it looks in <b>bold</b>, <i>italic</i>, <u>underline</u>, and <strike>strikethrough</strike>. Don't forget: this whole thing can scroll too so you have as much space as you need, plus the result spaces if you're afraid to pack too much info in one space.
  663. </div>
  664.  
  665. </div>
  666.  
  667. </div>
  668. </li>
  669.  
  670. <!----------twitter---------->
  671. <li>
  672. <input type="radio" name="tabs" id="tab2">
  673. <label for="tab2"><img src="http://i.stack.imgur.com/yoVwU.png" class="favicon"/> Twitter</label>
  674. <div id="tab-content2" class="tab-content animated fadeIn">
  675.  
  676. <div class="twitter-left">
  677. <div class="twitter-header">
  678. <div class="twitter-info">
  679. <!------image------>
  680. <img src="130x130" class="twitter-icon"/>
  681. <div style="float:left;width:150px;">
  682. <!------twitter name/handle/desc/location/etc------>
  683. <span style="font-size:18px;font-weight:600">twitter name !</span><br/>
  684. <span style="font-size:12px;">@twitterhandle</span><br/><br/>
  685. <span style="font-size:11px;">here is your twitter desc! don't make it too too long or else it'll interfere with other stuff ://</span><br/><br/>
  686.  
  687. <img src="http://i.imgur.com/lndC0r5.png" class="twitter-ico"/>location text<br/>
  688. <img src="http://i.imgur.com/z2Zdg5X.png" class="twitter-ico"/>link to something<br/>
  689. <img src="http://i.imgur.com/klxfkeP.png" class="twitter-ico"/>joined month date, year
  690. </div>
  691.  
  692. <!--------following/followers/tweets-------->
  693. <div class="twitter-stats">
  694. <h5>
  695. tweets<br/>
  696. <span style="font-size:16px;">###</span>
  697. </h5>
  698.  
  699. <h5>
  700. following<br/>
  701. <span style="font-size:16px;">###</span>
  702. </h5>
  703.  
  704. <h5>
  705. followers<br/>
  706. <span style="font-size:16px;">###</span>
  707. </h5>
  708. </div>
  709.  
  710. </div>
  711.  
  712. <!---3 following images each 250x69--->
  713. <div class="twitter-following">
  714. <h1 style="margin:-5px;margin-bottom:5px;">following</h1>
  715. <img src="/" style="width:250px;height:69px;margin-bottom:5px;"/>
  716. <img src="/" style="width:250px;height:69px;margin-bottom:5px;"/>
  717. <img src="/" style="width:250px;height:69px;margin-bottom:5px;"/>
  718. </div>
  719.  
  720. <!-------4 follower icons, each 46x46----->
  721. <div class="twitter-followers">
  722. <h1 style="margin:-5px;margin-bottom:5px;">followers</h1>
  723. <img src="/" style="margin-right:5px;float:left;width:46px;height:46px;"/>
  724. <img src="/" style="margin-right:5px;float:left;width:46px;height:46px;"/>
  725. <img src="/" style="margin-right:5px;float:left;width:46px;height:46px;"/>
  726. <img src="/" style="float:left;width:46px;height:46px;"/>
  727. </div>
  728.  
  729. <div class="twitter-pv">
  730. <h1>photos and videos</h1>
  731. <img src="/" style="width:210px;height:138px;margin-top:-9px;"/><!-----210x138------>
  732. </div>
  733.  
  734. </div>
  735. </div>
  736.  
  737. <!--------tweets--------->
  738. <div class="tweet">
  739. <div class="tweet-name">
  740. <!-----icon, handle, name------->
  741. <img src="/" style="float:left;width:40px;height:40px;margin-right:5px;"/><br/>
  742. <span style="font-size:14px;font-weight:600;padding-top:">twitter name !</span><br/>
  743. @twitterhandle
  744. </div>
  745. <!------------tweet----------------->
  746. <div class="tweet-text">this is a tweet! <span class="tweet-link">this is what a link can look like whoa</span> try and make the length four lines long bc it looks best like tht and doesn't leave u empty space</div>
  747.  
  748. <!------retweets/favorites------>
  749. <div class="tweet-stats">
  750. <img src="http://i.imgur.com/TGItoUM.png" class="twitter-ico"/>
  751. <span style="float:left;padding-right:10px;">###</span><!---retweets--->
  752. <img src="http://i.imgur.com/andeXRw.png" class="twitter-ico"/> ### <!---favorites--->
  753. <span style="float:right;">3 MINUTES AGO</span><!---time ago--->
  754. </div>
  755. </div>
  756.  
  757. <div class="tweet">
  758. <div class="tweet-name">
  759. <!-----icon, handle, name------->
  760. <img src="/" style="float:left;width:40px;height:40px;margin-right:5px;"/><br/>
  761. <span style="font-size:14px;font-weight:600;padding-top:">twitter name !</span><br/>
  762. @twitterhandle
  763. </div>
  764. <!------------tweet----------------->
  765. <div class="tweet-text">this is a tweet! <span class="tweet-link">this is what a link can look like whoa</span> try and make the length four lines long bc it looks best like tht and doesn't leave u empty space</div>
  766.  
  767. <!------retweets/favorites------>
  768. <div class="tweet-stats">
  769. <img src="http://i.imgur.com/TGItoUM.png" class="twitter-ico"/>
  770. <span style="float:left;padding-right:10px;">###</span><!---retweets--->
  771. <img src="http://i.imgur.com/andeXRw.png" class="twitter-ico"/> ### <!---favorites--->
  772. <span style="float:right;">3 MINUTES AGO</span><!---time ago--->
  773. </div>
  774. </div>
  775.  
  776. <div class="tweet">
  777. <div class="tweet-name">
  778. <!-----icon, handle, name------->
  779. <img src="/" style="float:left;width:40px;height:40px;margin-right:5px;"/><br/>
  780. <span style="font-size:14px;font-weight:600;padding-top:">twitter name !</span><br/>
  781. @twitterhandle
  782. </div>
  783. <!------------tweet----------------->
  784. <div class="tweet-text">this is a tweet! <span class="tweet-link">this is what a link can look like whoa</span> try and make the length four lines long bc it looks best like tht and doesn't leave u empty space</div>
  785.  
  786. <!------retweets/favorites------>
  787. <div class="tweet-stats">
  788. <img src="http://i.imgur.com/TGItoUM.png" class="twitter-ico"/>
  789. <span style="float:left;padding-right:10px;">###</span><!---retweets--->
  790. <img src="http://i.imgur.com/andeXRw.png" class="twitter-ico"/> ### <!---favorites--->
  791. <span style="float:right;">3 MINUTES AGO</span><!---time ago--->
  792. </div>
  793. </div>
  794.  
  795. </div>
  796. </li>
  797.  
  798. <!----------instagram----------->
  799. <li>
  800. <input type="radio" name="tabs" id="tab3">
  801. <label for="tab3"><img src="http://www.blinkfire.com/publisher/img/instagram_favicon.ico" class="favicon"/> Instagram</label>
  802. <div id="tab-content3" class="tab-content animated fadeIn">
  803.  
  804. <!---stats & icon--->
  805. <div class="insta-header">
  806. <img src="/"/><!---150x150 icon--->
  807. <div class="insta-stats">
  808. <div>
  809. <span>###</span><br/>
  810. posts
  811. </div>
  812. <div>
  813. <span>###</span><br/>
  814. followers
  815. </div>
  816. <div style="border-right:0px;">
  817. <span>###</span><br/>
  818. following
  819. </div>
  820. </div>
  821.  
  822. <div class="insta-follow">
  823. follow
  824. </div>
  825.  
  826. <!---description--->
  827. <div class="insta-desc">
  828. <span class="insta-link"><b>username</b></span> here's your description !! you can do a ton of things in this space n*ce :~)) try and use up as much space as you can bc it just looks better if u take up more space u feel ?? u just have a lot of space to work with mAn
  829. <br/>
  830. <br/>
  831. <span class="insta-link">http://putalinkhere.com/</span>
  832. </div>
  833.  
  834. <div class="insta-suggest">
  835. <div>
  836. <img src="/" style="width:50px;height:50px;margin:0px;margin-right:5px;"/><!----50x50----->
  837. <br/><b>suggested blog username</b><br/><!---username--->
  838. Edited Name<!---name--->
  839. </div>
  840. <div>
  841. <img src="/" style="width:50px;height:50px;margin:0px;margin-right:5px;"/><!----50x50----->
  842. <br/><b>suggested blog username</b><br/><!---username--->
  843. Edited Name<!---name--->
  844. </div>
  845. </div>
  846. </div>
  847.  
  848.  
  849. <!----------three bottom images----------->
  850. <div class="insta-images">
  851. <img src="/"/><!---145x145--->
  852. <img src="/"/><!---145x145--->
  853. <img src="/"/><!---145x145--->
  854. </div>
  855.  
  856. <!------instagram post------>
  857. <div class="insta-post">
  858. <img src="/" class="insta-icon"/><!-----icon------->
  859. <div class="insta-posthead"><b>username</b></div>
  860. <img src="300x300" style="width:300px;height:300px;position:absolute;margin-top:60px;"/><!-----post image------->
  861. <div class="insta-postdesc">
  862. <img src="http://i.imgur.com/gyNmWwU.png" style="float:left;margin-right:5px;"/> <b style="float:left;">###</b><!-----like number----->
  863. <img src="http://i.imgur.com/SZeRVsZ.png" style="float:left;margin:0px 5px 0px 5px;"/> <b>###</b><!-----comment number----->
  864. <span style="float:right;">17h</span><!----time----->
  865. <br/><br/>
  866. <!---------description--------->
  867. <b>username</b> this is a description! you can use <span class="insta-link">#tags</span> or just b cool and don't use tags whatever works for u man !! just dont go past 3 lines yo
  868. </div>
  869. </div>
  870.  
  871. </div>
  872. </li>
  873. </ul>
  874.  
  875. </div>
  876.  
  877.  
  878. <!--PLEASE DON'T TOUCH THE CREDIT!!! SERIOUSLY...-->
  879. <div class="credit"><a href="http://alinarps.tumblr.com/" title="credit to alinarps!">ALINARPS</a></div>
  880.  
  881. </body>
  882.  
  883. </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!