API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 18th, 2017
116
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head><title>{title}</title>
  3. <link rel="shortcut icon" href="{favicon}">
  4.  
  5. <!--------------------------------------------------------------------
  6.  
  7. ABOUT PAGE #004: ROYAL PORTRAIT
  8. published june 04, 2017
  9. ᴀʟʟ ʀɪɢʜᴛs ʀᴇsᴇʀᴠᴇᴅ © ᴀɴɢᴇʟɪᴄxɪ ᴜɴᴅᴇʀ ɢᴘʟ ʟɪᴄᴇɴsɪɴɢ
  10. ᴜɴᴀᴜᴛʜᴏʀɪᴢᴇᴅ ʀᴇᴅɪsᴛʀɪʙᴜᴛɪᴏɴ ɪs sᴛʀɪᴄᴛʟʏ ᴘʀᴏʜɪʙɪᴛᴇᴅ.
  11.  
  12. Terms of Use:
  13. - DO NOT USE AS A BASE CODE.
  14. - DO NOT REDISTRIBUTE, REPRODUCE, OR CLAIM AS YOURS.
  15. - DO NOT MODIFY BEYOND THE POINT OF RECOGNITION.
  16.  
  17. By using this theme, you indicate that you have read & agreed to these terms. Any violation will be prosecuted against. If there's anything you'd like me to make clear, please contact me via PM. Enjoy!
  18.  
  19. ~Lia
  20.  
  21. --------------------------------------------------------------------->
  22.  
  23. <!--fonts-->
  24. <link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC" rel="stylesheet">
  25. <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
  26. <link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
  27.  
  28. <style type="text/css">
  29.  
  30. body {
  31.  
  32. background-color: #000;
  33. background-image: url('');
  34. margin: 0px;
  35. }
  36.  
  37. a {
  38. text-decoration: none;
  39. }
  40.  
  41. /* S1 DEFINES THE FIRST SIDE OF THE SCREEN. */
  42. #s1 {
  43. background-color: transparent;
  44. width: 135vh;
  45. height: 100vh;
  46. position: fixed;
  47. overflow: hidden;
  48. }
  49.  
  50. /* THIS AFFECTS YOUR NAME/TITLE. */
  51. h1 {
  52. width: 350px;
  53. color: #ccc;
  54. font-family: 'Playfair Display SC';
  55. font-size: 30px;
  56. font-weight: 300;
  57. letter-spacing: 3px;
  58. margin-left: auto;
  59. margin-right: auto;
  60. margin-top: 32vh;
  61. }
  62.  
  63. /* THIS AFFECTS THE QUOTE UNDER THE DESCRIPTION. */
  64. h2 {
  65. width: 350px;
  66. color: #ccc;
  67. font-family: 'Playfair Display';
  68. font-size: 11px;
  69. font-weight: 300;
  70. font-style: italic;
  71. letter-spacing: 1px;
  72. text-align: right;
  73. padding-top: 15px;
  74. margin-top: 5px;
  75. margin-left: auto;
  76. margin-right: auto;
  77. }
  78.  
  79. /* THIS IS THE DESCRIPTION (D'UH). */
  80. #description {
  81. width: 330px;
  82. height: 125px;
  83. color: #ccc;
  84. font-family: 'Nunito Sans';
  85. font-size: 9px;
  86. font-weight: 300;
  87. text-align: justify;
  88. border-left: 1px solid red;
  89. padding: 10px;
  90. margin-top: 0px;
  91. margin-left: auto;
  92. margin-right: auto;
  93. overflow-y: auto;
  94. }
  95.  
  96. #description p {
  97. margin: 7px;
  98. }
  99.  
  100. #description a, a:active, a:visited {
  101. color: #ff0000;
  102. }
  103.  
  104. #description a:hover {
  105. font-style: italic;
  106. }
  107.  
  108. /* S2 DEFINES THE SECOND SIDE OF THE SCREEN. */
  109. #s2 {
  110. background-color: transparent;
  111. /* SIMPLY CHANGE THE LINK BELOW TO ADD YOUR IMAGE! */
  112. background-image: url('https://i.pinimg.com/originals/9e/7a/77/9e7a77cc2c635b28a3cc08961f611d4d.jpg');
  113. background-position: bottom left;
  114. /* IF YOU'RE USING A PATTERN, CHANGE "NO-REPEAT" TO "REPEAT". */
  115. background-repeat: no-repeat;
  116. width: 77vh;
  117. height: 100vh;
  118. position: relative;
  119. overflow: hidden;
  120. margin-left: auto;
  121. margin-right: 0px;
  122. border-radius: 49% 0% 0% 49%;
  123. border-left: 6px double #ccc;
  124. }
  125.  
  126. #s2:hover #menu {
  127. opacity: 1;
  128. }
  129.  
  130. /* THIS IS THE ENTIRE HOVER-ON PANEL. */
  131. #menu {
  132. background-color: rgba(0, 0, 0, 1);
  133. background-image: url('https://img.bestofinsta.org/t51.2885-15/s640x640/sh0.08/e35/c0.135.1080.1080/15056634_154301368377422_1116364147437600768_n.jpg?ig_cache_key=MTM4OTg4OTA4NzcyNDM4MDk2NA%3D%3D.2.c');
  134. background-position: bottom left;
  135. /* IF YOU'RE USING A PATTERN, CHANGE "NO-REPEAT" TO "REPEAT". */
  136. background-repeat: no-repeat;
  137. width: 77vh;
  138. height: 100vh;
  139. border-radius: 49% 0% 0% 49%;
  140. transition: ease-in-out 0.5s;
  141. position: fixed;
  142. opacity: 0;
  143. }
  144.  
  145. /* THIS IS THE CONTAINER FOR THE MENU TILES */
  146. #wa {
  147. width: 150px;
  148. margin-left: auto;
  149. margin-right: auto;
  150. margin-top: 44vh;
  151. }
  152.  
  153. /* EACH TL DEFINES AN INDIVIDUAL MENU TILE. */
  154. #tl-1 {
  155. background-color: red;
  156. border: 3px solid #ccc;
  157. width: 70px;
  158. height: 70px;
  159. transform: rotate(45deg);
  160. overflow: hidden;
  161. }
  162.  
  163. /* TL img DEFINES THE IMAGE, IN CASE YOU CHOOSE TO HAVE AN IMAGE INSTEAD OF PLAINCOLOR. */
  164. #tl-1 img {
  165. transform: rotate(-45deg);
  166. margin-top: -12px;
  167. margin-left: -12px;
  168. }
  169.  
  170. #tl-2 {
  171. background-color: #F4B6B3;
  172. border: 3px solid white;
  173. width: 70px;
  174. height: 70px;
  175. margin-top: -135px;
  176. margin-left: 57px;
  177. transform: rotate(45deg);
  178. overflow: hidden;
  179. }
  180.  
  181. #tl-2 img {
  182. transform: rotate(-45deg);
  183. margin-top: -12px;
  184. margin-left: -12px;
  185. }
  186.  
  187. #tl-3 {
  188. background-color: #F4B6B3;
  189. border: 3px solid white;
  190. width: 70px;
  191. height: 70px;
  192. margin-top: -17px;
  193. margin-left: 114px;
  194. transform: rotate(45deg);
  195. overflow: hidden;
  196. }
  197.  
  198. #tl-3 img {
  199. transform: rotate(-45deg);
  200. margin-top: -12px;
  201. margin-left: -12px;
  202. }
  203.  
  204. #tl-4 {
  205. background-color: #F4B6B3;
  206. border: 3px solid white;
  207. width: 70px;
  208. height: 70px;
  209. margin-top: -17px;
  210. margin-left: 57px;
  211. transform: rotate(45deg);
  212. overflow: hidden;
  213. }
  214.  
  215. #tl-4 img {
  216. transform: rotate(-45deg);
  217. margin-top: -12px;
  218. margin-left: -12px;
  219. }
  220.  
  221. /* and this is the credit. DO NOT REMOVE IT, or I WILL hunt you.
  222. editing colors & such to fit the aesthetic is O.K. though! */
  223.  
  224. #credit {
  225. background-color: #ccc;
  226. width: 95px;
  227. height: 10px;
  228. font-family: 'Arial';
  229. font-size: 9px;
  230. font-weight: 500;
  231. font-variant: small-caps;
  232. letter-spacing: 1px;
  233. text-align: center;
  234. outline: 1px solid #ccc;
  235. outline-offset: 2px;
  236. padding-top: 5px;
  237. padding-left: 5px;
  238. padding-right: 5px;
  239. padding-bottom: 7px;
  240. margin-top: 30vh;
  241. margin-left: auto;
  242. margin-right: 5px;
  243. }
  244.  
  245. #credit a, a:active, a:visited {
  246. color: black;
  247. }
  248.  
  249. #credit a:hover {
  250. color: black;
  251. }
  252.  
  253. /* SCROLLBAR (Only works for Chrome.) */
  254. ::-webkit-scrollbar {
  255. background-color: #ccc; /* This is the color for the scrollbar background. */
  256. height: 4px;
  257. width: 4px;
  258. }
  259.  
  260. ::-webkit-scrollbar-thumb {
  261. background-color: red; /* This is the color for the scroll button!*/
  262. border-radius: 2px;
  263. }
  264.  
  265.  
  266. </style></head>
  267. <body>
  268.  
  269. <div id="s1">
  270. <h1>amen of beasts</h1>
  271. <div id="description">
  272. <p>NAME: Dominic Damiano Parrusi<br>
  273.  
  274. BIRTHDATE: 12 November<br>
  275.  
  276. AGE: Thirty-One<br>
  277.  
  278. GENDER: Male<br>
  279.  
  280. SEXUALITY: Demisexual<br>
  281.  
  282. STATUS: Mercenary<br>
  283.  
  284. SPECIES: Human<br>
  285.  
  286. RELIGION: Roman Catholic<br>
  287.  
  288. HAIR COLOUR: Dark Brown<br>
  289.  
  290. EYE COLOUR: Ice Blue<br>
  291.  
  292. HEIGHT: 6'2<br>
  293.  
  294. WEIGHT: 220lbs<br>
  295.  
  296. ETHNICITY: White<br>
  297.  
  298. BUILD: Muscular<br>
  299.  
  300.  
  301. MENTAL AFFLICTIONS: PTSD<br>
  302.  
  303. POSITIVE TRAITS: Dominant. Intelligent. Independent. Resourceful. Determined.<br>
  304.  
  305. NEGATIVE TRAITS: Sarcastic. Violent. Ruthless. Cynical. Sadistic. Resourceful. Arrogant.<br>
  306.  
  307. ALIGNMENT: Neutral Evil<br>
  308.  
  309. MYERS-BRIGGS TYPE: INFJ<br>
  310.  
  311. TEMPERAMENT: Choleric<br>
  312.  
  313. ENNEAGRAM TYPE: The Challenger<br>
  314.  
  315. ZODIAC: Scorpio<br>
  316.  
  317. SINS: Wrath, Pride, Envy<br>
  318.  
  319. VIRTUES: Diligence, Humility, Temperance, Chastity<br>
  320.  
  321.  
  322. TROPES.
  323. Soft-Spoken Sadist, Wicked Cultured, Renaissance Man, Byronic Hero, Noble Demon, Deadpan Snarker, Beware The Quiet Ones, Devil In Plain Sight, He Who Fights Monsters.<br>
  324.  
  325.  
  326. <a href="https://blccdmvney.tumblr.com/">AESTHETICS.</a>
  327. SIGHTS: blood spattered on white canvas, pomegranate juice soaked into tablecloth, weeping santa maria effigy, red fast cars, black glinting seawater, the wink of a silver blade, blood orange trees embracing a villa<br>
  328.  
  329. SCENTS: rust and salt, warm leather in the sunlight, sundried tomatoes and herbs in a large pot, amber whiskey intermingled with sweet tobacco leaf, a freshly cut blood orange<br>
  330.  
  331. OTHER: paint spattered palettes, a leather punching bag and matching gloves, long black coat and leather gloves, rain-mirrored streets, a half crescent moon<br>
  332.  
  333. <a href="">link</a></p>
  334. </div>
  335. <h2>
  336.  
  337. </h2>
  338. </div>
  339.  
  340. <div id="s2"><div id="menu"><div id="wa">
  341.  
  342.  
  343. </div>
  344. <div id="credit"><a href="https://angelicxi.tumblr.com/">page by angelicxi</a></div></div></div>
  345.  
  346. </body></html>
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!