API tools faq
paste
Advertisement
xkayelle

Corpse Bride - DIV Layout

xkayelle
Oct 14th, 2022
217
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.09 KB | None | 0 0
raw download clone embed print report
  1. Creativian resources - Layouts by Kayelle - CORPSE BRIDE
  2.  
  3. - Do not remove credits from the code.
  4. - Do not redistribute the codes.
  5. - Do not share the codes with friends, just have them add me.
  6. - I have updated the coding to fit with smaller screens.
  7. - PSD Credit: https://www.deviantart.com/melonieuwu/art/Bazooka-Psd-841027931
  8.  
  9. If you're going to alter the stylesheet, please have a basic understanding of HTML/CSS.
  10.  
  11. Thank you!
  12. Yours, Kay e l l e.
  13.  
  14.  
  15. ------------------------------------------------- ABOUT ME -------------------------------------------------
  16.  
  17.  
  18. <style>
  19. { BACKGROUND ♢ KAYELLE }
  20. table, tr, td {
  21. background-color:transparent;
  22. border:none;
  23. border-width:0;
  24. height:100px;
  25. }
  26. body {
  27. background-color:#B5B4BF!important;
  28. margin-left:0PX;
  29. margin-top:0PX;
  30. background-image:url();
  31. background-attachment:fixed!important;
  32. background-repeat:no-repeat;
  33. background-position: bottom right;
  34. background-size:cover;
  35. }
  36.  
  37. { TABLE ♢ KAYELLE }
  38. table table {
  39. border: 0PX; }
  40. table table table table{
  41. border:0PX;}
  42. table table table {
  43. border: 0PX solid transparent;}
  44. </style>
  45.  
  46. <style>
  47. { FONTS ♢ KAYELLE }
  48. @import url('https://fonts.googleapis.com/css2?family=Abel&family=Allison&family=VT323&display=swap');
  49. </style>
  50.  
  51. <style>
  52. { DIVS ♢ KAYELLE }
  53.  
  54. .thebasics {
  55. width:250PX;
  56. height:280PX;
  57. left: 0%;
  58. top: 0%;
  59. position: absolute;
  60. top:60PX;
  61. margin-left:255PX;
  62. padding:5PX;
  63. text-align: center;
  64. background-color: #626273;
  65. border: 5px solid #0D0D0D;
  66. z-index:3;
  67. }
  68.  
  69. .graphicuno{
  70. width:250PX;
  71. height:150PX;
  72. left: 0%;
  73. top: 0%;
  74. position: absolute;
  75. top:365PX;
  76. margin-left:255PX;
  77. padding:5PX;
  78. text-align: center;
  79. background-color: #626273;
  80. border: 5px solid #0D0D0D;
  81. z-index:3;
  82. }
  83.  
  84. .connections{
  85. width:250PX;
  86. height:180PX;
  87. left: 0%;
  88. top: 0%;
  89. position: absolute;
  90. top:540PX;
  91. margin-left:255PX;
  92. padding:5PX;
  93. text-align: center;
  94. background-color: #626273;
  95. border: 5px solid #0D0D0D;
  96. z-index:3;
  97. }
  98.  
  99. .graphicdeux {
  100. width:525PX;
  101. height:270PX;
  102. left: 0%;
  103. top: 0%;
  104. position: absolute;
  105. top:60PX;
  106. margin-left:530PX;
  107. padding:5PX;
  108. text-align: center;
  109. background-color: #626273;
  110. border: 5px solid #0D0D0D;
  111. z-index:3;
  112. }
  113.  
  114. #biography {
  115. width:525PX;
  116. height:160PX;
  117. left: 0%;
  118. top: 0%;
  119. position: absolute;
  120. top:355PX;
  121. margin-left:530PX;
  122. padding:5PX;
  123. text-align: center;
  124. background-color: #626273;
  125. border: 5px solid #0D0D0D;
  126. z-index:33;
  127. }
  128.  
  129. .graphictrois {
  130. width:250PX;
  131. height:180PX;
  132. left: 0%;
  133. top: 0%;
  134. position: absolute;
  135. top:540PX;
  136. margin-left:530PX;
  137. padding:5PX;
  138. text-align: center;
  139. background-color: #626273;
  140. border: 5px solid #0D0D0D;
  141. z-index:3;
  142. }
  143.  
  144. .relationship {
  145. width:250PX;
  146. height:180PX;
  147. left: 0%;
  148. top: 0%;
  149. position: absolute;
  150. top:540PX;
  151. margin-left:805PX;
  152. padding:5PX;
  153. text-align: center;
  154. background-color: #626273;
  155. border: 5px solid #0D0D0D;
  156. z-index:3;
  157. }
  158.  
  159. #navigation {
  160. width:300PX;
  161. height:455PX;
  162. left: 0%;
  163. top: 0%;
  164. position: absolute;
  165. top:60PX;
  166. margin-left:1080PX;
  167. padding:5PX;
  168. background-color:;
  169. z-index:33;
  170. }
  171. </style>
  172.  
  173. <style>
  174. { TEXT ♢ KAYELLE }
  175.  
  176. table, tr, td, li, p, div {
  177. font-family: arial;
  178. font-size: 9.5PX;
  179. line-height:10PX;
  180. letter-spacing:0PX;
  181. color: #B5B4BF;
  182. }
  183.  
  184. a:link, a:active, a:visited {
  185. font-family: silkscreen;
  186. font-size:8PX;
  187. font-weight:normal;
  188. letter-spacing:1PX;
  189. line-height:9PX;
  190. text-transform:uppercase;
  191. text-decoration:none;
  192. color: #100F11;
  193. -webkit-transition: all 0.5s ease-out;
  194. -moz-transition: all 0.5s ease-out;
  195. transition: all 0.5s ease-out;}
  196.  
  197. a:hover {
  198. text-decoration:none;
  199. color:#B5B4BF;
  200. }
  201.  
  202. a.one, a.one:link, a.one:active, a.one:visited {
  203. font-family: 'VT323', monospace;
  204. letter-spacing: 5PX;
  205. font-size:12PX;
  206. line-height:30PX;
  207. color: #B5B4BF;
  208. font-weight: normal;
  209. text-decoration:none;
  210. text-transform:uppercase;
  211. text-align:center;
  212. display:inset-block;
  213. -webkit-transition: all 0.9s ease-out;
  214. -moz-transition: all 0.9s ease-out;
  215. transition: all 0.9s ease-out; }
  216.  
  217. a.one:hover {
  218. color:#9998A6;
  219. }
  220.  
  221. a.two, a.two:link, a.two:active, a.two:visited {
  222. font-family: 'VT323', monospace;
  223. font-size:12PX;
  224. line-height:25px;
  225. height:25px;
  226. font-weight: lighter;
  227. color: #9998A6;
  228. background-color: transparent;
  229. font-weight: normal;
  230. text-decoration:none;
  231. text-transform:uppercase;
  232. text-align:center;
  233. letter-spacing:2PX;
  234. display:block;
  235. margin-bottom:1PX;
  236. -webkit-transition: all 1.3s ease-out;
  237. -moz-transition: all 1.3s ease-out;
  238. transition: all 1.3s ease-out;
  239. }
  240.  
  241. a.two:hover {
  242. color: #FFFFFF;
  243. background: rgb(148,148,148);
  244. background: linear-gradient(90deg, #161926) 0%, #626273) 34%);
  245. text-align:center;
  246. }
  247.  
  248. a.three, a.three:link, a.three:active, a.three:visited {
  249. font-family: 'VT323', monospace;
  250. color:#FFFFFF;
  251. font-size:12px;
  252. line-height:25px;
  253. height:25px;
  254. text-transform:uppercase;
  255. text-align:center;
  256. letter-spacing:2px;
  257. text-decoration:none!important;
  258. font-weight:lighter;
  259. display: block;
  260. margin-bottom:1px;
  261. background: #626273;
  262. -webkit-transition: all 1.0s linear;
  263. -moz-transition: all 1.0s linear;
  264. transition: all 1.0s linear;
  265. }
  266.  
  267. a.three:hover {
  268. color:#FFFFFF;
  269. text-decoration:none!important;
  270. background: #161926;
  271. -webkit-transition: all 1.0s linear;
  272. -moz-transition: all 1.0s linear;
  273. transition: all 1.0s linear;
  274. }
  275.  
  276. a.four, a.four:link, a.four:active, a.four:visited {
  277. font-family: 'VT323', monospace;
  278. color:#161926;
  279. font-size:12px;
  280. line-height:25px;
  281. height:25px;
  282. width:18.5%;
  283. text-transform:uppercase;
  284. text-align:center;
  285. letter-spacing:2px;
  286. text-decoration:none!important;
  287. font-weight:lighter;
  288. display: block;
  289. margin-bottom:3px;
  290. background: #626273;
  291. -webkit-transition: all 1.0s linear;
  292. -moz-transition: all 1.0s linear;
  293. transition: all 1.0s linear;}
  294.  
  295. a.four:hover {
  296. text-decoration:none!important;
  297. background-color:#9998A6;
  298. -webkit-transition: all 1.0s linear;
  299. -moz-transition: all 1.0s linear;
  300. transition: all 1.0s linear;
  301. }
  302.  
  303. first {
  304. float: left;
  305. font-family: 'Abel', sans-serif;
  306. font-size: 40PX;
  307. color: #626273;
  308. line-height: 25PX;
  309. text-align: center;
  310. font-weight:lighter;
  311. background-color:#9998A6;
  312. border: 4PX solid #626273;
  313. text-transform: uppercase;
  314. width: 35PX;
  315. height: 25PX;
  316. padding: 5PX 0PX 5PX 0PX;
  317. margin:5PX;
  318. display: inline-block;
  319. }
  320.  
  321. i {
  322. font-size 8PX;
  323. font-style:italic;
  324. font-family: arial;
  325. color:#9998A6;
  326. line-height:10px;
  327. letter-spacing: 3px;
  328. padding-right: 3px;
  329. padding-left: 3px;
  330. font-weight:lighter;
  331. }
  332.  
  333. b, strong {
  334. font-family: 'VT323', monospace;
  335. font-size:12PX;
  336. font-weight:lighter;
  337. text-align:center;
  338. color:#9998A6;
  339. background:transparent!important;
  340. text-transform:uppercase;
  341. margin-bottom:2PX;
  342. line-height:10PX;
  343. }
  344.  
  345. u {
  346. font-family: arial;
  347. font-size: 8PX;
  348. color: #626273;
  349. font-weight:normal;
  350. font-style: italic;
  351. letter-spacing: 1PX;
  352. text-transform: lowercase;
  353. border-bottom: 1PX solid #626273;
  354. text-decoration:none;
  355. }
  356.  
  357. tt {
  358. font-family: 'VT323', monospace;
  359. font-size: 12PX;
  360. color: #000000;
  361. font-weight:normal;
  362. text-transform: uppercase;
  363. }
  364.  
  365. h1{
  366. font-family: 'VT323', monospace;
  367. color: #161926;
  368. background-color: #9998A6;
  369. font-size: 12PX;
  370. text-align: center;
  371. font-weight:lighter!important;
  372. text-transform: uppercase;
  373. line-height: 12px;
  374. letter-spacing:4px;
  375. border-top:1PX solid #9998A6;
  376. border-bottom:1PX solid #9998A6;
  377. margin:1PX;
  378. }
  379.  
  380. { SCROLLBAR ♢ KAYELLE }
  381.  
  382. ::-webkit-scrollbar-thumb:vertical { background-color: #541e3b; border: 2px solid #541e3b; height: 7px; } ::-webkit-scrollbar-thumb:horizontal { background-color: #541e3b; height: 7px; } ::-webkit-scrollbar { background-color: #541e3b; border: 2px solid #d7c4ce; height:5px; width:5px; }
  383.  
  384. { HIDE CODES ♢ KAYELLE }
  385.  
  386. .userprofiledetail, .profileInfo, .userprofileURL {display:none;}
  387. .friendscomments, .friendspace, .useralbums {display:none;}
  388. .latestBlogEntry, .contactTable, .extendedNetwork {display:none;}
  389. .whitetext12, .orangetext15, .lightbluetext8 {display:none;}
  390. .nameText, .mslogo, .clearfix {display:none;}
  391.  
  392. #footerwarpper {display:none;}
  393. #googlebar {display:none;}
  394. #topnav {display:none;}
  395. #groups {display:none;}
  396. #headerWrap {display:none;}
  397. </style>
  398.  
  399.  
  400. ------------------------------------------------- LIKE TO MEET -------------------------------------------------
  401.  
  402.  
  403. <div ID="navigation">
  404. <a class="four" href="/home.php">home</a>
  405. <a class="four" href="/home.php">message</a>
  406. <a class="four" href="/home.php">comment</a>
  407. <a class="four" href="/home.php">gallery</a>
  408. <a class="four" href="/home.php">stream</a>
  409. <a class="four" href="/Creativian">credit</a>
  410. </div>
  411.  
  412. <div class="thebasics">
  413.  
  414. <div style="padding:2px; height:98%; width:98%; overflow:auto; background-color:#161926; text-align:justify;">
  415. <h1>basic information</h1>
  416. <b>Name:</b>Lorem ipsum dolor<br>
  417. <i>age:</i> sit amet<br>
  418. <b>consectetur:</b> adipiscing elit<br>
  419. <i>Aenean:</i> suscipit odio vel suscipit varius. Mauris non rutrum ipsum. Sed arcu nisl, pulvinar ac euismod nec, commodo sed risus. Aenean eleifend erat a augue finibus sagittis. <br>
  420. <b>Nulla odio:</b> purus, sodales vel nibh at, sollicitudin tincidunt erat<br>
  421. <i>Aliquam sed commodo:</i> ex. Fusce faucibus nulla eu turpis molestie lobortis. Aenean interdum, magna eu cursus auctor, elit velit vehicula ante, sit amet suscipit nisl odio vel turpis. Ut placerat risus in ipsum venenatis, et finibus enim molestie. Aliquam erat volutpat. Duis ante orci, egestas ornare luctus non.<br>
  422. <b>consectetur:</b> adipiscing elit<br>
  423. <i>Aenean:</i> suscipit odio vel suscipit varius. Mauris non rutrum ipsum. Sed arcu nisl, pulvinar ac euismod nec, commodo sed risus. Aenean eleifend erat a augue finibus sagittis. <br>
  424. <b>Nulla odio:</b> purus, sodales vel nibh at, sollicitudin tincidunt erat<br>
  425. <i>Aliquam sed commodo:</i> ex. Fusce faucibus nulla eu turpis molestie lobortis. Aenean interdum, magna eu cursus auctor, elit velit vehicula ante, sit amet suscipit nisl odio vel turpis. Ut placerat risus in ipsum venenatis, et finibus enim molestie. Aliquam erat volutpat. Duis ante orci, egestas ornare luctus non.<br>
  426. <b>consectetur:</b> adipiscing elit<br>
  427. <i>Aenean:</i> suscipit odio vel suscipit varius. Mauris non rutrum ipsum. Sed arcu nisl, pulvinar ac euismod nec, commodo sed risus. Aenean eleifend erat a augue finibus sagittis. <br>
  428. <b>Nulla odio:</b> purus, sodales vel nibh at, sollicitudin tincidunt erat<br>
  429. <i>Aliquam sed commodo:</i> ex. Fusce faucibus nulla eu turpis molestie lobortis. Aenean interdum, magna eu cursus auctor, elit velit vehicula ante, sit amet suscipit nisl odio vel turpis. Ut placerat risus in ipsum venenatis, et finibus enim molestie. Aliquam erat volutpat. Duis ante orci, egestas ornare luctus non.<br>
  430. </div>
  431. </div>
  432.  
  433. <div class="graphicuno">
  434. <img src="https://images2.imgbox.com/01/c3/R3YBNRpX_o.png">
  435. </div>
  436.  
  437. <div class="connections">
  438.  
  439. <div style="padding:2px; height:98%; width:98%; overflow:auto; background-color:#161926; text-align:justify;">
  440. <a class="two" href="/">connection</a>
  441. <a class="three" href="/">connection</a>
  442. <a class="two" href="/">connection</a>
  443. <a class="three" href="/">connection</a>
  444. <a class="two" href="/">connection</a>
  445. <a class="three" href="/">connection</a>
  446. <a class="two" href="/">connection</a>
  447. <a class="three" href="/">connection</a>
  448. <a class="two" href="/">connection</a>
  449. <a class="three" href="/">connection</a>
  450. <a class="two" href="/">connection</a>
  451. <a class="three" href="/">connection</a>
  452. </div>
  453. </div>
  454.  
  455. <div class="graphicdeux">
  456. <img src="https://images2.imgbox.com/55/c9/KNgiF3yO_o.png">
  457. </div>
  458.  
  459. <div ID="biography">
  460.  
  461. <div style="padding:2px; height:98%; width:auto; overflow:auto; background-color:#161926; text-align:justify;">
  462. <h1>biography</h1>
  463.  
  464. <first>L</first>orem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit odio vel suscipit varius. Mauris non rutrum ipsum. Sed arcu nisl, pulvinar ac euismod nec, commodo sed risus. Aenean eleifend erat a augue finibus sagittis. Nulla odio purus, sodales vel nibh at, sollicitudin tincidunt erat. Fusce at mattis nisl. Suspendisse potenti. Curabitur nec eros et libero vehicula consequat. Curabitur a bibendum nisl. Etiam non purus a metus maximus mattis id non felis. Donec auctor metus vel lorem pretium, cursus blandit elit varius. Etiam metus sapien, consectetur eu semper in, consequat eu lectus. Aliquam ultricies, neque sit amet sollicitudin dictum, leo libero feugiat mauris, vel lacinia nulla nibh vitae velit. Proin tincidunt lobortis dui at sollicitudin. Cras in finibus arcu. Sed imperdiet non tortor et elementum.
  465. <br><br>
  466. <first>C</first>ras eget massa elementum, vulputate tellus ut, viverra arcu. Aliquam ac mattis dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tempus, nunc ut sollicitudin convallis, mi diam euismod ante, semper mattis nunc ante quis diam. Nam vitae molestie purus. Aenean imperdiet dui ut tellus finibus gravida. Curabitur sit amet sapien et augue cursus maximus. Nam vulputate tincidunt viverra. Vestibulum id pulvinar magna. Sed malesuada eget sapien vestibulum elementum. Curabitur vel accumsan nunc. Proin bibendum varius nunc, et efficitur risus rutrum et. In non nunc tortor. Duis vehicula vehicula congue. Morbi posuere felis et nisi imperdiet, quis pretium nulla ullamcorper. Maecenas nunc mi, dignissim ut varius eu, rutrum et risus.
  467. <br><br>
  468. <first>A</first>liquam sed commodo ex. Fusce faucibus nulla eu turpis molestie lobortis. Aenean interdum, magna eu cursus auctor, elit velit vehicula ante, sit amet suscipit nisl odio vel turpis. Ut placerat risus in ipsum venenatis, et finibus enim molestie. Aliquam erat volutpat. Duis ante orci, egestas ornare luctus non, facilisis maximus augue. In posuere sapien ut lacus sodales, sed tincidunt arcu pulvinar. Vivamus eget metus ex. Cras ante lorem, imperdiet ac felis sit amet, pulvinar efficitur metus. Cras fringilla libero in tincidunt scelerisque. Nam posuere lorem quis consequat convallis. Donec ac libero nunc. Mauris imperdiet sed felis eu ultrices. Suspendisse a eros at mauris aliquet pulvinar sit amet sit amet sem. Donec dolor nunc, gravida ut nunc at, sodales imperdiet quam.
  469. </div>
  470. </div>
  471.  
  472. <div class="graphictrois">
  473. <img src="https://images2.imgbox.com/c6/ca/xefhrYH7_o.png">
  474. </div>
  475.  
  476. <div class="relationship">
  477. <div style="padding:2px; height:98%; width:98%; overflow:auto; background-color:#161926; text-align:justify;">
  478. <h1>my relationship</h1>
  479. <i>partner in crime:</i> <a href="">lover</a>
  480. <br><b>since: 00/00/0000</b><br>
  481. <i>engaged: 00/00/0000</i><br>
  482. <b>married: 00/00/0000</b>
  483. <br><br>
  484. <u>love notes:</u>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit odio vel suscipit varius. Mauris non rutrum ipsum. Sed arcu nisl, pulvinar ac euismod nec, commodo sed risus. Aenean eleifend erat a augue finibus sagittis. Nulla odio purus, sodales vel nibh at, sollicitudin tincidunt erat. Fusce at mattis nisl. Suspendisse potenti. Curabitur nec eros et libero vehicula consequat. Curabitur a bibendum nisl. Etiam non purus a metus maximus mattis id non felis. Donec auctor metus vel lorem pretium, cursus blandit elit varius. Etiam metus sapien, consectetur eu semper in, consequat eu lectus. Aliquam ultricies, neque sit amet sollicitudin dictum, leo libero feugiat mauris, vel lacinia nulla nibh vitae velit. Proin tincidunt lobortis dui at sollicitudin. Cras in finibus arcu. Sed imperdiet non tortor et elementum.
  485. </div>
  486. </div>
  487. </div>
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!