Advertisement
mebuckner

Edited Layout

Mar 22nd, 2020
564
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 26.57 KB | None | 0 0
  1. <-- about me -->
  2. <-- f o n t s -->
  3. <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville|Raleway" rel="stylesheet">
  4. <link href="https://fonts.googleapis.com/css?family=Oswald|Petit+Formal+Script" rel="stylesheet">
  5. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  6. <link href="https://fonts.googleapis.com/css?family=Archivo+Narrow" rel="stylesheet">
  7.  
  8. <!-- v e r t i c l e  s p a c e -->
  9. <style>
  10. table table br {display:none;}
  11. table table table br {display:block;}
  12. table table table {margin-top:2px;}
  13. table table table table {margin-top:0px;}
  14. </style>
  15.  
  16. <!-- m o v e  l e f t  c o l u m n -->
  17. <style>
  18. table table table {position:relative; left:5px; top: 0px;}
  19. table table table table {position:static;}
  20. </style>
  21.  
  22. <!-- m o v e  r i g h t  c o l u m n -->
  23. <style>
  24. td.text table {position:relative; left:-16px; top: -15.5px;}
  25. td.text table table {position:static;}
  26. </style>
  27.  
  28. <!-- b a c k g r o u n d & t a b l e s -->
  29. <style>
  30. table, tr, td {
  31. background-color:transparent;
  32. border:none;
  33. border-width:0; }
  34.  
  35. body {
  36. background-color:#e1e1e1;
  37. background-image:url('');
  38. background-attachment:fixed;
  39. background-position:top center;
  40. background-repeat:repeat;
  41. margin-left:280px; }
  42.  
  43. td.text table {
  44. position:relative; }
  45.  
  46. td.text table table {
  47. position:static; }
  48.  
  49. table table {
  50. border:0px; }
  51.  
  52. table table table table{
  53. border:3px double #881019;
  54. padding:5px; }
  55.  
  56. table table table {
  57. border:2px solid #fff;
  58. background-color:#fff; }
  59. </style>
  60.  
  61. <!-- f o n t s & l i n k s -->
  62. <style>
  63. table, tr, td, li, p, div {
  64. font-family:georgia;
  65. color:#000;
  66. font-size:12px;
  67. line-height:100%; }
  68.  
  69. a:active, a:visited, a:link {
  70. font-family:georgia;
  71. color:#000;
  72. font-size:12px;
  73. font-weight: none;
  74. text-transform:none;
  75. -webkit-transition: all .5s ease;
  76. -moz-transition: all .5s ease;
  77. -o-transition: all .5s ease; }
  78.  
  79. a:hover {
  80. letter-spacing:0px;
  81. text-decoration:none;
  82. -webkit-transition: all .5s ease;
  83. -moz-transition: all .5s ease;
  84. -o-transition: all .5s ease; }
  85.  
  86. I {
  87. font:italic 10px 'libre baskerville';
  88. color:#8ba290; }
  89.  
  90. B {
  91. font:bold 13px 'oswald';
  92. line-height:12px!important;
  93. text-transform:lowercase;
  94. color:#881019; }
  95.  
  96. em {
  97. font:italic 11.5px georgia;
  98. color:#8ba290; }
  99.  
  100. blockquote {
  101. width:54%;
  102. margin-left:20%;
  103. background-color:#eee;
  104. padding:2%;
  105. border-left:2px solid #881019; }
  106.  
  107. hr {
  108. border: 0;
  109. height: 1px;
  110. background-image: linear-gradient(to right, rgba(170, 170, 170, 0), rgba(170, 170, 170, 0.75), rgba(170, 170, 170, 0)); }
  111.  
  112. h1 {
  113. font:40px 'Oswald';
  114. font-weight:lighter;
  115. color:#881019;
  116. text-align:center;
  117. letter-spacing:-2px;
  118. text-transform:uppercase;
  119. margin:0px; }
  120.  
  121. h2 {
  122. font:italic 10px 'petit formal script';
  123. color:#222;
  124. text-align:center;
  125. letter-spacing:1px;
  126. text-transform:lowercase;
  127. margin:0px; }
  128.  
  129. h4 {
  130. display:block;
  131. margin:0px;
  132. text-align:center;
  133. background-color:#881019;
  134. height:30px;
  135. font:italic 24px 'petit formal script';
  136. color:#fff; }
  137.  
  138. h5 {
  139. display:block;
  140. margin:0px;
  141. text-align:center;
  142. font:italic 24px 'petit formal script';
  143. color:#881019; }
  144.  
  145. yiz {
  146. font:italic 12px 'petit formal script';
  147. color:#881019;
  148. margin:0px; }
  149. </style>
  150.  
  151. <!-- c o r n e r  c r e d it -->
  152. <style>
  153. #credit a {
  154. font:35px georgia;
  155. color:#881019;
  156. height:35px;
  157. width:auto;
  158. right:5px;
  159. bottom:5px;
  160. position:fixed; }
  161.  
  162. #credit a:hover {
  163. letter-spacing:0px; }
  164. </style>
  165.  
  166. <!-- s c r o l l b a r -->
  167. <style>
  168. ::-webkit-scrollbar-thumb {
  169. height:9px;
  170. width:3px;
  171. background-color:#881019; }
  172.  
  173. ::-webkit-scrollbar {
  174. margin-right:5px;
  175. width:3px;
  176. height:5px;
  177. background-color:#aaa;}
  178. </style>
  179.  
  180. <!-- b a s i c s -->
  181. <style>
  182. #now {
  183. background-color:#881019;
  184. width:274px;
  185. padding:5px;
  186. color:#fff;
  187. text-align:center;
  188. word-spacing:5px;
  189. letter-spacing:1px;
  190. font:italic 35px 'Oswald'; }
  191.  
  192. #basic {
  193. width:284px;
  194. height:480px; }
  195.  
  196. h3 {
  197. display:block;
  198. margin:0px;
  199. text-align:center;
  200. margin-bottom:3px;
  201. background-color:#881019;
  202. height:30px;
  203. font:italic 24px 'petit formal script';
  204. color:#fff;
  205. border-bottom:1px solid #aaa; }
  206.  
  207. .mean {
  208. width:274px;
  209. padding:5px;
  210. height:440px;
  211. overflow:auto; }
  212. </style>
  213.  
  214. <!-- s i d e b a r -->
  215. <style>
  216. #base1 {
  217. position:fixed!important;
  218. left:0px!important;
  219. top:0px!important;
  220. height:100%!important;
  221. width:100px!important;
  222. background-image:url('https://i.imgur.com/694Zm3R.jpg')!important;
  223. background-size:cover;
  224. background-position:center;
  225. z-index:1!important; }
  226.  
  227. #base2 {
  228. position:fixed!important;
  229. left:100px!important;
  230. top:0px;!important;
  231. height:100%!important;
  232. width:350px!important;;
  233. background-color:#f5f4f2;
  234. z-index:1!important;
  235. border-right:4px solid #881019!important; }
  236.  
  237. #base2 .title {
  238. margin-top:250px!important;
  239. margin-left:25px!important;
  240. width:300px!important;
  241. position:fixed!important;
  242. font:20px 'raleway'!important;
  243. color:#881019!important;
  244. text-align:center!important;
  245. letter-spacing:-.5px!important;
  246. text-transform:uppercase!important; }
  247.  
  248. #base2 .subtitle {
  249. margin-top:270px!important;
  250. margin-left:25px!important;
  251. width:300px!important;
  252. position:fixed!important;
  253. font:italic 10px 'libre baskerville'!important;
  254. letter-spacing:1px!important;
  255. color:#222!important;
  256. text-align:center!important;
  257. text-transform:lowercase!important; }
  258.  
  259. #base2 .dvd {
  260. margin-top:280px!important;
  261. margin-left:25px!important;
  262. width:300px!important;
  263. position:fixed!important;
  264. text-align:center!important; }
  265.  
  266. #base2 .side img {
  267. margin-top:300px!important;
  268. margin-left:25px!important;
  269. width:100px!important;
  270. height:100px!important;
  271. padding:4px!important;
  272. border:1px solid #222!important;
  273. position:fixed!important; }
  274.  
  275. #base2 .description {
  276. margin-top:295px!important;
  277. margin-left:135px!important;
  278. padding:10px;
  279. width:145px!important;
  280. height:85px!important;
  281. font:10px arial!important;
  282. color:#222!important;
  283. text-align:justify!important;
  284. position:fixed!important; }
  285.  
  286. #base2 .description b {
  287. font:bold 10.5px arial!important;
  288. color:#8ba290!important;
  289. text-transform:uppercase!important; }
  290.  
  291. #base2 .vhs {
  292. margin-top:420px!important;
  293. margin-left:25px!important;
  294. width:300px!important;
  295. position:fixed!important;
  296. text-align:center!important; }
  297.  
  298. #base2 .links {
  299. margin-top:440px!important;
  300. margin-left:25px!important;
  301. width:300px!important;
  302. position:fixed!important; }
  303.  
  304. #base2 .links a.one, a.two, a.three, a.four, a.five, a.six, a.seven, a.eight {
  305. width:33.33px!important;
  306. display:inline-block!important;
  307. letter-spacing:0px!important;
  308. color:#881019!important;
  309. font:italic 8px 'libre baskerville';
  310. font-weight:bold!important;
  311. transition: all 0.5s ease; }
  312.  
  313. #base2 .links a.one:hover, a.two:hover, a.three:hover, a.four:hover, a.five:hover, a.six:hover, a.seven:hover, a.eight:hover {
  314. color:#8ba290!important;
  315. letter-spacing:0px!important;
  316. transition: all 0.5s ease; }
  317.  
  318. #base2 .links a.one[data-title]:hover:after,  a.two[data-title]:hover:after,  a.three[data-title]:hover:after,  a.four[data-title]:hover:after,  a.five[data-title]:hover:after,  a.six[data-title]:hover:after,  a.seven[data-title]:hover:after,  a.eight[data-title]:hover:after {
  319. content: attr(data-title);
  320. color:#fff!important;
  321. background-color:#881019!important;
  322. display:block!important;
  323. font:italic 10px arial!important;
  324. margin-left:10px!important;
  325. margin-top:10px!important;
  326. text-transform:lowercase!important;
  327. position:absolute!important;  
  328. padding:3px!important;
  329. transition: all 0.5s ease; }
  330. </style>
  331.  
  332. <!-- b i o g r a p h y -->
  333. <style>
  334. #bio {
  335. width:400px;
  336. height:450px;
  337. position:relative;
  338. margin-left:0px;
  339. overflow:hidden;
  340. }
  341.  
  342. .bio2 {
  343. width:420px;
  344. height:450px;
  345. position:absolute; }
  346.  
  347. .bio2 .guard {
  348. height:450px;
  349. width:150px;
  350. margin-top:0px;
  351. display:inline-block;
  352. background-image:url('https://i.imgur.com/pX7Mv82.jpg'); }
  353.  
  354. .bio2 .words {
  355.     height: 450px;
  356.     width: 250px;
  357.     background-color: #f8e4db;
  358.     margin-top: 0px;
  359.     display: inline-block;
  360.     vertical-align: top; }
  361.  
  362. .words .story {
  363. height:300px;
  364. width:150px;
  365. margin:50px;
  366. border-top:1px solid #e1b8a3;
  367. padding-top:10px;
  368. border-bottom:1px solid #e1b8a3;
  369. padding-bottom:10px;
  370. padding-right:5px;
  371. overflow:auto;
  372. font:14.5px 'lora'
  373. font-weight:normal;
  374. color:#777;
  375. text-align:justify; }
  376. </style>
  377.  
  378.  
  379.  
  380. <!-- i n s t a g r a m -->
  381. <style>
  382. #instagram {
  383. width:400px;
  384. height:385px; }
  385.  
  386. #fun {
  387. height:120px;
  388. width:400px;
  389. top:0px;
  390. left:0px;
  391. position:relative;
  392. margin-bottom:20px; }
  393.  
  394. #fun .icon img {
  395. margin-left:5px;
  396. margin-top:8px;
  397. height:110px;
  398. width:110px;
  399. padding:3px;
  400. border:3px solid #313946;
  401. border-radius:100%;
  402. position:absolute; }
  403.  
  404. #fun .user {
  405. margin-left:130px;
  406. margin-top:16px;
  407. height:auto;
  408. width:auto;
  409. position:absolute;
  410. font-size:18px; }
  411.  
  412. #fun .follow {
  413. margin-top:8px;
  414. margin-left:255px;
  415. width:auto;
  416. padding:5px;
  417. height:auto;
  418. background-color:#7f838e;
  419. border:2px solid #313946;
  420. border-radius:10%;
  421. position:absolute; }
  422.  
  423. #fun .follow:hover {
  424. cursor:pointer;
  425. background-color:#4c4a4d; }
  426.  
  427. #fun .stats {
  428. margin-left:135px;
  429. margin-top:40px;
  430. width:250px;
  431. height:auto;
  432. position:absolute; }
  433.  
  434. #fun b {
  435. text-transform:uppercase;
  436. font-weight:bolder; }
  437.  
  438. #fun .desc {
  439. margin-left:135px;
  440. margin-top:60px;
  441. width:210px;
  442. height:auto;
  443. position:absolute; }
  444.  
  445. .member {
  446. width:115px;
  447. height:115px;
  448. display:inline-block;
  449. margin:5px; }
  450.  
  451. .member img {
  452. width:115px;
  453. height:115px;  }
  454.  
  455. .block {
  456. height:60px;
  457. width:105px;
  458. padding:5px;
  459. z-index:4;
  460. padding-top:50px;
  461. text-align:center;
  462. position:absolute;
  463. font:10px arial;
  464. overflow:hidden;
  465. background-color:rgba(0,0,0,0.0);
  466. margin-top:-115px;
  467. margin-left:0px;
  468. opacity:0;
  469. color:#fff;
  470. -webkit-transition:0.6s;
  471. -moz-transition:0.6s;
  472. -ms-transition:0.6s;
  473. -o-transition:0.6s;
  474. transition:0.6s; }
  475.  
  476. .member:hover .block {
  477. background-color:rgba(0,0,0,0.5);
  478. opacity:1;
  479. color:#fff; }
  480. </style>
  481.  
  482.  
  483. <!-- o w e s  l i s t -->
  484. <style>
  485. .obie {
  486. height:213px;
  487. width:300px;
  488. z-index:1;
  489. background-image:url('http://placehold.it/300x213');
  490. overflow:hidden; }
  491.  
  492. #wan {
  493. height:213px;
  494. width:300px;
  495. z-index:2;
  496. background-image:url('https://i.imgur.com/xiAvofv.png');
  497. margin-left:0px;
  498. margin-top:100px;
  499. -webkit-transition: all .8s ease;
  500. -moz-transition: all .8s ease;
  501. -o-transition: all .8s ease; }
  502.  
  503. .obie:hover #wan {
  504. margin-top:0px;
  505. -webkit-transition: all .8s ease;
  506. -moz-transition: all .8s ease;
  507. -o-transition: all .8s ease; }
  508. </style>
  509.  
  510. <!-- t e x t & s n a p c h a t -->
  511. <style>
  512. .container {
  513. width:400px;
  514. height:300px;
  515. overflow:hidden; }
  516.  
  517. #directory {
  518. width:200px;
  519. height:300px;
  520. border-right:1px solid #eee; }
  521.  
  522. .icons {
  523. height:10px;
  524. width:200px;
  525. text-align:justify;
  526. word-spacing:30px;
  527. font:10px arial; }
  528.  
  529. #directory b {
  530. font:bold 12px arial;
  531. color:#000;
  532. text-transform:none; }
  533.  
  534. #directory text {
  535. font:10px arial;
  536. color:#aaa;
  537. overflow:hidden; }
  538.  
  539. #directory .top {
  540. height:15px;
  541. line-height:40px;
  542. text-align:center;
  543. width:200px;
  544. border-bottom:1px solid #eee; }
  545.  
  546. #directory .messy {
  547. height:35px;
  548. padding:2px;
  549. width:196px;
  550. overflow:hidden;
  551. border-bottom:1px solid #eee; }
  552.  
  553. #snapchat {
  554. width:200px;
  555. height:300px;
  556. background-color:#881019;
  557. overflow:hidden;
  558. float:right;
  559. margin-top:-300px; }
  560.  
  561. #username {
  562. font:normal 15px 'oswald';
  563. color:#fff;
  564. text-transform:uppercase;
  565. position:absolute;
  566. top:120px;
  567. left:0px;
  568. width:200px;
  569. text-align:center;
  570. line-height:150%; }
  571.  
  572. .subuse {
  573. width:200px;
  574. text-align:center;
  575. position:absolute;
  576. top:142px;
  577. left:0px;
  578. font:12px 'arial';
  579. letter-spacing:2px;
  580. text-transform: uppercase;
  581. color:#eee;
  582. opacity:1; }
  583.  
  584. #snapchat #pics {
  585. position:relative;
  586. width:200px;
  587. height:300px;
  588. overflow:hidden; }
  589.  
  590. #caption, #one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #ten  {
  591. position:absolute;
  592. width:200px;
  593. height:300px; }
  594.  
  595. #one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #ten {
  596. left:205px; }
  597.  
  598. #snapchat #pics #caption {
  599. width:200px;
  600. font:10px arial;
  601. height:auto;
  602. letter-spacing:1px;
  603. text-align:center;
  604. padding:5px;
  605. color:#fff;
  606. position:absolute;
  607. top:170px;
  608. background-color:rgba(0,0,0,.7); }
  609.  
  610. #timer {
  611. position:relative;
  612. top:5px;
  613. left:175px;
  614. width:15px;
  615. height:15px;
  616. padding:2px;
  617. background-color:rgba(0,0,0,.7);
  618. border-radius:100%;
  619. font:bold 13px arial;
  620. line-height:15px!important;
  621. color:#fff;
  622. text-align:center; }
  623.  
  624. .t3 {
  625. border:2px solid #fff; }
  626.  
  627. #snapchat #pics #one {
  628. background:url(http://placehold.it/200x300); }
  629.  
  630. #snapchat #pics #two {
  631. background:url(http://placehold.it/200x300); }
  632.  
  633. #snapchat #pics #three {
  634. background:url(http://placehold.it/200x300); }
  635.  
  636. #snapchat #pics #four {
  637. background:url(http://placehold.it/200x300); }
  638.  
  639. #snapchat #pics #five {
  640. background:url(http://placehold.it/200x300); }
  641.  
  642. #snapchat #pics #six {
  643. background:url(http://placehold.it/200x300); }
  644.  
  645. #snapchat #pics #seven {
  646. background:url(http://placehold.it/200x300); }
  647.  
  648. #snapchat #pics #eight {
  649. background:url(http://placehold.it/200x300); }
  650.  
  651. #snapchat #pics #nine {
  652. background:url(http://placehold.it/200x300); }
  653.  
  654. #snapchat #pics #ten {
  655. background:url(http://placehold.it/200x300); }
  656.  
  657. #snapchat:hover #pics #one {
  658. left:0px;
  659. transition-delay: 0s;
  660. transition: 0.8s;
  661. -moz-transition: 0.8s;
  662. -webkit-transition: 0.8s;
  663. -o-transition: 0.8s; }
  664.  
  665. #snapchat:hover #pics #two {
  666. left:0px;
  667. transition-delay:1.5s; }
  668.  
  669. #snapchat:hover #pics #three {
  670. left:0px;
  671. transition-delay:3.0s; }
  672.  
  673. #snapchat:hover #pics #four {
  674. left:0px;
  675. transition-delay:4.5s; }
  676.  
  677. #snapchat:hover #pics #five {
  678. left:0px;
  679. transition-delay:6.0s; }
  680.  
  681. #snapchat:hover #pics #six {
  682. left:0px;
  683. transition-delay:7.5s; }
  684.  
  685. #snapchat:hover #pics #seven {
  686. left:0px;
  687. transition-delay:9.0s; }
  688.  
  689. #snapchat:hover #pics #eight {
  690. left:0px;
  691. transition-delay:10.5s; }
  692.  
  693. #snapchat:hover #pics #nine {
  694. left:0px;
  695. transition-delay:12.0s; }
  696.  
  697. #snapchat:hover #pics #ten {
  698. left:0px;
  699. transition-delay:13.5s; }
  700. </style>
  701.  
  702. <!-- h i d e  c o d e s // d o n t  t o u c h -->
  703. <style>
  704. .profileInfo { display:none; }
  705. .clearfix { display: none; }
  706. .lightbluetext8 { display:none; }
  707. .contacttable { display:none; }
  708. .whitetext12 { display:none; }
  709. .interestsanddetails { display:none; }
  710. .userProfiledetail { display:none; }
  711. .friendSpace { display:none; }
  712. .friendsComments { display:none; }
  713. .latestBlogEntry { display:none; }
  714. .navigationBar { display:none; }
  715. .navbar { visibility:hidden; }
  716. .orangetext15 { display:none; }
  717. .userProfileURL { display:none; }
  718. .extendedNetwork { display:none; }
  719. .blurbs { display:none; }
  720. .userAlbums { display:none; }
  721. .mslogo { display: none; }
  722. #footerWarpper{ display:none; }
  723. </style>
  724.  
  725.  
  726. <!-- Like to meet -->
  727. </td></tr></table></td></tr></table><br /><table bordercolor="ffffff" cellspacing="0" cellpadding="0" width="400" bgcolor="ffffff" border="0"><tr><td class="text" valign="left" align="left" width="400" bgcolor="ffffff" height="0" style="word-wrap:break-word"></td></tr><tr><td><table bordercolor="000000" cellspacing="0" cellpadding="0" width="400" align="left" bgcolor="ffffff" border="0"><td valign="top" align="left" width="400" bgcolor="ffffff" style="word-wrap:break-word">
  728. <div id="credit"><a href="/ineffable"></a></div>
  729. <div id="base1"></div>
  730. <div id="base2">
  731.  
  732. <div class="title">
  733. throw me to the wolves
  734. </div>
  735.  
  736. <div class="subtitle">
  737. and I'll return leading the pack
  738. </div>
  739.  
  740. <div class="dvd"><hr></div>
  741.  
  742. <div class="side">
  743. <img src="http://placehold.it/200x200"/>
  744. </div>
  745.  
  746. <div class="description"><center>
  747. <b>garden full of <font style="color:#881019!important;">thorns</font></b></center>
  748. One of the most tragic things I know about human nature is that all of us tend to put off living. We are all dreaming of some magical rose garden over the horizon - instead of enjoying the roses blooming outside our windows today.
  749. </div>
  750.  
  751. <div class="vhs"><hr></div>
  752.  
  753. <div class="links">
  754. <a class="one" href="/home.php" data-title="home">i.</a>
  755. <a class="two" href="/add_comment.php?member_id=###" data-title="comment">ii.</a>
  756. <a class="three" href="/send_message.php?member_id=###" data-title="message">iii.</a>
  757. <a class="four" href="/gallery.php?member_id=###" data-title="gallery">iv.</a>
  758. <a class="five" href="/" data-title="extra">v.</a>
  759. <a class="six" href="/" data-title="extra">vi.</a>
  760. <a class="seven" href="/" data-title="extra">vii.</a>
  761. <a class="eight" href="/" data-title="extra">viii.</a>
  762. </div>
  763. </div>
  764.  
  765. <div style="width:400px;">
  766. <h2>in the sun and in the rain and in the day and in the night</h2>
  767. <hr>
  768. <h1>First Middle Last</h1>
  769. <hr>
  770. <h2>pain is a flower - pain is flowers, blooming all the time.</h2>
  771. </div>
  772.  
  773. </td></tr></table></td></tr></table><br /><table bordercolor="ffffff" cellspacing="0" cellpadding="0" width="400" bgcolor="ffffff" border="0"><tr><td class="text" valign="left" align="left" width="400" bgcolor="ffffff" height="0" style="word-wrap:break-word"></td></tr><tr><td><table bordercolor="000000" cellspacing="0" cellpadding="0" width="400" align="left" bgcolor="ffffff" border="0"><td valign="top" align="left" width="400" bgcolor="ffffff" style="word-wrap:break-word">
  774. <div style="overflow-x:hidden; width:400px;">
  775. <div id="bio">
  776. <div class="bio2">
  777. <div class="guard"></div>
  778. <div class="words">
  779. <div class="story">
  780. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut erat lorem, semper ultrices mi ut, hendrerit auctor nunc. Curabitur aliquam aliquet ullamcorper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dui mauris, ultrices at ex a, volutpat facilisis quam. Praesent neque arcu, consequat a interdum quis, egestas vel ante. Nulla id justo sit amet dui egestas commodo ut eget ligula. Vestibulum nec interdum metus. Praesent varius tincidunt magna vel consequat. In at pretium eros. Etiam leo est, euismod cursus sapien in, vestibulum dignissim metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec rutrum purus a tincidunt interdum. Sed fringilla nisl vel iaculis eleifend. Aliquam erat volutpat. Integer sollicitudin mattis tincidunt. Nullam sit amet ullamcorper arcu, tempor vehicula sem.
  781. <br><br>
  782. Maecenas accumsan orci a lacus blandit, ut maximus nunc elementum. Integer aliquet turpis lacinia ultrices lacinia. Sed imperdiet ipsum a augue hendrerit, sit amet auctor tortor blandit. Vestibulum ut tortor turpis. Nunc nisl sem, convallis vel pulvinar nec, sodales ac justo. Nullam at lorem massa. Suspendisse cursus sem ut accumsan luctus. Quisque bibendum, est in semper laoreet, metus nulla eleifend nulla, sit amet fermentum urna lacus in erat. Suspendisse varius quam id elementum sagittis.
  783. <br><br>
  784. Nunc dictum, mi ut vulputate tincidunt, neque lectus lacinia mauris, vitae finibus orci elit sed massa. Cras quis scelerisque elit. Morbi efficitur vel lectus in cursus. Vestibulum vestibulum semper ante, ac lacinia odio ornare nec. Etiam in iaculis augue. Pellentesque magna magna, scelerisque dapibus dignissim ac, laoreet vel purus. Donec consectetur justo et finibus blandit. Nulla dapibus vel lacus vel eleifend. Fusce quis mattis libero. Sed vel hendrerit urna, sed mattis diam. Nullam at lacinia diam, sit amet suscipit eros. Fusce nec dapibus orci. Praesent at enim nisi. Nulla facilisi. In hac habitasse platea dictumst.
  785. <br><br>
  786. Aliquam gravida quam diam, facilisis pharetra quam interdum et. Etiam et neque sit amet tortor pulvinar sollicitudin. Mauris gravida eros et lorem semper iaculis. Mauris scelerisque odio sit amet congue laoreet. Sed dignissim elit et ex accumsan maximus. Fusce tincidunt ultricies dignissim. Mauris faucibus elit vel augue sodales volutpat. Vivamus cursus et risus id ornare. Aliquam fringilla maximus mi. Phasellus in laoreet enim. Suspendisse viverra leo eget dui cursus lobortis. Proin in sagittis tellus, et molestie risus.
  787. <br><br>
  788. Nulla sed metus vitae leo pulvinar venenatis a eu libero. Morbi ipsum sem, faucibus ac dictum id, tempus a purus. Integer varius tortor nec odio mollis, sed tincidunt sapien tempus. Integer tempor lacinia ultrices. Integer faucibus, tortor sed placerat ultricies, velit orci pharetra lorem, eget fringilla elit diam ut lorem. Mauris pulvinar ultricies eros eget cursus. Aenean accumsan sollicitudin enim. Curabitur sollicitudin ultricies ultrices. Donec finibus, nibh et dictum rhoncus, mauris massa pulvinar nulla, condimentum aliquet elit orci in nunc. Cras lacus magna, iaculis ut turpis sed, consectetur viverra arcu. Morbi eget tempor ex, et mattis nunc. Duis nisi neque, accumsan ac lacus in, consectetur porttitor mi.
  789. </div>
  790. </div>
  791. </div>
  792. </div>
  793.  
  794. </td></tr></table></td></tr></table><br /><table bordercolor="ffffff" cellspacing="0" cellpadding="0" width="415" bgcolor="ffffff" border="0"><tr><td class="text" valign="left" align="left" width="415" bgcolor="ffffff" height="0" style="word-wrap:break-word"></td></tr><tr><td><table bordercolor="000000" cellspacing="0" cellpadding="0" width="415" align="left" bgcolor="ffffff" border="0"><td valign="top" align="left" width="415" bgcolor="ffffff" style="word-wrap:break-word">
  795. <div id="instagram">
  796. <div id="fun">
  797. <div class="icon">
  798. <img src="http://placehold.it/120">
  799. </div>
  800. <div class="user">
  801. @username
  802. </div>
  803. <div class="follow">
  804. following
  805. </div>
  806. <div class="stats">
  807. <b>1,467</b> posts <b>15k</b> followers <b>30</b> following
  808. </div>
  809. <div class="desc">
  810. <b>First Last</b> put a short bio here <br><font style="font-weight:bold;">http://roleplayer.me/ineffable</font>
  811. </div>
  812. </div>
  813. <center>
  814. <div class="member">
  815. <img src="http://placehold.it/115x115"/>
  816. <div class="block">
  817. <z class="fa fa-heart"></z> 1,356 <z class="fa fa-comment"></z> 32 <br>
  818. </div>
  819. </div>
  820.  
  821. <div class="member">
  822. <img src="http://placehold.it/115x115"/>
  823. <div class="block">
  824. <z class="fa fa-heart"></z> 4,789 <z class="fa fa-comment"></z> 120 <br>
  825. </div>
  826. </div>
  827.  
  828. <div class="member">
  829. <img src="http://placehold.it/115x115"/>
  830. <div class="block">
  831. <z class="fa fa-heart"></z> 6,745 <z class="fa fa-comment"></z> 84 <br>
  832. </div>
  833. </div>
  834.  
  835. <div class="member">
  836. <img src="http://placehold.it/115x115"/>
  837. <div class="block">
  838. <z class="fa fa-heart"></z> 3,546 <z class="fa fa-comment"></z> 117 <br>
  839. </div>
  840. </div>
  841.  
  842. <div class="member">
  843. <img src="http://placehold.it/115x115"/>
  844. <div class="block">
  845. <z class="fa fa-heart"></z> 1.854 <z class="fa fa-comment"></z> 36 <br>
  846. </div>
  847. </div>
  848.  
  849. <div class="member">
  850. <img src="http://placehold.it/115x115"/>
  851. <div class="block">
  852. <z class="fa fa-heart"></z> 2,478 <z class="fa fa-comment"></z> 138 <br>
  853. </div>
  854. </div>
  855. </center>
  856. </div>
  857.  
  858. <!--Interests-->
  859.  
  860. </table> </td> </tr> </table> <br /> <table bordercolor="black" cellspacing="0" cellpadding="0" width="300" bgcolor="black" border="0"> <tr> <td class="text" valign="" align="left" width="300" bgcolor="0" height="0" style="word-wrap:break-word"><span class="orangetext15"> </td> </tr> <tr> <td><table bordercolor="0" cellspacing="0" cellpadding="0" width="300" align="" bgcolor="black" border="0"><td valign="top" align="" width="300" bgcolor="black">
  861. <div style="width:300px; height:auto;">
  862. <!-- header image -->
  863. <div style="height:120px; width:300px; background-image:url('http://placehold.it/300x120'); background-size:cover; z-index:1;"></div>
  864. <!-- icon image -->
  865. <div style="border-radius:20%; border:3px solid #670A0A; margin-left:5%; margin-top:-35px; height:100px; width:100px; background-image:url('http://placehold.it/100'); background-size:cover;"></div>
  866. <!-- name text -->
  867. <div style="font:bold 15px  arial; letter-spacing:0px; margin-left:calc(5% + 115px); margin-top:-70px;">First Last</div>
  868. <!-- handle text -->
  869. <div style="font:12px  'archivo narrow'; letter-spacing:0px; margin-left:calc(5% + 115px); margin-top:0px;">@username</div>
  870. <!-- description text -->
  871. <div style="font:11px  'archivo narrow'; letter-spacing:0px; margin-left:calc(5% + 115px); margin-top:0px;">I am good, but not an angel. I do sin, but I am not the devil. I am just a small girl in a big world trying to find someone to love.</div>
  872. <!-- stats!!! -->
  873. <div style="width:31%; margin-left:5%; margin-top:5px;"><span style="font:10px 'archivo narrow'; text-transform:uppercase;">tweets</span><Br><span style="font:bold 15px 'archivo narrow'; color:#670A0A;">1,375</span></div>
  874. <div style="width:31%; margin-left:37%; margin-top:-33px;"><span style="font:10px 'archivo narrow'; text-transform:uppercase;">following</span><Br><span style="font:bold 15px 'archivo narrow'; color:#670A0A;">215</span></div>
  875. <div style="width:31%; margin-left:69%;  margin-top:-33px;"><span style="font:10px 'archivo narrow'; text-transform:uppercase;">followers</span><Br><span style="font:bold 15px 'archivo narrow'; color:#670A0A;">5,689</span></div>
  876. </div>
  877. </div>
  878. </div>
  879. </div>
  880.  
  881.  
  882. </table> </td> </tr> </table> <br /> <table bordercolor="black" cellspacing="0" cellpadding="0" width="315" bgcolor="black" border="0"> <tr> <td class="text" valign="" align="left" width="315" bgcolor="0" height="0" style="word-wrap:break-word"><span class="orangetext15"> </td> </tr> <tr> <td><table bordercolor="0" cellspacing="0" cellpadding="0" width="315" align="" bgcolor="black" border="0"><td valign="top" align="" width="315" bgcolor="black">
  883. <div id="basic">
  884. <h3>basic information</h3>
  885. <div class="mean">
  886. <b>Birth Name & Etymology ✖ Nick name(s): </b> Name <b>✖</b> Nicknames. <br>
  887. <b>Date of Birth ✖ Astrological Sign:</b> (S)he was born on <i>date</i>. <b>✖</b> (S)he is a <i>zodiac</i>. <blockquote>stuff and things</blockquote>
  888. <b>Gender:</b>  <br>
  889. <b>Place of Birth ✖ Hometown:</b> City <b>✖</b> city. <br>
  890. <b>Current Residence:</b>  <br>
  891. <b>Parents:</b>  <br>
  892. <b>Siblings:</b>  <br>
  893. <b>Children:</b> <br>
  894. <b>Relationship Status:</b> <br>
  895. <b>Past Relationships:</b> <br>
  896. <b>Sexual Orientation:</b> <br>
  897. <b>Children:</b> <br>
  898. <b>Education:</b>  <br>
  899. <b>Hair ✖ Eye Color:</b> <br>
  900. <b>Height ✖ Weight:</b> <br>
  901. <b>Tattoos ✖ Piercings:</b> <br>
  902. <b>Smoke ✖ Drink ✖ Drugs:</b>  <br>
  903. <b>Languages:</b> <br>
  904. <b>Likes:</b> <br>
  905. <b>Dislikes:</b>
  906. </div>
  907. </div>
  908.  
  909.  
  910. </table> </td> </tr> </table> <br /> <table bordercolor="black" cellspacing="0" cellpadding="0" width="315" bgcolor="black" border="0"> <tr> <td class="text" valign="" align="left" width="315" bgcolor="0" height="0" style="word-wrap:break-word"><span class="orangetext15"> </td> </tr> <tr> <td><table bordercolor="0" cellspacing="0" cellpadding="0" width="315" align="" bgcolor="black" border="0"><td valign="top" align="" width="315" bgcolor="black">
  911. <div class="obie">
  912. <div id="wan">
  913. <div style="padding-top:80px; width:100%; text-align:center; font:italic 28px 'Prata';">to-do list</div>
  914. <B>owes</b> alexei (<i>05/15</i>), lidia (<i>05/15</i>), dolly (<i>05/15</i>) <br>
  915. <B>owed</b> nikolai (<i>05/15</i>), varenka (<i>05/15</i>), oblonsky (<i>05/15</i>)
  916. <div style="padding-top:15px; width:100%; text-align:center; font:20px 'Prata';">last updated: may 15th, 2017</div>
  917. </div>
  918. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement