API tools faq
paste
damnedestcreations

SIX FEET UNDER

damnedestcreations
Mar 1st, 2019 (edited)
909
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.08 KB | None | 0 0
raw download clone embed print report
  1. <!-- WELCOME TO MY DIV BASE CODE!
  2. BECAUSE DIV LAYOUTS WORK A LITTLE DIFFERENTLY THAN TABLED LAYOUTS, I'M GOING TO GIVE YOUR TEXT STYLINGS TO YOU HERE, INSTEAD. ALSO, THIS IS CALLED SIX FEET UNDER 'CAUSE I BASICALLY BURIED MYSELF INTO A CODING HOLE MAKING THIS. HAVE FUN, KIDDIES.
  3.  
  4. This is a base code. This is purely for you to tinker with and build your very own layout from, if you're trying to learn how to code layouts. I would recommend keeping an unedited version of this code saved on your computer, and copy it to a new Notepad document if you intend on tinkering with it. Experiment with this code to your heart's desire.
  5.  
  6. Keep in mind, Roleplayer.me does not allow JavaScript.
  7.  
  8. If you need coding help, join my Discord server here:
  9. https://discord.gg/Agtx8vc
  10.  
  11. <h1>Header 1</h1>
  12. This is regular text.<br>
  13. <b>This is bold text.</b><br>
  14. <i>This is italicized text.</i><br>
  15. <u>This is underlined text.</u><br>
  16. <a href="">This is linked text</a>
  17. <blockquote>This is a blockquote. Use very sparingly. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>
  18.  
  19.  
  20. <center>
  21.  
  22. This is a DIV box. You can put anything you like in here, and size it however you like.
  23.  
  24. <p>
  25.  
  26. <div style="height:100px;width:350px;text-align:justify;overflow:auto;">
  27. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Mauris massa. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.
  28.  
  29. <p>
  30.  
  31. <b>Praesent mauris</b>. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Maecenas mattis. Sed convallis tristique sem. <b>Vestibulum lacinia arcu eget nulla</b>. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Aenean quam</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. <b>Sed dignissim lacinia nunc</b>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
  32.  
  33. </div>
  34.  
  35. </center>
  36.  
  37. <p>
  38.  
  39. <a href="LINK" class="first">first class link</a>
  40. <a href="LINK" class="second">second class link</a>
  41.  
  42.  
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49. THIS IS WHERE THE STYLESHEET FOR THE DIV LAYOUT BEGINS.
  50. THIS GOES IN YOUR 'ABOUT ME' SECTION. -->
  51.  
  52.  
  53. <body oncontextmenu="return false" ondragstart="return false;">
  54. <style type="text/css">
  55. .COEUR DE FEU { This base code was made by DAMNEDEST CREATIONS. Stealing will result in harsh consequences. - www.roleplayer.me/damnedestcreations }
  56.  
  57. .COEUR DE FEU { Background Properties }
  58. body{
  59. background-color:101010;
  60. background-image:url();
  61. background-attachment:fixed;
  62. background-repeat: repeat;
  63. background-position:center;
  64. }
  65.  
  66.  
  67. .COEUR DE FEU { Scrollbar Properties }
  68.  
  69. ::-webkit-scrollbar-thumb:vertical {
  70. background-color: #cacaca;
  71. height: 7px;
  72. }
  73.  
  74. ::-webkit-scrollbar {
  75. background-color: #fff;
  76. border: 2px solid #fff;
  77. height:5px;
  78. width:5px;
  79. }
  80.  
  81.  
  82. .COEUR DE FEU { Text Properties }
  83.  
  84. table, tr, td, li, p, div {
  85. font-family:times new roman;
  86. color:333333;
  87. font-size:11px;
  88. -webkit-user-select: none;
  89. -khtml-user-select: none;
  90. -moz-user-select: none;
  91. -ms-user-select: none;
  92. user-select: none;
  93. }
  94.  
  95. b {
  96. color:#000;
  97. font-family:calibri;
  98. font-size: 9px;
  99. font-weight:heavy;
  100. text-transform:uppercase;
  101. letter-spacing: 1px;
  102. }
  103.  
  104. i {
  105. font-weight:italics;
  106. text-transform:normal;
  107. background-color:transparent;
  108. color:333333;
  109. letter-spacing:0px;
  110. font-family:bookplate;
  111. font-size:11px;}
  112.  
  113. u {
  114. font-family:georgia;
  115. font-size:9px;
  116. text-transform:uppercase;
  117. color:646464;
  118. letter-spacing:0px;
  119. text-decoration:underline;
  120. border-bottom:0px solid;
  121. border-color:555555;
  122. }
  123.  
  124. blockquote {
  125. display:block;
  126. text-align:left;
  127. font-size:10px;
  128. line-height:10px;
  129. text-transform:normal;
  130. font-family:times new roman;
  131. letter-spacing:0px;
  132. padding:5px;
  133. color:333333;
  134. background-color:fafafa;
  135. border-left-style:solid;
  136. border-left-width:5px;
  137. border-left-color:333333;
  138. }
  139.  
  140.  
  141. .COEUR DE FEU { Link Properties }
  142.  
  143. a:active, a:visited, a:link {
  144. font-family:georgia;
  145. font-size:9px;
  146. text-transform:uppercase;
  147. line-height:8px;
  148. border-bottom:none;
  149. border-color:none;
  150. text-decoration:none;
  151. font-weight:normal;
  152. color:#333333;
  153. letter-spacing:0px;
  154. -webkit-transition: all 0.8s ease-out;
  155. -moz-transition: all 0.8s ease-out;}
  156.  
  157. a:hover {
  158. color:#b8b8b8;
  159. -webkit-transition: all 0.8s ease-out;
  160. -moz-transition: all 0.8s ease-out;}
  161.  
  162.  
  163. a.first, a.first:link, a.first:active, a.first:visited {
  164. font-family: calibri;
  165. font-size: 8px;
  166. line-height: 10px;
  167. letter-spacing: 1px;
  168. font-weight: normal;
  169. color: 626262;
  170. text-decoration: none;
  171. text-transform: uppercase;
  172. background-color: #b8b8b8;
  173. text-align: right;
  174. display: block;
  175. margin: 1px;
  176.  
  177. -webkit-transition: all 0.2s ease-out;
  178. -moz-transition: all 0.2s ease-out;
  179. }
  180.  
  181. a.first:hover {
  182. color: 626262;
  183. text-align: left;
  184. background-color: #cacaca;
  185. border-left-style: solid;
  186. border-left-width: 0px;
  187. border-right-style: solid;
  188. border-right-width: 0px;
  189. }
  190.  
  191. a.second, a.second:link, a.second:active, a.second:visited {
  192. font-family: calibri;
  193. font-size: 8px;
  194. line-height: 10px;
  195. letter-spacing: 1px;
  196. font-weight: normal;
  197. color: 626262;
  198. text-decoration: none;
  199. text-transform: uppercase;
  200. background-color: #cacaca;
  201. text-align: left;
  202. display: block;
  203. margin: 1px;
  204. -webkit-transition: all 0.2s ease-out;
  205. -moz-transition: all 0.2s ease-out;
  206. }
  207.  
  208. a.second:hover {
  209. color: 626262;
  210. text-align: right;
  211. background-color: #b8b8b8;
  212. border-left-style: solid;
  213. border-left-width: 0px;
  214. border-right-style: solid;
  215. border-right-width: 0px;
  216. }
  217.  
  218. .COEUR DE FEU { Header Properties }
  219.  
  220. h1 {
  221. font-family:Helvetica;
  222. font-size: 10px;
  223. font-style: none;
  224. font-weight: normal;
  225. text-align: center;
  226. background-color: #ddd;
  227. text-transform: uppercase;
  228. margin: 1px!important;
  229. letter-spacing: 5px;
  230. padding: 0px;
  231. line-height: 20px;
  232. border-bottom: 0px solid;
  233. border-color: #000;
  234. font-style: none;
  235. color: #666666;
  236. }
  237.  
  238. h2 {
  239. font-family: calibri;
  240. writing-mode: vertical-rl; /* MAKE YOUR WRITING GO SIDEWAYS! */
  241. font-size: 9px;
  242. font-style: none;
  243. font-weight: normal;
  244. text-align: center;
  245. float:left;
  246. background-color: #eee;
  247. text-transform: uppercase;
  248. margin: 5px!important;
  249. letter-spacing: 3px;
  250. padding: 5px;
  251. line-height: 10px;
  252. border-color: #000;
  253. font-style: none;
  254. color: #666666;
  255. }
  256.  
  257. h3 {
  258. font-family: calibri;
  259. font-size: 8px;
  260. font-style: none;
  261. font-weight: normal;
  262. text-align: left;
  263. background-color: #999;
  264. text-transform: uppercase;
  265. margin: 1px!important;
  266. letter-spacing: 2px;
  267. padding: 5px;
  268. line-height: 10px;
  269. border-bottom: px solid;
  270. border-color: #000;
  271. font-style: none;
  272. color: #fff;
  273. }
  274.  
  275. h4 {
  276. font-family: calibri;
  277. font-size: 8px;
  278. font-style: none;
  279. font-weight: normal;
  280. text-align: right;
  281. background-color: #eee;
  282. text-transform: uppercase;
  283. margin: 1px!important;
  284. letter-spacing: 2px;
  285. padding: 5px;
  286. line-height: 10px;
  287. border-bottom: 0px solid;
  288. border-color: #000;
  289. font-style: none;
  290. color: #666666;
  291. }
  292.  
  293. h5 {
  294. font-family: calibri;
  295. font-size: 10px;
  296. font-style: none;
  297. font-weight: normal;
  298. text-align: center;
  299. background-color: #999;
  300. text-transform: uppercase;
  301. margin: 1px!important;
  302. letter-spacing: 2px;
  303. padding: 10px;
  304. line-height: 10px;
  305. border-bottom: 0px solid;
  306. border-color: #000;
  307. font-style: none;
  308. color: #fff;
  309. }
  310.  
  311. h6 {
  312. font-family:Times New Roman;
  313. font-size: 20px;
  314. font-style: italic;
  315. font-weight: normal;
  316. text-align: center;
  317. background-color: transparent;
  318. text-transform: lowercase;
  319. margin: 10px!important;
  320. letter-spacing: -1px;
  321. line-height: 1px;
  322. border-left: 20px solid;
  323. border-right: 20px solid;
  324. border-color: #000;
  325. font-style: none;
  326. color: #000;
  327. }
  328.  
  329. .COEUR DE FEU { Module Properties }
  330.  
  331. .contain {
  332. left:50%;
  333. margin-left:-400px;
  334. top:130px;
  335. position:absolute;
  336. z-index:0;
  337. background-color:transparent;
  338. visibility:visible;
  339. }
  340.  
  341. .box1 {
  342. width:355px;
  343. height:195px;
  344. position:absolute;
  345. top:-70px;
  346. left:-55px;
  347. z-index:1;
  348. border:1px solid;
  349. border-color:fafafa;
  350. background-color:ffffff;
  351. text-decoration:none;
  352. }
  353.  
  354. .box1 img{
  355. padding:5px;
  356. border:5px solid #ddd;
  357. margin:5px;
  358. }
  359.  
  360. .box1 div {
  361. margin:5px; /*SPACE ON OUTSIDE */
  362. padding:5px; /* SPACE ON INSIDE */
  363. height:105px;
  364. overflow:auto; /* MAKES THE BOX SCROLL */
  365. }
  366.  
  367. .box2 {
  368. width:350px;
  369. height:195px;
  370. position:absolute;
  371. top:-70px;
  372. left:305px;
  373. z-index:1;
  374. border:1px solid;
  375. border-color:fafafa;
  376. background-color:ffffff;
  377. text-decoration:none;
  378. }
  379.  
  380. .box2 div {
  381. padding:5px;
  382. margin:5px;
  383. height:135px;
  384. overflow:auto;
  385. }
  386.  
  387. .box3 {
  388. width:710px;
  389. height:245px;
  390. position:absolute;
  391. top:130px;
  392. left:-55px;
  393. z-index:1;
  394. border:1px solid;
  395. border-color:fafafa;
  396. background-color:ffffff;
  397. text-decoration:none;
  398. }
  399.  
  400. .box3 div {
  401. padding:5px;
  402. margin:5px;
  403. height:225px;
  404. overflow:auto;
  405. }
  406.  
  407. .COEUR DE FEU { Hiding Properties }
  408.  
  409. .contacttable, .friendsComments, .friendSpace, .profileinfo, .latestBlogEntry, .interestsAndDetails, .extendedNetwork, .userProfileDetail {display:none}
  410. table,tr,td {background:transparent}
  411.  
  412. <style type="text/css">
  413. body div table tbody tr td font {visibility:hidden;}
  414. .navbar {visibility:visible;}
  415. .navbar font {visibility:hidden;}
  416. </style>
  417.  
  418. <style>
  419. .profile * { display: none !important; }
  420. div[id="googlebar"] { background: none !important; }
  421. </style>
  422.  
  423. <style>
  424. .hidenav {display:none}
  425. div.profileWidth {margin-top: -30px !important;}
  426. div.profileWidth div {filter:alpha(opacity=0); opacity:0.0001}
  427. div.profileWidth div.clearfix, hidenav hidenav hidenav, div.profileWidth div div {filter:none; opacity:0.9999}
  428. div.profileWidth div.clearfix {position:relative; top:30px}
  429. </style>
  430.  
  431. <style>
  432. a.text, table font a, table {visibility:hidden;}
  433. </style>
  434.  
  435. </style>
  436.  
  437.  
  438.  
  439. <!-- THIS IS WHERE YOUR MODULES BEGIN. THIS GOES IN YOUR LIKE TO MEET.
  440. WHEN YOU MAKE A NEW MODULE IN YOUR STYLESHEET, MAKE SURE YOU CHANGE THE NUMBER FOR IT IN YOUR STYLESHEET,
  441. AND ALSO MAKE SURE YOUR NEW DIV MODULE BELOW MATCHES THAT NUMBER OR IT WON'T SHOW UP RIGHT!!! -->
  442.  
  443.  
  444. <div class="contain">
  445.  
  446. <div class="box1">
  447. <img src="http://via.placeholder.com/325x40">
  448. <div>
  449. <h1>THIS IS .BOX1</h1>
  450. This box is positioned at:<br>
  451. top:-70px;<br>
  452. left:-55px;<br><br>
  453.  
  454. The dimensions are 350x195px.<br><br>
  455. The picture is centered and has spacing, (padding and margin), plus a border of 5px.
  456.  
  457. <p>
  458.  
  459. DIVs require a little more work than tabled layouts because it's not quite as simple as just copying down a new table when you need one. DIV modules require extra, careful attention. Your placements and position of each box must be taken into consideration.
  460. </div>
  461. </div>
  462.  
  463. <div class="box2">
  464. <div>
  465. <h1>THIS IS .BOX2</h1>
  466. This box is positioned at:<br>
  467. top:-70px;<br>
  468. left:300px;<br><br>
  469. The dimensions are 350x195px.<br>
  470. -55 (the left positioning of box1) + 355 (the width of box1 + a 5 pixel margin) = 300.
  471. <p>
  472. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Mauris massa. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.
  473.  
  474. <p>
  475.  
  476. <b>Praesent mauris</b>. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Maecenas mattis. Sed convallis tristique sem. <b>Vestibulum lacinia arcu eget nulla</b>. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Aenean quam</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. <b>Sed dignissim lacinia nunc</b>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
  477.  
  478. </div>
  479. <img src="http://via.placeholder.com/350x40">
  480. </div>
  481.  
  482. <div class="box3">
  483. <div>
  484. <h1>THIS IS .box3 and these headers are "h1".</h1>
  485. <h2>Header Two</h2>
  486. This box is positioned at:<br>
  487. top:130px;<br>
  488. left:-55px; ( <i>to match box1's left positioning</i> )<br><br>
  489.  
  490. The dimensions are 710x195px.<br>
  491. -70 (the top positioning of box1) + 200 (the height of box1 + a 5 pixel margin) = 130. This box is 710 pixels wide so it stretches under the bottom of box #1 and box #2.
  492.  
  493. <p>
  494.  
  495. <h3>Header Three</h3>
  496. <h4>Header Four</h4>
  497. <h5>Header Five</h5>
  498. <h6>Six "h" tags is the most you can have. This is h6!</h6>
  499.  
  500. </div>
  501. </div>
Advertisement
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!