API tools faq
paste
mebuckner

Granger

mebuckner
Aug 6th, 2020 (edited)
225
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.87 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=Gentium+Book+Basic&family=Goudy+Bookletter+1911&display=swap');
  7.  
  8. body {
  9. background-color:#301d31;
  10. background-repeat:no-repeat;
  11. background-attachment:fixed;
  12. margin: 0;
  13. overflow:auto;
  14. background-size:cover;
  15. }
  16.  
  17. table, tr, td, li, p, div, .profileInfo td.text {
  18. font-size: 10px;
  19. color: #717171;
  20. font-family: 'Gentium Book Basic', serif;}
  21.  
  22.  
  23. .container {
  24. width:900px;
  25. height:700px;
  26. position:absolute;
  27. left:0;
  28. right:0;
  29. top:0;
  30. bottom:0;
  31. overflow:hidden;
  32. margin:auto;
  33. color:#e7e7e9;
  34. font-family: 'Gentium Book Basic', serif;
  35. }
  36.  
  37. ul{
  38. margin-left: -22px;
  39. text-align: justify;
  40. }
  41.  
  42. .topBar{
  43. width:900px;
  44. height:100px;
  45. }
  46.  
  47. .leftSide{
  48. width:270px;
  49. height:600px;
  50. display:inline-block;
  51. vertical-align:top;
  52. }
  53.  
  54. .middleSection{
  55. width:355px;
  56. height:600px;
  57. display:inline-block;
  58. vertical-align:top;
  59. }
  60.  
  61. .rightSide{
  62. width:270px;
  63. height:600px;  
  64. display:inline-block;
  65. vertical-align:top;
  66. }
  67.  
  68. .picture{
  69. padding: 5px;
  70. border: solid 4px #6e3a51;
  71. background: #e7e7e9;
  72. }
  73.  
  74.  
  75. .biographySection{
  76. padding: 5px;
  77. border: solid 4px #6e3a51;
  78. background: #e7e7e9;
  79. margin-top: 10px;
  80. width: 336px;
  81. height: 136px;
  82. margin-bottom: 10px;
  83. text-align:justify;
  84. font-family: 'Gentium Book Basic', serif;
  85. font-size:11px;
  86. overflow:auto;
  87. color:#000;
  88. }
  89.  
  90. .owesList{
  91. padding: 5px;
  92. border: solid 4px #6e3a51;
  93. background: #e7e7e9;
  94. margin-top:10px;
  95. width: 250px;
  96. height:232px;
  97. }
  98.  
  99.  
  100. .splitPicture{
  101. padding: 5px;
  102. border: solid 4px #6e3a51;
  103. background: #e7e7e9;
  104. margin-top:10px;
  105. width: 250px;
  106. height:80px;
  107. }
  108.  
  109. .owesBoxes{
  110. width: 107px;
  111. height: 144px;
  112. padding: 5px;
  113. display: inline-block;
  114. vertical-align: top;
  115. font-size: 11px;
  116. font-family: 'Gentium Book Basic', serif;
  117. color: #000;
  118. text-align: justify;
  119. overflow: auto;
  120. border: solid #6e3a51;
  121. margin-top: 10px;
  122. margin-bottom: 10px;
  123. }
  124.  
  125. b{
  126. color:#000;
  127. }
  128.  
  129. i{
  130. color:#000;
  131. }
  132.  
  133. .navigationSection{
  134. padding: 5px;
  135. border: solid 4px #6e3a51;
  136. background: #e7e7e9;
  137. margin-top:10px;
  138. width: 250px;
  139. }
  140.  
  141. a.navigationalLinks:link, a.navigationalLinks:visited {
  142. background-color: #6e3a51;
  143. color: #e7e7e9;
  144. padding: 8px 0px;
  145. text-align: center;
  146. text-decoration: none;
  147. display: inline-block;
  148. width: 250px;
  149. font-family: 'Gentium Book Basic', serif;
  150. font-size:12px;
  151. text-transform:uppercase;
  152. }
  153.  
  154. a.navigationalLinks:hover, a.navigationalLinks:active {
  155. background-color: #e7e7e9;
  156. color:#6e3a51;
  157. }
  158.  
  159. h1{
  160. color: #6e3a51;
  161. margin: 0;
  162. padding: 0;
  163. text-transform: uppercase;
  164. font-family: 'Gentium Book Basic', serif;
  165. font-size: 75px;
  166. text-align: center;
  167. padding-top: 5px;
  168. padding-bottom: 5px;
  169. }
  170.  
  171. h2{
  172. color: #fff;
  173. margin: 0;
  174. padding: 0;
  175. text-transform: uppercase;
  176. font-family: 'Gentium Book Basic', serif;
  177. font-size: 15px;
  178. background: #6e3a51;
  179. text-align: center;
  180. padding-top: 5px;
  181. padding-bottom: 5px;
  182. }
  183.  
  184. h3{
  185. color: #6e3a51;
  186. margin: 0;
  187. padding: 0;
  188. text-transform: uppercase;
  189. font-family: 'Gentium Book Basic', serif;
  190. font-size: 18px;
  191. text-align: center;
  192. padding-top: 5px;
  193. padding-bottom: 5px;
  194. }
  195.  
  196. .basicInfoBox{
  197. padding: 5px;
  198. border: solid 4px #6e3a51;
  199. background: #e7e7e9;
  200. width: 110px;
  201. height:103px;
  202. display:inline-block;
  203. vertical-align:top;
  204. overflow:auto;
  205. }
  206.  
  207. .basicInfoPicture{
  208. padding: 5px;
  209. border: solid 4px #6e3a51;
  210. background: #e7e7e9;
  211. width: 110px;
  212. height:103px;
  213. display:inline-block;
  214. vertical-align:top;
  215. margin-left:11px;
  216. }
  217.  
  218.  
  219.  
  220. .loveInterestBox{
  221. margin-top:10px;
  222. padding: 5px;
  223. border: solid 4px #6e3a51;
  224. background: #e7e7e9;
  225. width: 110px;
  226. height:103px;
  227. display:inline-block;
  228. vertical-align:top;
  229. overflow:auto;
  230. }
  231.  
  232. .liBoxPicture{
  233. margin-top:10px;
  234. padding: 5px;
  235. border: solid 4px #6e3a51;
  236. background: #e7e7e9;
  237. width: 110px;
  238. height:103px;
  239. display:inline-block;
  240. vertical-align:top;
  241. margin-left:11px;
  242. overflow:auto;
  243. }
  244.  
  245.  
  246. .friendsBox{
  247. margin-top:10px;
  248. padding: 5px;
  249. border: solid 4px #6e3a51;
  250. background: #e7e7e9;
  251. width: 110px;
  252. height:103px;
  253. display:inline-block;
  254. vertical-align:top;
  255. overflow:auto;
  256. }
  257.  
  258. .friendsBoxPicture{
  259. margin-top:10px;
  260. padding: 5px;
  261. border: solid 4px #6e3a51;
  262. background: #e7e7e9;
  263. width: 110px;
  264. height:103px;
  265. display:inline-block;
  266. vertical-align:top;
  267. margin-left:11px;
  268. }
  269.  
  270. ::-webkit-scrollbar-thumb:vertical {height:12px; background:#e7e7e9; border-top:10px solid #6e3a51; border-bottom:10px solid #6e3a51;}
  271. ::-webkit-scrollbar-thumb:horizontal {background-color:#e7e7e9;}
  272. ::-webkit-scrollbar {width:5px; height:7px;}
  273.  
  274.  
  275. .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>
  276. </style>
  277.  
  278.  
  279.  
  280.  
  281.  
  282.  
  283.  
  284.  
  285.  
  286.  
  287.  
  288. <!--like to meet-->
  289.  
  290. <html>
  291. <body>
  292. <div class="container">
  293. <div class="topBar">
  294. <h1>Hermione Jean Granger</h1>
  295. </div>
  296. <div class="leftSide">
  297. <img src="https://i.imgur.com/TIUXWlD.png" class="picture">
  298. <div class="navigationSection">
  299. <a href="" class="navigationalLinks">Hogwarts</a>
  300. <a href="" class="navigationalLinks">Owl</a>
  301. <a href="" class="navigationalLinks">Howler</a>
  302. <a href="" class="navigationalLinks">Daily Prophet</a>
  303. <a href="" class="navigationalLinks">Decrees</a>
  304. <a href="" class="navigationalLinks">Pensive</a>
  305. <a href="" class="navigationalLinks">Credit</a>
  306. </div>
  307. <div class="owesList">
  308. <h2>Current Owes List</h2>
  309. <center>
  310. <div class="owesBoxes">
  311. <h3>I owe you</h3>
  312. <b>name</b> - <i>starter/reply</i> - 00/00<br>
  313. <b>name</b> - <i>starter/reply</i> - 00/00<br>
  314. <b>name</b> - <i>starter/reply</i> - 00/00<br>
  315. <b>name</b> - <i>starter/reply</i> - 00/00<br>
  316. <b>name</b> - <i>starter/reply</i> - 00/00<br>
  317. </div>
  318.  
  319. <div class="owesBoxes">
  320. <h3>You owe Me</h3>
  321. <b>name</b> - <i>starter/reply</i> - 00/00<br>
  322. <b>name</b> - <i>starter/reply</i> - 00/00<br>
  323. <b>name</b> - <i>starter/reply</i> - 00/00<br>
  324. <b>name</b> - <i>starter/reply</i> - 00/00<br>
  325. <b>name</b> - <i>starter/reply</i> - 00/00<br>
  326. </div>
  327. </center>
  328.  
  329. <h2>Updated: 00/00</h2>
  330. </div>
  331. </div>
  332. <div class="middleSection">
  333. <img src="https://i.imgur.com/oBZiNNE.png" style="width:336px;" class="picture">
  334. <div class="biographySection">
  335. <h2 style="margin-bottom:5px;">The frizzy haired girl</h2>
  336. 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.
  337. <br><br>
  338. 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.
  339. <br><br>
  340. Urna cursus eget nunc scelerisque viverra mauris. Non tellus orci ac auctor augue mauris augue. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Semper auctor neque vitae tempus quam pellentesque nec. Et netus et malesuada fames ac turpis egestas maecenas. Eu volutpat odio facilisis mauris sit amet massa vitae tortor. Scelerisque eu ultrices vitae auctor eu augue ut lectus. Maecenas accumsan lacus vel facilisis volutpat est velit. Suspendisse potenti nullam ac tortor vitae purus faucibus. Arcu ac tortor dignissim convallis aenean et. Lacus luctus accumsan tortor posuere ac ut consequat. Iaculis nunc sed augue lacus viverra vitae congue eu consequat.
  341. <br><br>
  342. Nibh mauris cursus mattis molestie a. Lectus vestibulum mattis ullamcorper velit sed ullamcorper. Non enim praesent elementum facilisis. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Tincidunt vitae semper quis lectus nulla at volutpat diam. Interdum velit laoreet id donec ultrices tincidunt arcu. Amet nisl suscipit adipiscing bibendum est ultricies integer. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Integer quis auctor elit sed. Pellentesque adipiscing commodo elit at imperdiet dui accumsan. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Nisl purus in mollis nunc. Enim sed faucibus turpis in eu mi bibendum. Diam sollicitudin tempor id eu. Cras pulvinar mattis nunc sed blandit libero volutpat sed. Tortor posuere ac ut consequat.
  343. <br><br>
  344. Nulla facilisi cras fermentum odio eu feugiat pretium. In arcu cursus euismod quis. Sed viverra ipsum nunc aliquet. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Eget dolor morbi non arcu risus quis varius quam. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Ligula ullamcorper malesuada proin libero. Congue quisque egestas diam in arcu cursus euismod quis viverra. Arcu bibendum at varius vel pharetra vel turpis nunc. Sed pulvinar proin gravida hendrerit lectus a. Sem integer vitae justo eget magna. Nunc sed id semper risus. Pellentesque id nibh tortor id aliquet. Adipiscing elit pellentesque habitant morbi tristique senectus. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Interdum velit laoreet id donec ultrices. Semper eget duis at tellus at urna condimentum mattis. Nulla facilisi cras fermentum odio eu feugiat pretium nibh.
  345. </div>
  346. <img src="https://i.imgur.com/oRFjFKt.png" style="width:336px;" class="picture">
  347. </div>
  348. <div class="rightSide">
  349.  
  350. <div class="basicInfoBox">
  351. <h2 style="margin-bottom:5px;">basic info</h2>
  352. <ul>
  353. <li>
  354. <b>Full Name:</b> here
  355. </li>
  356. <li>
  357. <b>Nickname(s):</b> here
  358. </li>
  359. <li>
  360. <b>Age:</b> here
  361. </li>
  362. <li>
  363. <b>Date of Birth:</b> here
  364. </li>
  365. <li>
  366. <b>Hometown:</b> here
  367. </li>
  368. <li>
  369. <b>Current Location:</b> here
  370. </li>
  371. <li>
  372. <b>Ethnicity:</b> here
  373. </li>
  374. <li>
  375. <b>Nationality:</b> here
  376. </li>
  377. <li>
  378. <b>Gender:</b> here
  379. </li>
  380. <li>
  381. <b>Pronouns:</b> here
  382. </li>
  383. <li>
  384. <b>Orientation:</b> here
  385. </li>
  386. <li>
  387. <b>Religion:</b> here
  388. </li>
  389. <li>
  390. <b>Occupation:</b> here
  391. </li>
  392. <h4>Physical Appearance</h4>
  393. <li>
  394. <b>Hair Color:</b> here
  395. </li>
  396. <li>
  397. <b>Eye Color:</b> here
  398. </li>
  399. <li>
  400. <b>Height:</b> here
  401. </li>
  402. <li>
  403. <b>Build:</b> here
  404. </li>
  405. <li>
  406. <b>Tattoos:</b> here
  407. </li>
  408. <li>
  409. <b>Piercings:</b> here
  410. </li>
  411. <li>
  412. <b>Clothing Style:</b> here
  413. </li>
  414. <li>
  415. <b>Distinguishing Characteristics:</b> here
  416. </li>
  417. </ul>
  418. </div>
  419.  
  420. <div class="basicInfoPicture">
  421. <div style="width:100%; height:103px; background:#000;">
  422. <img src="https://i.imgur.com/gjuu4PW.png">
  423. </div>
  424. </div>
  425.  
  426. <div class="splitPicture">
  427. <div style="width:100%; height:80px; background:#000;">
  428. <img src="https://i.imgur.com/82iaLgX.png">
  429. </div>
  430. </div>
  431.  
  432. <div class="loveInterestBox">
  433. <div style="width:100%; height:103px; background:#000;">
  434. <img src="https://i.imgur.com/kg05DJ8.png">
  435. </div>
  436. </div>
  437.  
  438. <div class="liBoxPicture">
  439. <h2 style="margin-bottom:5px;">love interest</h2>
  440. <b>status</b> here <br>
  441. <b>since</b> here <br>
  442. <b>to whom</b> here <br>
  443. <b>comments</b> the words will go here and what not. the words will go here and what not. the words will go here and what not. the words will go here and what not.
  444. </div>
  445.  
  446. <div class="splitPicture">
  447. <div style="width:100%; height:80px; background:#000;">
  448. <img src="https://i.imgur.com/A7Ngqnz.png">
  449.  
  450. </div>
  451. </div>
  452.  
  453. <div class="friendsBox">
  454. <h2 style="margin-bottom:5px;">Connections</h2>
  455. <b>name</b> /<i>tagline</i> this is where you talk about it. this is where you talk about it. this is where you talk about it. this is where you talk about it. this is where you talk about it. this is where you talk about it. this is where you talk about it.
  456. <br><br>
  457. <h2 style="margin-bottom:5px;">Connections</h2>
  458. <b>name</b> /<i>tagline</i> this is where you talk about it. this is where you talk about it. this is where you talk about it. this is where you talk about it. this is where you talk about it. this is where you talk about it. this is where you talk about it.
  459. <br><br>
  460. <h2 style="margin-bottom:5px;">Connections</h2>
  461. <b>name</b> /<i>tagline</i> this is where you talk about it. this is where you talk about it. this is where you talk about it. this is where you talk about it. this is where you talk about it. this is where you talk about it. this is where you talk about it.
  462. <br><br>
  463. <h2 style="margin-bottom:5px;">Connections</h2>
  464. <b>name</b> /<i>tagline</i> this is where you talk about it. this is where you talk about it. this is where you talk about it. this is where you talk about it. this is where you talk about it. this is where you talk about it. this is where you talk about it.
  465. <br><br>
  466. </div>
  467.  
  468. <div class="friendsBoxPicture">
  469. <div style="width:100%; height:103px; background:#000;">
  470. <img src="https://i.imgur.com/KQEUMcI.png">
  471. </div>
  472. </div>
  473.  
  474. </div>
  475. </div>
  476. </body>
  477. </html>
  478.  
  479.  
  480.  
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!