Facebook
From antichrist, 2 Years ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 125
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  7.     <style>
  8.         .wrapper {
  9.             display: flex;
  10.         }
  11.  
  12.         body {
  13.             margin: 0;
  14.             padding: 0;
  15.             overflow:hidden;
  16.         }
  17.  
  18.         .nav {
  19.             height: 100vh;
  20.         }
  21.  
  22.         .left {
  23.             width: 10rem;
  24.             background-color: orange;
  25.         }
  26.  
  27.         .right {
  28.             width: 5rem;
  29.             background-color: pink;
  30.         }
  31.  
  32.         .body-wrapper {
  33.             overflow: scroll;
  34.             max-width: calc(100vw - 240px);
  35.             max-height: 100vh;
  36.         }
  37.  
  38.         .top-header {
  39.             height: 5rem;
  40.             background-color: red;
  41.         }
  42.     </style>
  43. </head>
  44.  
  45. <body>
  46. <div class="wrapper">
  47.     <section class="left nav">
  48.         left nav
  49.     </section>
  50.     <section class="body-wrapper">
  51.         <div class="top-header">
  52.             header
  53.         </div>
  54.         <div class="content">
  55.             <table>
  56.                 <tr>
  57.                     <th>Company</th>
  58.                     <th>Contact</th>
  59.                     <th>Country</th>
  60.                     <th>Company</th>
  61.                     <th>Contact</th>
  62.                     <th>Country</th>
  63.                     <th>Company</th>
  64.                     <th>Contact</th>
  65.                     <th>Country</th>
  66.                     <th>Company</th>
  67.                     <th>Contact</th>
  68.                     <th>Country</th>
  69.                     <th>Contact</th>
  70.                     <th>Country</th>
  71.                     <th>Company</th>
  72.                     <th>Contact</th>
  73.                     <th>Country</th>
  74.                     <th>Contact</th>
  75.                     <th>Country</th>
  76.                     <th>Company</th>
  77.                     <th>Contact</th>
  78.                     <th>Country</th>
  79.                 </tr>
  80.                 <tr>
  81.                     <td>Alfreds Futterkiste</td>
  82.                     <td>Maria Anders</td>
  83.                     <td>Germany</td>
  84.                     <td>Alfreds Futterkiste</td>
  85.                     <td>Maria Anders</td>
  86.                     <td>Germany</td>
  87.                     <td>Alfreds Futterkiste</td>
  88.                     <td>Maria Anders</td>
  89.                     <td>Germany</td>
  90.                     <td>Alfreds Futterkiste</td>
  91.                     <td>Maria Anders</td>
  92.                     <td>Germany</td>
  93.                     <td>Alfreds Futterkiste</td>
  94.                     <td>Maria Anders</td>
  95.                     <td>Germany</td>
  96.                     <td>Alfreds Futterkiste</td>
  97.                     <td>Maria Anders</td>
  98.                     <td>Germany</td>
  99.                     <td>Alfreds Futterkiste</td>
  100.                     <td>Maria Anders</td>
  101.                     <td>Germany</td>
  102.                     <td>Alfreds Futterkiste</td>
  103.                 </tr>
  104.                 <tr>
  105.                     <td>Centro comercial Moctezuma</td>
  106.                     <td>Francisco Chang</td>
  107.                     <td>Mexico</td>
  108.                     <td>Centro comercial Moctezuma</td>
  109.                     <td>Francisco Chang</td>
  110.                     <td>Mexico</td>
  111.                     <td>Centro comercial Moctezuma</td>
  112.                     <td>Francisco Chang</td>
  113.                     <td>Mexico</td>
  114.                     <td>Centro comercial Moctezuma</td>
  115.                     <td>Francisco Chang</td>
  116.                     <td>Centro comercial Moctezuma</td>
  117.                     <td>Francisco Chang</td>
  118.                     <td>Mexico</td>
  119.                     <td>Centro comercial Moctezuma</td>
  120.                     <td>Francisco Chang</td>
  121.                     <td>Mexico</td>
  122.                     <td>Centro comercial Moctezuma</td>
  123.                     <td>Francisco Chang</td>
  124.                     <td>Mexico</td>
  125.                     <td>Centro comercial Moctezuma</td>
  126.                     <td>Francisco Chang</td>
  127.                 </tr>
  128.  
  129.                 <p>
  130.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor ipsum eu lacus consequat congue quis vel massa. Morbi eu posuere quam, eget porttitor risus. Curabitur vehicula tortor ut est mollis, id vulputate tortor varius. Quisque quis nisi vitae nisi malesuada placerat eu vitae lorem. Maecenas placerat sodales diam. Fusce volutpat neque vitae lorem aliquet, nec vulputate odio varius. Quisque in pharetra dolor. Nulla ullamcorper auctor dui eget suscipit. Aliquam nec neque ut felis interdum hendrerit ac at dui. Nam nec ultricies felis. Integer laoreet neque id dignissim euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque id massa eleifend fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eu ullamcorper sem, consequat interdum enim. Praesent finibus nulla quis augue fringilla, ac tristique risus interdum.
  131.  
  132.                     Aenean posuere luctus efficitur. Etiam blandit efficitur ex vitae iaculis. Donec consectetur tempor odio blandit placerat. Cras et pulvinar dolor. Aliquam erat volutpat. Integer placerat magna at viverra semper. Aliquam ut diam eu ante dictum porttitor ac eget ante. Quisque dignissim venenatis ligula ut elementum. Fusce imperdiet ornare porttitor.
  133.  
  134.                     In non tortor at dolor consequat vulputate ac maximus quam. Vivamus id velit sem. Pellentesque posuere orci eu sapien fermentum, id scelerisque ex ullamcorper. Aenean fermentum tempor sem id commodo. Phasellus at diam non quam varius accumsan. Nulla id neque odio. Donec in bibendum mauris. Fusce elit neque, tempor efficitur tristique et, lobortis vitae arcu. Vivamus ut turpis dapibus magna mollis faucibus. Quisque nec ornare eros, at interdum lacus. Nullam lobortis, dolor et aliquet posuere, mauris risus posuere sapien, ac hendrerit erat neque porta velit. Curabitur maximus erat quis libero eleifend aliquet. Integer accumsan quam eu pharetra euismod. Aenean tempus odio in sollicitudin fermentum. Suspendisse mollis, arcu nec ultrices porttitor, elit felis faucibus ipsum, a efficitur mi orci quis nibh. Nam tempus dui sapien, in sollicitudin metus consectetur ut.
  135.  
  136.                     Duis sed velit tincidunt, placerat felis a, semper erat. Suspendisse cursus, arcu ut venenatis euismod, enim eros suscipit libero, id efficitur mauris lacus sit amet nisi. Pellentesque aliquet arcu eu nibh fringilla sollicitudin. Nam pharetra, velit at consectetur posuere, turpis metus egestas mi, eu molestie ipsum lorem nec urna. Vivamus interdum blandit felis, eu facilisis urna sagittis in. Fusce vel volutpat purus. Integer commodo mauris sit amet neque imperdiet, vitae posuere arcu aliquam. Integer rutrum, tortor eu eleifend sagittis, felis elit mollis libero, in euismod nunc libero nec mauris. Phasellus dolor ligula, commodo lacinia faucibus ac, ultrices id arcu. Ut eget erat egestas, rhoncus quam non, hendrerit nisl.
  137.  
  138.                     Sed sodales consequat ex, et pharetra purus eleifend eget. Mauris egestas ligula lorem. Quisque cursus faucibus placerat. Cras non efficitur lorem. Nulla arcu urna, finibus at leo in, tristique tristique ipsum. Praesent eu maximus ligula. Maecenas vulputate non quam id aliquet.
  139.  
  140.                     Curabitur eu suscipit enim. Cras lacinia egestas leo, in dictum mauris condimentum at. Proin interdum condimentum mauris dignissim commodo. Nam vel facilisis augue, quis auctor quam. Curabitur vel nulla at augue porta eleifend id non nunc. Duis tempor elit tortor, in porta ex viverra ut. Sed aliquet, neque quis tincidunt dignissim, lectus quam finibus libero, at blandit leo felis vel augue. Ut luctus ipsum vitae mauris tristique lobortis. Nunc metus ante, commodo id risus eget, eleifend condimentum ligula. Vestibulum et turpis aliquet, suscipit urna mollis, congue lectus. Donec sed aliquam ex, eu condimentum nisl. Nunc ut scelerisque mauris. Morbi ultrices cursus diam, non finibus sapien. Maecenas auctor quam et malesuada tempus. In viverra enim interdum dui efficitur, non interdum risus ultricies.
  141.  
  142.                     Duis volutpat magna non odio porta fermentum. Aenean ac purus tempus tortor tristique pellentesque. Maecenas eu arcu ut neque interdum fringilla. Mauris quis metus ac neque blandit iaculis sit amet ac arcu. Nulla eleifend dictum dignissim. Sed quis libero eget dolor consectetur eleifend quis in elit. Phasellus ut libero augue. In id pellentesque sem, sit amet pharetra sapien. Nunc quis diam bibendum lacus cursus venenatis. Curabitur accumsan volutpat pulvinar. In at velit dui. Vestibulum dapibus porttitor ex, quis commodo orci faucibus ac. Mauris varius suscipit massa in interdum. Donec metus nulla, fermentum in sagittis a, semper in elit.
  143.  
  144.                     Suspendisse non pulvinar ex. Pellentesque lectus nibh, convallis in urna a, molestie pulvinar lacus. Phasellus lacinia facilisis sollicitudin. Nullam eleifend, augue eu maximus imperdiet, eros massa interdum ligula, non mattis risus dui ac ipsum. In vel venenatis nisl. Nunc id egestas erat, eu sodales leo. Fusce molestie metus non dolor elementum cursus. Curabitur non efficitur eros. Phasellus dictum eget elit eget porta. Proin tincidunt lacinia finibus. Donec aliquet pharetra erat et rutrum.
  145.  
  146.                     Sed leo est, feugiat in lorem volutpat, rutrum finibus ex. Vestibulum ultricies condimentum hendrerit. Vestibulum sit amet pharetra massa. Ut mauris ligula, ullamcorper ut ante dignissim, blandit pretium metus. Praesent gravida mollis libero eleifend maximus. Nullam convallis nisi eu egestas bibendum. Vestibulum ultricies ligula quis mauris vehicula aliquet. Nam libero justo, aliquam id libero at, ullamcorper imperdiet ipsum.
  147.  
  148.                     Sed ut urna enim. Etiam gravida dolor nec lorem consectetur, id tincidunt nibh tempor. Donec nunc odio, sagittis quis fermentum et, maximus at augue. Vestibulum metus felis, vehicula sit amet dolor dictum, sagittis pharetra lectus. Maecenas diam massa, accumsan ac tempus quis, dignissim at dolor. Duis vestibulum quam quis enim egestas convallis. Quisque vehicula vel libero ac convallis. Integer laoreet sem mauris, nec venenatis nulla elementum id. Sed ultrices congue magna quis imperdiet. Sed id ultricies arcu.
  149.  
  150.                     Morbi at convallis metus. Quisque interdum, nunc sit amet vulputate aliquet, sapien orci sollicitudin metus, sit amet iaculis ipsum lorem ac elit. Mauris risus augue, tristique in varius id, iaculis eget enim. Mauris fermentum gravida sem vel porta. Sed imperdiet nisl at sapien congue rhoncus. In lacus nisl, efficitur eget ligula vitae, feugiat maximus leo. Morbi placerat dui eget nisi sagittis, ut sagittis est efficitur. Vivamus a diam metus. Nam aliquam tincidunt magna, vel tempus metus consequat id. Integer porttitor diam ante, in pretium sem rutrum eu. Vestibulum in posuere mauris.
  151.  
  152.                     Donec vehicula maximus enim, in suscipit orci faucibus id. Maecenas eu lacus sed felis vehicula dapibus. Ut tincidunt, nibh efficitur iaculis vehicula, turpis sapien tristique quam, eu rutrum mi sapien nec odio. Nam sed lacus sed nunc consectetur euismod. Donec faucibus commodo scelerisque. Nullam vitae ex euismod, efficitur metus eget, dictum enim. Mauris vitae commodo lacus. Aliquam mattis, velit a rutrum consequat, mi nisl malesuada nunc, non accumsan magna nibh vel nulla. Donec elementum dictum mauris, vel congue sapien. Donec varius leo et ex malesuada tincidunt. Vivamus molestie est ac nibh lobortis fringilla. Cras consectetur, eros a laoreet bibendum, nibh lorem tincidunt nisi, sit amet laoreet dui lacus vitae tellus. Morbi ac quam gravida, suscipit mi ut, facilisis dui. Nunc eget urna et arcu imperdiet posuere.
  153.  
  154.                     Duis felis augue, euismod et porta at, auctor non mauris. Phasellus sed tristique diam, vel maximus libero. Donec fermentum vestibulum molestie. Sed interdum velit libero, nec posuere felis rhoncus at. Curabitur pharetra lectus magna, et condimentum nisi hendrerit in. Vestibulum vel blandit nulla, non vulputate velit. Morbi elementum lorem auctor nulla hendrerit suscipit. Donec consectetur eget magna ut posuere.
  155.  
  156.                     Mauris tortor velit, sodales ac vestibulum tempor, consequat eget est. Sed sagittis sit amet nibh sed facilisis. Phasellus porttitor ultrices enim, id tincidunt quam bibendum id. Maecenas interdum congue luctus. Aliquam vitae magna commodo lectus feugiat aliquet. In placerat commodo quam, iaculis semper orci posuere non. Ut sit amet iaculis lectus, quis faucibus massa. Ut facilisis finibus magna non volutpat. Sed blandit interdum arcu, vel gravida tortor finibus mattis. Sed viverra augue in luctus aliquam.
  157.  
  158.                     Vestibulum felis libero, luctus non aliquam sed, suscipit vitae ipsum. Phasellus a dui ut mauris tempus laoreet vel sit amet lectus. Duis fringilla nisl sit amet dui aliquet vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam varius augue mauris, a efficitur lorem dapibus ac. Vestibulum euismod lacinia ipsum ut dictum. Mauris bibendum vel erat ac volutpat. Aliquam tristique, turpis sollicitudin commodo ultricies, ante dolor mattis urna, quis rutrum augue ante pretium erat. Nunc enim felis, imperdiet a volutpat rutrum, porttitor sed eros. Nunc dignissim dignissim neque. Fusce viverra enim at mauris dictum, vel gravida leo malesuada. Nullam at aliquam enim. Sed id justo facilisis, fermentum risus sodales, fermentum nibh. Ut scelerisque lobortis turpis.
  159.  
  160.                     Pellentesque urna lorem, condimentum nec lacus sit amet, luctus euismod nibh. Aenean viverra quis arcu ut ultrices. Nam id ornare diam. Nullam neque dolor, dapibus sit amet volutpat ut, sodales et nunc. Phasellus at dictum turpis, sit amet imperdiet neque. Sed sem felis, semper eu sagittis ac, vestibulum et magna. Suspendisse magna ante, aliquet sit amet luctus pharetra, lacinia sit amet purus. Donec vestibulum leo in elit imperdiet, sit amet dictum turpis ullamcorper. Suspendisse tempus venenatis purus, sit amet faucibus sem rutrum luctus. Nulla ipsum lacus, facilisis ut pharetra at, vehicula vehicula neque. Maecenas placerat libero non felis vestibulum, quis laoreet nulla ornare. Vivamus semper velit eu metus sollicitudin porttitor. Morbi tortor mauris, ultricies vitae dui in, tempor elementum quam.
  161.  
  162.                     Nulla vulputate convallis sapien, elementum vehicula dolor accumsan sed. Curabitur porttitor, velit id rhoncus pretium, turpis nisi dignissim urna, id commodo velit nibh varius magna. Integer eget blandit enim, et porta urna. Nulla non diam nec lorem malesuada euismod in quis turpis. Nam suscipit, odio ut tincidunt iaculis, ipsum magna lacinia erat, a hendrerit risus ex eu tellus. Quisque tempus, justo eu dapibus ullamcorper, lorem purus mattis quam, ac egestas risus metus ac augue. Sed laoreet rutrum sollicitudin.
  163.  
  164.                     Proin dignissim diam magna, sed sagittis purus consectetur eget. Nunc eu risus interdum, ultricies odio a, pretium massa. Cras sed tempus erat, et mollis metus. Donec lobortis ex quis erat ultricies luctus. Nullam pellentesque euismod pellentesque. Quisque leo eros, fringilla non turpis a, facilisis aliquam mauris. Morbi dictum et magna at fermentum. Praesent et diam ac nulla porta gravida. Nam non lorem eget risus auctor imperdiet pharetra vel sapien. Quisque commodo neque mi, non facilisis eros sodales non. Mauris ac metus sem.
  165.  
  166.                     Cras scelerisque ex purus, sit amet interdum urna condimentum a. Integer malesuada lacus nec felis maximus mattis. Etiam convallis, ligula eget elementum fermentum, libero augue facilisis metus, vel tristique lorem arcu eget erat. Proin convallis est nec cursus hendrerit. Nullam dapibus euismod neque, vel blandit diam consectetur vel. In vel metus vitae eros consequat ornare et in nibh. Donec aliquet sem eu nisi placerat vulputate. Sed ac urna vel augue commodo sagittis. Integer urna dolor, venenatis in nibh convallis, hendrerit mollis felis. Sed euismod molestie pharetra. Nulla cursus leo eget efficitur iaculis. Morbi rhoncus nisl ut lorem semper, ac lobortis augue congue.
  167.  
  168.                     Aenean pellentesque maximus eros ut pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi orci tellus, posuere non tempor non, vulputate nec nisl. Nulla consectetur tortor risus, nec scelerisque urna porttitor cursus. Donec mauris leo, lobortis sit amet velit in, interdum commodo nisi. Ut dui lectus, dictum sed imperdiet vel, pellentesque eget purus. Integer a sapien ac lectus finibus bibendum quis a dui. Donec in ipsum quis odio pretium bibendum. Donec lobortis enim vel turpis lobortis rutrum.
  169.                 </p>
  170.             </table>
  171.         </div>
  172.     </section>
  173.     <section class="right nav">
  174.         right nav
  175.     </section>
  176. </div>
  177.  
  178. </body>
  179.  
  180. </html>