API tools faq
paste
Advertisement
kay_kodes

when you love something you protect it || house article

kay_kodes
May 23rd, 2022
85
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.43 KB | None | 0 0
raw download clone embed print report
  1. ♡ hiii! i am back with another code. already?? yes yes. because i have so much free time! so, the other day i posted on my Instagram allowing you guys to pick the next code. and it's clear you all are looking forward to a house article with columns. someone also voted article *eyes* and i did plan on making both of them one day. SO! i merged them together. so if it doesn't look TOOOO much like either one, then you'll know why :) well, before i begin rambling again, go ahead and have fun with the code! keep the credits or i'll have Thena turn you into ribbons ♡
  2.  
  3. best dreams,
  4. kay <3
  5.  
  6.  
  7. --CODE STARTS BELOW THIS TEXT--
  8. <!--FONTMEME FOR TITLE: Eternals Film Font || FONTMEME FOR SIGNATURE: Senja Font-->
  9.  
  10. <html>
  11. <center>
  12. <link href="https://fonts.googleapis.com/css2?family=PT+Serif&display=swap" rel="stylesheet">
  13. <style>
  14. /*Scrollbar*/
  15. ::-webkit-scrollbar {width: 0px;}
  16. ::-webkit-scrollbar-thumb {background: #fff;}
  17. ::-webkit-scrollbar-thumb:hover {background: #fff;}
  18. .box{
  19. position: relative;
  20. text-align: center;
  21.  
  22. }
  23. .booktitle{
  24. font-family: 'Lavishly Yours', cursive;
  25. font-size:80px;
  26. color:#00539c;
  27. position: absolute;
  28. top: 50%;
  29. left: 50%;
  30. transform: translate(-50%, -50%);
  31. }
  32. .page{
  33. text-decoration: none;
  34. color:black;
  35. padding: 10px
  36.  
  37. }
  38.  
  39. .columnone{
  40. float: right;
  41. width:300px;
  42. height:2000px;
  43. background-color:#ebddcc;
  44. border: 2px #000 solid;
  45. margin-right:10px;
  46. margin-top:20px;
  47. margin-bottom: 105px;
  48. overflow:hidden;
  49.  
  50. }
  51. .columntwo{
  52. float:left;
  53. width:450px;
  54. height:2050px;
  55. margin-left:30px;
  56. margin-bottom: 10px;
  57. overflow: auto;
  58. }
  59. .openjobs1{
  60. float: center;
  61. text-align: center;
  62. font-size: 15px;
  63. max-width: 90%;
  64. max-height:100%;
  65. border: 2px #000 solid;
  66. overflow: auto;
  67. background-color: #ebddcc;
  68.  
  69.  
  70. }
  71. .openjobs2{
  72. float: center;
  73. text-align: center;
  74. font-size: 15px;
  75. max-width: 90%;
  76. max-height:100%;
  77. border: 2px #000 solid;
  78. overflow: auto;
  79. background-color: #ebddcc;
  80. margin-top:10px
  81.  
  82.  
  83. </style>
  84. <a name="one">
  85. <div style="background:
  86. #ebddcc;border:3px solid #000;width:800px;height:1050px;border-radius:0px;overflow:auto">
  87. <div class="box">
  88. <center>
  89. <img src="https://fontmeme.com/permalink/220523/addccf5f2d36286a8fbcbdd3f6410161.png" border="0" style="margin-top:30px; width:550px;margin-bottom:10px">
  90. </center></div>
  91. <p>
  92.  
  93. <hr style="border:solid;border-width:thin;">
  94. <p>
  95. <span><marquee direction="right">#000 - DD/MM/YY</marquee>
  96. <p>
  97. <hr style="border:solid;border-width:thin;">
  98.  
  99. <p>
  100. <div class="columnone">
  101. <p>
  102. <b style="font-size:20px">OPEN JOBS</b>
  103.  
  104. <!--every job-->
  105. <div class="openjobs1">
  106. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  107. <summary style="font-size:px;font-weight:bold">
  108. <div class="body">
  109. <center>JOB NAME HERE
  110. </div></summary>
  111. <div style="margin-right:10px;margin-left:10px">
  112. <p>
  113. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus.
  114. </p></div></details>
  115. </div>
  116.  
  117. <!--every job-->
  118. <div class="openjobs2">
  119. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  120. <summary style="font-size:px;font-weight:bold">
  121. <div class="body">
  122. <center>JOB NAME HERE
  123. </div></summary>
  124. <div style="margin-right:10px;margin-left:10px">
  125. <p>
  126. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus.
  127. </p></div></details>
  128. </div>
  129.  
  130. <!--every job-->
  131. <div class="openjobs2">
  132. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  133. <summary style="font-size:px;font-weight:bold">
  134. <div class="body">
  135. <center>JOB NAME HERE
  136. </div></summary>
  137. <div style="margin-right:10px;margin-left:10px">
  138. <p>
  139. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus.
  140. </p></div></details>
  141. </div>
  142.  
  143. <!--every job-->
  144. <div class="openjobs2">
  145. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  146. <summary style="font-size:px;font-weight:bold">
  147. <div class="body">
  148. <center>JOB NAME HERE
  149. </div></summary>
  150. <div style="margin-right:10px;margin-left:10px">
  151. <p>
  152. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus.
  153. </p></div></details>
  154. </div>
  155.  
  156. <!--every job-->
  157. <div class="openjobs2">
  158. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  159. <summary style="font-size:px;font-weight:bold">
  160. <div class="body">
  161. <center>JOB NAME HERE
  162. </div></summary>
  163. <div style="margin-right:10px;margin-left:10px">
  164. <p>
  165. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus.
  166. </p></div></details>
  167. </div>
  168.  
  169. <p>
  170. <hr style="border:solid;border-width:thin;">
  171. <p>
  172. <b style="font-size:20px">WEEKLY GOAL</b>
  173. <p style="margin-left:8px; margin-right:8px">
  174. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi.Maxime accusantium qui corporis ratione eum asperiores nulla.<br><br>
  175. - Add Something Here<br>
  176. - Add Something Here<br>
  177. - Add Something Here<br>
  178. <hr style="border:solid;border-width:thin;">
  179. <b style="font-size:20px">ANNOUNCEMENTS</b>
  180. <p style="margin-left:8px; margin-right:8px">
  181. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi.Maxime accusantium qui corporis ratione eum asperiores nulla. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi.
  182. <p style="margin-left:8px; margin-right:8px">
  183. Maxime accusantium qui corporis ratione eum asperiores nulla. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi.Maxime accusantium qui corporis ratione eum asperiores nulla.
  184. <p>
  185. <br><hr style="border:solid;border-width:thin;">
  186. <b style="font-size:20px">USER OF THE WEEK</b>
  187. <center><img src="https://i.pinimg.com/originals/e4/6b/ea/e46bea8ac7fe9c2bc3d8938009936fee.gif" style="width:150px;height:150px;border-radius:50%;margin-bottom:10px;margin-top:15px"></center>
  188. <p style="margin-left:8px; margin-right:8px">
  189. <b style="font-size:20px">THEIR NAME HERE</b><br><br>
  190.  
  191. <b>Achievements</b><br>
  192. - Add Something Here<br>
  193. - Add Something Here<br>
  194. - Add Something Here<br>
  195.  
  196. <hr style="border:solid;border-width:thin;">
  197. <b style="font-size:20px">UPCOMING EVENTS</b>
  198. <p>
  199. <!--every event-->
  200. <div class="openjobs1">
  201. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  202. <summary style="font-size:px;font-weight:bold">
  203. <div class="body">
  204. <center>EVENT NAME HERE
  205. </div></summary>
  206. <div style="margin-right:10px;margin-left:10px">
  207. <p>
  208. <b>DATE.</b>
  209. <br>Date Here<br><br>
  210. <b>TIME.</b>
  211. <br>Time Here (Timezone Here)<br><br>
  212. <b>EVENT BY.</b>
  213. <br>Name(s) Here<br><br>
  214. <b>CONTACT.</b>
  215. <br>Name(s) Here
  216. </p></div></details>
  217. </div>
  218.  
  219. <!--every event-->
  220. <div class="openjobs2">
  221. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  222. <summary style="font-size:px;font-weight:bold">
  223. <div class="body">
  224. <center>EVENT NAME HERE
  225. </div></summary>
  226. <div style="margin-right:10px;margin-left:10px">
  227. <p>
  228. <b>DATE.</b>
  229. <br>Date Here<br><br>
  230. <b>TIME.</b>
  231. <br>Time Here (Timezone Here)<br><br>
  232. <b>EVENT BY.</b>
  233. <br>Name(s) Here<br><br>
  234. <b>CONTACT.</b>
  235. <br>Name(s) Here
  236. </p></div></details>
  237. </div>
  238.  
  239. <!--every event-->
  240. <div class="openjobs2">
  241. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  242. <summary style="font-size:px;font-weight:bold">
  243. <div class="body">
  244. <center>EVENT NAME HERE
  245. </div></summary>
  246. <div style="margin-right:10px;margin-left:10px">
  247. <p>
  248. <b>DATE.</b>
  249. <br>Date Here<br><br>
  250. <b>TIME.</b>
  251. <br>Time Here (Timezone Here)<br><br>
  252. <b>EVENT BY.</b>
  253. <br>Name(s) Here<br><br>
  254. <b>CONTACT.</b>
  255. <br>Name(s) Here
  256. </p></div></details>
  257. </div>
  258.  
  259. <!--every event-->
  260. <div class="openjobs2">
  261. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  262. <summary style="font-size:px;font-weight:bold">
  263. <div class="body">
  264. <center>EVENT NAME HERE
  265. </div></summary>
  266. <div style="margin-right:10px;margin-left:10px">
  267. <p>
  268. <b>DATE.</b>
  269. <br>Date Here<br><br>
  270. <b>TIME.</b>
  271. <br>Time Here (Timezone Here)<br><br>
  272. <b>EVENT BY.</b>
  273. <br>Name(s) Here<br><br>
  274. <b>CONTACT.</b>
  275. <br>Name(s) Here
  276. </p></div></details>
  277. </div>
  278.  
  279. <!--every event-->
  280. <div class="openjobs2">
  281. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  282. <summary style="font-size:px;font-weight:bold">
  283. <div class="body">
  284. <center>EVENT NAME HERE
  285. </div></summary>
  286. <div style="margin-right:10px;margin-left:10px">
  287. <p>
  288. <b>DATE.</b>
  289. <br>Date Here<br><br>
  290. <b>TIME.</b>
  291. <br>Time Here (Timezone Here)<br><br>
  292. <b>EVENT BY.</b>
  293. <br>Name(s) Here<br><br>
  294. <b>CONTACT.</b>
  295. <br>Name(s) Here
  296. </p></div></details>
  297. </div>
  298.  
  299. <hr style="border:solid;border-width:thin;">
  300. That's it for this week's article! Hope you enjoyed it and any questions or for more information can be provided by (name here).
  301. <p>
  302. Thanks for reading,
  303. <p style="margin-top:20px">
  304.  
  305. <!--signature-->
  306. <center><img src="https://fontmeme.com/permalink/220523/4d8e9fcfd5a6530e991e219490a049ed.png"style="width:200px;margin-left:10px;margin-bottom:35px;margin-right:20px"></center>
  307. <center><img src="https://i.pinimg.com/originals/fe/85/e5/fe85e5ae5eaafe625426ada755e2f130.gif" style="width:150px;height:150px;border-radius:50%;margin-bottom:10px;margin-top:-25px"></center>
  308.  
  309. </div>
  310.  
  311. <div class="columntwo">
  312. <div style="margin-right:8px;text-align:justify; width:400px;height:655px;overflow-auto">
  313. <br style="margin-top:10px">
  314. <b style="font-size:20px"><u>SUBTITLE HERE</u></b>
  315. <p>
  316. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  317. <p>
  318. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  319.  
  320. <p style="margin-top:25px;text-align:right">
  321. <b style="font-size:20px;"><u>SUBTITLE HERE</u></b>
  322. <p>
  323. <img src="https://i.pinimg.com/474x/b1/63/23/b163235b01d808447edd1c2e8fbdfe25.jpg" style="width:130px;height:130px;float: left;margin-left: 5px;margin-right:5px;border: 2px solid #fff">
  324. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  325. <p>
  326. <img src="https://i.pinimg.com/474x/09/ce/a9/09cea904f51b20beccbfacd511cf5e01.jpg" style="width:130px;height:130px;float: right;margin-left: 5px;margin-right:5px;border: 2px solid #fff">
  327. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  328.  
  329. <p style="margin-top:25px">
  330. <b style="font-size:20px"><u>SUBTITLE HERE</u></b>
  331. <p>
  332. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  333. <p>
  334. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  335.  
  336. <p style="margin-top:25px">
  337. <p style="margin-top:25px;text-align:right">
  338. <b style="font-size:20px;"><u>SUBTITLE HERE</u></b>
  339. <p>
  340. <img src="https://i.pinimg.com/474x/d9/23/7e/d9237ec02cf2938a2478d11d4e762566.jpg" style="width:130px;height:130px;float: left;margin-left: 5px;margin-right:5px;border: 2px solid #fff">
  341. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  342. <p>
  343. <img src="https://i.pinimg.com/474x/3c/7c/b4/3c7cb4326a34902e0dd7b2f0b9fd2e60.jpg" style="width:130px;height:130px;float: right;margin-left: 5px;margin-right:5px;border: 2px solid #fff">
  344. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  345.  
  346. <div>
  347. <div>
  348.  
  349. </div></div></div></div></div> </div>
  350.  
  351. <div><center><a href="https://kkodes.wixsite.com/dreamer" style="color:#000;font-size:12px"><b><u>kay kodes</u></b></a></center>
  352.  
  353. <link rel="preconnect" href="https://fonts.googleapis.com">
  354. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  355. <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  356.  
  357. <script>
  358. function openCity(evt, cityName) {
  359. var i, tabcontent, tablinks;
  360. tabcontent = document.getElementsByClassName("tabcontent");
  361. for (i = 0; i < tabcontent.length; i++) {
  362. tabcontent[i].style.display = "none";
  363. }
  364. tablinks = document.getElementsByClassName("tablinks");
  365. for (i = 0; i < tablinks.length; i++) {
  366. tablinks[i].className = tablinks[i].className.replace(" active", "");
  367. }
  368. document.getElementsByClassName("tablinks");
  369. for (i = 0; i < tablinks.length; i++) {
  370. tablinks[i].className = tablinks[i].className.replace(" active", "");
  371. }
  372. document.getElementById(cityName).style.display = "block";
  373. evt.currentTarget.className += " active";
  374. }
  375.  
  376. // Get the element with id="defaultOpen" and click on it
  377. document.getElementById("defaultOpen").click();
  378. </script>
  379.  
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!