API tools faq
paste
Advertisement
dcylily

dayslily 💌 newspaper page.

dcylily
Feb 10th, 2024
170
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.31 KB | None | 0 0
raw download clone embed print report
  1. <! DOCTYPE html>
  2. <html>
  3.  
  4. <!-- HELPFUL GUIDE TO EDITING THIS CODE:
  5.  
  6. IMAGE SIZES:
  7. BACKGROUND IMAGE: 1920px x 1080px
  8. ARTICLE 1 IMAGE ("large article image"): 370px x 170px
  9. ARTICLE 2 IMAGE ("small article image"): 110px x 150px
  10. any size around this is okay. text will wrap.
  11. ARTICLE 3 IMAGE ("medium article image"): 280px x 100px
  12.  
  13. SEARCH "(EDIT)" TO JUMP TO POINTS IN THE CODE YOU'LL NEED TO CUSTOMIZE.
  14.  
  15. -->
  16.  
  17. <head>
  18. <title>{Title}</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21.  
  22. <!-- META TAGS, SCRIPTS, AND CUSTOM FONTS GO HERE-->
  23.  
  24.  
  25. <link rel="preconnect" href="https://fonts.googleapis.com">
  26. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  27. <link href="https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap" rel="stylesheet">
  28. <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
  29.  
  30. </head>
  31.  
  32. <style type="text/css">
  33.  
  34. :root {
  35. /* (EDIT) theme colors / fonts */
  36. --entirebg:#fff;
  37. --pages:#f9f7f3;
  38. --decoborders:#e7e5e1;
  39. --borders:#9c9b95;
  40. --shadows:#302e2d;
  41. --text:#000;
  42. --links:#585f79;
  43.  
  44. --headerfont:unifrakturmaguntia;
  45. }
  46.  
  47. /* CSS STYLING GOES HERE */
  48.  
  49.  
  50. body {
  51. background-color:var(--entirebg);
  52. background-image:url('https://i.ibb.co/5jBs4wk/background2.png');
  53. /* (EDIT) background image */
  54. background-repeat: no-repeat;
  55. background-attachment: fixed;
  56. background-position: center;
  57.  
  58. font-family:times;
  59. color:#000;
  60. }
  61.  
  62. .bttmpage {
  63. width:710px; height:610px;
  64. position:absolute; margin:auto;
  65. top:0px; bottom:0px; left:0px; right:0px;
  66. transform:rotate(-2deg);
  67. z-index:1;
  68.  
  69. background-color:var(--pages);
  70. border:1px solid var(--decoborders);
  71. box-shadow: 2px 2px 5px var(--shadows);
  72. }
  73.  
  74. .midpage {
  75. width:710px; height:610px;
  76. position:absolute; margin:auto;
  77. top:0px; bottom:0px; left:0px; right:0px;
  78. transform:rotate(2deg);
  79. z-index:2;
  80.  
  81. background-color:var(--pages);
  82. border:1px solid var(--decoborders);
  83. box-shadow: 2px 2px 5px var(--shadows);
  84. }
  85.  
  86. .toppage {
  87. width:710px; height:610px;
  88. position:absolute; margin:auto;
  89. top:0px; bottom:0px; left:0px; right:0px;
  90. transform:rotate(0deg);
  91. z-index:3;
  92.  
  93. background-color:var(--pages);
  94. border:1px solid var(--decoborders);
  95. box-shadow: 2px 2px 5px var(--shadows);
  96. }
  97.  
  98. .container {
  99. width:680px; height:580px;
  100. position:absolute; margin:auto;
  101. top:0px; bottom:0px; left:0px; right:0px;
  102. transform:rotate(0deg);
  103. z-index:3;
  104.  
  105. /* background-color:white; */
  106. }
  107.  
  108. .headerinfo {
  109. width:680px; height:100px;
  110. position:relative;
  111.  
  112. border-bottom:1px solid var(--borders);
  113. }
  114.  
  115. #headerslogan {
  116. width:80px; height:50px;
  117. position:absolute;
  118. top:13px; left:5px;
  119. padding:10px;
  120.  
  121. background-color:var(--pages);
  122. border:1.5px solid var(--borders);
  123.  
  124. color:var(--text); font-size:13px;
  125. text-align:center;
  126. }
  127.  
  128. #nptitle {
  129. width:450px; height:73px;
  130. position:absolute;
  131. top:18px; left:122px;
  132.  
  133. background-color:var(--pages);
  134.  
  135. font-family:var(--headerfont);
  136. color:var(--text); font-size:65px;
  137. /* (EDIT) title size */
  138. font-style:bold; font-weight:800;
  139. text-align:center;
  140. }
  141.  
  142. #headeredition {
  143. width:80px; height:50px;
  144. position:absolute;
  145. top:13px; right:5px;
  146. padding:10px;
  147.  
  148. background-color:var(--pages);
  149.  
  150. color:var(--text); font-size:14px;
  151. text-align:center;
  152. }
  153.  
  154. .subheaderinfo {
  155. width:680px; height:34px;
  156. position:relative;
  157.  
  158. border-bottom: 1.5px solid var(--borders);
  159. }
  160.  
  161. .suheaderinfo table {
  162. border-collapse: collapse;
  163. width:680px;
  164. }
  165.  
  166. .suheaderinfo th, td {
  167. padding: 8px;
  168. width:680px;
  169.  
  170. font-size:12px;
  171. }
  172.  
  173. .leftcontent {
  174. width:385px; height:434px;
  175. position:relative; top:10px;
  176.  
  177. background-color:var(--pages);
  178. border-right:1.5px solid var(--borders);
  179. }
  180.  
  181. #article1title {
  182. padding-bottom:10px;
  183.  
  184. font-weight:bold; font-style:italic;
  185. font-size:20px;
  186. text-align:center;
  187. }
  188.  
  189. #article1img {
  190. width:370px; height:170px;
  191.  
  192. background-image:url('https://i.ibb.co/8z0F37P/image.png');
  193. /* (EDIT) large article image */
  194. }
  195.  
  196. #article1id {
  197. padding-right:15px; padding-top:5px;
  198.  
  199. font-size:10px;
  200. text-align:right;
  201. }
  202.  
  203. #article1text {
  204. width:370px; height:200px;
  205. overflow-y:auto;
  206. margin-top:10px;
  207.  
  208. font-size:13px;
  209. text-align:justify;
  210. }
  211.  
  212. #article1text::-webkit-scrollbar {
  213. display: none;
  214. -ms-overflow-style: none; /* IE and Edge */
  215. scrollbar-width: none; /* Firefox */
  216. }
  217.  
  218. .rightcontent {
  219. width:280px; height:434px;
  220. position:absolute; bottom:0px; right:0px;
  221.  
  222. background-color:var(--pages);
  223. }
  224.  
  225. #article2title {
  226. padding-top:2px;
  227.  
  228. font-weight:bold; font-style:italic;
  229. font-size:15px;
  230. text-transform:uppercase;
  231. text-align:center;
  232. }
  233.  
  234. #article2text {
  235. width:280px; height:200px;
  236. padding-top:5px;
  237. overflow-y:auto;
  238.  
  239. font-size:13px;
  240. text-align:justify;
  241. }
  242.  
  243. #article2text::-webkit-scrollbar {
  244. display: none;
  245. -ms-overflow-style: none; /* IE and Edge */
  246. scrollbar-width: none; /* Firefox */
  247. }
  248.  
  249. #article3img {
  250. width:280px; height:100px;
  251. position:relative; top:10px;
  252.  
  253. background-image:url('https://i.ibb.co/HVymkFt/1.png');
  254. /* (EDIT) medium article image */
  255. }
  256.  
  257. #article3title {
  258. padding-top:20px;
  259.  
  260. font-weight:bold; font-style:italic;
  261. font-size:15px;
  262. text-align:center;
  263. }
  264.  
  265. #article3text {
  266. width:280px; height:66px;
  267. padding-top:5px;
  268. overflow-y:auto;
  269.  
  270. font-size:13px;
  271. text-align:justify;
  272. }
  273.  
  274. #article3text::-webkit-scrollbar {
  275. display: none;
  276. -ms-overflow-style: none; /* IE and Edge */
  277. scrollbar-width: none; /* Firefox */
  278. }
  279.  
  280. #credit { position:absolute; margin:auto; bottom:10px; right:10px; }
  281. #credit a, href { text-decoration:none; color:var(--links); font-size:20px; }
  282.  
  283. /* CREDS TO MAGNUS THEMES "UN-UGLIFY NEW TUMBLR CONTROLS" */
  284. .iframe-controls--desktop {
  285. position:fixed;
  286. top:0px;
  287. right:0px;
  288. z-index:214748364789123456789;
  289. filter:invert(100%);
  290. -webkit-filter:invert(100%);
  291. -webkit-transform:scale(0.6,0.6);
  292. -webkit-transform-origin: 100% 0%;
  293. -ms-transform-origin:100% 0%;
  294. -ms-transform:scale(0.6,0.6);
  295. transform:scale(0.6,0.6);
  296. transform-origin:100% 0%;
  297. }
  298.  
  299.  
  300. </style>
  301.  
  302. <body>
  303.  
  304. <!-- HTML/DIV BLOCKS GO HERE -->
  305.  
  306. <div class="bttmpage"></div>
  307. <div class="midpage"></div>
  308. <div class="toppage"></div>
  309.  
  310. <div class="container">
  311. <div class="headerinfo">
  312. <!-- ^ (EDIT) header information below -->
  313. <div id="headerslogan">The ins and outs of hero central.</div>
  314. <div id="nptitle">Margrave Times</div>
  315. <div id="headeredition">Covering the <b>Margrave, MA</b> area.</div>
  316. </div>
  317.  
  318. <div class="subheaderinfo">
  319. <!-- ^ (EDIT) sub header information below -->
  320. <table>
  321. <tr>
  322. <td><div align="left">VOL. MXCII ... No. 22919</div></td>
  323. <td><div align="center">Margrave, Thursday, February 1, 2024</div></td>
  324. <td><div align="right">3.00 USD</div></td>
  325. </tr>
  326. </table>
  327. </div>
  328.  
  329. <div class="leftcontent">
  330. <!-- ^ (EDIT) article 1 -->
  331. <div id="article1title">Remembering Guardian</div>
  332. <div id="article1img"></div>
  333. <div id="article1id"><b>PICTURED ABOVE:</b> Benjamin Morales, A.K.A. <i>Guardian</i> (2023)</div>
  334. <div id="article1text">
  335. &nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas integer eget aliquet nibh. Pellentesque habitant morbi tristique senectus et. Eget felis eget nunc lobortis. Sit amet risus nullam eget. Odio facilisis mauris sit amet massa. Id aliquet lectus proin nibh nisl condimentum. Ultrices mi tempus imperdiet nulla. In nibh mauris cursus mattis molestie a iaculis at. Purus gravida quis blandit turpis cursus. Et magnis dis parturient montes nascetur. Neque sodales ut etiam sit amet nisl purus. Egestas sed tempus urna et pharetra pharetra massa. Tellus cras adipiscing enim eu turpis. Lectus proin nibh nisl condimentum id venenatis a. Nibh praesent tristique magna sit amet. Facilisis gravida neque convallis a cras. Eget mauris pharetra et ultrices neque ornare aenean euismod elementum.
  336.  
  337. <p>Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Neque gravida in fermentum et sollicitudin ac orci. Nec feugiat in fermentum posuere urna nec tincidunt. Senectus et netus et malesuada fames ac. Fames ac turpis egestas integer eget aliquet nibh praesent tristique. Lectus sit amet est placerat in egestas erat imperdiet sed. Eu scelerisque felis imperdiet proin fermentum leo vel. Sed risus pretium quam vulputate dignissim suspendisse in est. Ipsum a arcu cursus vitae. Adipiscing enim eu turpis egestas pretium aenean. Id neque aliquam vestibulum morbi blandit cursus risus at. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Duis ultricies lacus sed turpis tincidunt id aliquet. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Neque volutpat ac tincidunt vitae semper quis lectus. Id leo in vitae turpis massa sed. Orci ac auctor augue mauris augue neque gravida. Arcu felis bibendum ut tristique et egestas. Condimentum lacinia quis vel eros donec ac odio tempor. Iaculis at erat pellentesque adipiscing commodo.</div>
  338. </div>
  339.  
  340. <div class="rightcontent">
  341. <!-- ^ (EDIT) article 2 -->
  342. <div id="article2title">Howl Under Investigation</div>
  343. <div id="article2text">
  344. <img src="https://i.ibb.co/c3TBNfb/mizuki.png" style="float:right; padding-left:10px; padding-top:4px;">
  345. <!-- ^ (EDIT) small article image -->
  346. &nbsp; &nbsp; &nbsp; Lectus sit amet est placerat in egestas erat imperdiet sed. Eu scelerisque felis imperdiet proin fermentum leo vel. Sed risus pretium quam vulputate dignissim suspendisse in est. Ipsum a arcu cursus vitae. Adipiscing enim eu turpis egestas pretium aenean. Id neque aliquam vestibulum morbi blandit cursus risus at. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Duis ultricies lacus sed turpis tincidunt id aliquet. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Neque volutpat ac tincidunt vitae semper quis lectus. Id leo in vitae turpis massa sed. Orci ac auctor augue mauris augue neque gravida. Arcu felis bibendum ut tristique et egestas.</div>
  347. <div id="article3img"></div>
  348. <!-- ^ (EDIT) article 3 -->
  349. <div id="article3title">January Fight Tallies Are In...</div>
  350. <div id="article3text">
  351. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas integer eget aliquet nibh. Pellentesque habitant morbi tristique senectus et. Eget felis eget nunc lobortis. Sit amet risus nullam eget. Odio facilisis mauris sit amet massa. Id aliquet lectus proin nibh nisl condimentum. Ultrices mi tempus imperdiet nulla. In nibh mauris cursus mattis molestie a iaculis at.
  352. </div>
  353.  
  354. </div>
  355.  
  356. </div>
  357.  
  358. <div id="credit"><a href="https://dayslily.tumblr.com/"><i class='bx bxs-user-pin'></i></a></div>
  359.  
  360. </body>
  361.  
  362. </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!