mebuckner

FOR MC ONLY.

Aug 2nd, 2020 (edited)
172
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.05 KB | None | 0 0
  1. <!--about me-->
  2. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  3. <style type="text/css">
  4. @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap');
  5.  
  6. body {
  7. background-color:#e1c2b0;
  8. background-repeat:no-repeat;
  9. background-attachment:fixed;
  10. margin: 0;
  11. overflow:auto;
  12. background-size:cover;
  13. background-image:url('https://i.imgur.com/apkZGZT.png');
  14. }
  15.  
  16. .leftSide{
  17. width:360px;
  18. height:700px;
  19. display:inline-block;
  20. vertical-align:top;
  21. }
  22.  
  23. .navigationBox{
  24. width: 300px;
  25. height: 168px;
  26. background: #e8dedc;
  27. margin-top: 15px;
  28. text-align: left;
  29. }
  30.  
  31. .rightSide{
  32. width:577px;
  33. height:700px;
  34. display:inline-block;
  35. vertical-align:top;
  36. padding:30px;
  37. font-family:Georgia;
  38. font-size:12px;
  39. color:#fff;
  40. overflow:auto;
  41. }
  42.  
  43. h1{
  44. font-family: 'Playfair Display', serif;
  45. color: #fff;
  46. background-color: #656d68;
  47. font-size: 27px;
  48. margin: 0;
  49. padding: 0;
  50. display: inline-block;
  51. width: 300px;
  52. text-align: center;
  53. letter-spacing: 7px;
  54. text-transform: uppercase;
  55. }
  56.  
  57. a.navigationLink:link, a.navigationLink:visited {
  58. background-color: #ededeb;
  59. color: #656d68;
  60. padding: 10px 25px;
  61. text-align: center;
  62. text-decoration: none;
  63. display: inline-block;
  64. width: 240px;
  65. border-left: 5px solid #656d68;
  66. border-right: 5px solid #656d68;
  67. }
  68.  
  69. a.navigationLink:hover, a.navigationLink:active {
  70. background-color: #656d68;
  71. color:#ededeb;
  72. }
  73.  
  74.  
  75. table, tr, td, li, p, div, .profileInfo td.text {
  76. color: #000;
  77. font-family: Georgia;
  78. }
  79.  
  80. b{
  81. background: #c47670;
  82. padding: 5px;
  83. line-height: 28px;
  84. color: #ededeb;
  85. }
  86.  
  87. .container {
  88. width:1000px;
  89. height:700px;
  90. position:absolute;
  91. left:0;
  92. right:0;
  93. top:0;
  94. bottom:0;
  95. overflow:hidden;
  96. margin:auto;
  97. color:#fff;
  98. background-color:#ededeb;
  99. font-family: 'Abel', sans-serif;
  100. border:solid 5px #656d68;
  101. }
  102.  
  103. .pictureBorder{
  104. margin-top: 16px;
  105. border: solid 5px #656d68;
  106. width: 290px;
  107. }
  108.  
  109.  
  110.  
  111. .wrapper {
  112. width: 320px;
  113. margin: 0 auto;
  114. display: inline-block;
  115. vertical-align: top;
  116. margin-left: 17px;
  117. }
  118.  
  119. .tabs {
  120. position: relative;
  121.  
  122. height: 268px;
  123. }
  124. .tabs::before,
  125. .tabs::after {
  126. content: "";
  127. display: table;
  128. }
  129. .tabs::after {
  130. clear: both;
  131. }
  132. .tab {
  133. float: left;
  134. }
  135. .tab-switch {
  136. display: none;
  137. }
  138. .tab-label {
  139. position: relative;
  140. display: block;
  141. line-height: 13px;
  142. font-size: 12px;
  143. height: 23px;
  144. padding: 9px;
  145. background: #656d68;
  146. border-right: 0.125rem solid #ededeb;
  147. color: #ededeb;
  148. cursor: pointer;
  149. top: 0;
  150. transition: all 0.25s;
  151. width:83px;
  152. }
  153. .tab-label:hover {
  154.   top: -0.25rem;
  155.   transition: top 0.25s;
  156. }
  157. .tab-content {
  158. height: 177px;
  159. position: absolute;
  160. z-index: 1;
  161. top: 2.75em;
  162. left: 0;
  163. padding: 1.618rem;
  164. background: #e2e4e0;
  165. color: #656d68;
  166. opacity: 0;
  167. transition: all 0.35s;
  168. overflow: auto;
  169. text-align:justify;
  170. border: solid 5px;
  171. }
  172. .tab-switch:checked + .tab-label {
  173. background: #fff;
  174. color: #7b5037;
  175. border-bottom: 0;
  176. border-right: 13px solid #fff;
  177. transition: all 0.35s;
  178. z-index: 1;
  179. top: -0.0625rem;
  180. }
  181. .tab-switch:checked + label + .tab-content {
  182.   z-index: 2;
  183.   opacity: 1;
  184.   transition: all 0.35s;
  185. }
  186.  
  187. ::-webkit-scrollbar-thumb:vertical {height:12px; background:#ededeb; border-top:10px solid #656d68; border-bottom:10px solid #656d68;}
  188. ::-webkit-scrollbar-thumb:horizontal {background-color:#ededeb;}
  189. ::-webkit-scrollbar {width:5px; height:7px;}
  190.  
  191.  
  192. .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>
  193. </style>
  194.  
  195.  
  196.  
  197.  
  198. <!--like to meet-->
  199. <html>
  200. <body>
  201. <div class="container">
  202. <div class="leftSide">
  203. <center>
  204. <img src="https://i.imgur.com/EBa5tGi.png" class="pictureBorder">
  205. <div class="navigationBox">
  206. <h1>silverina</h1>
  207. <a href="" class="navigationLink">home</a>
  208. <a href="" class="navigationLink">message</a>
  209. <a href="" class="navigationLink">comment</a>
  210. <a href="" class="navigationLink" style="border-bottom: solid 5px;">gallery</a>
  211. </div>
  212. <img src="https://i.imgur.com/BUel5Wf.png" class="pictureBorder">
  213. </center>
  214. </div>
  215. <div class="rightSide">
  216. <img src="https://i.imgur.com/Pmxg9Qw.png" style="margin-left: 16px; margin-bottom: 16px; border:solid 5px #656d68;">
  217. <img src="https://i.imgur.com/rlxkdUN.png" style="margin-left: 18px; margin-top: 2px; border: solid 5px #656d68; width: 162px;"><div class="wrapper">
  218. <div class="tabs">
  219. <div class="tab">
  220. <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
  221. <label for="tab-1" class="tab-label">Chapter One</label>
  222. <div class="tab-content">
  223. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa placerat duis ultricies lacus. Platea dictumst vestibulum rhoncus est pellentesque. Tempor id eu nisl nunc mi ipsum faucibus vitae. Ut aliquam purus sit amet luctus. Gravida arcu ac tortor dignissim convallis aenean et. Morbi tristique senectus et netus et malesuada fames ac. Nibh praesent tristique magna sit amet purus gravida quis. Duis at consectetur lorem donec massa sapien faucibus et molestie. Magna fringilla urna porttitor rhoncus. Etiam sit amet nisl purus in mollis nunc sed. Facilisi etiam dignissim diam quis enim lobortis. Cras semper auctor neque vitae tempus quam pellentesque. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Ultrices vitae auctor eu augue ut lectus. Sit amet risus nullam eget felis eget nunc lobortis mattis. Elementum curabitur vitae nunc sed velit dignissim sodales. Vitae congue eu consequat ac felis donec et.
  224.  
  225. </div>
  226. </div>
  227.  
  228. <div class="tab">
  229. <input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
  230. <label for="tab-2" class="tab-label">Chapter Two</label>
  231. <div class="tab-content">
  232. second Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa placerat duis ultricies lacus. Platea dictumst vestibulum rhoncus est pellentesque. Tempor id eu nisl nunc mi ipsum faucibus vitae. Ut aliquam purus sit amet luctus. Gravida arcu ac tortor dignissim convallis aenean et. Morbi tristique senectus et netus et malesuada fames ac. Nibh praesent tristique magna sit amet purus gravida quis. Duis at consectetur lorem donec massa sapien faucibus et molestie. Magna fringilla urna porttitor rhoncus. Etiam sit amet nisl purus in mollis nunc sed. Facilisi etiam dignissim diam quis enim lobortis. Cras semper auctor neque vitae tempus quam pellentesque. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Ultrices vitae auctor eu augue ut lectus. Sit amet risus nullam eget felis eget nunc lobortis mattis. Elementum curabitur vitae nunc sed velit dignissim sodales. Vitae congue eu consequat ac felis donec et.
  233.  
  234. </div>
  235. </div>
  236. <div class="tab">
  237. <input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
  238. <label for="tab-3" class="tab-label">Chapter Three</label>
  239. <div class="tab-content">
  240. third Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa placerat duis ultricies lacus. Platea dictumst vestibulum rhoncus est pellentesque. Tempor id eu nisl nunc mi ipsum faucibus vitae. Ut aliquam purus sit amet luctus. Gravida arcu ac tortor dignissim convallis aenean et. Morbi tristique senectus et netus et malesuada fames ac. Nibh praesent tristique magna sit amet purus gravida quis. Duis at consectetur lorem donec massa sapien faucibus et molestie. Magna fringilla urna porttitor rhoncus. Etiam sit amet nisl purus in mollis nunc sed. Facilisi etiam dignissim diam quis enim lobortis. Cras semper auctor neque vitae tempus quam pellentesque. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Ultrices vitae auctor eu augue ut lectus. Sit amet risus nullam eget felis eget nunc lobortis mattis. Elementum curabitur vitae nunc sed velit dignissim sodales. Vitae congue eu consequat ac felis donec et.
  241.  
  242. </div>
  243. </div>
  244. </div>
  245. </div>
  246. <img src="https://i.imgur.com/Tpa6veA.png" style="margin-left: 16px;margin-top: 16px; border:solid 5px #656d68;">
  247. <div style="width: 297px; margin: 0 auto; display: inline-block; vertical-align: top; margin-left: 16px; height: 248px; margin-top: 16px; border: solid 5px #656d68; overflow:auto; font-family:georgia; font-size:12px; padding:10px;">
  248. <b>DISPLAY NAME:</b> Silverina<br>
  249. <b>NAME:</b> Seraphina Nerys Cassiel<br>
  250. <b>ALIAS:</b> Sera<br>
  251. <b>GENDER:</b> Female<br>
  252. <b>DATE OF BIRTH:</b> Born in 1303.<br>
  253. <b>AGE:</b> 717 years old.<br>
  254. <b>SPECIES:</b> Pure-blood Lycan.<br>
  255. <b>WOLF FORM:</b> White Wolf.<br>
  256. <b>MOTHER:</b> Nerys Cassiel (Deceased)<br>
  257. <b>FATHER:</b> Lucian (Alive)<br>
  258. <b>SISTER:</b> Alysanne Cassiel (Deceased)<br>
  259. <b>BLOODLINE:</b> Cassiel Bloodline<br>
  260. <b>ALLEGIANCE:</b> New World Lycan Council or High Lycan Pack. Members are affiliated to both the HLC & New York Pack.<br>
  261. <b>ROLE:</b> Lucian's Beta & Alpha Heir of the HLC | Alpha of the New York Pack.<br>
  262. <b>LEAD PACK:</b> Lucian (High Alpha), Geralt (Delta & Lead Warrior), Gabriel (Sera's Beta), Everleigh (Lead Hunter), Apollo (Lead Healer).<br>
  263. NY PACK MEMBERS: Isabel, Stefano, Jelina, Bastien, Danika, Leo, Theodora, & Nikolina. (+ 5 Boys & 4 Girls to come from 6th Gen.)<br>
  264. <b>DESCENDANTS:</b> Alayne Drake-DiMira (4th Gen - Deceased), Rowan Cassiel (5th Gen - Deceased), Jazmin DiMira (5th Gen - Deceased), Lyana DiMira (5th Gen - Deceased). Everyone after the 5th Generation Cassiel & DiMira Bloodlines.
  265. </div>
  266. <img src="https://i.imgur.com/rlxkdUN.png" style="margin-left: 18px; margin-top: 16px; border: solid 5px #656d68; width: 162px;">
  267. </div>
  268. </body>
  269. </html>
  270.  
Add Comment
Please, Sign In to add comment