mebuckner

Red Rocks

Dec 31st, 2020 (edited)
1,207
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 29.79 KB | None | 0 0
  1. <!--about me-->
  2.  
  3. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  4.  
  5. <style type="text/css">
  6.  
  7.   @import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');
  8.  
  9. .editsByM  { Background }
  10. body, td, li, p, div, textarea {
  11. background-color:transparent;
  12. font-family: 'Playfair Display', sans-serif;
  13. text-transform:uppercase;
  14. font-size:12px;
  15. }
  16.  
  17.  
  18. .editsByM   { Body }
  19. body {
  20. background-image:url('https://i.imgur.com/uRHKVxC.jpg');
  21. background-size:cover;
  22. background-attachment:fixed;
  23. background-repeat:repeat;
  24. background-position: bottom left;
  25. margin-top:10px;
  26. }
  27.  
  28.  
  29. h1{
  30.     margin: 0;
  31.     text-align: center;
  32.     font-weight: 100;
  33.     background: #91322c;
  34.     color: #fff;
  35.     margin-bottom: 10px;
  36.     padding-top: 5px;
  37.     padding-bottom: 5px;
  38. }
  39.  
  40. h2{
  41.     margin: 0;
  42.     text-align: center;
  43.     font-weight: 100;
  44.     color: #91322c;
  45.     margin-bottom: 10px;
  46.     padding-top: 5px;
  47.     padding-bottom: 5px;
  48. }
  49.  
  50. h3{
  51.     margin: 0;
  52.     text-align: center;
  53.     font-weight: 100;
  54.     background: #91322c;
  55.     color: #fff;
  56.     font-size:20px;
  57.     padding-top: 5px;
  58.     padding-bottom: 5px;
  59. }
  60.  
  61. h4 {
  62.     font-family: 'Playfair Display';
  63.     text-align: right;
  64.     font-size: 25px;
  65.     margin: 0;
  66.     font-weight: 100;
  67.     color: #91322c;
  68. }
  69.  
  70.  
  71. b{
  72.     font-weight: 100;
  73.     padding: 5px;
  74.     color: #fff;
  75.     line-height: 35px;
  76.     background: #2b6f71;
  77. }
  78.  
  79. a:link, a:active, a:visited, a:hover {
  80.     color: #91322c;
  81.     font-family: 'Playfair Display';
  82.     font-size: 12px;
  83. }
  84.  
  85.  
  86. .editsByM   { Scrollbar }
  87. ::-webkit-scrollbar {
  88.     display: none;
  89. }
  90.  
  91.  
  92. table.profileInfo {display:none;}
  93.  
  94. .mygen { Tables }
  95. td.text table table {
  96. position:static;
  97. }
  98.  
  99. table table table table{
  100. border:10px solid #91322c;
  101. background-color:#fff;
  102. }
  103.  
  104.  
  105. a.navigationalLinks:link, a.navigationalLinks:visited {
  106.     background-color: #91322c;
  107.     color: #ffffff;
  108.     padding: 12px 0px;
  109.     text-align: center;
  110.     text-decoration: none;
  111.     display: inline-block;
  112.     width: 68px;
  113.     font-family: Playfair Display;
  114.     font-size: 13px;
  115.     text-transform: uppercase;
  116.     margin-top: 0px;
  117.     font-weight: 100;
  118. }
  119.  
  120. a.navigationalLinks:hover, a.navigationalLinks:active {
  121. background-color: #e7e7e9;
  122. color:#6e3a51;
  123. }
  124.  
  125.  
  126.  
  127.  
  128.  
  129.  div[id="googlebar"],div div select{opacity:0;filter:alpha(opacity=0);display:none !important;position:absolute !important;bottom:2000px !important;} .clearfix {display:none !important;position:absolute!important;} table table br {line-height:3px} table table table br {line-height:5px;} .a {hide top search bar} div div select, div div form {display:none !important;} select { visibility:hidden!important; WIDTH:0px!important;} .note {bring the tables up more} td.text table {position:relative; top: -20px;} td.text table table {position:static;} .lightbluetext8 {display:none;}table table table table td {width:0px;}.contactTable td, table table td.text table td,table table table table table td {width:auto;} /*HIDECODES*/ table .nametext {display:none;} .extendednetwork{display:none;} .blurbs{display:none;} .userprofileurl{display:none;} .userprofiledetail{display:none;} .interestsanddetails{display:none;} .latestblogentry{display:none;} .mslogo{display:none;} .friendscomments{display:none;} .friendspace{display:none;} .contacttable{display:none;} .lightbluetext8{display:none;} .Do Not Hide The Profile Ads{display:none;} .userAlbums{display:none;} td.text table {position:relative; top: -11px;} td.text table table {position:static;} .lightbluetext8 {display:none;}table table table table td {width:0px;} .contactTable td, table table td.text table td,table table table table table td {width:auto;} div td {display:none;} table {top:-6px; position:relative;} table table {top:0px; position:relative;} table.profileInfo table td {white-space:wrap !important;} table.profileInfo table tr:last-child {display:none;} #footerWarpper{display: none;} .profileInfo .text {font:12px 'Archivo Narrow'; color:#696969; line-height:12px;} table table table table {position:static;} #Groups{display:none;}
  130.  
  131.  
  132. .mygen {space} table table br {display:none;} table table table br {display:block;} table table table {margin-top:4px;} table table table table {margin-top:0px;}
  133.  
  134. .rightContainerHolder{
  135.     width: 310px;
  136.     height: 178px;
  137.     margin-top: 10px;
  138.     margin-bottom: 10px;
  139.     overflow: auto;
  140.     text-align: justify;
  141.     border: 10px solid #fff;
  142. }
  143.  
  144. .image-container {
  145.   background-image: url("https://i.imgur.com/rP2ZG7K.png");
  146.   background-size: cover;
  147.   position: relative;
  148.   height: 197px;
  149. }
  150.  
  151. .wordsHere{
  152.     background-color: white;
  153.     color: black;
  154.     font-size: 57px;
  155.     font-weight: bold;
  156.     margin: 0 auto;
  157.     padding: 10px;
  158.     width: 410px;
  159.     text-align: center;
  160.     position: absolute;
  161.     top: 50%;
  162.     left: 50%;
  163.     transform: translate(-50%, -50%);
  164.     mix-blend-mode: screen;
  165. }
  166.  
  167.  
  168. .wordsHereConnection{
  169.     background-color: white;
  170.     color: black;
  171.     font-size: 57px;
  172.     font-weight: bold;
  173.     font-family: 'Playfair Display';
  174.     padding: 10px;
  175.     width: 410px;
  176.     text-align: center;
  177.     mix-blend-mode: screen;
  178. }
  179.  
  180.  
  181. .instaPost {
  182.   position: relative;
  183.   height: 405px;
  184.   width: 327px;
  185.   margin: 0 auto;
  186.   background-color: #ffffff;
  187.   overflow: hidden;
  188.   cursor: default;
  189. }
  190. .instaHeader {
  191.   position: relative;
  192.   height: 60px;
  193.   overflow: hidden;
  194. }
  195. .instaProfileImage {
  196.   position: absolute;
  197.   top: 10px;
  198.   left: 10px;
  199.   height: 40px;
  200.   width: 40px;
  201.   overflow: hidden;
  202.   border-radius: 100%;
  203. }
  204. .instaUserName{
  205.   position: absolute;
  206.   top: 16px;
  207.   left: 60px;
  208.   font-family: Playfair Display;
  209.   text-transform: lowercase;
  210.   font-weight: bold;
  211.   color: #909090;
  212.   font-size: 12px;
  213. }
  214. .instaLocation{
  215.   position: absolute;
  216.   left: 59px;
  217.   top: 34px;
  218.   font-family: Playfair Display;
  219.   text-transform: normal;
  220.   font-size: 9px;
  221. }
  222. .instaDate{
  223.     position: absolute;
  224.     right: 13px;
  225.     top: 25px;
  226.     font-family: Playfair Display;
  227.     font-size: 8px;
  228.     font-weight: bold;
  229.     color: #000;
  230. }
  231.  
  232. .instaImage{
  233.   position: relative;
  234. }
  235. .instaImage img {
  236. width: 326px;
  237. height: 256px;
  238. }
  239.  
  240. .instaCaption{
  241.     width: 308px;
  242.     height: 40px;
  243.     margin-top:10px;
  244.     border-bottom: 1px solid #dedede;
  245.     border-left: 10px solid #fff;
  246.     border-right: 10px solid #fff;
  247. }
  248. .instaCaption div {
  249.   position: relative;
  250.   font-family: Playfair Display;
  251.   font-size: 10px;
  252.   color: #707070;
  253. }
  254. .instaCaption div name {
  255.   display: inline-block;
  256.   margin-right: 3px;
  257.   font-family: Playfair Display;
  258.   font-size: 12px;
  259.   font-weight: bold;
  260.   color: #91322c;
  261. }
  262. .instaCaption div i {
  263.   color: #91322c;
  264. }
  265. .instaHoneyIcons {
  266.     position: absolute;
  267.     width: 238px;
  268.     height: 30px;
  269.     left: 4px;
  270.     margin-top: 10px;
  271.     overflow: hidden;
  272. }
  273. .instaHoneyIcons span {
  274.   display: inline-block;
  275.   margin-right: 8px;
  276.   font-size: 20px;
  277.   color: #cecece;
  278. }
  279. .instaLikes {
  280.     position: absolute;
  281.     right: 5px;
  282.     margin-top: 13px;
  283.     text-align: right;
  284.     font-family: Playfair Display;
  285.     font-size: 12px;
  286.     font-weight: bold;
  287.     color: #aeaeae;
  288. }
  289. .instaLikes span {
  290.   color: #91322c;
  291. }
  292.  
  293.  
  294.  
  295. a.credit:link, a.credit:visited {
  296.     background-color: #ffffff;
  297.     color: #2d0707;
  298.     padding: 5px 3px;
  299.     text-align: center;
  300.     text-decoration: none;
  301.     display: inline-block;
  302.     margin-top: 9px;
  303.     font-family: 'Playfair Display', serif;
  304.     font-weight: 100;
  305.     font-size: 11px;
  306.     text-transform: uppercase;
  307.     width: 78px;
  308.     letter-spacing: 2px;
  309.     margin-left: 5px;
  310.     margin-top: 15px;
  311. }
  312.  
  313. .creditHolder{
  314. position:fixed;
  315. bottom:15;
  316. left:15;
  317. }
  318.  
  319. a.credit:hover, a.credit:active {
  320. background-color: #131313;
  321. }
  322.  
  323.  
  324. #bioAndBasics{
  325.     position: relative;
  326.     width: 390px;
  327.     height: 304px;
  328.     padding: 20px;
  329.     background-color: #ffffff;
  330.     margin: 0 auto;
  331. }
  332.  
  333. .righttHover {
  334.     width: 206px;
  335.     height: 302px;
  336.     display: inline-block;
  337.     vertical-align: top;
  338.     margin-left: 10px;
  339. }
  340. .righttHover img {
  341.     width: 206px;
  342.     height: 301px;
  343. }
  344. .basicHovers{
  345.     opacity: 0;
  346.     width: 187px;
  347.     height: 294px;
  348.     position: absolute;
  349.     top: 16px;
  350.     left: 203px;
  351.     border: 10px solid #fff;
  352.     overflow: auto;
  353.     font-family: 'Playfair Display';
  354.     color: #000;
  355.     background: #fff;
  356.     transition: all 0.9s;
  357.     -o-transition-transition: all 0.9s;
  358.     -webkit-transition: all 0.9s;
  359.     -moz-transition: all 0.9s;
  360. }
  361. .righttHover:hover .basicHovers {
  362.   opacity: 1;
  363. }
  364.  
  365. .bioHolder{
  366.     height: 218px;
  367.     width: 150;
  368.     display: inline-block;
  369.     overflow: auto;
  370.     background: #ffffff;
  371.     border: 10px solid #fff;
  372.     text-align: justify;
  373.     font-family: 'Playfair Display';
  374. }
  375.  
  376.  
  377. #connectionsContainer{
  378.     width: 430px;
  379.     height: 310px;
  380.     overflow:auto;
  381. }
  382.  
  383. .individualConnection label {
  384.     display: block;
  385.     background-color: #2b6f71;
  386.     color: #ffffff;
  387.     border-bottom: 3px solid #ffffff;
  388.     font-size: 20px;
  389.     padding-top: 10px;
  390.     padding-bottom: 10px;
  391. }
  392.  
  393. .individualConnection label:hover{
  394.     background-color: #2b6f71;
  395.     background-image: none!important;
  396. }
  397.  
  398.  
  399. .individualConnection p {
  400.   color: #424242;
  401.   padding: 10px;
  402.   font-size: 0.8em;
  403.   line-height: 1.7em;
  404.   opacity: 0;
  405.   display: none;
  406.   text-align: left;
  407.   background-color: #fff;
  408.   margin: 0px;
  409. }
  410.  
  411. #connectionOne:checked ~ .hiddentext {
  412.   display: block;
  413.   opacity: 1;
  414.   text-align: justify;
  415. }
  416. input#connectionOne{
  417.   display: none;
  418.   position: relative;
  419. }
  420. #connectionTwo:checked ~ .hiddentext {
  421.   display: block;
  422.   opacity: 1;
  423.   text-align: justify;
  424. }
  425. input#connectionTwo {
  426.   display: none;
  427.   position: relative;
  428. }
  429. #connectionThree:checked ~ .hiddentext {
  430.   display: block;
  431.   opacity: 1;
  432.   text-align: justify;
  433. }
  434. input#connectionThree {
  435.   display: none;
  436.   position: relative;
  437. }
  438. #connectionFour:checked ~ .hiddentext {
  439.   display: block;
  440.   opacity: 1;
  441.   text-align: justify;
  442. }
  443. input#connectionFour {
  444.   display: none;
  445.   position: relative;
  446. }
  447. #connectionFive:checked ~ .hiddentext {
  448.   display: block;
  449.   opacity: 1;
  450.   text-align: justify;
  451. }
  452. input#connectionFive {
  453.   display: none;
  454.   position: relative;
  455. }
  456.  
  457. </style>
  458.  
  459.  
  460.  
  461.  
  462.  
  463. <!--like to meet-->
  464. </table>
  465. </td>
  466. </tr>
  467. </table>
  468. <br />
  469. <table bordercolor="black" cellspacing="0" cellpadding="0" width="350" bgcolor="black" border="0">
  470. <tr>
  471. <td class="text" valign="" align="left" width="350" bgcolor="0" height="0" style="word-wrap:break-word">
  472. <span class="orangetext15">
  473. </td>
  474. </tr>
  475. <tr>
  476. <td>
  477. <table bordercolor="0" cellspacing="0" cellpadding="0" width="350" align="" bgcolor="black" border="0">
  478. <td valign="top" align="" width="350" bgcolor="black" style="word-wrap:break-word">
  479.  
  480.  
  481.  
  482. <div class="instaPost">
  483. <div class="instaHeader">
  484. <div class="instaProfileImage ">
  485. <img src="https://i.imgur.com/Mf15rb3.png">
  486. </div>
  487. <div class="instaUserName">
  488. letherwander
  489. </div>
  490. <div class="instaLocation">
  491. Sedona, Arizona
  492. </div>
  493. <div class="instaDate">
  494. Dec 31
  495. </div>
  496. </div>
  497. <div class="instaImage">
  498. <img src="https://i.imgur.com/h0pkppn.png">
  499. </div>
  500. <div class="instaFooter">
  501. <div class="instaCaption">
  502. <div><name>letherwander</name> Theres too much blacktop, not enough redrock <i>#townhome</i></div>
  503. </div>
  504. <div class="instaHoneyIcons ">
  505. <span class="th th-heart-1-o"></span>
  506. <span class="th th-chat-bubble-o"></span>
  507. </div>
  508. <div class="instaLikes">
  509. 1,258 <span>likes</span>
  510. </div>  </div>
  511. </div>
  512. <div class="creditHolder"><a href="/1631904" class="credit">credit</a></div>
  513.  
  514.  
  515.  
  516. </table>
  517. </td>
  518. </tr>
  519. </table>
  520. <br />
  521. <table bordercolor="black" cellspacing="0" cellpadding="0" width="350" bgcolor="black" border="0">
  522. <tr>
  523. <td class="text" valign="" align="left" width="350" bgcolor="0" height="0" style="word-wrap:break-word">
  524. <span class="orangetext15">
  525. </td>
  526. </tr>
  527. <tr>
  528. <td>
  529. <table bordercolor="0" cellspacing="0" cellpadding="0" width="350" align="" bgcolor="black" border="0">
  530. <td valign="top" align="" width="350" bgcolor="black" style="word-wrap:break-word">
  531. <h3>Current Owes List</h3>
  532.  
  533. </table>
  534. </td>
  535. </tr>
  536. </table>
  537. <br />
  538. <table bordercolor="black" cellspacing="0" cellpadding="0" width="350" bgcolor="black" border="0">
  539. <tr>
  540. <td class="text" valign="" align="left" width="350" bgcolor="0" height="0" style="word-wrap:break-word">
  541. <span class="orangetext15">
  542. </td>
  543. </tr>
  544. <tr>
  545. <td>
  546. <table bordercolor="0" cellspacing="0" cellpadding="0" width="350" align="" bgcolor="black" border="0">
  547. <td valign="top" align="" width="350" bgcolor="black" style="word-wrap:break-word">
  548. <div class="rightContainerHolder">
  549. <h4>I owe You</h4>
  550. <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  551. <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  552. <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  553. <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  554. <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  555. <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  556. <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  557. <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  558.  
  559.  
  560. <h4>You owe Me</h4>
  561. <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  562. <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  563. <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  564. <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  565. <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  566. <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  567. <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  568. <b>name</b> / / <i>starter/reply</i> / / 00.00 <br>
  569. </div>
  570.  
  571.  
  572. </table>
  573. </td>
  574. </tr>
  575. </table>
  576. <br />
  577. <table bordercolor="black" cellspacing="0" cellpadding="0" width="350" bgcolor="black" border="0">
  578. <tr>
  579. <td class="text" valign="" align="left" width="350" bgcolor="0" height="0" style="word-wrap:break-word">
  580. <span class="orangetext15">
  581. </td>
  582. </tr>
  583. <tr>
  584. <td>
  585. <table bordercolor="0" cellspacing="0" cellpadding="0" width="350" align="" bgcolor="black" border="0">
  586. <td valign="top" align="" width="350" bgcolor="black" style="word-wrap:break-word">
  587.  
  588. <h3>Last Updated: 00.00</h3>
  589.  
  590.  
  591.  
  592.  
  593. </table>
  594. </td>
  595. </tr>
  596. </table>
  597. <br />
  598. <table bordercolor="black" cellspacing="0" cellpadding="0" width="350" bgcolor="black" border="0">
  599. <tr>
  600. <td class="text" valign="" align="left" width="350" bgcolor="0" height="0" style="word-wrap:break-word">
  601. <span class="orangetext15">
  602. </td>
  603. </tr>
  604. <tr>
  605. <td>
  606. <table bordercolor="0" cellspacing="0" cellpadding="0" width="350" align="" bgcolor="black" border="0">
  607. <td valign="top" align="" width="350" bgcolor="black" style="word-wrap:break-word">
  608. <img src="https://i.imgur.com/fcAynq7.png">
  609.  
  610.  
  611. </table>
  612. </td>
  613. </tr>
  614. </table>
  615. <br />
  616. <table bordercolor="black" cellspacing="0" cellpadding="0" width="350" bgcolor="black" border="0">
  617. <tr>
  618. <td class="text" valign="" align="left" width="350" bgcolor="0" height="0" style="word-wrap:break-word">
  619. <span class="orangetext15">
  620. </td>
  621. </tr>
  622. <tr>
  623. <td>
  624. <table bordercolor="0" cellspacing="0" cellpadding="0" width="350" align="" bgcolor="black" border="0">
  625. <td valign="top" align="" width="350" bgcolor="black" style="word-wrap:break-word">
  626.  
  627. <h3>The Love Life</h3>
  628.  
  629.  
  630. </table>
  631. </td>
  632. </tr>
  633. </table>
  634. <br />
  635. <table bordercolor="black" cellspacing="0" cellpadding="0" width="350" bgcolor="black" border="0">
  636. <tr>
  637. <td class="text" valign="" align="left" width="350" bgcolor="0" height="0" style="word-wrap:break-word">
  638. <span class="orangetext15">
  639. </td>
  640. </tr>
  641. <tr>
  642. <td>
  643. <table bordercolor="0" cellspacing="0" cellpadding="0" width="350" align="" bgcolor="black" border="0">
  644. <td valign="top" align="" width="350" bgcolor="black" style="word-wrap:break-word">
  645. <div style="height: 95px; width: 310px; text-align: justify; color: #000; overflow: auto; border: 10px solid #fff;">
  646. <b>status</b> here <br>
  647. <b>to whom</b> <a href="/">link here</a><br>
  648. <b>since when</b> 00.00 <br>
  649. <b>Comments</b>  Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum. Rhoncus volutpat nunc sit quam urna dignissim, libero diam ullamcorper, ac augue vel pellentesque et eget, rhoncus dolor mus faucibus rhoncus rhoncus. Proin sapien, amet ante nulla iusto nec, sit vitae urna et amet, est nostra, justo lacus congue lacus. Vehicula morbi vel justo pharetra libero, porttitor sed mauris fames, nec id sit rutrum donec in gravida, nonummy urna varius, ac ut volutpat mi accumsan fusce etiam.
  650. </div>
  651.  
  652.  
  653.  
  654.  
  655.  
  656.  
  657. <!--interests-->
  658. </td>
  659. </tr>
  660. </table>
  661. </td>
  662. </tr>
  663. </table>
  664. <br />
  665. <table bordercolor="ffffff" cellspacing="0" cellpadding="0" width="450" bgcolor="ffffff" border="0">
  666. <tr>
  667. <td class="text" valign="left" align="left" width="450" bgcolor="ffffff" height="0" style="word-wrap:break-word">
  668. </td>
  669. </tr>
  670. <tr>
  671. <td>
  672. <table bordercolor="000000" cellspacing="0" cellpadding="0" width="450" align="left" bgcolor="ffffff" border="0">
  673. <td valign="top" align="left" width="450" bgcolor="ffffff" style="word-wrap:break-word">
  674.  
  675.  
  676. <div class="image-container">
  677.   <div class="wordsHere">FIRST<br><span style="font-size: 43px; display: inline-block; margin-top: -12px;">Middle Last</span></div>
  678. </div>
  679.  
  680.  
  681.  
  682.  
  683. </td>
  684. </tr>
  685. </table>
  686. </td>
  687. </tr>
  688. </table>
  689. <br />
  690. <table bordercolor="ffffff" cellspacing="0" cellpadding="0" width="450" bgcolor="ffffff" border="0">
  691. <tr>
  692. <td class="text" valign="left" align="left" width="450" bgcolor="ffffff" height="0" style="word-wrap:break-word">
  693. </td>
  694. </tr>
  695. <tr>
  696. <td>
  697. <table bordercolor="000000" cellspacing="0" cellpadding="0" width="450" align="left" bgcolor="ffffff" border="0">
  698. <td valign="top" align="left" width="450" bgcolor="ffffff" style="word-wrap:break-word">
  699. <div style="text-align:center; background: #91322c;">
  700. <a href="/home.php" class="navigationalLinks">Home</a>
  701. <a href="/send_message.php?member_id=" class="navigationalLinks">Message</a>
  702. <a href="/add_comment.php?member_id=" class="navigationalLinks">Commnet</a>
  703. <a href="/status_stream.php?member_id=" class="navigationalLinks">Stream</a>
  704. <a href="/view_member_blog.php?member_id=" class="navigationalLinks">Blog</a>
  705. <a href="/albums.php?member_id=" class="navigationalLinks">Pictures</a>
  706. </div>
  707.  
  708.  
  709.  
  710.  
  711. </td>
  712. </tr>
  713. </table>
  714. </td>
  715. </tr>
  716. </table>
  717. <br />
  718. <table bordercolor="ffffff" cellspacing="0" cellpadding="0" width="450" bgcolor="ffffff" border="0">
  719. <tr>
  720. <td class="text" valign="left" align="left" width="450" bgcolor="ffffff" height="0" style="word-wrap:break-word">
  721. </td>
  722. </tr>
  723. <tr>
  724. <td>
  725. <table bordercolor="000000" cellspacing="0" cellpadding="0" width="450" align="left" bgcolor="ffffff" border="0">
  726. <td valign="top" align="left" width="450" bgcolor="ffffff" style="word-wrap:break-word">
  727. <div id="bioAndBasics">
  728. <div style="display: inline-block; width: 170px;">
  729. <h1>The Story Unfolds</h1>
  730. <div class="bioHolder">
  731. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt interdum odio, ornare condimentum ligula pharetra quis. Aliquam at dignissim nunc, a elementum metus. Integer iaculis eros ante, ut feugiat lorem cursus ut. Integer id enim hendrerit, sollicitudin libero ac, facilisis ligula. Phasellus ac laoreet sem, vitae tempor mi. Nunc ullamcorper consequat leo, at auctor libero hendrerit eu. Aenean nec velit sit amet orci tincidunt sagittis in id tortor. Sed eget dictum nulla, ac vestibulum sapien. Curabitur ac libero ac nunc malesuada maximus vel convallis augue. Proin consequat nunc eget velit vehicula pellentesque.
  732. <br><br>
  733. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt interdum odio, ornare condimentum ligula pharetra quis. Aliquam at dignissim nunc, a elementum metus. Integer iaculis eros ante, ut feugiat lorem cursus ut. Integer id enim hendrerit, sollicitudin libero ac, facilisis ligula. Phasellus ac laoreet sem, vitae tempor mi. Nunc ullamcorper consequat leo, at auctor libero hendrerit eu. Aenean nec velit sit amet orci tincidunt sagittis in id tortor. Sed eget dictum nulla, ac vestibulum sapien. Curabitur ac libero ac nunc malesuada maximus vel convallis augue. Proin consequat nunc eget velit vehicula pellentesque.
  734. </div>
  735. </div>
  736. <div class="righttHover">
  737. <img src="https://i.imgur.com/0nHQFK8.png">
  738. <div class="basicHovers">
  739. <h2>Basic Information</h2>
  740.  
  741. <b>Full Name</b> here<br>
  742. <b>Pronunciation</b> here<br>
  743. <b>Nickname/Alias</b> here<br>
  744. <b>Gender</b> here<br>
  745. <b>Orientation</b> here<br>
  746. <b>Real Age</b> here<br>
  747. <b>Birthday</b> here<br>
  748. <b>Birthplace</b> here<br>
  749. <b>Astrological Sign</b> here<br>
  750. <b>Species</b> here<br>
  751. <b>Ethnicity</b> here<br>
  752. <b>Preferred Hand</b> here<br>
  753. <b>Eye Color</b> here<br>
  754. <b>Hair Color</b> here<br>
  755. <b>Hairstyle</b> here<br>
  756. <b>Skin Tone</b> here<br>
  757. <b>Makeup</b> here<br>
  758. <b>Build</b> here<br>
  759. <b>Height</b> here<br>
  760. <b>Weight</b> here<br>
  761. <b>Shoe Size</b> here<br>
  762. <b>Birthmarks/scars</b> here<br>
  763. <b>Distinguishing Features</b> here<br>
  764. <b>Health</b> here<br>
  765. <b>Allergies</b> here<br>
  766. </div>
  767.  
  768.  
  769. </td>
  770. </tr>
  771. </table>
  772. </td>
  773. </tr>
  774. </table>
  775. <br />
  776. <table bordercolor="ffffff" cellspacing="0" cellpadding="0" width="450" bgcolor="ffffff" border="0">
  777. <tr>
  778. <td class="text" valign="left" align="left" width="450" bgcolor="ffffff" height="0" style="word-wrap:break-word">
  779. </td>
  780. </tr>
  781. <tr>
  782. <td>
  783. <table bordercolor="000000" cellspacing="0" cellpadding="0" width="450" align="left" bgcolor="ffffff" border="0">
  784. <td valign="top" align="left" width="450" bgcolor="ffffff" style="word-wrap:break-word">
  785. <img src="https://i.imgur.com/Ly3SmrU.png">
  786.  
  787.  
  788.  
  789.  
  790.  
  791.  
  792. </td>
  793. </tr>
  794. </table>
  795. </td>
  796. </tr>
  797. </table>
  798. <br />
  799. <table bordercolor="ffffff" cellspacing="0" cellpadding="0" width="450" bgcolor="ffffff" border="0">
  800. <tr>
  801. <td class="text" valign="left" align="left" width="450" bgcolor="ffffff" height="0" style="word-wrap:break-word">
  802. </td>
  803. </tr>
  804. <tr>
  805. <td>
  806. <table bordercolor="000000" cellspacing="0" cellpadding="0" width="450" align="left" bgcolor="ffffff" border="0">
  807. <td valign="top" align="left" width="450" bgcolor="ffffff" style="word-wrap:break-word">
  808. <div id="connectionsContainer">
  809. <h3 style="padding-top:0px;">My Favorite People</h3>
  810. <div class="individualConnection">
  811. <label for="connectionOne" style="background-image:url('https://i.imgur.com/Male2dT.png');">
  812. <div class="wordsHereConnection"><span style="font-size: 43px; display: inline-block; margin-top: -12px;">First Middle Last</span></div>
  813. </label>
  814. <input type="checkbox" id="connectionOne"/>
  815. <p class="hiddentext">
  816. Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum. Rhoncus volutpat nunc sit quam urna dignissim, libero diam ullamcorper, ac augue vel pellentesque et eget, rhoncus dolor mus faucibus rhoncus rhoncus. Proin sapien, amet ante nulla iusto nec, sit vitae urna et amet, est nostra, justo lacus congue lacus. Vehicula morbi vel justo pharetra libero, porttitor sed mauris fames, nec id sit rutrum donec in gravida, nonummy urna varius, ac ut volutpat mi accumsan fusce etiam.
  817. </p>
  818. </div>
  819.  
  820.  
  821. <div class="individualConnection">
  822. <label for="connectionTwo" style="background-image:url('https://i.imgur.com/4ArViaa.png');"><div class="wordsHereConnection"><span style="font-size: 43px; display: inline-block; margin-top: -12px;">First Middle Last</span></div></label>
  823. <input type="checkbox" id="connectionTwo"/>
  824. <p class="hiddentext">
  825. Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum. Rhoncus volutpat nunc sit quam urna dignissim, libero diam ullamcorper, ac augue vel pellentesque et eget, rhoncus dolor mus faucibus rhoncus rhoncus. Proin sapien, amet ante nulla iusto nec, sit vitae urna et amet, est nostra, justo lacus congue lacus. Vehicula morbi vel justo pharetra libero, porttitor sed mauris fames, nec id sit rutrum donec in gravida, nonummy urna varius, ac ut volutpat mi accumsan fusce etiam.
  826. </p>
  827. </div>
  828.  
  829.  
  830. <div class="individualConnection">
  831. <label for="connectionThree" style="background-image:url('https://i.imgur.com/KLMfq6X.png');"><div class="wordsHereConnection"><span style="font-size: 43px; display: inline-block; margin-top: -12px;">First Middle Last</span></div></label>
  832. <input type="checkbox" id="connectionThree"/>
  833. <p class="hiddentext">
  834. Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum. Rhoncus volutpat nunc sit quam urna dignissim, libero diam ullamcorper, ac augue vel pellentesque et eget, rhoncus dolor mus faucibus rhoncus rhoncus. Proin sapien, amet ante nulla iusto nec, sit vitae urna et amet, est nostra, justo lacus congue lacus. Vehicula morbi vel justo pharetra libero, porttitor sed mauris fames, nec id sit rutrum donec in gravida, nonummy urna varius, ac ut volutpat mi accumsan fusce etiam.
  835. </p>
  836. </div>
  837.  
  838. <div class="individualConnection">
  839. <label for="connectionFour" style="background-image:url('https://i.imgur.com/s6SsKug.png');"><div class="wordsHereConnection"><span style="font-size: 43px; display: inline-block; margin-top: -12px;">First Middle Last</span></div></label>
  840. <input type="checkbox" id="connectionFour"/>
  841. <p class="hiddentext">
  842. Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum. Rhoncus volutpat nunc sit quam urna dignissim, libero diam ullamcorper, ac augue vel pellentesque et eget, rhoncus dolor mus faucibus rhoncus rhoncus. Proin sapien, amet ante nulla iusto nec, sit vitae urna et amet, est nostra, justo lacus congue lacus. Vehicula morbi vel justo pharetra libero, porttitor sed mauris fames, nec id sit rutrum donec in gravida, nonummy urna varius, ac ut volutpat mi accumsan fusce etiam.
  843. </p>
  844. </div>
  845.  
  846. <div class="individualConnection">
  847. <label for="connectionFive" style="background-image:url('https://i.imgur.com/NWmVRuK.png');"><div class="wordsHereConnection"><span style="font-size: 43px; display: inline-block; margin-top: -12px;">First Middle Last</span></div></label>
  848. <input type="checkbox" id="connectionFive"/>
  849. <p class="hiddentext">
  850. Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum. Rhoncus volutpat nunc sit quam urna dignissim, libero diam ullamcorper, ac augue vel pellentesque et eget, rhoncus dolor mus faucibus rhoncus rhoncus. Proin sapien, amet ante nulla iusto nec, sit vitae urna et amet, est nostra, justo lacus congue lacus. Vehicula morbi vel justo pharetra libero, porttitor sed mauris fames, nec id sit rutrum donec in gravida, nonummy urna varius, ac ut volutpat mi accumsan fusce etiam.
  851. </p>
  852. </div>
  853.  
  854.  
  855. </div>
Add Comment
Please, Sign In to add comment