API tools faq
paste
mebuckner

Customization - Chris

mebuckner
Oct 13th, 2020 (edited)
98
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.49 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=Yanone+Kaffeesatz:wght@300&display=swap');
  5.  
  6. body {
  7. background-color:#464646;
  8. background-repeat:no-repeat;
  9. background-attachment:fixed;
  10. margin: 0;
  11. overflow:auto;
  12. background-size:cover;
  13. background-image:url('https://i.imgur.com/jIp8Dqs.jpg');
  14. }
  15.  
  16. table, tr, td, li, p, div, .profileInfo td.text {
  17.     font-size: 10px;
  18.     color: #000;
  19.     font-family: 'Poppins', sans-serif;}
  20.  
  21.  
  22. .container {
  23. width:800px;
  24. height:639px;
  25. position:absolute;
  26. left:0;
  27. right:0;
  28. top:50px;
  29. overflow:hidden;
  30. margin:auto;
  31. color:#fff;
  32. background-color:#fff;
  33. font-family: 'Abel', sans-serif;
  34. border: 10px solid #131313;
  35. }
  36.  
  37.  
  38. .topBar{
  39.     width: 808px;
  40.     height: 40px;
  41.     position: fixed;
  42.     top: 59px;
  43.     background-color: #131313;
  44.     z-index: 99999;
  45.     text-align: center;
  46. }
  47.  
  48. .leftSide{
  49. width:270px;
  50. height:auto;
  51. display:inline-block;
  52. vertical-align:top;
  53. margin-top:39px;
  54. }
  55.  
  56. .middleSide{
  57. width:265px;
  58. height:auto;
  59. display:inline-block;
  60. vertical-align:top;
  61. margin-right:10px;
  62. margin-top:39px;
  63. }
  64.  
  65. .rightSide{
  66. width:250px;
  67. height:auto;  
  68. display:inline-block;
  69. vertical-align:top;
  70. margin-top:39px;
  71. margin-right:-3px;
  72. }
  73.  
  74. .earlyYears{
  75. margin-top: 5px;
  76.     padding: 5px;
  77.     background: #fff;
  78.     width: 250px;
  79.     height: 225px;
  80.     display: inline-block;
  81.     vertical-align: top;
  82.     overflow: auto;
  83.     margin-left: 0px;
  84.     margin-bottom: 8px;
  85. text-align: justify;
  86. }
  87.  
  88. .presentYears{
  89. margin-top: 13px;
  90.     padding: 5px;
  91.     background: #fff;
  92.     width: 250px;
  93.     height: 225px;
  94.     display: inline-block;
  95.     vertical-align: top;
  96.     overflow: auto;
  97.     margin-left: 0px;
  98.     margin-bottom: 8px;
  99. text-align: justify;
  100. }
  101.  
  102. .basicContainer{
  103.  width:250px;
  104. height:200px;
  105. }
  106.  
  107. .basicImage{
  108. opacity:1;
  109. display:block;
  110. transition: .5 ease;
  111. backface-visibility:hidden;
  112. }
  113.  
  114. .basicText{
  115. transition:.5 ease;
  116. opacity:0;
  117. position:absolute;
  118. top:50%;
  119. left:50%;
  120. transform: translate(-50%, -50%);
  121. -ms-transform: translate(-50%, -50%);
  122. text-align:justify;
  123. }
  124.  
  125. .basicContainer:hover image{
  126. opacity:0.3;
  127. }
  128.  
  129. .basicContainer:hover .basicText{
  130. opacity:1;
  131. }
  132.  
  133. .basicInsideText{
  134. background: #fff;
  135.     color: #000;
  136.     font-size: 10px;
  137.     font-family: Georgia;
  138.     text-align: justify;
  139.     overflow: auto;
  140.     height: 140px;
  141.     width: 180px;
  142.     padding: 10px;
  143.     position: relative;
  144.     margin-top: -263px;
  145.     margin-left: 556px;
  146. }
  147.  
  148. .occupationContainer{
  149.  width:250px;
  150. height:200px;
  151. }
  152.  
  153. .occupationImage{
  154. opacity:1;
  155. display:block;
  156. transition: .5 ease;
  157. backface-visibility:hidden;
  158. }
  159.  
  160. .occupationText{
  161. transition:.5 ease;
  162. opacity:0;
  163. position:absolute;
  164. top:50%;
  165. left:50%;
  166. transform: translate(-50%, -50%);
  167. -ms-transform: translate(-50%, -50%);
  168. text-align:justify;
  169. }
  170.  
  171. .occupationContainer:hover image{
  172. opacity:0.3;
  173. }
  174.  
  175. .occupationContainer:hover .occupationText{
  176. opacity:1;
  177. }
  178.  
  179. .occupationInsideText{
  180. background: #fff;
  181.     color: #000;
  182.     font-size: 10px;
  183.     font-family: Georgia;
  184.     text-align: justify;
  185.     overflow: auto;
  186.     height: 140px;
  187.     width: 180px;
  188.     padding: 10px;
  189.     position: relative;
  190.     margin-top: 40px;
  191.     margin-left: 556px;
  192. }
  193.  
  194. .loveContainer{
  195.  width:250px;
  196. height:200px;
  197. }
  198.  
  199. .loveImage{
  200. opacity:1;
  201. display:block;
  202. transition: .5 ease;
  203. backface-visibility:hidden;
  204. }
  205.  
  206. .loveText{
  207. transition:.5 ease;
  208. opacity:0;
  209. position:absolute;
  210. transform: translate(-50%, -50%);
  211. -ms-transform: translate(-50%, -50%);
  212. text-align:justify;
  213. margin-top: -100px;
  214.     margin-left: 128px;
  215. }
  216.  
  217. .loveContainer:hover image{
  218. opacity:0.3;
  219. }
  220.  
  221. .loveContainer:hover .loveText{
  222. opacity:1;
  223. }
  224.  
  225. .loveInsideText{
  226. background: #fff;
  227.     color: #000;
  228.     font-size: 10px;
  229.     font-family: Georgia;
  230.     text-align: justify;
  231.     overflow: auto;
  232.     height: 140px;
  233.     width: 180px;
  234.     padding: 10px;
  235.     position: relative;
  236. }
  237.  
  238. a.topBarNavigation:link, a.topBarNavigation:visited {
  239.  width: 17px;
  240.     color: #fff;
  241.     padding: 10px 15px;
  242.     text-align: center;
  243.     text-decoration: none;
  244.     display: inline-block;
  245.     font-family: 'Yanone Kaffeesatz', serif;
  246.     font-size: 18px;
  247.     text-transform: uppercase;
  248. }
  249.  
  250. a.topBarNavigation:hover, a.topBarNavigation:active {
  251. color: #fff;
  252. letter-spacing: 7px;
  253. }
  254.  
  255. b{
  256. font-family: 'Yanone Kaffeesatz', serif;
  257.     color: #131313;
  258.     font-size: 14px;
  259.     text-transform: lowercase;
  260.     padding-top: 10px;
  261.     padding-bottom: 10px;
  262.     margin-bottom: 3px;
  263.     line-height: 14px;
  264. }
  265.  
  266. h1{
  267. font-family: 'Yanone Kaffeesatz', serif;
  268.     font-size: 21px;
  269.     color: #fff;
  270.     width: 440px;
  271.     text-align: left;
  272.     text-transform: uppercase;
  273.     padding-top: 6px;
  274.     padding-bottom: 5px;
  275.     padding-right: 5px;
  276.     line-height: 25px;
  277.     letter-spacing: 12px;
  278.     margin: 0px;
  279.     margin-left: 10px;
  280. display: inline-block;
  281. }
  282.  
  283. h2{
  284. font-family: 'Yanone Kaffeesatz', serif;
  285.     font-size: 12px;
  286.     background-color: #464646;
  287.     color: #fff;
  288.     width: 250px;
  289.     text-align: center;
  290.     text-transform: uppercase;
  291.     letter-spacing: 5px;
  292.     margin: 0;
  293.     padding: 0;
  294.     padding-top: 5px;
  295.     padding-bottom: 1px;
  296.     line-height: 30px;
  297.     margin-bottom: 5px;
  298. }
  299.  
  300. h3{
  301. font-family: 'Yanone Kaffeesatz', serif;
  302.     font-size: 12px;
  303.     background-color: #464646;
  304.     color: #fff;
  305.     width: 176px;
  306.     text-align: center;
  307.     text-transform: uppercase;
  308.     letter-spacing: 5px;
  309.     margin: 0;
  310.     padding: 0;
  311.     padding-top: 5px;
  312.     padding-bottom: 1px;
  313.     line-height: 30px;
  314.     margin-bottom: 5px;
  315. }
  316.  
  317. ::-webkit-scrollbar-thumb:vertical {height:12px; background:#fff; border-top:10px solid #131313; border-bottom:10px solid #131313;}
  318. ::-webkit-scrollbar-thumb:horizontal {background-color:#fff;}
  319. ::-webkit-scrollbar {width:5px; height:7px;}
  320.  
  321.  
  322. .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>
  323. </style>
  324.  
  325.  
  326.  
  327.  
  328.  
  329.  
  330.  
  331.  
  332.  
  333.  
  334. <!--like to meet-->
  335. <html>
  336. <body>
  337. <div class="container">
  338. <div class="topBar">
  339. <h1>first middle last</h1>
  340.  
  341. <a href="/" class="topBarNavigation" title="HOME"><span class="th th-home-o"></span></a>
  342. <a href="/send_message.php?member_id=1654528" class="topBarNavigation" title="MESSAGE"><span class="th th-envelope-o"></span></a>
  343. <a href="/add_comment.php?member_id=1654528" class="topBarNavigation" title="COMMENTS"><span class="th th-paper-plane-o"></span></a>
  344. <a href="/gallery.php?member_id=1654528" class="topBarNavigation" title="PICTURES"><span class="th th-camera-o"></span></a>
  345. <a href="/status_stream.php?member_id=1654528"class="topBarNavigation" title="STREAM"><span class="th th-notification-o"></span></a>
  346. <a href="/view_blog.php?id=1654528"class="topBarNavigation" title="BLOG"><span class="th th-folder-2-o"></span></a>
  347. <a href="/1631904" class="topBarNavigation" title="CREDIT"><span class="th th-code"></span></a>
  348. </div>
  349.  
  350. <div class="leftSide">
  351. <img src="https://i.imgur.com/iHmvs31.png">
  352. </div>
  353.  
  354. <div class="middleSide">
  355. <div class="earlyYears">
  356. <h2>Early Years:</h2>
  357. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra orci sagittis eu volutpat odio facilisis. Libero volutpat sed cras ornare arcu dui. Nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Accumsan tortor posuere ac ut. Magnis dis parturient montes nascetur ridiculus mus. Eros in cursus turpis massa tincidunt. Aliquet bibendum enim facilisis gravida neque convallis a cras semper. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Porttitor lacus luctus accumsan tortor posuere ac ut consequat. Diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Purus semper eget duis at. Sed risus ultricies tristique nulla aliquet enim tortor at. Iaculis eu non diam phasellus vestibulum lorem. Aliquam ut porttitor leo a diam sollicitudin tempor. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Tempor commodo ullamcorper a lacus. At lectus urna duis convallis convallis.
  358. <br><br>
  359. Amet nisl suscipit adipiscing bibendum est ultricies. Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Mauris rhoncus aenean vel elit scelerisque mauris. Nec dui nunc mattis enim ut tellus elementum. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris. Lectus proin nibh nisl condimentum id. Amet dictum sit amet justo donec enim diam vulputate ut. Consectetur purus ut faucibus pulvinar elementum. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit duis. Lacus vestibulum sed arcu non odio. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Eget est lorem ipsum dolor sit amet consectetur adipiscing elit. Mauris vitae ultricies leo integer malesuada nunc. Pharetra magna ac placerat vestibulum lectus mauris. Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo.
  360. </div>
  361. <img src="https://i.imgur.com/Wzt9BuA.png" style="padding: 3px;">
  362. <img src="https://i.imgur.com/FhUxJju.png" style="padding: 3px;">
  363. <img src="https://i.imgur.com/hoqV7Tn.png" style="padding: 3px;">
  364. <div class="presentYears">
  365. <h2>Present Life:</h2>
  366. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra orci sagittis eu volutpat odio facilisis. Libero volutpat sed cras ornare arcu dui. Nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Accumsan tortor posuere ac ut. Magnis dis parturient montes nascetur ridiculus mus. Eros in cursus turpis massa tincidunt. Aliquet bibendum enim facilisis gravida neque convallis a cras semper. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Porttitor lacus luctus accumsan tortor posuere ac ut consequat. Diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Purus semper eget duis at. Sed risus ultricies tristique nulla aliquet enim tortor at. Iaculis eu non diam phasellus vestibulum lorem. Aliquam ut porttitor leo a diam sollicitudin tempor. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Tempor commodo ullamcorper a lacus. At lectus urna duis convallis convallis.
  367. <br><br>
  368. Amet nisl suscipit adipiscing bibendum est ultricies. Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Mauris rhoncus aenean vel elit scelerisque mauris. Nec dui nunc mattis enim ut tellus elementum. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris. Lectus proin nibh nisl condimentum id. Amet dictum sit amet justo donec enim diam vulputate ut. Consectetur purus ut faucibus pulvinar elementum. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit duis. Lacus vestibulum sed arcu non odio. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Eget est lorem ipsum dolor sit amet consectetur adipiscing elit. Mauris vitae ultricies leo integer malesuada nunc. Pharetra magna ac placerat vestibulum lectus mauris. Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo.
  369. </div>
  370. </div>
  371.  
  372. <div class="rightSide">
  373.  
  374. <div class="basicContainer">
  375. <img src="https://i.imgur.com/X9R9MbV.png" class="basicImage">
  376. <div class="basicText">
  377. <div class="basicInsideText">
  378. <h3>Basic</h3>
  379. <b>fact:</b> stuff.<br>
  380. <b>fact:</b> stuff.<br>
  381. <b>fact:</b> stuff.<br>
  382. <b>fact:</b> stuff.<br>
  383. <b>fact:</b> stuff.<br>
  384. <b>fact:</b> stuff.<br>
  385. <b>fact:</b> stuff.<br>
  386. <b>fact:</b> stuff.<br>
  387. <b>fact:</b> stuff.<br>
  388. <b>fact:</b> stuff.<br>
  389. </div>
  390. </div>
  391. </div>
  392.  
  393. <div class="occupationContainer">
  394. <img src="https://i.imgur.com/NRnh5Ql.png" class="occupationImage">
  395. <div class="occupationText">
  396. <div class="occupationInsideText">
  397. <h3>Occupation</h3>
  398. Justo mattis ullamcorper arcu sollicitudin in et, sem metus metus ut adipiscing montes, arcu arcu magna lectus vel. Nonummy quam eget ut vel tortor, nam odio suspendisse nibh tortor turpis elit, amet aliquip mollis dui purus sed nec, nam vivamus, morbi nec imperdiet fermentum non. Wisi ad, iaculis erat proin habitasse wisi a nulla, itaque a consectetuer vestibulum dolor et, sagittis maecenas faucibus, erat nisi. Sed lobortis integer eleifend bibendum. Rhoncus quam natoque neque sodales sagittis. Arcu ullamcorper non, vestibulum molestie leo pharetra mollis, voluptas sed, aptent nulla porttitor, lacus id bibendum id urna at purus. Semper augue mi dignissim, nibh malesuada augue, lorem diam sed quam, dui elit eget nulla arcu suspendisse magna. In donec mauris non, aenean sit erat ultricies amet, neque sollicitudin ipsum felis, mollit luctus congue felis libero leo risus, ligula molestie in. Non odio accumsan, lacus taciti id erat lectus aliquam, nunc sit iaculis porta mauris imperdiet fusce, ornare magna sit consequat. Amet fermentum, at vivamus leo velit vestibulum wisi, nibh convallis, nisl scelerisque ut dignissim maecenas sem volutpat, consectetuer turpis erat donec ac. Donec quisque, metus tellus sem imperdiet porta. Metus ut, facilisis vehicula sociosqu mi.
  399. </div>
  400. </div>
  401. </div>
  402.  
  403. <div class="loveContainer">
  404. <img src="https://i.imgur.com/QeXDHoL.png" class="loveImage">
  405. <div class="loveText">
  406. <div class="loveInsideText">
  407. <h3>Love</h3>
  408. <b>Who:</b> Name Here.<br>
  409. <b>when we met:</b> 00.00.0000<br>
  410. <b>made it official:</b> 00.00.0000<br>
  411. <b>said I love you:</b> 00.00.0000<br>
  412. <b>love letter:</b> Justo mattis ullamcorper arcu sollicitudin in et, sem metus metus ut adipiscing montes, arcu arcu magna lectus vel. Nonummy quam eget ut vel tortor, nam odio suspendisse nibh tortor turpis elit, amet aliquip mollis dui purus sed nec, nam vivamus, morbi nec imperdiet fermentum non. Wisi ad, iaculis erat proin habitasse wisi a nulla, itaque a consectetuer vestibulum dolor et, sagittis maecenas faucibus, erat nisi. Sed lobortis integer eleifend bibendum. Rhoncus quam natoque neque sodales sagittis. Arcu ullamcorper non, vestibulum molestie leo pharetra mollis, voluptas sed, aptent nulla porttitor, lacus id bibendum id urna at purus. Semper augue mi dignissim, nibh malesuada augue, lorem diam sed quam, dui elit eget nulla arcu suspendisse magna. In donec mauris non, aenean sit erat ultricies amet, neque sollicitudin ipsum felis, mollit luctus congue felis libero leo risus, ligula molestie in. Non odio accumsan, lacus taciti id erat lectus aliquam, nunc sit iaculis porta mauris imperdiet fusce, ornare magna sit consequat. Amet fermentum, at vivamus leo velit vestibulum wisi, nibh convallis, nisl scelerisque ut dignissim maecenas sem volutpat, consectetuer turpis erat donec ac. Donec quisque, metus tellus sem imperdiet porta. Metus ut, facilisis vehicula sociosqu mi.<br>
  413. </div>
  414. </div>
  415. </div>
  416.  
  417.  
  418. </div>
  419. </div>
  420. </body>
  421. </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!