API tools faq
paste
Advertisement
mebuckner

Custom Order - Winter - Layout

mebuckner
Nov 16th, 2020
1,039
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.35 KB | None | 0 0
raw download clone embed print report
  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=Alata&display=swap');
  7.  
  8. body {
  9. background-color:#ac9cca;
  10. background-repeat:no-repeat;
  11. background-attachment:fixed;
  12. margin: 0;
  13. overflow:auto;
  14. background-image:url('https://i.imgur.com/zKeq7xb.png');
  15. background-position: left center;
  16. background-size:cover;
  17. }
  18.  
  19. table, tr, td, p, div, .profileInfo td.text {
  20. font-size: 10px;
  21. color: #000;
  22. font-family: Georgia;}
  23.  
  24. h1{
  25.     font-family: 'Alata', sans-serif;
  26.     margin: 0;
  27.     width: 100%;
  28.     text-align: center;
  29.     font-size: 55px;
  30.     text-transform: uppercase;
  31.     margin-top: 16px;
  32.     color: #30354d;
  33. }
  34.  
  35. b{
  36. color:#73b3b9;
  37. }
  38.  
  39. h2{
  40.     width: 321px;
  41.     margin: 0;
  42.     text-align: center;
  43.     margin-bottom: 5px;
  44.     background: #73b3b9;
  45.     color: #fff;
  46.     font-size: 20px;
  47.     padding: 5px;
  48.     font-family: Georgia;
  49.     text-transform: uppercase;
  50. }
  51.  
  52. blockquote{
  53.     margin: 0;
  54.     margin-left: 40px;
  55.     width: 420px;
  56.     text-align: justify;
  57.     font-family: Georgia;
  58.     font-size: 11px;
  59. }
  60.  
  61. a.navigation:link, a.navigation:visited{
  62. font-family: Georgia;
  63.     font-size: 10px;
  64.     color: #607aa7;
  65.     margin-left: 10px;
  66.     text-transform: uppercase;
  67.     margin-top: 10px;
  68.     display: inline-block;
  69.     text-decoration: none;
  70. }
  71.  
  72. a.navigation:hover, a.navigation:active{
  73. text-decoration:none;
  74. color:#c89dac;
  75. }
  76.  
  77.  
  78. a.connectionLinks:link, a.connectionLinks:visited{
  79. font-family: Georgia; font-size: 10px; color: #607aa7; margin-left: 10px; text-transform: uppercase; margin-top: 10px; display: inline-block; text-decoration: none; width: 315px; text-align: center; padding-top: 5px; padding-bottom: 5px;
  80. }
  81.  
  82. a.connectionLinks:hover, a.connectionLinks:active{
  83. text-decoration:none;
  84. color:#c89dac;
  85. }
  86.  
  87. a.popupBoxes:link, a.popupBoxes:visited {
  88. background-color: #607aa7;
  89.     color: white;
  90.     padding: 14px 25px;
  91.     text-align: center;
  92.     text-decoration: none;
  93.     display: inline-block;
  94.     width: 99px;
  95.     font-family: Georgia;
  96.     font-size: 12px;
  97.     text-transform: uppercase;
  98.     border-bottom: 6px solid #fff;
  99. }
  100.  
  101. a.popupBoxes:hover, a.popupBoxes:active {
  102.   background-color: #fff;
  103. color:#607aa7;
  104.     border-bottom: 6px solid #607aa7;
  105. }
  106.  
  107. #connections{display:none;}
  108.  
  109. #connections:target{display:block; width: 549px; height: 383px; background: #fff; position: absolute; margin-top: -315px; margin-left: 351px;}
  110.  
  111. #owesList{display:none;}
  112.  
  113. #owesList:target{display:block; width: 309px; height: 298px; background: #fff; z-index: 99999; position: absolute; margin-top: -305px; margin-left: 15px; overflow:auto;}
  114.  
  115. .container {
  116. width:900px;
  117. height:600px;
  118. position:absolute;
  119. left:0;
  120. right:0;
  121. top:0;
  122. bottom:0;
  123. overflow:hidden;
  124. margin:auto;
  125. color:#fff;
  126. background-color:#fff;
  127. font-family: 'Abel', sans-serif;
  128. border: double 13px #607aa7;
  129. }
  130.  
  131. ::-webkit-scrollbar-thumb:vertical {height:12px; background:#73b3b9;}
  132. ::-webkit-scrollbar-thumb:horizontal {background-color:#fff;}
  133. ::-webkit-scrollbar {width:5px; height:7px;}
  134.  
  135.  
  136. /* customizable snowflake styling */
  137. .snowflake {
  138.   color: #fff;
  139.   font-size: 1em;
  140.   font-family: Arial, sans-serif;
  141.   text-shadow: 0 0 5px #000;
  142. }
  143.  
  144. @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
  145.  
  146.  
  147.  
  148.  
  149.  
  150. .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>
  151. </style>
  152.  
  153.  
  154.  
  155. <!--like to meet-->
  156.  
  157. <html>
  158. <body>
  159.  
  160.  
  161. <div class="snowflakes" aria-hidden="true">
  162.   <div class="snowflake">
  163.   ❅
  164.   </div>
  165.   <div class="snowflake">
  166.   ❆
  167.   </div>
  168.   <div class="snowflake">
  169.   ❅
  170.   </div>
  171.   <div class="snowflake">
  172.   ❆
  173.   </div>
  174.   <div class="snowflake">
  175.   ❅
  176.   </div>
  177.   <div class="snowflake">
  178.   ❆
  179.   </div>
  180.   <div class="snowflake">
  181.     ❅
  182.   </div>
  183.   <div class="snowflake">
  184.     ❆
  185.   </div>
  186.   <div class="snowflake">
  187.     ❅
  188.   </div>
  189.   <div class="snowflake">
  190.     ❆
  191.   </div>
  192.   <div class="snowflake">
  193.     ❅
  194.   </div>
  195.   <div class="snowflake">
  196.     ❆
  197.   </div>
  198. </div>
  199.  
  200.  
  201.  
  202.  
  203. <div class="container">
  204. <div style="width: 338px; height: 395px; margin-bottom: 5px; display: inline-block; vertical-align: top; text-align:center;">
  205. <img src="https://i.imgur.com/uBNZEc7.gif" style="margin-top:10px; margin-bottom: -68px;">
  206. <div id="connections">
  207. <div style="width:539px; text-align:right;">
  208. <a href="#close" style="color:#000;">X</a>
  209. </div>
  210.  
  211.  
  212. <div style="width:185px; height:185px; display:inline-block; vertical-align:top; margin-top:10px; margin-left:10px;">
  213. <img src="https://i.imgur.com/pOFDEaz.gif">
  214. </div>
  215. <div style="width: 321px; height: 175px; background: #fff; display: inline-block; vertical-align: top; margin-left: 10px; margin-top: 10px; font-family: Georgia; font-size: 12px; padding: 5px; text-align: justify; overflow: auto;">
  216. <h2>connection name</h2>
  217. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat, sem eget auctor fringilla, nisi odio tristique eros, quis rutrum neque mauris non urna. Praesent eget dapibus nisl, in vulputate augue. Integer egestas magna ut lacus congue, in lobortis nunc congue. Sed sit amet dui fermentum, gravida lectus quis, suscipit urna. Nunc et bibendum dolor. Nunc non felis tincidunt, congue lectus a, gravida mauris. Morbi a pretium odio. Sed convallis aliquet sollicitudin. Vestibulum tellus massa, accumsan vitae nulla ut, pretium maximus sem. Mauris vel sodales lorem. Etiam vel sagittis tellus. In non mi ut neque accumsan bibendum. Morbi eget neque quis nisl condimentum vestibulum.
  218. <br><br>
  219.  
  220.  
  221. <h2>connection name</h2>
  222. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat, sem eget auctor fringilla, nisi odio tristique eros, quis rutrum neque mauris non urna. Praesent eget dapibus nisl, in vulputate augue. Integer egestas magna ut lacus congue, in lobortis nunc congue. Sed sit amet dui fermentum, gravida lectus quis, suscipit urna. Nunc et bibendum dolor. Nunc non felis tincidunt, congue lectus a, gravida mauris. Morbi a pretium odio. Sed convallis aliquet sollicitudin. Vestibulum tellus massa, accumsan vitae nulla ut, pretium maximus sem. Mauris vel sodales lorem. Etiam vel sagittis tellus. In non mi ut neque accumsan bibendum. Morbi eget neque quis nisl condimentum vestibulum.
  223. <br><br>
  224.  
  225.  
  226. <h2>connection name</h2>
  227. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat, sem eget auctor fringilla, nisi odio tristique eros, quis rutrum neque mauris non urna. Praesent eget dapibus nisl, in vulputate augue. Integer egestas magna ut lacus congue, in lobortis nunc congue. Sed sit amet dui fermentum, gravida lectus quis, suscipit urna. Nunc et bibendum dolor. Nunc non felis tincidunt, congue lectus a, gravida mauris. Morbi a pretium odio. Sed convallis aliquet sollicitudin. Vestibulum tellus massa, accumsan vitae nulla ut, pretium maximus sem. Mauris vel sodales lorem. Etiam vel sagittis tellus. In non mi ut neque accumsan bibendum. Morbi eget neque quis nisl condimentum vestibulum.
  228. <br><br>
  229.  
  230. <h2>connection name</h2>
  231. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat, sem eget auctor fringilla, nisi odio tristique eros, quis rutrum neque mauris non urna. Praesent eget dapibus nisl, in vulputate augue. Integer egestas magna ut lacus congue, in lobortis nunc congue. Sed sit amet dui fermentum, gravida lectus quis, suscipit urna. Nunc et bibendum dolor. Nunc non felis tincidunt, congue lectus a, gravida mauris. Morbi a pretium odio. Sed convallis aliquet sollicitudin. Vestibulum tellus massa, accumsan vitae nulla ut, pretium maximus sem. Mauris vel sodales lorem. Etiam vel sagittis tellus. In non mi ut neque accumsan bibendum. Morbi eget neque quis nisl condimentum vestibulum.
  232. <br><br>
  233.  
  234. </div><br><br>
  235. <div style="width: 325px; height: 165px; background: #fff; display: inline-block; vertical-align: top; margin-left: -10px; overflow: auto; text-align: justify; font-family: Georgia; font-size: 12px; padding: 5px;">
  236. <h2>my friends</h2>
  237. <a href="/" class="connectionLinks">connection name</a>
  238. <a href="/" class="connectionLinks">connection name</a>
  239. <a href="/" class="connectionLinks">connection name</a>
  240. <a href="/" class="connectionLinks">connection name</a>
  241. <a href="/" class="connectionLinks">connection name</a>
  242. <a href="/" class="connectionLinks">connection name</a>
  243. <a href="/" class="connectionLinks">connection name</a>
  244. <a href="/" class="connectionLinks">connection name</a>
  245. <a href="/" class="connectionLinks">connection name</a>
  246. <a href="/" class="connectionLinks">connection name</a>
  247. <a href="/" class="connectionLinks">connection name</a>
  248. <a href="/" class="connectionLinks">connection name</a>
  249. <a href="/" class="connectionLinks">connection name</a>
  250.  
  251. </div>
  252. <div style="width:175px; height:175px; display:inline-block; vertical-align:top; margin-left:10px;">
  253. <img src="https://i.imgur.com/yfNcK5C.gif">
  254. </div>
  255. </div>
  256.  
  257.  
  258. <div id="owesList">
  259. <h2>I owe you</h2>
  260. <b>name</b> - 00/00 - reply/starter <br>
  261. <b>name</b> - 00/00 - reply/starter <br>
  262. <b>name</b> - 00/00 - reply/starter <br>
  263. <b>name</b> - 00/00 - reply/starter <br>
  264.  
  265.  
  266. <h2 style="margin-top:20px;">You owe me</h2>
  267. <b>name</b> - 00/00 - reply/starter <br>
  268. <b>name</b> - 00/00 - reply/starter <br>
  269. <b>name</b> - 00/00 - reply/starter <br>
  270. <b>name</b> - 00/00 - reply/starter <br>
  271.  
  272. <h2 style="margin-top:20px;">last updated: 00/00</h2>
  273.  
  274. </div>
  275. <a href="#owesList" class="popupBoxes">Owes List</a>
  276. <a href="#connections" class="popupBoxes" style="margin-left:10px;">Connections</a>
  277. </div>
  278. <div style="width: 559px; height: 395px; display: inline-block; vertical-align: top;">
  279.  
  280. <div style="width:185px; height:185px; display:inline-block; vertical-align:top; margin-top:10px; margin-left:10px;">
  281. <img src="https://i.imgur.com/uzZXv3b.gif">
  282. </div>
  283. <div style="width: 331px; height: 175px; background: #fff; display: inline-block; vertical-align: top; margin-left: 10px; margin-top: 10px; font-family: Georgia; font-size: 12px; padding: 5px; text-align: justify; overflow: auto;">
  284. <h2>the story of a girl</h2>
  285. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat, sem eget auctor fringilla, nisi odio tristique eros, quis rutrum neque mauris non urna. Praesent eget dapibus nisl, in vulputate augue. Integer egestas magna ut lacus congue, in lobortis nunc congue. Sed sit amet dui fermentum, gravida lectus quis, suscipit urna. Nunc et bibendum dolor. Nunc non felis tincidunt, congue lectus a, gravida mauris. Morbi a pretium odio. Sed convallis aliquet sollicitudin. Vestibulum tellus massa, accumsan vitae nulla ut, pretium maximus sem. Mauris vel sodales lorem. Etiam vel sagittis tellus. In non mi ut neque accumsan bibendum. Morbi eget neque quis nisl condimentum vestibulum.
  286. <br><br>
  287. Integer ut semper orci, ac tristique nulla. In hac habitasse platea dictumst. Fusce tristique ultricies diam vel placerat. Integer tristique pulvinar ullamcorper. Ut ac augue condimentum eros bibendum molestie in nec massa. Pellentesque euismod, turpis eu rhoncus ornare, nisl nulla dignissim quam, eu gravida leo nulla ut ligula. Maecenas vel facilisis neque, nec dictum turpis.
  288. <br><br>
  289. Suspendisse vel enim id neque dapibus porta. Donec eget semper dolor, ac vulputate lorem. Duis tempus in tortor nec ullamcorper. Fusce vel ullamcorper erat, consectetur placerat orci. Praesent dictum et purus non vulputate. Phasellus mollis, dui eget luctus pharetra, leo nulla convallis ex, vitae suscipit libero enim vel libero. Mauris semper, ligula sit amet rhoncus feugiat, leo diam ultricies est, id finibus est neque eget magna. Etiam ultricies eleifend tortor, quis commodo erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ornare eros leo, sit amet gravida ex volutpat in. Etiam euismod a odio id vehicula. Morbi diam libero, cursus id porttitor at, sodales vitae orci. Quisque laoreet dui sed felis euismod luctus.
  290. <br><br>
  291. Duis interdum pulvinar diam. Phasellus ut est turpis. Integer porttitor lectus luctus sapien finibus pretium. Vivamus et massa euismod, posuere leo et, vestibulum diam. Praesent sodales hendrerit euismod. Sed iaculis, sem nec convallis aliquet, nibh lorem facilisis ante, nec molestie nisi tellus ac purus. Proin fermentum fermentum augue in bibendum. Nulla consectetur felis suscipit mi ullamcorper elementum. Maecenas sit amet massa ante. Nullam porttitor, metus vel mattis dapibus, orci purus faucibus urna, laoreet ultrices ex dolor ut arcu. Duis dictum dui nec dolor mollis feugiat. Nullam rutrum nisl dapibus eros ultricies, a ullamcorper quam sagittis. Duis sit amet metus porta, elementum felis quis, auctor dolor.
  292. <br><br>
  293. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut malesuada turpis sed tincidunt blandit. In pulvinar sed velit vitae gravida. Morbi aliquet lobortis rhoncus. Morbi pulvinar enim ac diam pulvinar accumsan. Donec nec est vitae sapien tincidunt sagittis sit amet eu quam. Quisque at mauris feugiat, aliquet tellus eget, molestie est. Aenean gravida malesuada iaculis. Nulla quis posuere est, ac vulputate quam. Sed vel gravida nibh. Integer diam leo, molestie vitae velit ullamcorper, commodo ullamcorper eros. Phasellus tincidunt ex tincidunt lacus interdum euismod. Duis eu diam arcu.
  294.  
  295. </div><br><br>
  296. <div style="width: 342px; height: 165px; background: #fff; display: inline-block; vertical-align: top; margin-left: 10px; overflow:auto; text-align:justify; font-family:Georgia; font-size:12px; padding:5px;">
  297. <h2>I love you for always</h2>
  298. <b>status:</b> here<br>
  299. <b>to whom:</b> here<br>
  300. <b>since when:</b> here<br>
  301. <b>comments:</b> here
  302. </div>
  303. <div style="width:175px; height:175px; display:inline-block; vertical-align:top; margin-left:10px;">
  304. <img src="https://i.imgur.com/yboYWYl.gif">
  305. </div>
  306.  
  307. </div>
  308. <div style="width: 397px; height: 200px; display: inline-block; vertical-align: top;">
  309. <img src="https://i.imgur.com/5woktWt.gif">
  310. </div>
  311. <div style="width:500px; height:200px; display:inline-block; vertical-align:top; text-align:center;">
  312. <h1>first middle last</h1>
  313. <blockquote>Are you one of them girls That <b>peels off the Bud Light label</b> Just might <i>run a pool table</i> Roll your eyes if I call you an <strong>angel</strong> Ain't you one of them girls I ask you to dance, <b>you say no</b> Just to see how far I'll go Your song comes on and your <i>eyes close</i> That's when I know, yeah</blockquote>
  314.  
  315. <a href="/" class="navigation">home</a>
  316. <a href="/" class="navigation">message</a>
  317. <a href="/" class="navigation">comment</a>
  318. <a href="/" class="navigation">photos</a>
  319. <a href="/" class="navigation">stream</a>
  320. <a href="/" class="navigation">bulletins</a>
  321. <a href="/" class="navigation">blogs</a>
  322. <a href="/1631904" class="navigation">credit</a>
  323. </div>
  324. </div>
  325. </body>
  326. </html>
  327.  
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!