Advertisement
Guest User

Untitled

a guest
Jan 28th, 2020
120
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.80 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>Marvelous Magical Moss Makes Medicine!</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>Just last week, a Mr. Thomas Timbit was interviewed for his excellent discovery of a new species of moss. This particular fungus is said to have all the restorative properties of Fentlebite, but without the unfortunate gastrointestinal side effects! When asked what he planned on doing with his discovery, he had this to say:</b>
  310.  
  311. <p>&nbsp;</p>
  312. "I plan on experimenting in a controlled environment and discovering what causes this wonderous herb to cultivate. After that, it can be grown regularly and I hope it to become widely available to any who need it."<br><Br>
  313.  
  314. Our reporters questioned how he discovered such an extraordinary species and its effects, and he replied:<br><br>
  315.  
  316. "Well, I was searching for my pet tortoise. The mischievous thing had managed to sneak away while I was having a lie down in a field. As for discovering its properties, well, guess who I found eating it! Leonard [the tortiose] had gotten a nasty scrape on the top of his head from pressing it underneath the rock to access the moss. I took him home to clean him up, and there wasn't a mark on him!"&rdquo;
  317.  
  318. <p>&nbsp;</p>
  319.  
  320. <figure class="figure">
  321. <p><img alt="" class="media" src="https://images.squarespace-cdn.com/content/v1/544591e6e4b0135285aeb5b6/1541612777719-M04CNI8LBRBHYUAJGBTA/ke17ZwdGBToddI8pDm48kDHPSfPanjkWqhH6pl6g5ph7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0mwONMR1ELp49Lyc52iWr5dNb1QJw9casjKdtTg1_-y4jz4ptJBmI9gQmbjSQnNGng/Musgo_Antartico.jpg
  322. " /></p>
  323. </figure>
  324. The Moss in question is flagrant, smelling of the sea it was found beside, even when indoors for a significant amount of time. It responds poorly to light, organic touch, and overly loud audio stimuli.
  325. <p>&nbsp;</p>
  326. </div>
  327.  
  328. <div class="collumn">
  329. <p>Reporters continued to question the man, asking if he thought there was the possibility of side-effects, and he ended this interview on a positive note:<br><br>
  330.  
  331. "As far as I can tell, Leonard is healthier than ever. Turtles aren't as reactive as we people, though, and so I had consumed a small portion of the moss myself. So far, the only effects seem to be a slight jitter, some unexpected sweating, and it causes your voice to lower significantly for an hour after consumption."<br><br></p><br><br>
  332.  
  333. <figure class="figure">
  334. <p><img alt="" class="media" src="https://thenypost.files.wordpress.com/2019/12/tortoise-fire-1.jpg?quality=80&strip=all&w=618&h=410&crop=1
  335. " /></p>
  336. </figure>
  337. Leonard the Tortoise was questioned on what provoked him to wander off to consume the moss, and his silence spoke louder than any answer he could have given. Some things in this world happen for a reason, while others are just random chance that turns into a great discovery.
  338.  
  339. <p>&nbsp;</p>
  340. Knowing such a thing exists fills me with a newfound wonderlust for our grande magical world, as it seems there's always a new surprise hiding in the most unexpected locations! We will be following up with Mr. Timbit in about a month to see if his new moss, which he has coined "Timbitter" as for its terribly bitter taste, can really be the cure-all herb it's appearing to be!
  341.  
  342. <p>&nbsp;</p>
  343. </div>
  344. </div>
  345. </div>
  346. <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" />
  347. <link href="styles/newspaper.css" rel="stylesheet" />
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement