Advertisement
Guest User

Untitled

a guest
Feb 28th, 2020
169
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.54 KB | None | 0 0
  1. <style type="text/css">body{
  2. font-family: 'Droid Serif', serif;
  3. font-size: 14px;
  4. color: #2f2f2f;
  5. background-color: #f9f7f1;
  6. }
  7. header{
  8. font-family: 'Playfair Display', serif;
  9. font-weight: 900;
  10. font-size: 80px;
  11. text-transform: uppercase;
  12. display: inline-block;
  13. line-height: 72px;
  14. margin-bottom: 20px;
  15.  
  16. }
  17. p{
  18. margin-top: 0;
  19. margin-bottom: 20px;
  20. }
  21. .head{
  22. text-align: center;
  23. position: relative;
  24.  
  25.  
  26. }
  27.  
  28. .headerobjectswrapper{
  29. }
  30.  
  31. .subhead{
  32. text-transform: uppercase;
  33. border-bottom: 2px solid #2f2f2f;
  34. border-top: 2px solid #2f2f2f;
  35. padding: 12px 0 12px 0;
  36.  
  37. }
  38. .weatherforcastbox{
  39. position: relative;
  40. width: 12%;
  41. left: 10px;
  42. border: 3px double #2f2f2f;
  43. padding: 10px 15px 10px 15px;
  44. line-height: 20px;
  45. display: inline-block;
  46. margin: 0 50px 20px -360px;
  47. }
  48. .content{
  49. font-size: 0;
  50. line-height: 0;
  51. word-spacing: -.31em;
  52. display: inline-block;
  53. margin: 30px 2% 0 2%;
  54.  
  55.  
  56. }
  57. .collumns{
  58.  
  59. }
  60.  
  61. .collumn{
  62. font-size: 14px;
  63. line-height: 20px;
  64. width: 50%;
  65. display: inline-block;
  66. padding: 0 1% 0 1%;
  67. vertical-align: top;
  68. margin-bottom: 50px;
  69. transition: all .7s;
  70. }
  71. .collumn + .collumn {
  72. border-left: 1px solid #2f2f2f;
  73. }
  74. .collumn .headline{
  75. text-align: center;
  76. line-height: normal;
  77. font-family: 'Playfair Display', serif;
  78. display: block;
  79. margin: 0 auto;
  80.  
  81.  
  82. }
  83. .collumn .headline.hl1{
  84. font-weight: 700;
  85. font-size: 30px;
  86. text-transform: uppercase;
  87. padding: 10px 0 10px 0;
  88.  
  89. }
  90.  
  91. .collumn .headline.hl2{
  92. font-weight: 400;
  93. font-style: italic;
  94. font-size: 24px;
  95. box-sizing: border-box;
  96. padding: 10px 0 10px 0;
  97. }
  98.  
  99. .collumn .headline.hl2:before{
  100. border-top: 1px solid #2f2f2f;
  101. content: '';
  102. width: 100px;
  103. height: 7px;
  104. display: block;
  105. margin: 0 auto;
  106. }
  107. .collumn .headline.hl2:after{
  108. border-bottom: 1px solid #2f2f2f;
  109. content: '';
  110. width: 100px;
  111. height: 13px;
  112. display: block;
  113. margin: 0 auto;
  114.  
  115. }
  116.  
  117. .collumn .headline.hl3{
  118. font-weight: 400;
  119. font-style: italic;
  120. font-size: 36pt;
  121. box-sizing: border-box;
  122. padding: 10px 0 10px 0;
  123. }
  124. .collumn .headline.hl4{
  125. font-weight: 700;
  126. font-size: 12px;
  127. box-sizing: border-box;
  128. padding: 10px 0 10px 0;
  129. }
  130. .collumn .headline.hl4:before{
  131. border-top: 1px solid #2f2f2f;
  132. content: '';
  133. width: 100px;
  134. height: 7px;
  135. display: block;
  136. margin: 0 auto;
  137. }
  138. .collumn .headline.hl4:after{
  139. border-bottom: 1px solid #2f2f2f;
  140. content: '';
  141. width: 100px;
  142. height: 10px;
  143. display: block;
  144. margin: 0 auto;
  145.  
  146. }
  147.  
  148. .collumn .headline.hl5{
  149. font-weight: 400;
  150. font-size: 42px;
  151. text-transform: uppercase;
  152. font-style: italic;
  153. box-sizing: border-box;
  154. padding: 10px 0 10px 0;
  155. }
  156. .collumn .headline.hl6{
  157. font-weight: 400;
  158. font-size: 18px;
  159. box-sizing: border-box;
  160. padding: 10px 0 10px 0;
  161. }
  162. .collumn .headline.hl6:before{
  163. border-top: 1px solid #2f2f2f;
  164. content: '';
  165. width: 100px;
  166. height: 7px;
  167. display: block;
  168. margin: 0 auto;
  169. }
  170. .collumn .headline.hl6:after{
  171. border-bottom: 1px solid #2f2f2f;
  172. content: '';
  173. width: 100px;
  174. height: 10px;
  175. display: block;
  176. margin: 0 auto;
  177.  
  178. }
  179. .collumn .headline.hl7{
  180. font-weight: 700;
  181. font-size: 12px;
  182. box-sizing: border-box;
  183. display: block;
  184. padding: 10px 0 10px 0;
  185. }
  186. .collumn .headline.hl8{
  187. font-weight: 700;
  188. font-size: 12px;
  189. box-sizing: border-box;
  190. padding: 10px 0 10px 0;
  191. }
  192. .collumn .headline.hl9{
  193. font-weight: 700;
  194. font-size: 12px;
  195. box-sizing: border-box;
  196. padding: 10px 0 10px 0;
  197. }
  198. .collumn .headline.hl10{
  199. font-weight: 700;
  200. font-size: 12px;
  201. box-sizing: border-box;
  202. padding: 10px 0 10px 0;
  203. }
  204. .collumn .citation{
  205. font-family: 'Playfair Display', serif;
  206. font-size: 36px;
  207. line-height: 44px;
  208. /*font-style: italic;*/
  209. text-align: center;
  210. font-weight: 400;
  211. display: block;
  212. margin: 40px 0 40px 0;
  213. font-feature-settings: "liga", "dlig";
  214.  
  215. }
  216. .collumn .citation:before{
  217. border-top: 1px solid #2f2f2f;
  218. content: '';
  219. width: 100px;
  220. height: 16px;
  221. display: block;
  222. margin: 0 auto;
  223. }
  224. .collumn .citation:after{
  225. border-bottom: 1px solid #2f2f2f;
  226. content: '';
  227. width: 100px;
  228. height: 16px;
  229. display: block;
  230. margin: 0 auto;
  231. }
  232. .collumn .figure {
  233. margin: 0 0 20px;
  234. }
  235. .collumn .figcaption{
  236. font-style: italic;
  237. font-size: 12px;
  238. }
  239. .media {
  240. -webkit-filter: sepia(80%) contrast(1) opacity(0.8);
  241. filter: sepia(80%) grayscale(1) contrast(1) opacity(0.8);
  242. mix-blend-mode: multiply;
  243. width: 100%;
  244. }
  245. /*________________________________________________________________________________________________________________________________*/
  246. /*MEDIAQUERIES*/
  247. @media only all and (max-width: 1300px) {
  248. .weatherforcastbox{
  249. display: none;
  250. }
  251.  
  252. }
  253. @media only all and (max-width: 1200px) {
  254. .collumn{
  255. width: 47%;
  256. }
  257.  
  258. }
  259. @media only all and (max-width: 900px) {
  260. .collumn{
  261. width: 47%;
  262. }
  263.  
  264. }
  265. @media only all and (max-width: 600px) {
  266. .collumn{
  267. width: 100%;
  268. }
  269. .collumn + .collumn {
  270. border-left: none;
  271. border-bottom: 1px solid #2f2f2f;
  272. }
  273. header{
  274. max-width: 320px;
  275. font-size: 60px;
  276. line-height: 54px;
  277. overflow: hidden;
  278. }
  279.  
  280. }
  281.  
  282.  
  283. Resources
  284. </style>
  285. <div class="head">
  286. <div class="headerobjectswrapper">
  287. <figure class="figure"><img alt="" class="media" src="https://i.imgur.com/fWZHkAz.png" /></figure>
  288. </div>
  289.  
  290. <div class="subhead">The Wizarding World&#39;s Beguiling Broadsheet of Choice - Feb. 11, 2020</div>
  291. </div>
  292.  
  293. <div class="subhead">
  294. <center>
  295. <h1>The Sorting Hat: An Outdated Tradition?</h1>
  296. </center>
  297. </div>
  298.  
  299. <div class="content">
  300. <div class="collumns">
  301. <div class="collumn">
  302. <div class="head">
  303. <center><img alt="profile-picture" src="https://worldofpotter.com/uploads/profile_images/EHPJbtdpA6vqzWcU5e3033bd75bc87.98262533_f555542a3fc943ac389b45f93767510a.jpg" style="width:100px;margin-bottom:5px;border:2px solid #696969;color:#000;" /><br />
  304. <span style="color:#000000;"><tt>Written by: </tt></span><tt><span style="color:#e54543;"><tt>Osmand Bennet</tt></span><tt> </tt></tt>
  305.  
  306. <p>&nbsp;</p>
  307. </center>
  308. </div>
  309. <b>This week, I have my biggest story yet, as it was one of those "little things causing big problems" sort of situations. A magical prankster by the name of Merlim Telliterry nearly exposed the magical world to all of muggle kind.</b>
  310.  
  311. <p>&nbsp;</p>
  312. In the incident in question, a new muggle building was being built. It was said to be a power plant that ran purely on natural energies, sporting solar panels, a water mill, and a wind mill. All of these things were created by a small team, and the building was said to be finished by the coming year, and could provide clean energy to the next town over, due to their light population. This is revolutionary in the muggle world, and so they were broadcasting the event on tele. However, Merlim did not seem to understand, or simply didn't care, that any muggle with a television could see what was happening on that construction site when he made a ladder walk on its own with a worker still on board!<br>
  313. <br>
  314. The worker was thrown off of the ladder just as the spell ended, and landed on the ground below. He seemed responsive enough, as I could only observe from a distance, but it is unknown how terribly his injuries were.
  315.  
  316. <p>&nbsp;</p>
  317.  
  318. <figure class="figure">
  319. <p><img alt="" class="media" src="https://thumbs.gfycat.com/MasculineFrankBrant-size_restricted.gif
  320. " /></p>
  321. </figure>
  322. In typical situations such as these, the Ministry would need to get involved to obliviate every muggle on site, and any who may have been passing. However, with such a thing having been aired on live television, it was a hard decision on what to do. They couldn't guarantee they would get everyone, and having just one muggle out there spreading ideas of magic would bring any susceptible to such promises into the equation. Their first idea was to enchant the owner of the manufacturer of the ladder and make him explain that such a thing was a safety feature gone wrong. However, it seemed unlikely that anyone would believe that, and the Ministry did not want to cause any irreparable damage to an innocent manufacturer.
  323. <p>&nbsp;</p>
  324. </div>
  325.  
  326. <div class="collumn">
  327. <p>
  328. To put it as simply as I can, the wizarding world was thrown into crises based on a simple prank, and the process was nearing irreparable effects when word on the street started to spread throughout the village, and soon enough, within the day, the next town over had similar rumours. The ministry had to act quickly, but they just couldn't find any catch-all solution that wouldn't do damage to some innocents. My sources tell me that they had decided on a plan of attack, but before they could inact any action, a different word started to spread. The new rumor was that ladders just walked when they weren't positioned properly.<br><br>
  329.  
  330. Ready to fire whatever wizard had made up such a terrible excuse, the Ministry readied their best counter-responses. Strangely enough, a few other patrons in the diner started agreeing, and just as quickly as the first rumor of a walking ladder had spread, so too had the reason behind it.
  331. </p>
  332.  
  333. <figure class="figure">
  334. <p><img alt="" class="media" src="https://66.media.tumblr.com/tumblr_m08mlxJdjW1rqfhi2o1_400.gif
  335. " /></p>
  336. </figure>
  337. Yes, the solution behind this complex problem ended up to be to take no action at all. Any professor of Muggle Studies could tell you that these sorts of rumors may spread like wildfire, but those who don't know about magic are very likely to believe the first answer that is given to them as long as the person speaking sounds like they know what they're talking about, and the answer seems within the realm of possibilities.<br><br>
  338.  
  339. This has brought up several suggestions on how heavily the Ministry should intervene when such things are spotted, and if they should save their resources for when a wizard or witch is actually seen casting, instead of just the result of his or her spell being discovered.
  340.  
  341. <p>&nbsp;</p>
  342. </div>
  343. </div>
  344. </div>
  345. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic|Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
  346. <link href="styles/newspaper.css" rel="stylesheet" />
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement