Facebook
From Brielle, 2 Years ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 80
  1. About Me:
  2.  
  3. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  4. <style type="text/css">
  5. @import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
  6.  
  7. body {
  8.     background-color:#000000;
  9.     background-repeat:no-repeat;
  10.     background-attachment:fixed;
  11.     margin: 0;
  12.     overflow:auto;
  13.     background-size:cover;
  14. }
  15.  
  16. table, tr, td, li, p, div, .profileInfo td.text {
  17.     font-size: 12px;
  18.     color: #000;
  19.     font-family: 'Playfair Display', sans-serif;
  20. }
  21.  
  22.  
  23.  
  24. .container {
  25.     width:1000px;
  26.     height:600px;
  27.     position:absolute;
  28.     left:0;
  29.     right:0;
  30.     top:0;
  31.     bottom:0;
  32.     overflow:hidden;
  33.     margin:auto;
  34.     color:#fff;
  35.     background-color:#a5a8a4;
  36. }
  37.  
  38. a.credit:link, a.credit:visited {
  39.     background-color: #ffffff;
  40.     color: #2d0707;
  41.     padding: 5px 3px;
  42.     text-align: center;
  43.     text-decoration: none;
  44.     display: inline-block;
  45.     margin-top: 9px;
  46.     font-family: 'Playfair Display', serif;
  47.     font-weight: 100;
  48.     font-size: 11px;
  49.     text-transform: uppercase;
  50.     width: 78px;
  51.     letter-spacing: 2px;
  52.     margin-left: 5px;
  53.     margin-top: 15px;
  54. }
  55.  
  56. .creditHolder{
  57. position:fixed;
  58. bottom:15;
  59. left:15;
  60. }
  61.  
  62. .leftNavigation {
  63.     height: 600px;
  64.     width: 200px;
  65.     display: inline-block;
  66.     vertical-align: top;
  67.     background:#500a0a;
  68. }
  69.  
  70. .bigPicture {
  71.     width: 350px;
  72.     height: 600px;
  73.     display: inline-block;
  74.     vertical-align: top;
  75.     margin-left:-3px;
  76. }
  77.  
  78. .tabsHolderThing {
  79.     width: 447px;
  80.     height: 600px;
  81.     display: inline-block;
  82.     vertical-align: top;
  83. }
  84.  
  85. .topImage {
  86.     width: 160px;
  87.     height: 160px;
  88.     margin-left: 20px;
  89.     margin-top: 20px;
  90.     margin-bottom: 20px;
  91. }
  92.  
  93. .navigationHolder {
  94.     width: 160px;
  95.     height: 288px;
  96.     margin-left: 20px;
  97.     margin-top: 20px;
  98.     margin-bottom: 20px;
  99. }
  100.  
  101. .bottomText {
  102.     width: 160px;
  103.     height: 73px;
  104.     margin-left: 20px;
  105.     margin-top: 20px;
  106.     margin-bottom: 20px;
  107. }
  108.  
  109.  
  110. .chat {
  111.   display: flex;
  112.   flex-direction: column;
  113. }
  114.  
  115. .messages {
  116.   display: flex;
  117.   flex-direction: column;
  118. }
  119.  
  120. .message {
  121.   border-radius: 20px;
  122.   padding: 8px 15px;
  123.   margin-top: 5px;
  124.   margin-bottom: 5px;
  125.   display: inline-block;
  126. }
  127.  
  128. .yours {
  129.   align-items: flex-start;
  130. }
  131.  
  132. .yours .message {
  133.     margin-right: 0%;
  134.     background-color: #000000;
  135.     color:#fff;
  136.     position: relative;
  137. }
  138.  
  139. .yours .message.last:before {
  140.   content: "";
  141.   position: absolute;
  142.   z-index: 0;
  143.   bottom: 0;
  144.   left: -7px;
  145.   height: 20px;
  146.   width: 20px;
  147.   background: #000000;
  148.   border-bottom-right-radius: 15px;
  149. }
  150. .yours .message.last:after {
  151.   content: "";
  152.   position: absolute;
  153.   z-index: 1;
  154.   bottom: 0;
  155.   left: -10px;
  156.   width: 10px;
  157.   height: 20px;
  158.   background: #500a0a;
  159.   border-bottom-right-radius: 10px;
  160. }
  161.  
  162.  
  163. .mine {
  164.   align-items: flex-end;
  165. }
  166.  
  167. .mine .message {
  168.   color: white;
  169.   margin-left: 25%;
  170.   background: #853f1c;
  171.   background-attachment: fixed;
  172.   position: relative;
  173. }
  174.  
  175. .mine .message.last:before {
  176.   content: "";
  177.   position: absolute;
  178.   z-index: 0;
  179.   bottom: 0;
  180.   right: -8px;
  181.   height: 20px;
  182.   width: 20px;
  183.   background: #853f1c;
  184.   background-attachment: fixed;
  185.   border-bottom-left-radius: 15px;
  186. }
  187.  
  188. .mine .message.last:after {
  189.   content: "";
  190.   position: absolute;
  191.   z-index: 1;
  192.   bottom: 0;
  193.   right: -10px;
  194.   width: 10px;
  195.   height: 20px;
  196.   background: #0d0d0d;
  197.   border-bottom-left-radius: 10px;
  198. }
  199.  
  200.  
  201.  
  202.  
  203. a.credit:hover, a.credit:active {
  204. background-color: #131313;
  205. }
  206.  
  207. a.navigationalLinks:link, a.navigationalLinks:visited {
  208.     background-color: #000;
  209.     color: #ffffff;
  210.     padding: 12px 0px;
  211.     text-align: center;
  212.     text-decoration: none;
  213.     display: inline-block;
  214.     width: 160px;
  215.     font-family: Playfair Display;
  216.     font-size: 11px;
  217.     text-transform: uppercase;
  218.     margin-top: 1px;
  219.     margin-bottom: 10px;
  220.     font-weight: 100;
  221. }
  222.  
  223. a.navigationalLinks:hover, a.navigationalLinks:active {
  224.     color:#000000;
  225. }
  226.  
  227. a.connectionLinks:link, a.connectionLinks:visited {
  228.     background-color: #500a0a;
  229.     color: #ffffff;
  230.     padding: 12px 0px;
  231.     text-align: center;
  232.     text-decoration: none;
  233.     display: inline-block;
  234.     width: 202px;
  235.     font-family: Playfair Display;
  236.     font-size: 11px;
  237.     text-transform: uppercase;
  238.     margin-top: 1px;
  239.     margin-bottom: 10px;
  240.     font-weight: 100;
  241. }
  242.  
  243. a.connectionLinks:hover, a.connectionLinks:active {
  244.     color:#000000;
  245. }
  246.  
  247. h4 {
  248.     margin: 0;
  249.     font-size: 10px;
  250.     font-weight: 100;
  251. }
  252.  
  253.  
  254. .tabbed {
  255.     overflow-x: hidden;
  256.     margin: 0px;
  257.     padding-bottom: 16px;
  258.     border-bottom: 1px solid #ccc;
  259. }
  260.  
  261. .tabbed [type="radio"] {
  262.         /* hiding the inputs */
  263.         display: none;
  264. }
  265.  
  266. .tabs {
  267.     display: flex;
  268.     align-items: stretch;
  269.     list-style: none;
  270.     padding: 0;
  271.     margin-top: 20px;
  272. }
  273.  
  274. .tab > label {
  275.     display: block;
  276.     margin-bottom: -1px;
  277.     padding: 6px 24px;
  278.     color: #000000;
  279.     font-size: 12px;
  280.     font-weight: 100;
  281.     text-transform: uppercase;
  282.     letter-spacing: 1px;
  283.     cursor: pointer;
  284.     transition: all 0.3s;
  285. }
  286.  
  287. .tab:hover label {
  288.         border-top-color: #333;
  289.         color: #333;
  290. }
  291.  
  292. .tab-content {
  293.     display: none;
  294.     color: #fff;
  295.     margin-top: -12px;
  296.     height: 492px;
  297.     background: #000000;
  298.     text-align: justify;
  299.     overflow: auto;
  300.     margin: 20px;
  301.     border: 10px solid #000;
  302. }
  303.  
  304. .tab-content h4 {
  305.     background: none;
  306.     text-align: right;
  307.     color: #750000;
  308.     font-family: 'Playfair Display';
  309.     text-transform: uppercase;
  310.     font-size: 17px;
  311.     margin-bottom: 10px;
  312.     padding-right: 5px;
  313. }
  314.  
  315. .rightOccupationAbout h4 {
  316.     background: none;
  317.     text-align: right;
  318.     color: #9a9690;
  319. }
  320.  
  321. /* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
  322. .tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
  323. .tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,
  324. .tabbed [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label,
  325. .tabbed [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label,
  326. .tabbed [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label {
  327. color: #500a0a;
  328.     font-weight: 100;
  329. }
  330.  
  331. .tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
  332. .tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),
  333. .tabbed [type="radio"]:nth-of-type(3):checked ~ .tab-content:nth-of-type(3),
  334. .tabbed [type="radio"]:nth-of-type(4):checked ~ .tab-content:nth-of-type(4) {
  335.         display: block;
  336. }
  337.  
  338. .leftAboutMe {
  339.     width: 209px;
  340.     height: 492px;
  341.     display: inline-block;
  342.     vertical-align: top;
  343.     margin-right: 5px;
  344. }
  345.  
  346. .rightAboutMe {
  347.     width: 168px;
  348.     height: 492px;
  349.     display: inline-block;
  350.     vertical-align: top;
  351. }
  352.  
  353. .bioTopPicture {
  354.     width: 209px;
  355.     height: 150px;
  356.     background: green;
  357.     margin-bottom: 10px;
  358. }
  359.  
  360. .biographyHolder {
  361.     border: 10px solid #000000;
  362.     margin-right: 1px;
  363.     height: 152px;
  364.     overflow: auto;
  365.     text-align: justify;
  366.     color: #fff;
  367. }
  368.  
  369. .bioBottomPicture {
  370.     width: 209px;
  371.     height: 150px;
  372.     background: green;
  373.     margin-top: 10px;
  374. }
  375.  
  376. b {
  377.     width: 148px;
  378.     display: inline-block;
  379.     background: #500a0a;
  380.     color: #cccccc;
  381.     font-weight: bold;
  382.     text-transform: uppercase;
  383.     font-size: 12px;
  384.     vertical-align: top;
  385.     text-align: left;
  386.     margin: 5px;
  387.     padding: 7px 0px;
  388.     border-radius: 14px;
  389.     padding-left: 8px;
  390.     min-height: 33px;
  391. }
  392.  
  393. b span {
  394.     text-transform: initial;
  395.     font-weight: 100;
  396.     margin-left: 4px;
  397. }
  398.  
  399. .basicInformation {
  400.     height: 268px;
  401.     overflow: auto;
  402. }
  403.  
  404.  
  405. .instaHeader {
  406.     font-size: 11px;
  407.     text-align: left;
  408.     background: none;
  409.     margin: 0px;
  410.     vertical-align: top;
  411.     width: 105px;
  412.     color: #5a0806;
  413.     letter-spacing: 3px;
  414.     margin-bottom: 6px;
  415.     margin-left: -7px;
  416. }
  417.  
  418. .instaDescription {
  419.     font-size: 8px;
  420.     margin-left: 0px;
  421.     margin-top: -6px;
  422.     font-family: 'Playfair Display';
  423.     width: 95px;
  424.     text-align: justify;
  425.     color: #ffffff;
  426. }
  427.  
  428.  
  429. .instaProfile {
  430.     width: 38px;
  431.     border-radius: 50%;
  432. }
  433.  
  434. .instagramProfileHolder {
  435.     width: 148px;
  436.     height: 197px;
  437.     border-radius: 35px;
  438.     margin-left: 20px;
  439.     margin-top: 27px;
  440. }
  441.  
  442. .instDescriptHolder {
  443.     width: 97px;
  444.     height: 34px;
  445.     display: inline-block;
  446.     vertical-align: top;
  447.     margin-left: 6px;
  448.     margin-bottom: 31px;
  449. }
  450.  
  451. .leftHolder {
  452.     width: 212px;
  453.     height: 492px;
  454.     display: inline-block;
  455.     vertical-align: top;
  456. }
  457.  
  458. .rightSectionLI {
  459.     width: 165px;
  460.     height: 491px;
  461.     display: inline-block;
  462.     vertical-align: top;
  463.     margin-left: 5px;
  464. }
  465.  
  466. .topImageLI {
  467.     height: 272px;
  468.     background: blue;
  469.     margin-top: 20px;
  470.     margin-left: 20px;
  471.     width: 172px;
  472. }
  473.  
  474. .bottomStatsLI {
  475.     height: 180px;
  476.     margin-top: 20px;
  477.     margin-left: 20px;
  478.     width: 172px;
  479.     text-align: center;
  480. }
  481.  
  482. a:link, a:active, a:visited{
  483.     color:#fff;
  484.     text-decoration:none;
  485. }
  486.  
  487. a:hover{
  488.     color:#000;
  489. }
  490.  
  491. .middleCommentsLI {
  492.     width: 155px;
  493.     margin-top: 10px;
  494.     height: 200px;
  495.     overflow: auto;
  496.     text-align: justify;
  497.     padding-right: 7px;
  498.     color: #fff;
  499. }
  500.  
  501. .threePicturesLI {
  502.     width: 155px;
  503.     margin-top: 10px;
  504.     height: 80px;
  505.     overflow: auto;
  506.     text-align: justify;
  507.     padding-right: 7px;
  508.     margin-bottom: 10px;
  509. }
  510.  
  511. .connectionPhoto {
  512.     background: white;
  513.     width: 152px;
  514.     display: inline-block;
  515.     vertical-align: top;
  516.     height: 235px;
  517.     margin: 5px;
  518. }
  519.  
  520. .connectionWriting {
  521.     width: 204px;
  522.     display: inline-block;
  523.     vertical-align: top;
  524.     height: 235px;
  525.     margin: 5px;
  526.     overflow: auto;
  527.     text-align: justify;
  528.     color: #fff;
  529.     padding-right: 8px;
  530. }
  531.  
  532. .rightFamily {
  533.     width: 190px;
  534.     height: 492px;
  535.     color:#fff;
  536.     display: inline-block;
  537.     vertical-align: top;
  538.     overflow: auto;
  539.     padding-right: 10px;
  540. }
  541.  
  542. .leftImageFamily {
  543.     width: 179px;
  544.     height: 492px;
  545.     background: white;
  546.     display: inline-block;
  547.     vertical-align: top;
  548.     overflow: auto;
  549.     margin-right: 5px;
  550. }
  551.  
  552.  
  553. ::-webkit-scrollbar-thumb {background-color:#c1bdb1;}
  554. ::-webkit-scrollbar {background-color:transparent; width:2px; height:5px;}
  555.  
  556.  
  557.  
  558. .contacttable, .whitetext12, .nametext, .lightbluetext8, .orangetext15, .blacktext12, .btext, .redtext, .redbtext {display:none;height:0px;!important;visibility:hidden} td td td td {border:0px;width:0px;text-align:left;} table, td, tr {padding:0px;width:;background-color:transparent} table table table {padding:1px;height:.01%;width:100%;} table table,table table table table,table,tr,td {height:0px;!important;border:0px;!important} a.text, table div font a, .navbar font, tr td font {visibility:hidden;display:none;height:0px;!important;} #footerWarpper{display: none;} table table table table,table table table table td.text, td.text td.text table{display:none;} td.text table table{display:inline;visibility:visible;} table td table tr td.text table{visibility:hidden;} table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;} table.footer {display: none;} div table a.navbar img {display:none;} div table.navigationBar {margin-bottom:-30px;} .profileInfo {display:none;} .profileInfo td {text-align:left;} .profileInfo a img {position:relative; margin-bottom:-1px; margin-bottom:-2px; width:125px; margin-right:-6px; margin-top:4px; _margin-top:3px; display:block;} .profileInfo td td, .nametext, .msOnlineNow img {display:none;} .profileInfo td td.text {display:table-cell; _display:inline;} .profileInfo .text {font-size:7px; line-height:8px; text-transform:uppercase; font-family:small fonts;} .msOnlineNow {font-family:small fonts; letter-spacing:0px; font-size:7px; line-height:8px; padding:2px; padding-left:0px; text-transform:uppercase; font-weight:normal; display:none; text-decoration:blink; letter-spacing:2px;} .userAlbums {display:none;} div td {display:none;} </span>
  559. </style>
  560.  
  561. Who I'd like to Meet:
  562.  
  563. <html>
  564. <body>
  565. <div class="container">
  566.     <div class="leftNavigation">
  567.         <div class="topImage">
  568.             <img src="https://d.img.vision/brielle/ezgif.com-resize.gif">
  569.         </div>
  570.         <div class="navigationHolder">
  571.            <a href="/home.php" class="navigationalLinks" style="margin-left:0px;">Home</a>
  572. <a href="/send_message.php?member_id=" class="navigationalLinks">Message</a>
  573. <a href="/add_comment.php?member_id=" class="navigationalLinks">Commnet</a>
  574. <a href="/status_stream.php?member_id=" class="navigationalLinks">Stream</a>
  575. <a href="/view_member_blog.php?member_id=" class="navigationalLinks">Blog</a>
  576. <a href="/albums.php?member_id=" class="navigationalLinks">Pictures</a>
  577.         </div>
  578.  
  579. <div class="bottomText">
  580.     <div class="chat">
  581.   <div class="yours messages">
  582.     <div class="message last">
  583.       So you're going out tonight, right? Not like last week.
  584.     </div>
  585.   </div>
  586.   </div>
  587.         </div>
  588.     </div>
  589.     <div class="bigPicture">
  590.         <img src="https://d.img.vision/brielle/IMG_1268.png">
  591.     </div>
  592.     <div class="tabsHolderThing">
  593.        <div class="tabbed">
  594.                 <input type="radio" id="tab1" name="css-tabs" checked>
  595.                 <input type="radio" id="tab2" name="css-tabs">
  596.                 <input type="radio" id="tab3" name="css-tabs">
  597.                 <input type="radio" id="tab4" name="css-tabs">
  598.                
  599.                 <ul class="tabs">
  600.                         <li class="tab"><label for="tab1">Biography</label></li>
  601.                         <li class="tab"><label for="tab2">Love</label></li>
  602.                         <li class="tab"><label for="tab3">Family</label></li>
  603.                         <li class="tab"><label for="tab4">Connections</label></li>
  604.                 </ul>
  605.                
  606.                 <div class="tab-content">
  607.                 <div class="leftAboutMe">
  608.                     <div class="bioTopPicture">
  609.                         <img src="https://d.img.vision/brielle/IMG_1269.png">
  610.                     </div>
  611.                         <div class="biographyHolder">
  612.                             <h4>My Story</h4>
  613.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit. Hac habitasse platea dictumst quisque sagittis. Elementum sagittis vitae et leo duis ut. Massa placerat duis ultricies lacus sed turpis. Purus sit amet luctus venenatis lectus. Feugiat in ante metus dictum at tempor commodo. Vestibulum lectus mauris ultrices eros in cursus. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Non diam phasellus vestibulum lorem.
  614. <br><br>
  615.  
  616. Purus ut faucibus pulvinar elementum integer enim neque volutpat ac. Nunc aliquet bibendum enim facilisis gravida neque convallis a. Pretium lectus quam id leo in vitae turpis massa. In pellentesque massa placerat duis ultricies. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Ipsum dolor sit amet consectetur adipiscing elit. Ut etiam sit amet nisl purus in mollis nunc sed. Non quam lacus suspendisse faucibus interdum posuere. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Amet commodo nulla facilisi nullam vehicula. Velit dignissim sodales ut eu sem. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices.
  617. <br><br>
  618.  
  619. Mauris pellentesque pulvinar pellentesque habitant. Tristique nulla aliquet enim tortor. Et malesuada fames ac turpis egestas maecenas pharetra. Elit at imperdiet dui accumsan sit. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Sagittis id consectetur purus ut faucibus pulvinar. Senectus et netus et malesuada fames ac turpis egestas. Aliquam sem et tortor consequat id. Tincidunt id aliquet risus feugiat in. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Felis donec et odio pellentesque diam volutpat commodo. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Diam in arcu cursus euismod quis viverra nibh cras. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Auctor urna nunc id cursus metus aliquam. Aenean sed adipiscing diam donec. Quam lacus suspendisse faucibus interdum. Id ornare arcu odio ut sem. Vel facilisis volutpat est velit egestas. Risus at ultrices mi tempus.
  620. <br><br>
  621.  
  622. Faucibus ornare suspendisse sed nisi lacus. Semper risus in hendrerit gravida rutrum quisque non tellus. Duis convallis convallis tellus id interdum velit laoreet. Euismod elementum nisi quis eleifend quam adipiscing vitae proin. Mi bibendum neque egestas congue quisque egestas. Consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Integer malesuada nunc vel risus commodo viverra maecenas. Accumsan lacus vel facilisis volutpat est velit egestas dui id. Viverra aliquet eget sit amet. In ornare quam viverra orci sagittis. Massa vitae tortor condimentum lacinia. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Lacus viverra vitae congue eu consequat ac felis donec. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Imperdiet sed euismod nisi porta lorem mollis. Nunc eget lorem dolor sed viverra ipsum nunc aliquet. Ipsum dolor sit amet consectetur. Eget felis eget nunc lobortis mattis aliquam faucibus. Sed risus ultricies tristique nulla aliquet.
  623. <br><br>
  624. Est sit amet facilisis magna etiam tempor orci eu. Velit sed ullamcorper morbi tincidunt. Lorem ipsum dolor sit amet consectetur adipiscing. Nullam ac tortor vitae purus faucibus ornare suspendisse sed. Leo a diam sollicitudin tempor id. Neque aliquam vestibulum morbi blandit. Arcu cursus euismod quis viverra nibh cras. Vitae suscipit tellus mauris a. Sed augue lacus viverra vitae. Eget dolor morbi non arcu risus quis varius quam. Aliquam ut porttitor leo a diam. Faucibus nisl tincidunt eget nullam non nisi est sit. Vulputate sapien nec sagittis aliquam malesuada bibendum. Pellentesque nec nam aliquam sem et tortor. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Elementum facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Nibh mauris cursus mattis molestie a iaculis at erat. Vel eros donec ac odio tempor. Leo urna molestie at elementum eu facilisis sed.
  625.                         </div>
  626.                         <div class="bioBottomPicture">
  627.                             <img src="https://d.img.vision/brielle/IMG_1270.png">
  628.                         </div>
  629.                         </div>
  630.                         <div class="rightAboutMe">
  631.                         <div class="basicInformation">
  632.                                     <b>Full Name <span>First Middle Last</span></b>
  633.         <b>Birthday <span>November 19, 1992.</span></b>
  634.         <b>Location <span>Dublin, Ireland</span></b>
  635.         <b>Occupation <span>Roof Thatcher</span></b>
  636.         <b>Home Town <span>London, England</span></b>
  637.         <b>Gender<span>Female</span></b>
  638.                         </div>
  639.                         <div class="instagram">
  640.                             <div class="instagramProfileHolder">
  641.         <img src="https://d.img.vision/brielle/IMG_1286.png" class="instaProfile ">
  642. <div class="instDescriptHolder">
  643. <h2 class="instaHeader">
  644. @handlehere
  645. </h2>
  646. <blockquote class="instaDescription">
  647. here is where your description will go. Make it a little short, but it can go on two lines.
  648. </blockquote>
  649. </div>
  650. <center>
  651. <img src="https://d.img.vision/brielle/IMG_1285.png" style="width: 40px; height: 40px; margin-top: 9px;">
  652. <img src="https://d.img.vision/brielle/IMG_1282.png" style="width: 40px; height: 40px; margin-left:10px;">
  653. <img src="https://d.img.vision/brielle/IMG_1278.png" style="width: 40px; height: 40px; margin-left:10px;">
  654. <br>
  655. <img src="https://d.img.vision/brielle/IMG_1283.png" style="width: 40px; height: 40px; margin-top:10px;">
  656. <img src="https://d.img.vision/brielle/IMG_1284.png" style="width: 40px; height: 40px; margin-left:10px;">
  657. <img src="https://d.img.vision/brielle/IMG_1281.png" style="width: 40px; height: 40px; margin-left:10px;">
  658. </center>
  659.                         </div>
  660.             </div>
  661.                 </div>
  662.                 </div>
  663.                 <div class="tab-content">
  664.                     <div class="leftHolder">
  665.                         <div class="topImageLI">
  666.                             <img src="https://d.img.vision/brielle/IMG_1272.png">
  667.                         </div>
  668.                         <div class="bottomStatsLI">
  669.                             <b>Status <span>here.</span></b>
  670.                             <b>Since <span>here.</span></b>
  671.                             <b>To Whom <span><a href="/">here</a>.</span></b>
  672.                         </div>
  673.                     </div>
  674.                     <div class="rightSectionLI">
  675.                    
  676.                     <div class="middleCommentsLI">
  677.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit. Hac habitasse platea dictumst quisque sagittis. Elementum sagittis vitae et leo duis ut. Massa placerat duis ultricies lacus sed turpis. Purus sit amet luctus venenatis lectus. Feugiat in ante metus dictum at tempor commodo. Vestibulum lectus mauris ultrices eros in cursus. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Non diam phasellus vestibulum lorem.
  678.                     </div>
  679.                         <div class="threePicturesLI">
  680.                             <img src="https://d.img.vision/brielle/IMG_1273.png">
  681.                         </div>
  682.                         <div class="threePicturesLI">
  683.                             <img src="https://d.img.vision/brielle/IMG_1274.png">
  684.                         </div>
  685.                         <div class="threePicturesLI">
  686.                             <img src="https://d.img.vision/brielle/IMG_1276.png">
  687.                         </div>
  688.                        
  689.                     </div>
  690.    
  691.                 </div>
  692.                
  693.                 <div class="tab-content">
  694.                     <div class="leftImageFamily">
  695.                         <img src="https://d.img.vision/brielle/IMG_1287.png">
  696.                     </div>
  697.                     <div class="rightFamily">
  698.                          <strong>family name</strong> / / <i>family connection</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  699.                         <br><br>
  700.                          <strong>family name</strong> / / <i>family connection</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  701.                         <br><br>
  702.                          <strong>family name</strong> / / <i>family connection</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  703.                         <br><br>
  704.                          <strong>family name</strong> / / <i>family connection</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  705.                         <br><br>
  706.                          <strong>family name</strong> / / <i>family connection</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  707.                         <br><br>
  708.                          <strong>family name</strong> / / <i>family connection</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  709.                         <br><br>
  710.                          <strong>family name</strong> / / <i>family connection</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  711.                         <br><br>
  712.                          <strong>family name</strong> / / <i>family connection</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  713.                         <br><br>
  714.                          <strong>family name</strong> / / <i>family connection</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  715.                         <br><br>
  716.                          <strong>family name</strong> / / <i>family connection</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  717.                         <br><br>
  718.                          <strong>family name</strong> / / <i>family connection</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  719.                         <br><br>
  720.                          <strong>family name</strong> / / <i>family connection</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  721.                         <br><br>
  722.                     </div>
  723.    
  724.                 </div>
  725.                 <div class="tab-content">
  726.                 <div class="connectionPhoto">
  727.                         <img src="https://d.img.vision/brielle/IMG_1289.png">
  728.                     </div>
  729.                     <div class="connectionWriting">
  730.                         <a href="/" class="connectionLinks">first middle last</a>
  731.                         <a href="/" class="connectionLinks">first middle last</a>
  732.                         <a href="/" class="connectionLinks">first middle last</a>
  733.                         <a href="/" class="connectionLinks">first middle last</a>
  734.                         <a href="/" class="connectionLinks">first middle last</a>
  735.                         <a href="/" class="connectionLinks">first middle last</a>
  736.                         <a href="/" class="connectionLinks">first middle last</a>
  737.                         <a href="/" class="connectionLinks">first middle last</a>
  738.                         <a href="/" class="connectionLinks">first middle last</a>
  739.                         <a href="/" class="connectionLinks">first middle last</a>
  740.                         <a href="/" class="connectionLinks">first middle last</a>
  741.                         <a href="/" class="connectionLinks">first middle last</a>
  742.                         <a href="/" class="connectionLinks">first middle last</a>
  743.                         <a href="/" class="connectionLinks">first middle last</a>
  744.                         <a href="/" class="connectionLinks">first middle last</a>
  745.                         <a href="/" class="connectionLinks">first middle last</a>
  746.                         <a href="/" class="connectionLinks">first middle last</a>
  747.                     </div>
  748.                     <div class="connectionWriting">
  749.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  750.                         <br><br>
  751.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  752.                         <br><br>
  753.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  754.                         <br><br>
  755.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  756.                         <br><br>
  757.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  758.                         <br><br>
  759.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  760.                         <br><br>
  761.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  762.                         <br><br>
  763.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  764.                         <br><br>
  765.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  766.                         <br><br>
  767.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  768.                         <br><br>
  769.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  770.                         <br><br>
  771.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  772.                         <br><br>
  773.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  774.                         <br><br>
  775.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  776.                         <br><br>
  777.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  778.                         <br><br>
  779.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  780.                         <br><br>
  781.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  782.                         <br><br>
  783.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  784.                         <br><br>
  785.                         <strong>connection name</strong> / / <i>connection title</i> / / Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit.
  786.                         <br><br>
  787.                     </div>
  788.                     <div class="connectionPhoto">
  789.                         <img src="https://d.img.vision/brielle/IMG_1290.png">
  790.                     </div>
  791.    
  792.                 </div>
  793.         </div>
  794. </div>
  795.  
  796.     </div>
  797. </div>
  798.  
  799.  
  800. </div>
  801. <div class="creditHolder"><a href="/lilac" class="credit">credit</a></div>
  802. </body>
  803. </html>

Replies to Nic Layout rss

Title Name Language When
Re: Nic Layout Sloppy Peafowl text 2 Years ago.