API tools faq
paste
Advertisement
mebuckner

Custom Order - Bar Harbor - Main Page

mebuckner
Dec 3rd, 2020 (edited)
785
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.81 KB | None | 0 0
raw download clone embed print report
  1. <!--about me-->
  2. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  3. <style type="text/css">
  4. @import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
  5.  
  6. body {
  7. background-color:#232426;
  8. background-repeat:no-repeat;
  9. background-attachment:fixed;
  10. margin: 0;
  11. overflow:auto;
  12. background-image:url('https://i.imgur.com/crI9qjO.jpg');
  13. background-size:cover;
  14. }
  15.  
  16. table, tr, td, li, p, div, .profileInfo td.text {
  17.     font-size: 12px;
  18.     color: #fff;
  19.     font-family: 'Playfair Display', sans-serif;}
  20.  
  21.  
  22. .container {
  23. width:800px;
  24. height:700px;
  25. position:absolute;
  26. left:0;
  27. right:0;
  28. top:0;
  29. overflow:hidden;
  30. margin:auto;
  31. color:#fff;
  32. background-color:#0c0c0c;
  33. font-family: 'Abel', sans-serif;
  34. }
  35.  
  36. .storylineHolder{
  37. width:250px;
  38. height:270px;
  39. display:inline-block;
  40. vertical-align:top;
  41. padding-left:20px;
  42. padding-right:20px;
  43. margin-top:20px;
  44. margin-bottom:20px;
  45. }
  46.  
  47. .updatesHolder{
  48.     width: 179px;
  49.     height: 262px;
  50.     color: #fff;
  51.     display: inline-block;
  52.     vertical-align: top;
  53.     padding-left: 20px;
  54.     padding-right: 20px;
  55.     margin-top: 20px;
  56.     margin-bottom: 20px;
  57.     overflow: auto;
  58.     text-align:justify;
  59. }
  60.  
  61. .disclaimerHolder{
  62.     width: 800px;
  63.     height: 54px;
  64.     background: #0c0c0c;
  65.     text-align: center;
  66.     line-height: 5px;
  67. }
  68.  
  69. .doubleDiv{
  70.     width: 358px;
  71.     height: 181px;
  72.     color: #fff;
  73.     display: inline-block;
  74.     vertical-align: top;
  75.     text-align: justify;
  76.     overflow: auto;
  77.     padding-left: 20px;
  78.     padding-right: 20px;
  79.     margin-top: 20px;
  80.     margin-bottom: 20px;
  81. }
  82.  
  83. a.naavigation:link, a.naavigation:visited {
  84.     background-color: #0c0c0c;
  85.     width: 153px;
  86.     color: #ffffff;
  87.     text-align: center;
  88.     text-decoration: none;
  89.     display: inline-block;
  90.     font-family: Playfair Display;
  91.     font-size: 14px;
  92.     letter-spacing: 3px;
  93.     text-transform: uppercase;
  94.     margin-left: 2px;
  95.     font-weight: 100;
  96.     margin-top: -32px;
  97. }
  98.  
  99. a.naavigation:hover, a.naavigation:active {
  100. color: #fff;
  101. letter-spacing: 5px;
  102. }
  103.  
  104.  
  105. a.affie:link, a.affie:visited {
  106.     background-color: #0c0c0c;
  107.     width: 153px;
  108.     color: #ffffff;
  109.     text-align: center;
  110.     text-decoration: none;
  111.     display: inline-block;
  112.     font-family: Playfair Display;
  113.     font-size: 14px;
  114.     letter-spacing: 3px;
  115.     text-transform: uppercase;
  116.     margin-left: 2px;
  117.     font-weight: 100;
  118.     padding: 10px 0px;
  119. }
  120.  
  121. a.affie:hover, a.affie:active {
  122. color: #0c0c0c;
  123. }
  124.  
  125. a.affie span{
  126. font-size:11px;
  127. }
  128.  
  129. .tabs{
  130.     width: 290px;
  131.     display: block;
  132.     margin: 0px;
  133.     position: relative;
  134.     margin-left:-20px;
  135. }
  136.  
  137. .tabs .tab{
  138.     float: left;
  139.     display: block;
  140. }
  141.  
  142. .tabs .tab>input[type="radio"] {
  143.     position: absolute;
  144.     top: -9999px;
  145.     left: -9999px;
  146. }
  147.  
  148. .tabs .tab>label {
  149.     display: block;
  150.     padding: 6px 21px;
  151.     font-size: 12px;
  152.     text-transform: uppercase;
  153.     cursor: pointer;
  154.     position: relative;
  155.     color: #FFF;
  156.     background: #4c4939;
  157. }
  158.  
  159. .tabs .content {
  160.     z-index: 0;
  161.     overflow: hidden;
  162.     width: 280px;
  163.     padding: 5px;
  164.     position: absolute;
  165.     height: 235px;
  166.     top: 27px;
  167.     left: 0;
  168.     background: #0c0c0c;
  169.     color: #fff;
  170.     overflow: auto;
  171.     font-family: 'PLAYFAIR DISPLAY';
  172.     opacity: 0;
  173.     transition: opacity 400ms ease-out;
  174.     font-weight: 100;
  175.     text-align: justify;
  176. }
  177.  
  178. .tabs>.tab>[id^="tab"]:checked + label {
  179.     top: 0;
  180.     background: #303030;
  181.     color: #F5F5F5;
  182. }
  183.  
  184. .tabs>.tab>[id^="tab"]:checked ~ [id^="tab-content"] {
  185.     z-index: 1;/* or display: block; */
  186.    
  187.     opacity: 1;
  188.     transition: opacity 400ms ease-out;
  189. }
  190.  
  191. b {
  192.     background: #303030;
  193.     padding: 5px;
  194.     line-height: 35px;
  195. }
  196.  
  197. h1 {
  198.     font-family: 'Playfair Display';
  199.     font-weight: 100;
  200.     text-transform: uppercase;
  201.     color: #fff;
  202.     background: #4c4939;
  203.     padding-top: 10px;
  204.     padding-bottom: 10px;
  205.     margin-bottom: 10px;
  206.     text-align: center;
  207. }
  208.  
  209. h2 {
  210.     font-family: 'Playfair Display';
  211.     font-weight: 100;
  212.     text-transform: uppercase;
  213.     color: #fff;
  214.     background: #4c4939;
  215.     padding-top: 10px;
  216.     padding-bottom: 10px;
  217.     margin-bottom: 10px;
  218.     text-align: center;
  219. }
  220.  
  221. h3 {
  222.     color: #4c4939;
  223.     font-weight: 100;
  224.     text-align: center;
  225.     margin: 0;
  226. }
  227.  
  228.  
  229.  
  230. ::-webkit-scrollbar-thumb:vertical {height:12px; background:#0c0c0c; border-top:10px solid #4c4939; border-bottom:10px solid #4c4939;}
  231. ::-webkit-scrollbar-thumb:horizontal {background-color:#0c0c0c;}
  232. ::-webkit-scrollbar {width:5px; height:7px;}
  233.  
  234.  
  235. .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>
  236. </style>
  237.  
  238.  
  239.  
  240.  
  241.  
  242. <!--like to meet-->
  243. <html>
  244. <body>
  245. <div class="container">
  246. <img src="https://i.imgur.com/wCMNTtY.png">
  247. <center>
  248. <a href="/home.php" class="naavigation">Home</a>
  249. <a href="/send_message.php?member_id=###" class="naavigation">Message</a>
  250. <a href="/status_stream.php?member_id=###" class="naavigation">Stream</a>
  251. <a href="/status_stream.php?member_id=###" class="naavigation">Rules</a>
  252. <a href="/status_stream.php?member_id=###" class="naavigation">Content</a>
  253. </center>
  254.  
  255. <img src="https://i.imgur.com/rotbTli.png" style="margin-top:20px;">
  256.  
  257. <div class="storylineHolder">
  258.  
  259.  
  260.   <ul class="tabs">
  261.    
  262.     <li class="tab">
  263.         <input type="radio" name="tabs" checked="checked" id="tab1" />
  264.         <label for="tab1">Main Storyline</label>
  265.         <div id="tab-content1" class="content">
  266.           <h1>Main Storyline</h1>
  267.           <h3>Some kind of quote about the main storyline will go here.</h3>
  268.           <br/>
  269.          
  270.           <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque commodo tortor ante, sed consequat nulla ultrices sit amet. Integer ornare aliquet metus, vitae volutpat dui bibendum eu. Integer eget eleifend ipsum. Aliquam tristique orci non facilisis lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sagittis vehicula sollicitudin.</p>
  271.          
  272.           <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque commodo tortor ante, sed consequat nulla ultrices sit amet. Integer ornare aliquet metus, vitae volutpat dui bibendum eu. Integer eget eleifend ipsum. Aliquam tristique orci non facilisis lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sagittis vehicula sollicitudin.</p>
  273.          
  274.           <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque commodo tortor ante, sed consequat nulla ultrices sit amet. Integer ornare aliquet metus, vitae volutpat dui bibendum eu. Integer eget eleifend ipsum. Aliquam tristique orci non facilisis lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sagittis vehicula sollicitudin.</p>
  275.          
  276.           <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque commodo tortor ante, sed consequat nulla ultrices sit amet. Integer ornare aliquet metus, vitae volutpat dui bibendum eu. Integer eget eleifend ipsum. Aliquam tristique orci non facilisis lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sagittis vehicula sollicitudin.</p>
  277.         </div>
  278.     </li>
  279.    
  280.     <li class="tab">
  281.       <input type="radio" name="tabs" id="tab2" />
  282.       <label for="tab2">Chapters</label>  
  283.       <div id="tab-content2" class="content">
  284.           <h1>Chapter One</h1>
  285.           <hr/>
  286.           <h3>quote about chapter one will go here.</h3>
  287.           <br/>
  288.           <p>Nam cursus, massa ac imperdiet posuere, mauris metus gravida ligula, et rutrum ligula mi ut tellus. Quisque elit dolor, sagittis ac purus accumsan, sagittis rhoncus felis. Morbi nec bibendum arcu, sit amet pharetra orci. Nulla pulvinar ultrices quam. Cras nulla erat, eleifend non euismod vel, accumsan quis lacus. Ut bibendum augue vel magna rhoncus, sed rutrum massa vulputate. Nullam lectus diam, venenatis vel elit vel, ornare fermentum metus. Praesent euismod non mauris et dignissim. Sed in diam nec diam pellentesque lacinia at vitae lorem. Quisque et neque condimentum, viverra dolor mollis, feugiat justo.</p>  
  289.  
  290. <h1>Chapter Two</h1>
  291.           <hr/>
  292.           <h3>quote about chapter two will go here.</h3>
  293.           <br/>
  294.           <p>Nam cursus, massa ac imperdiet posuere, mauris metus gravida ligula, et rutrum ligula mi ut tellus. Quisque elit dolor, sagittis ac purus accumsan, sagittis rhoncus felis. Morbi nec bibendum arcu, sit amet pharetra orci. Nulla pulvinar ultrices quam. Cras nulla erat, eleifend non euismod vel, accumsan quis lacus. Ut bibendum augue vel magna rhoncus, sed rutrum massa vulputate. Nullam lectus diam, venenatis vel elit vel, ornare fermentum metus. Praesent euismod non mauris et dignissim. Sed in diam nec diam pellentesque lacinia at vitae lorem. Quisque et neque condimentum, viverra dolor mollis, feugiat justo.</p>  
  295.  
  296.  
  297. <h1>Chapter Three</h1>
  298.           <hr/>
  299.           <h3>quote about chapter three will go here.</h3>
  300.           <br/>
  301.           <p>Nam cursus, massa ac imperdiet posuere, mauris metus gravida ligula, et rutrum ligula mi ut tellus. Quisque elit dolor, sagittis ac purus accumsan, sagittis rhoncus felis. Morbi nec bibendum arcu, sit amet pharetra orci. Nulla pulvinar ultrices quam. Cras nulla erat, eleifend non euismod vel, accumsan quis lacus. Ut bibendum augue vel magna rhoncus, sed rutrum massa vulputate. Nullam lectus diam, venenatis vel elit vel, ornare fermentum metus. Praesent euismod non mauris et dignissim. Sed in diam nec diam pellentesque lacinia at vitae lorem. Quisque et neque condimentum, viverra dolor mollis, feugiat justo.</p>    
  302.        </div>
  303.     </li>
  304.    
  305.   </ul>
  306.  
  307.  
  308.  
  309. </div>
  310.  
  311. <img src="https://i.imgur.com/Uda3BnM.png" style="margin-top:20px;">
  312.  
  313. <div class="updatesHolder">
  314. <h2>Group Updates</h2>
  315. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  316. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  317. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  318. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  319. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  320. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  321. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  322. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  323. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  324. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  325. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  326. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  327. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  328. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  329. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  330. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  331. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  332. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  333. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  334. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  335. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  336. <b>00.00</b> status will go here, talk about what happened in the group. <br>
  337. </div>
  338.  
  339. <div class="doubleDiv">
  340. <h2>The Owners</h2>
  341. <h3>Owner Name</h3>
  342. <p>Nam cursus, massa ac imperdiet posuere, mauris metus gravida ligula, et rutrum ligula mi ut tellus. Quisque elit dolor, sagittis ac purus accumsan, sagittis rhoncus felis. Morbi nec bibendum arcu, sit amet pharetra orci. Nulla pulvinar ultrices quam. Cras nulla erat, eleifend non euismod vel, accumsan quis lacus. Ut bibendum augue vel magna rhoncus, sed rutrum massa vulputate. Nullam lectus diam, venenatis vel elit vel, ornare fermentum metus. Praesent euismod non mauris et dignissim. Sed in diam nec diam pellentesque lacinia at vitae lorem. Quisque et neque condimentum, viverra dolor mollis, feugiat justo.</p>  
  343. <br><br>
  344. <h3>Owner Name</h3>
  345. <p>Nam cursus, massa ac imperdiet posuere, mauris metus gravida ligula, et rutrum ligula mi ut tellus. Quisque elit dolor, sagittis ac purus accumsan, sagittis rhoncus felis. Morbi nec bibendum arcu, sit amet pharetra orci. Nulla pulvinar ultrices quam. Cras nulla erat, eleifend non euismod vel, accumsan quis lacus. Ut bibendum augue vel magna rhoncus, sed rutrum massa vulputate. Nullam lectus diam, venenatis vel elit vel, ornare fermentum metus. Praesent euismod non mauris et dignissim. Sed in diam nec diam pellentesque lacinia at vitae lorem. Quisque et neque condimentum, viverra dolor mollis, feugiat justo.</p>  
  346. <br><br>
  347. <h3>Owner Name</h3>
  348. <p>Nam cursus, massa ac imperdiet posuere, mauris metus gravida ligula, et rutrum ligula mi ut tellus. Quisque elit dolor, sagittis ac purus accumsan, sagittis rhoncus felis. Morbi nec bibendum arcu, sit amet pharetra orci. Nulla pulvinar ultrices quam. Cras nulla erat, eleifend non euismod vel, accumsan quis lacus. Ut bibendum augue vel magna rhoncus, sed rutrum massa vulputate. Nullam lectus diam, venenatis vel elit vel, ornare fermentum metus. Praesent euismod non mauris et dignissim. Sed in diam nec diam pellentesque lacinia at vitae lorem. Quisque et neque condimentum, viverra dolor mollis, feugiat justo.</p>  
  349. <br><br>
  350. <h3>Owner Name</h3>
  351. <p>Nam cursus, massa ac imperdiet posuere, mauris metus gravida ligula, et rutrum ligula mi ut tellus. Quisque elit dolor, sagittis ac purus accumsan, sagittis rhoncus felis. Morbi nec bibendum arcu, sit amet pharetra orci. Nulla pulvinar ultrices quam. Cras nulla erat, eleifend non euismod vel, accumsan quis lacus. Ut bibendum augue vel magna rhoncus, sed rutrum massa vulputate. Nullam lectus diam, venenatis vel elit vel, ornare fermentum metus. Praesent euismod non mauris et dignissim. Sed in diam nec diam pellentesque lacinia at vitae lorem. Quisque et neque condimentum, viverra dolor mollis, feugiat justo.</p>  
  352. <br><br>
  353. </div>
  354. <div class="doubleDiv">
  355. <a href="/" class="affie">Affiliate Name<br>
  356. <span>rpg/site</span>
  357. </a>
  358. <a href="/" class="affie">Affiliate Name<br>
  359. <span>rpg/site</span>
  360. </a>
  361.  
  362. <a href="/" class="affie">Affiliate Name<br>
  363. <span>rpg/site</span>
  364. </a>
  365.  
  366. <a href="/" class="affie">Affiliate Name<br>
  367. <span>rpg/site</span>
  368. </a>
  369.  
  370. <a href="/" class="affie">Affiliate Name<br>
  371. <span>rpg/site</span>
  372. </a>
  373.  
  374. <a href="/" class="affie">Affiliate Name<br>
  375. <span>rpg/site</span>
  376. </a>
  377.  
  378. <a href="/" class="affie">Affiliate Name<br>
  379. <span>rpg/site</span>
  380. </a>
  381.  
  382. <a href="/" class="affie">Affiliate Name<br>
  383. <span>rpg/site</span>
  384. </a>
  385.  
  386. <a href="/" class="affie">Affiliate Name<br>
  387. <span>rpg/site</span>
  388. </a>
  389.  
  390. <a href="/" class="affie">Affiliate Name<br>
  391. <span>rpg/site</span>
  392. </a>
  393.  
  394. <a href="/" class="affie">Affiliate Name<br>
  395. <span>rpg/site</span>
  396. </a>
  397.  
  398. <a href="/" class="affie">Affiliate Name<br>
  399. <span>rpg/site</span>
  400. </a>
  401.  
  402. <a href="/" class="affie">Affiliate Name<br>
  403. <span>rpg/site</span>
  404. </a>
  405.  
  406. <a href="/" class="affie">Affiliate Name<br>
  407. <span>rpg/site</span>
  408. </a>
  409.  
  410. <a href="/" class="affie">Affiliate Name<br>
  411. <span>rpg/site</span>
  412. </a>
  413.  
  414. <a href="/" class="affie">Affiliate Name<br>
  415. <span>rpg/site</span>
  416. </a>
  417.  
  418. <a href="/" class="affie">Affiliate Name<br>
  419. <span>rpg/site</span>
  420. </a>
  421.  
  422. <a href="/" class="affie">Affiliate Name<br>
  423. <span>rpg/site</span>
  424. </a>
  425.  
  426. <a href="/" class="affie">Affiliate Name<br>
  427. <span>rpg/site</span>
  428. </a>
  429.  
  430. <a href="/" class="affie">Affiliate Name<br>
  431. <span>rpg/site</span>
  432. </a>
  433.  
  434. <a href="/" class="affie">Affiliate Name<br>
  435. <span>rpg/site</span>
  436. </a>
  437.  
  438. <a href="/" class="affie">Affiliate Name<br>
  439. <span>rpg/site</span>
  440. </a>
  441. </div>
  442. <div class="disclaimerHolder">
  443. <b>disclaimer</b> this is where you will talk about your disclaimer and all that sort of stuff. this is where you will talk about your disclaimer and all that sort of stuff. this is where you will talk about your disclaimer and all that sort of stuff.
  444. </div>
  445.  
  446. </div>
  447. </body>
  448. </html>
  449.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!