API tools faq
paste
mebuckner

Custom Order - Marialena

mebuckner
Jul 25th, 2020 (edited)
131
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.19 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/css?family=Abel');
  5. @import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@900&family=Poppins:wght@600&display=swap');
  6.  
  7. body {
  8. background-color:#441116;
  9. background-repeat:repeat;
  10. background-attachment:fixed;
  11. margin: 0;
  12. overflow:auto;
  13. background-image:url('https://i.imgur.com/1rJY5hJ.jpg');
  14. }
  15.  
  16. table, tr, td, li, p, div, .profileInfo td.text {
  17.     font-size: 10px;
  18.     color: #717171;
  19.     font-family: 'Poppins', sans-serif;}
  20.  
  21.  
  22. .container {
  23. width:1200px;
  24. height:auto;
  25. position:absolute;
  26. left:0;
  27. right:0;
  28. top:0;
  29. overflow:hidden;
  30. margin:auto;
  31. color:#fff;
  32. background-color:#fff;
  33. font-family: 'Abel', sans-serif;
  34. }
  35.  
  36. .navigationBar{
  37. width:1200px;
  38. height:100px;
  39. background-color:#fff;
  40. color:#fff;
  41. font-family: 'Abel', sans-serif;
  42. z-index:4;
  43. }
  44.  
  45. .nameSpaceHere{
  46. width:340px;
  47. height:40px;
  48. display:inline-block;
  49. -webkit-text-stroke: 1px #441116;
  50. -webkit-text-fill-color: rgba(0, 0, 0, 0);
  51. padding:25px;
  52. font-family: 'Alegreya Sans SC', sans-serif;
  53. font-size:35px;
  54. text-transform:uppercase;
  55. text-align:center;
  56. vertical-align:top;
  57. }
  58. .nameSpaceHere b{
  59. -webkit-text-stroke: 0px;
  60.     -webkit-text-fill-color: #441116;
  61. }
  62.  
  63. .nameSpaceHere span{
  64. font-size:20px;
  65. color:#086b45;
  66. font-family: 'Poppins', sans-serif;
  67. line-height:5px;
  68. -webkit-text-stroke: 0px;
  69.     -webkit-text-fill-color: #655f61;
  70. }
  71.  
  72. .navigationBarTop{
  73. width:737px;
  74. height:40px;
  75. padding:30px;
  76. display:inline-block;
  77. vertical-align:top;
  78. text-align:right;
  79. }
  80.  
  81.  
  82. .wrap-collabsible {
  83.   margin-bottom: 1.2rem 0;
  84. }
  85.  
  86. input[type='checkbox'] {
  87.   display: none;
  88. }
  89.  
  90. .lbl-toggle {
  91.     display: block;
  92.     font-weight: bold;
  93.     font-family: 'Poppins', sans-serif;
  94.     font-size: 1.2rem;
  95.     text-transform: uppercase;
  96.     text-align: center;
  97.     padding: 10px;
  98.     color: #fff;
  99.     background: #441116;
  100.     cursor: pointer;
  101.     /* border-radius: 7px; */
  102.     transition: all 0.5s ease-out;
  103.     margin-top: 28px;
  104.     border-left: 23px solid #fff;
  105. }
  106.  
  107. .lbl-toggle:hover {
  108.   color: #fff;
  109. }
  110.  
  111. .lbl-toggle::before {
  112.   content: ' ';
  113.   display: inline-block;
  114.  
  115.   border-top: 5px solid transparent;
  116.   border-bottom: 5px solid transparent;
  117.   border-left: 5px solid currentColor;
  118.   vertical-align: middle;
  119.   margin-right: .7rem;
  120.   transform: translateY(-2px);
  121.  
  122.   transition: transform .2s ease-out;
  123. }
  124.  
  125. .toggle:checked + .lbl-toggle::before {
  126.   transform: rotate(90deg) translateX(-3px);
  127. }
  128.  
  129. .collapsible-content {
  130.   max-height: 0px;
  131.   overflow: hidden;
  132.   transition: max-height .25s ease-in-out;
  133. }
  134.  
  135. .toggle:checked + .lbl-toggle + .collapsible-content {
  136.   max-height: 100vh;
  137. }
  138.  
  139. .toggle:checked + .lbl-toggle {
  140.   border-bottom-right-radius: 0;
  141.   border-bottom-left-radius: 0;
  142. }
  143.  
  144. .collapsible-content .content-inner {
  145.   text-align:left;
  146.   border-bottom-left-radius: 7px;
  147.   border-bottom-right-radius: 7px;
  148.   padding: .5rem 1rem;
  149. }
  150.  
  151. h1{
  152.     color:#655f61;
  153.     font-family: 'Alegreya Sans SC', sans-serif;
  154.     font-size: 25px;
  155.     text-transform: uppercase;
  156.     text-align: center;
  157. }
  158.  
  159. h2{
  160.     margin:0;
  161.     width:100%;
  162.     padding:10px;
  163.     color:#fff;
  164.     background-color:#655f61;
  165.     font-family: 'Alegreya Sans SC', sans-serif;
  166.     font-size: 25px;
  167.     text-transform: uppercase;
  168.     text-align: center;
  169.     margin-bottom: 10px;
  170. }
  171.  
  172. a.navigationBarLinks,  a.navigationBarLinks:link,  a.navigationBarLinks:active,  a.navigationBarLinks:visited  {
  173. width:144px;
  174. height:40px;
  175. display:inline-block;
  176. -webkit-text-stroke: 1px #441116;
  177. -webkit-text-fill-color: rgba(0, 0, 0, 0);
  178. font-family: 'Alegreya Sans SC', sans-serif;
  179. font-size:25px;
  180. text-transform:uppercase;
  181. text-align:center;
  182. vertical-align:top;
  183. }    
  184.  
  185. a.navigationBarLinks:hover {
  186. -webkit-text-stroke: none;
  187. -webkit-text-fill-color: #441116;
  188. text-decoration:none;
  189. }
  190.  
  191.  
  192. a.socialMediaButton,  a.socialMediaButton:link,  a.socialMediaButton:active,  a.socialMediaButton:visited  {
  193.     width:100%;
  194.     padding-top:10px;
  195.     padding-bottom:10px;
  196.     color:#fff;
  197.     background-color:#655f61;
  198.     font-family: 'Alegreya Sans SC', sans-serif;
  199.     font-size: 25px;
  200.     text-transform: uppercase;
  201.     text-align: center;
  202.     margin-bottom: 10px;
  203. display: block;
  204.     margin-top: 20px;
  205.     margin-left: 23px;
  206. }    
  207.  
  208. a.socialMediaButton:hover {
  209. color:#fff;
  210. text-decoration: none;
  211. }
  212.  
  213.  
  214. .rightSide b{
  215. font-size:10px;
  216. color:#086b45;
  217. font-family: 'Poppins', sans-serif;
  218. line-height:5px;
  219. -webkit-text-stroke: 0px;
  220. -webkit-text-fill-color: #655f61;
  221. }
  222.  
  223. a.navigationBarLinks span{
  224. font-size:10px;
  225. color:#086b45;
  226. font-family: 'Poppins', sans-serif;
  227. line-height:5px;
  228. -webkit-text-stroke: 0px;
  229. -webkit-text-fill-color: #655f61;
  230. }
  231.  
  232. .leftSideBar{
  233. padding-top:10px;
  234. text-align:center;
  235. width:340px;
  236. height:auto;
  237. display:inline-block;
  238. background-color:#fff;
  239. vertical-align:top;
  240. }
  241.  
  242. .rightSide{
  243. padding-top:10px;
  244. text-align:center;
  245. width: 857px;
  246. height:600px;
  247. display:inline-block;
  248. background-color:#fff;
  249. vertical-align:top;
  250. overflow:auto;
  251. text-align:center;
  252. }
  253.  
  254. .biographyBit{
  255. margin-top: -57px;
  256. width:355px;
  257. height:256px;
  258. text-align:justify;
  259. padding:10px;
  260. overflow:auto;
  261. display:inline-block;
  262. }
  263.  
  264. .modal-window {
  265.   position: fixed;
  266.   background-color: rgba(200, 200, 200, 0.75);
  267.   top: 0;
  268.   right: 0;
  269.   bottom: 0;
  270.   left: 0;
  271.   z-index: 999;
  272.   opacity: 0;
  273.   pointer-events: none;
  274.   -webkit-transition: all 0.3s;
  275.   -moz-transition: all 0.3s;
  276.   transition: all 0.3s;
  277. }
  278.  
  279. .modal-window:target {
  280.   opacity: 1;
  281.   pointer-events: auto;
  282. }
  283.  
  284. .modal-window>div {
  285.   width: 600px;
  286.   position: relative;
  287.   margin: 10% auto;
  288.   padding: 2rem;
  289.   background: #fafafa;
  290.   color: #444;
  291.   text-align:center;
  292. }
  293.  
  294. .modal-window header {
  295.   font-weight: bold;
  296. }
  297.  
  298. .modal-close {
  299.   color: #aaa;
  300.   line-height: 50px;
  301.   font-size: 80%;
  302.   position: absolute;
  303.   right: 0;
  304.   text-align: center;
  305.   top: 0;
  306.   width: 70px;
  307.   text-decoration: none;
  308. }
  309.  
  310. .modal-close:hover {
  311.   color: #000;
  312. }
  313.  
  314. .modal-window h1 {
  315.  font-family: 'Spectral SC', serif;
  316.     font-size: 25pt;
  317.     color: #698792;
  318.     text-align: center;
  319.     display: block;
  320.     margin: 0;
  321.     line-height: 34px;
  322.     text-align: center;
  323.     text-transform:uppercase;
  324. }
  325.  
  326.  
  327. .modal-window h2 {
  328.  font-family: 'Spectral SC', serif;
  329.     font-size: 15pt;
  330.     color: #232426;
  331.     text-align: center;
  332.     display: block;
  333.     margin: 0;
  334.     line-height: 20px;
  335.     vertical-align:middle;
  336.     text-align: center;
  337.     text-transform:uppercase;
  338. }
  339.  
  340. ::-webkit-scrollbar-thumb:vertical {height:12px; background:#fff; border-top:10px solid #441116; border-bottom:10px solid #441116;}
  341. ::-webkit-scrollbar-thumb:horizontal {background-color:#fff;}
  342. ::-webkit-scrollbar {width:5px; height:7px;}
  343.  
  344.  
  345. .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>
  346. </style>
  347.  
  348.  
  349.  
  350. <!--Like to meet-->
  351.  
  352. <html>
  353. <body>
  354. <div class="container">
  355. <div class="navigationBar">
  356. <div class="nameSpaceHere">
  357. <b>First</b>Last<br>
  358. <span>Peaches and Cream.</span>
  359. </div>
  360. <div class="navigationBarTop">
  361. <a href="/home.php" class="navigationBarLinks">home<br><span>new york, new york</span></a>
  362. <a href="/send_message.php?member_id=###" class="navigationBarLinks">message<br><span>whisper to me bby</span></a>
  363. <a href="/add_comment.php?member_id=###" class="navigationBarLinks">comment<br><span>yell all the time</span></a>
  364. <a href="/status_stream.php?member_id=###" class="navigationBarLinks">stream<br><span>whats the haps</span></a>
  365. <a href="/albums.php?member_id=###" class="navigationBarLinks">photos<br><span>just a pretty face</span></a>
  366. </div>
  367. </div>
  368. <div class="leftSideBar">
  369. <img src="https://i.imgur.com/1OxwLe9.png" style="width: 318px; margin-left: 23px;">
  370. <div class="wrap-collabsible">
  371.   <input id="collapsible" class="toggle" type="checkbox">
  372.   <label for="collapsible" class="lbl-toggle">Owes List</label>
  373.   <div class="collapsible-content">
  374.     <div class="content-inner">
  375.       <p>
  376.         <h1>I Owe Them</h1>
  377.          <ul>
  378.             <li><b>Name Here</b> - --/-- - <i>reply/starter</i></li>
  379.             <li><b>Name Here</b> - --/-- - <i>reply/starter</i></li>            
  380.          </ul>
  381.         <h1>You Owe Me</h1>
  382.          <ul>
  383.             <li><b>Name Here</b> - --/-- - <i>reply/starter</i></li>
  384.             <li><b>Name Here</b> - --/-- - <i>reply/starter</i></li>
  385.          </ul>
  386.         <h1 style="color:#441116">Updated On: --/--</h1>
  387.       </p>
  388.     </div>
  389.   </div>
  390. </div>
  391.  
  392.  
  393.  
  394.  
  395.  
  396.  
  397.  
  398.  
  399.  
  400.  
  401.  
  402.  
  403.  
  404. <div class="wrap-collabsible">
  405.   <input id="collapsible2" class="toggle" type="checkbox">
  406.   <label for="collapsible2" class="lbl-toggle">Storylines</label>
  407.   <div class="collapsible-content">
  408.     <div class="content-inner">
  409.       <p>
  410.          <ul>
  411.             <li><b style="color:#655f61;">Name here</b> - About the storyline</li>
  412.             <li><b style="color:#655f61;">Name here</b> - About the storyline</li>
  413.             <li><b style="color:#655f61;">Name here</b> - About the storyline</li>
  414.             <li><b style="color:#655f61;">Name here</b> - About the storyline</li>
  415.             <li><b style="color:#655f61;">Name here</b> - About the storyline</li>
  416.          </ul>
  417.       </p>
  418.     </div>
  419.   </div>
  420. </div>
  421.  
  422.  
  423.  
  424. <div class="wrap-collabsible">
  425.   <input id="collapsible3" class="toggle" type="checkbox">
  426.   <label for="collapsible3" class="lbl-toggle">Instagram</label>
  427.   <div class="collapsible-content">
  428.     <div class="content-inner">
  429.       <img src="https://i.imgur.com/xUovtat.png" width="340px">
  430.     </div>
  431.   </div>
  432. </div>
  433. <a href="/1631904" class="socialMediaButton"><span class="th th-alien-o"></span> Credit</a>
  434.  
  435. <audio autoplay loop>
  436. <source src="https://www.dl.dropboxusercontent.com/s/arpv176ikmbsnjk/Legally%20Blonde%20So%20Much%20Better.mp3?dl=0">
  437. </audio>
  438. <center>
  439. <img src="https://i.imgur.com/rw70CmZ.png" width="229px" style="margin-left: 29px;">
  440. </center>
  441. </div>
  442.  
  443. <div class="rightSide">
  444. <img src="https://i.imgur.com/ypdbKiM.png" style="margin-bottom:-59px">
  445. <center>
  446. <div class="biographyBit">
  447. Biography will go here.
  448. </div>
  449. <img src="https://i.imgur.com/wAWuKIv.png">
  450.  
  451.  
  452. <img src="https://i.imgur.com/3pWcEVv.png" style="margin-bottom:-59px">
  453. <center>
  454. <img src="https://i.imgur.com/4bmvzEt.png">
  455. <div class="biographyBit">
  456. About the children will go here.
  457. </div>
  458.  
  459.  
  460. <img src="https://i.imgur.com/hHwaO7N.png" style="margin-bottom:-59px">
  461. <center>
  462. <div class="biographyBit">
  463. <h2>First Middle Last</h2>
  464. A little bit about them here.
  465.  
  466. <h2>First Middle Last</h2>
  467. A little bit about them here.
  468. </div>
  469. <img src="https://i.imgur.com/yA1XXHE.png">
  470.  
  471. <img src="https://i.imgur.com/pQbM3rh.png" style="margin-bottom:-59px">
  472. <center>
  473. <img src="https://i.imgur.com/koyH1OA.png">
  474. <div class="biographyBit">
  475. <b>current status:</b> status.<br>
  476. <b>since when:</b> date. <br>
  477. <b>comments on this:</b> comments here.
  478. </div>
  479.  
  480. <img src="https://i.imgur.com/d0E536B.png" style="margin-bottom:-59px">
  481. <center>
  482. <img src="https://i.imgur.com/WLDzWhz.png" width="600px">
  483. </div>
  484. </center>
  485. </div>
  486. </div>
  487.  
  488.  
  489.  
  490.  
  491.  
  492.  
  493. <div id="instagramsModal" class="modal-window">
  494.   <div>
  495.     <a href="#modal-close" title="Close" class="modal-close" style="color:#000;">x</a>
  496.                    <img src="https://i.imgur.com/Hw0lotY.png">
  497.   </div>
  498. </div>
  499.  
  500.  
  501.  
  502.  
  503.  
  504.  
  505. <div id="twittersModal" class="modal-window">
  506.   <div style="background-color:#fff;">
  507.     <a href="#modal-close" title="Close" class="modal-close" style="color:#000;">x</a>
  508.                    <img src="https://i.imgur.com/hdWSnAV.png">
  509.   </div>
  510. </div>
  511.  
  512.  
  513.  
  514.  
  515.  
  516.  
  517.  
  518. </body>
  519. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!