Advertisement
mebuckner

Shut Up

Sep 3rd, 2020 (edited)
344
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.58 KB | None | 0 0
  1. This layout was made by Edits By M (/1631904). Do not remove any credit, claim this layout as your own, or use this on an account that has not asked for it. Thank you SO much for wanting to use this layout. You are wonderful.
  2.  
  3. <!--about me-->
  4. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  5. <style type="text/css">
  6.     @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
  7.  
  8. body {
  9.     background-color:#232426;
  10.     background-repeat:no-repeat;
  11.     background-attachment:fixed;
  12.     margin: 0;
  13.     overflow:auto;
  14.     background-image:url('https://i.imgur.com/r9f7xGu.png');
  15.     background-size:cover;
  16. }
  17.  
  18. table, tr, td, li, p, div, .profileInfo td.text {
  19.     font-size: 10px;
  20.     color: #717171;
  21.     font-family: 'Poppins', sans-serif;
  22. }
  23.  
  24.  
  25. .container {
  26.     width:500px;
  27.     height:393px;
  28.     position:absolute;
  29.     left:0;
  30.     right:0;
  31.     top:0;
  32.     bottom:0;
  33.     overflow:hidden;
  34.     margin:auto;
  35.     color:#fff;
  36.     background-color:#857b77;
  37.     font-family: 'Abel', sans-serif;
  38.     border: double 10px #000;
  39. }
  40.  
  41. #aboutMe{
  42.     display: none;
  43. }
  44.  
  45. #aboutMe:target{
  46.     display: block;
  47.     position: absolute;
  48.     width: 500px;
  49.     height: 250px;
  50.     margin-top: -250px;
  51. }
  52.  
  53.  
  54. #loveLife{
  55.     display: none;
  56. }
  57.  
  58. #loveLife:target{
  59.     display: block;
  60.     position: absolute;
  61.     width: 500px;
  62.     height: 250px;
  63.     margin-top: -250px;
  64. }
  65.  
  66. #friends{
  67.     display: none;
  68. }
  69.  
  70. #friends:target{
  71.     display: block;
  72.     position: absolute;
  73.     width: 500px;
  74.     height: 250px;
  75.     margin-top: -250px;
  76. }
  77.  
  78.  
  79. #owesList{
  80.     display: none;
  81. }
  82.  
  83. #owesList:target{
  84.     display: block;
  85.     position: absolute;
  86.     width: 500px;
  87.     height: 250px;
  88.     margin-top: -250px;
  89. }
  90.  
  91. .leftPopupContainer{
  92.     background:#0f0f0f;
  93.     width:215px;
  94.     height:210px;
  95.     margin-top:10px;
  96.     margin-left:10px;
  97.     display: inline-block;
  98.     vertical-align: top;
  99.     font-family: Georgia;
  100.     font-size:12px;
  101.     color:#fff;
  102.     padding:10px;
  103.     text-align: justify;
  104.     overflow: auto;
  105. }
  106.  
  107. .rightPopupContainer{
  108.     background:#0f0f0f;
  109.     width:215px;
  110.     height:210px;
  111.     margin-top:10px;
  112.     margin-left:7px;
  113.     display: inline-block;
  114.     vertical-align: top;
  115.     font-family: Georgia;
  116.     font-size:12px;
  117.     color:#fff;
  118.     padding:10px;
  119.     text-align: justify;
  120.     overflow: auto;
  121. }
  122.  
  123. h1{
  124.     color: #0f0f0f;
  125.     font-family: 'Montserrat', sans-serif;
  126.     font-size: 49px;
  127.     margin: 0;
  128.     width: 500px;
  129.     text-align: center;
  130.     letter-spacing: 11px;
  131.     text-transform: uppercase;
  132. }
  133.  
  134. h2{
  135.     color: #484848;
  136.     font-family: 'Montserrat', sans-serif;
  137.     width: 500px;
  138.     text-align: center;
  139.     margin: 0;
  140.     text-transform: uppercase;
  141.     font-size: 16px;
  142.     letter-spacing: 2px;
  143.     margin-top: -6px;
  144. }
  145.  
  146. h3{
  147.     color: #fff;
  148.     font-family: 'Montserrat', sans-serif;
  149.     width: 213px;
  150.     text-align: center;
  151.     margin: 0;
  152.     text-transform: uppercase;
  153.     font-size: 16px;
  154.     letter-spacing: 2px;
  155.     margin-top: -6px;
  156.     background-color: #484848;
  157.     padding-top: 5px;
  158.     padding-bottom: 5px;
  159.     margin-bottom: 6px;
  160.     margin-top:6px;
  161. }
  162.  
  163. b{
  164.     color: #ffffff;
  165.     background: #484848;
  166.     padding: 5px;
  167.     line-height: 33px;
  168. }
  169.  
  170. a.navigationLinks:link, a.navigationLinks:visited {
  171.     background-color: #857a77;
  172.     color: #0f0f0f;
  173.     padding: 5px 15px;
  174.     text-align: center;
  175.     text-decoration: none;
  176.     display: inline-block;
  177.     font-family: georgia;
  178.     text-transform: uppercase;
  179. }
  180.  
  181. a.navigationLinks:hover, a.navigationLinks:active {
  182.     color:#484848;
  183. }
  184.  
  185. a.popupLinks:link, a.popupLinks:visited {
  186.   background-color: #0f0f0f;
  187.   color: #857a77;
  188.   padding: 14px 25px;
  189.   text-align: center;
  190.   text-decoration: none;
  191.   display: inline-block;
  192.   width: 67px;
  193.   font-family: Georgia;
  194.   font-size: 10px;
  195.   text-transform: uppercase;
  196.   letter-spacing: 2px;
  197. }
  198.  
  199. a.popupLinks:hover, a.popupLinks:active {
  200.   background-color: #857a77;
  201.   color:#0f0f0f;
  202. }
  203.  
  204. ::-webkit-scrollbar-thumb:vertical {
  205.     height:12px;
  206.     background:#0f0f0f;
  207.     border-top:10px solid #857a77;
  208.     border-bottom:10px solid #857a77;
  209. }
  210.  
  211. ::-webkit-scrollbar-thumb:horizontal {
  212.     background-color:#0f0f0f;
  213. }
  214.  
  215. ::-webkit-scrollbar {
  216.     width:5px;
  217.     height:7px;
  218. }
  219.  
  220.  
  221. .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>
  222. </style>
  223.  
  224.  
  225.  
  226. <!--like to meet-->
  227. <html>
  228.     <body>
  229.         <div class="container">
  230.             <h1>Princess Mia</h1>
  231.             <h2>Amelia Mignonette Thermopolis Renaldi</h2>
  232.             <center>
  233.                 <a href="/home.php" class="navigationLinks" style="margin-left:0px;">home</a>
  234.                 <a href="/send_message.php?member_id=" class="navigationLinks">msg</a>
  235.                 <a href="/add_comment.php?member_id=" class="navigationLinks">cmt</a>
  236.                 <a href="/status_stream.php?member_id=" class="navigationLinks">strm</a>
  237.                 <a href="/view_member_blog.php?member_id=" class="navigationLinks">blog</a>
  238.                 <a href="/albums.php?member_id=" class="navigationLinks">pics</a>
  239.                 <a href="/1631904" class="navigationLinks">credit</a>
  240.             </center>
  241.             <img src="https://i.imgur.com/2Y92jCh.png">
  242.             <div id="aboutMe">
  243.                 <div class="leftPopupContainer">
  244.                     <h3>I'm a princess? shut up.</h3>
  245.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur egestas ultricies. Aliquam sed interdum ligula. Fusce sit amet eros feugiat, scelerisque ex congue, ullamcorper risus. Quisque quis tempor nisl, ut ornare libero. Nam tristique dapibus sapien, eget rhoncus turpis dignissim et. Fusce placerat leo ac nulla tristique faucibus. Aliquam auctor egestas pharetra. Pellentesque sed tellus rhoncus, dictum elit id, venenatis risus. Sed non purus vitae turpis consequat pellentesque quis non tellus. Fusce dapibus rhoncus lorem eu ultricies.
  246.                     <br><br>
  247.                     Pellentesque quis efficitur nunc. Proin non augue non sem pulvinar congue a vel ipsum. Vivamus eu pellentesque mi, ut consectetur lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi accumsan leo nec ipsum pharetra, sagittis ullamcorper risus auctor. Integer eu magna id tortor placerat molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed molestie eros ac mauris ultricies, ac blandit magna tempor. Aenean venenatis molestie eros. Sed sit amet tellus eget elit sodales gravida. Nulla facilisi. Suspendisse tempor tellus quis lectus blandit, ut ultrices augue vulputate. Phasellus condimentum, turpis id bibendum accumsan, dui risus condimentum diam, vel suscipit tellus nisi in arcu. Duis elementum dui nisl, vel vestibulum neque efficitur sollicitudin. Pellentesque quis orci convallis, facilisis mauris quis, imperdiet sapien. Cras vel lobortis arcu.
  248.                     <br><br>
  249.                     In hac habitasse platea dictumst. Fusce quis varius tellus. Morbi nec felis et est ultrices placerat vel non turpis. Praesent sit amet dolor quis lacus sollicitudin cursus. Quisque elementum leo non enim condimentum, eu pharetra risus accumsan. Pellentesque convallis semper ante, eu imperdiet est convallis sit amet. Duis congue rhoncus tortor, eu varius ex cursus nec. Sed tempus neque arcu, id convallis ipsum tincidunt vel. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  250.                     <br><br>
  251.                     Nam id magna eros. Vestibulum non sapien ex. Vestibulum blandit nibh nibh, sed sodales dui scelerisque sit amet. Nunc nec sapien sed ante laoreet commodo quis ac quam. Phasellus sit amet sagittis orci, in luctus sem. Nulla facilisi. Aliquam dignissim arcu sit amet vehicula fringilla. Aliquam eget velit mattis, auctor justo pellentesque, placerat elit. Nullam nec tincidunt nibh. Fusce mollis sagittis nunc, sed pellentesque neque porta in. Nunc sollicitudin metus id tellus tempor suscipit. Vestibulum sed sem efficitur, hendrerit nisi vitae, aliquam mi. Pellentesque at mauris in lectus suscipit convallis non sed ex. Duis finibus est arcu, eget mattis augue dapibus vitae. Morbi facilisis nibh condimentum vestibulum dapibus.
  252.                     <br><br>
  253.                     Phasellus ut sagittis dui, vitae pretium ante. Nulla vitae vestibulum nunc. Cras sapien risus, ultricies id lacinia at, venenatis volutpat nibh. Pellentesque vel nisl eu metus hendrerit ullamcorper quis non lectus. Nam eget ligula sit amet nibh tempus tincidunt sit amet at diam. Curabitur tristique ullamcorper justo, sit amet fermentum mauris interdum sit amet. Donec cursus dignissim nibh nec venenatis. Praesent massa nisl, facilisis elementum pellentesque lacinia, tincidunt sed quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas porta, mi ut ullamcorper vestibulum, urna nulla ornare orci, sit amet facilisis nulla elit quis libero. Vivamus auctor ullamcorper placerat. Maecenas consectetur ullamcorper magna ac efficitur.
  254.                 </div>
  255.                 <div class="rightPopupContainer">
  256.                             <b>Full Name</b> here<br>
  257.                             <b>Pronunciation</b> here<br>
  258.                             <b>Nickname/Alias</b> here<br>
  259.                             <b>Gender</b> here<br>
  260.                             <b>Orientation</b> here<br>
  261.                             <b>Real Age</b> here<br>
  262.                             <b>Birthday</b> here<br>
  263.                             <b>Birthplace</b> here<br>
  264.                             <b>Astrological Sign</b> here<br>
  265.                             <b>Species</b> here<br>
  266.                             <b>Ethnicity</b> here<br>
  267.                             <b>Preferred Hand</b> here<br>
  268.                             <b>Eye Color</b> here<br>
  269.                             <b>Hair Color</b> here<br>
  270.                             <b>Hairstyle</b> here<br>
  271.                             <b>Skin Tone</b> here<br>
  272.                             <b>Makeup</b> here<br>
  273.                             <b>Build</b> here<br>
  274.                             <b>Height</b> here<br>
  275.                             <b>Weight</b> here<br>
  276.                             <b>Shoe Size</b> here<br>
  277.                             <b>Birthmarks/scars</b> here<br>
  278.                             <b>Distinguishing Features</b> here<br>
  279.                             <b>Health</b> here<br>
  280.                             <b>Allergies</b> here<br>
  281.                 </div>
  282.             </div>
  283.             <div id="loveLife">
  284.                 <div class="leftPopupContainer">
  285.                     <img src="https://i.imgur.com/vsJJ0Ir.png">
  286.                 </div>
  287.                 <div class="rightPopupContainer">
  288.                     <b>status</b> here <br>
  289.                     <b>to whom</b> here <br>
  290.                     <b>since when</b> here <br>
  291.                     <b>comments</b> here <br>
  292.                 </div>
  293.             </div>
  294.             <div id="friends">
  295.                 <div class="leftPopupContainer">
  296.                     <h3>name here</h3>
  297.                         talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here.
  298.                     <h3>name here</h3>
  299.                         talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here.
  300.                     <h3>name here</h3>
  301.                         talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here.
  302.                     <h3>name here</h3>
  303.                         talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here. talk about the connection here.
  304.                 </div>
  305.                 <div class="rightPopupContainer">
  306.                     <img src="https://i.imgur.com/5n2VtCa.png">
  307.                 </div>
  308.             </div>
  309.             <div id="owesList">
  310.                 <div class="leftPopupContainer">
  311.                     <h3>I owe you</h3>
  312.                         <b>name</b> - <i>starter</i> - 00/00 <br>
  313.                         <b>name</b> - <i>reply</i> - 00/00 <br>
  314.                         <b>name</b> - <i>starter</i> - 00/00 <br>
  315.                         <b>name</b> - <i>reply</i> - 00/00 <br>
  316.                         <b>name</b> - <i>starter</i> - 00/00 <br>
  317.                         <b>name</b> - <i>reply</i> - 00/00 <br>
  318.  
  319.                 </div>
  320.                 <div class="rightPopupContainer">
  321.                     <h3>You owe me</h3>
  322.                         <b>name</b> - <i>starter</i> - 00/00 <br>
  323.                         <b>name</b> - <i>reply</i> - 00/00 <br>
  324.                         <b>name</b> - <i>starter</i> - 00/00 <br>
  325.                         <b>name</b> - <i>reply</i> - 00/00 <br>
  326.                         <b>name</b> - <i>starter</i> - 00/00 <br>
  327.                         <b>name</b> - <i>reply</i> - 00/00 <br>
  328.                 </div>
  329.             </div>
  330.             <br>
  331.             <center>
  332.                 <a href="#aboutMe" class="popupLinks">about</a>
  333.                 <a href="#loveLife" class="popupLinks">love</a>
  334.                 <a href="#friends" class="popupLinks">friends</a>
  335.                 <a href="#owesList" class="popupLinks">owes</a>
  336.         </div>
  337.     </body>
  338. </html>
  339.  
  340.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement