QueerCodes

Borders

Feb 24th, 2020
548
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.23 KB | None | 0 0
  1. <head>
  2. <link href="https://fonts.googleapis.com/css?family=Poppins:300,400|Rock+Salt&display=swap" rel="stylesheet">
  3. <link href="https://fonts.googleapis.com/css?family=Dorsa&display=swap" rel="stylesheet">
  4. <style type="text/css">
  5.  
  6. body {
  7. height: 100%;
  8. margin: 0;
  9. padding: 0;
  10.  
  11. }
  12.  
  13. h1 {
  14. font-family: 'Poppins', sans-serif;
  15. text-transform:uppercase;
  16. font-size:11px;
  17. font-weight:600;
  18. letter-spacing:3px;
  19. text-align:center;
  20. margin-top:30px;
  21. }
  22.  
  23. h2 {
  24. font-family: 'Rock Salt', sans-serif;
  25. font-size: 30pt;
  26. margin-bottom: 50px;
  27. text-align: center;
  28. color: #FFDDE4;
  29. line-height: 0;
  30. }
  31.  
  32. p {
  33. font-size: 9pt;
  34. line-height: 15px;
  35. font-family:sans-serif;
  36. font-weight: 100;
  37. }
  38.  
  39. b{
  40. font-size: 9pt;
  41. letter-spacing: 3;
  42. color: #fff;
  43. text-transform: uppercase;
  44. font-family: 'Poppins', sans-serif;
  45. }
  46.  
  47. strong {
  48. font-size: 9pt;
  49. letter-spacing: 3;
  50. color: #fff;
  51. text-transform: uppercase;
  52. font-family: 'Poppins', sans-serif;
  53. }
  54.  
  55. span {
  56. text-align: right;
  57. }
  58.  
  59. .left {
  60. position: absolute;
  61. background: url('https://www.upsetmagazine.com/images/article/Artist-Images/Y/Yungblud/Cover%20Feature%202019/_imageblocks/GM2I1939-2-p.jpg');
  62. background-size: 100%;
  63. background-position: center;
  64. width:50%;
  65. height: 100%;
  66. border-right:2px solid #2a2a2a;
  67. }
  68.  
  69. .container {
  70. text-align: center;
  71. float: right;
  72. width: 50%;
  73. height: 100%;
  74. background: url('https://www.gelevenhotel.com/wp-content/uploads/2015/07/SubtleNet-White-Simple-Seamless-Patterns-For-Website-Backgrounds.jpg');
  75. }
  76.  
  77. .column {
  78. background: #FFDDE4;
  79. float: left;
  80. width: 50%;
  81. height:140px;
  82. }
  83. .basics :after {
  84. content: "";
  85. display: table;
  86. clear: both;
  87. }
  88.  
  89. .photos {
  90. margin:0 auto;
  91. width:75%;
  92. text-align: center;
  93. }
  94.  
  95.  
  96. .photos img {
  97. padding: 5px;
  98. height: 70px;
  99. width: 70px;
  100. border: 2px solid #2a2a2a;
  101. background: white;
  102. margin-bottom: 5px;
  103. }
  104.  
  105. .box {
  106. width:75%;
  107. height:140px;
  108. border: 2px solid #2a2a2a;
  109. margin: 0 auto;
  110. padding: 5px;
  111. background: #fff;
  112. }
  113.  
  114. .quote {
  115. margin:0 auto;
  116. width:75%;
  117. height:15px;
  118. line-height: 15px;
  119. letter-spacing: 1;
  120. padding:5px;
  121. background: #2a2a2a;
  122. color:#FFf;
  123. font-size: 8pt;
  124. font-family:sans-serif;
  125. }
  126.  
  127. .quote2 {
  128. margin:0 auto;
  129. width:75%;
  130. height:15px;
  131. line-height: 15px;
  132. letter-spacing: 1;
  133. padding:5px;
  134. background: #FFDDE4;
  135. color:#2a2a2a;
  136. font-size: 8pt;
  137. font-family:sans-serif;
  138. border: 2px solid #2a2a2a;
  139. }
  140.  
  141. .bio {
  142. margin:0 auto;
  143. padding: 5px;
  144. text-align: justify;
  145. border:2px solid #2a2a2a;
  146. width:75%;
  147. height:250px;
  148. background: #fff;
  149. overflow: scroll;
  150. }
  151.  
  152. .bio b{
  153. color:#FFDDE4;
  154. }
  155.  
  156. </style></head>
  157. <body>
  158. <div class="left"></div>
  159. <div class="container">
  160. <h1> his name is</h1>
  161. <h2> Callum Morrell</h2>
  162.  
  163. <div class="photos" style="">
  164. <img src="https://img.srgcdn.com/e//NU9nekdvUUxHMHZwWDZvcmdSd0UuanBn.jpg">
  165. <img src="https://i.pinimg.com/736x/db/98/ed/db98edb482ec4c3357e1529fe2157ecb.jpg">
  166. <img src="https://i.pinimg.com/originals/5e/5e/2c/5e5e2c2335d4ec72e34a7b4a6018685f.jpg">
  167. </div>
  168.  
  169. <div class="box">
  170. <div class="basics">
  171.  
  172. <div class="column">
  173. <p>
  174. <b>Age</b> 22<BR>
  175. <b>Hair</b> Fluid</BR>
  176. <b>Eyes</b> Blue<BR>
  177. <b>Sex</b> Male</BR>
  178. </p></div>
  179.  
  180. <div class="column">
  181. <p>
  182. <b>Orientation</b> Queer<BR>
  183. <b>Relationship</b> Single</BR>
  184. <b>Occupation</b>Sous-chef<BR>
  185. <b>Hometown</b> Camden Town, London</BR>
  186. </p></div></div>
  187. </div>
  188.  
  189. <div class="quote" style="margin-top: 10px;">
  190. "What's more cliche than comparin' life to a fuckin' rollarcoaster? "
  191. </div>
  192.  
  193. <div class="bio" style="margin-top: 10px;">
  194. <b> About the boy</b>
  195. <p>So...I'm goin' up an' up, yeah, then jus' when I get t' the top, my seatbelt comes undone. Sometimes I catch m'self, but...sometimes I fuck it. When I was little I swear I spent every minute holdin' my breath. My mum was the most wicked amazin' woman you ever met, an' my dad didn't deserve 'er. I remember the first time I prop'ly understood a bad word. He called 'er a bitch an' I figured I was gonna be a big man and stand up to 'im. Bad as he was, he didn't mean to push me so 'ard, I know he didn't. I remember waking up at the foot of the stairs and my mum was screamin' 'er 'ead off. That was it. The seatbelt clickin' undone. We didn't go back after that.
  196. <BR></BR>
  197. Single parents an' full time work don' really mix, so I spent alotta the time by m'self. Good of a woman as she was, she was a shit liar. She used to come 'ome exhausted an' try an' find the energy to hear abou' what I did at school. One time she fell asleep on the sofa, an' I thought "Righ', I've got a bangin' idea. I'll make dinner". What a fuckin' knob'ead. I almos' burnt the fuckin' house down. She came runnin' in, an' I was tryin' not to cry cause I burnt m'self, and she looked like she was gonna go mental...but she didn't. She didn't even raise 'er voice. Later on she said that she wasn't gonna go back to work cause it wasn't fair on me. At the time I thought it was mint. Jus' me an' my mum dossin' about. Then she met Mark. There goes that fuckin' seatbelt again.
  198. <BR></BR>
  199. Lemme tell y' about Mark. Imagine the most disgustin' man you ever met, an' then times 'im by forty. That's Mark. He had a good job, so he took care of us, an' my Mum was desperate cause we were livin' off nothin' before. I didn't mind if he treated me like shit, I'd rather it, but Mum was exactly the same. Never let 'im hit me. Sent me off to my room if it looked like 'e were gonna yell. Should've expected the sealtbelt comin' undone that time. That last time though, I fell right off the roller-coaster.
  200. <BR></BR>
  201. I was gobby lil' shit when I was a teenager. Especially to Mark. He pissed me off every day, so I did it back on purpose. Twat. We were havin' a screamin' match one day while my mum was out. I was so fuckin' mad, I didn't even hear 'er come back in, but all of a sudden there she was. My fuckin' super mum. She didn't even know what we were arguin' about, but she took my side anyway. I should've seen it really. The look on his face. He was fuckin' livid. I heard them through the wall later on, when I was gettin' ready for bed and then, all of a sudden...my seatbelt came undone. It was weird. One minute it was like bein' at the front of a concert, right next to the speaker...and then radio silence. You don' have to beleive me, but I swear it's like I felt it. I couldn't breathe, I couldn't....think. So I just started running. Burst into the bedroom and he had his hands around her neck
  202. <BR></BR>
  203. My heart broke into a hundred million peices. It was like...the worst pain you ever felt. He kept trying to tell me that it was an accident and that 'e lost his temper, but 'e didn't mean it. Didn't matter. I dunno what she would've wanted me to do. She never hurt a fly, and I was this lil' shit who got into fights for fun. Maybe she'd've told me to leave 'im. Yeah, she was like that. She would've said that he's already ruined a life, no reason for him to ruin mine too, but I was just...so fuckin' mad. I didn't even think about it, I just grabbed the nearest thing to me and started swingin'. The neighbours called the police cause of all the yellin' and I don't really remember too much after that part. Apparently I was just sat her real quiet like...and Mark...well, I'm not the strongest man the world, but apparently I'm strong enough to cave someone's 'ead in with a cricket bat.
  204. <BR></BR>
  205. That kinda shit changes ya. Didn't really believe it before. It's fuckin' wild though, init. They made us all pancakes at the home I was in a little while later, and I jus' lost my fuckin' mind. Reminded me of 'er, and I couldn't breathe. I thought I were dying. Turns out, I'm just a fuckin' drama queen with PTSD.</p>
  206. </div>
  207. <div class="quote2" style="margin-top: 10px;">
  208. "What's more cliche than comparin' life to a fuckin' rollarcoaster? "
  209. </div>
  210.  
  211. </div>
  212.  
  213. <div style="position:fixed; bottom: 10px; right: 10px;">
  214. <a href="http://www.queercodes.tumblr.com"><img src="https://i.ibb.co/SN2rBg4/Logo-Makr-23-If-VB.png" alt="no image text" width="70px;"/></a>
  215. </body>
Add Comment
Please, Sign In to add comment