API tools faq
paste
Advertisement
dcylily

dayslily 💌 breaking news page.

dcylily
Jan 6th, 2024
166
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.45 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!-- hi! this was originally intended for personal use so forgive me if anything seems messsy. i'll be happy to help out with theme support if you message me on tumblr @ dayslily!
  5.  
  6. CTRL+F will be your best friend as you edit.
  7.  
  8. QUICK EDIT NAV: search "color edit" "image edit" "(!) EDIT"
  9.  
  10. ICON FONT USED: https://boxicons.com/
  11. if you want to change icons, use 'font' - not web component.
  12.  
  13. -->
  14.  
  15. <head>
  16. <title>{Title}</title>
  17. <link rel="shortcut icon" href="{Favicon}">
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19.  
  20. <!-- META TAGS, SCRIPTS, AND CUSTOM FONTS GO HERE-->
  21.  
  22. <link rel="preconnect" href="https://fonts.googleapis.com">
  23. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  24. <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700&display=swap" rel="stylesheet">
  25.  
  26. <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
  27.  
  28. <link rel="preconnect" href="https://fonts.googleapis.com">
  29. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  30. <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet">
  31.  
  32. <link rel="preconnect" href="https://fonts.googleapis.com">
  33. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  34. <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
  35.  
  36. <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
  37.  
  38.  
  39. </head>
  40. <style type="text/css">
  41.  
  42. /* hide scrollbar but allow scrolling */
  43. element {
  44. -ms-overflow-style: none; /* for Internet Explorer, Edge */
  45. scrollbar-width: none; /* for Firefox */
  46. overflow-y: scroll;
  47. }
  48.  
  49. element::-webkit-scrollbar {
  50. display: none; /* for Chrome, Safari, and Opera */
  51. }
  52.  
  53. ::-webkit-scrollbar {
  54. display: none;
  55. }
  56.  
  57. body {
  58. background-color:#E9E9E9;
  59. /* (COLOR EDIT) CHANGE BACKGROUND COLOR */
  60. font-family:poppins;
  61. }
  62.  
  63. #container {
  64. width:900px; height:700px;
  65. border-radius:10px;
  66.  
  67. background-color:#fff;
  68. /* (COLOR EDIT) CHANGE WINDOW BACKGROUND COLOR */
  69. box-shadow:0px 1px 10px #b4b4b4;
  70.  
  71. position:fixed; margin:auto;
  72. top:0px; bottom:0px; left:0px; right:0px;
  73. }
  74.  
  75. /* (!!!!) MAIN FEATURE: CHROME WINDOW */
  76.  
  77. #topbar {
  78. width:900px; height:35px;
  79. border-radius: 10px 10px 0px 0px;
  80.  
  81. background-color:#8cabe5;
  82. /* (COLOR EDIT) CHANGE TOPBAR COLOR */
  83.  
  84. position:fixed; margin:auto;
  85. }
  86.  
  87. .buttons {
  88. width:80px; height:35px;
  89.  
  90. text-align:center;
  91. font-size:25px;
  92. color:#61c554;
  93.  
  94. margin-top:-2px;
  95. }
  96.  
  97. .buttons b { font-weight:normal; font-style:normal; color:#ed6a5e; }
  98. .buttons i { font-weight:normal; font-style:normal; color:#f5bf4f; }
  99.  
  100. .tab {
  101. width:200px; height:26px;
  102. border-radius:10px 10px 0px 0px;
  103.  
  104. background-color:#cfdbf4;
  105. /* (COLOR EDIT) CHANGE TAB COLOR
  106. you'll want this to match the search bar bg color! */
  107.  
  108. position:absolute; margin:auto;
  109. bottom:0px; left:83px;
  110. }
  111.  
  112. .tabicon {
  113. width:20px; height:26px;
  114.  
  115. font-size:16px;
  116.  
  117. margin-left:10px; margin-top:4px;
  118.  
  119. /* if you need to change the position or color
  120. of the tab icon, do that above ^ */
  121. }
  122.  
  123. .tabtitle {
  124. width:124px; height:26px;
  125. overflow:hidden;
  126.  
  127. font-size:11px;
  128.  
  129. position:absolute; margin:auto;
  130. top:6px; right:42px;
  131. }
  132.  
  133. .tabbutton {
  134. font-size:16px;
  135.  
  136. position:absolute; margin:auto;
  137. top:4px; right:6px;
  138. }
  139.  
  140. #searchbar {
  141. width:900px; height:35px;
  142.  
  143. background-color:#cfdbf4;
  144. /* (COLOR EDIT) CHANGE SEARCH BAR COLOR */
  145. border-bottom:1px solid #769ff4;
  146.  
  147. position:fixed; margin:auto;
  148. margin-top:35px;
  149. }
  150.  
  151. .searchbuttons {
  152. width:80px; height:35px;
  153.  
  154. text-align:center;
  155. font-size:20px; color:#202020;
  156. opacity:70%;
  157.  
  158. margin-left:8px; margin-top:4px;
  159. }
  160.  
  161. .profilebutton {
  162. width:50px; height:35px;
  163.  
  164. text-align:center;
  165. font-size:18px; color:#202020;
  166. opacity:70%;
  167.  
  168. position:absolute; margin:auto;
  169. right:2px; top:6px;
  170. }
  171.  
  172. .searchfield {
  173. width:740px; height:20px;
  174. border-radius:50px;
  175.  
  176. background-color:#f5f8fc;
  177. /* (COLOR EDIT) CHANGE COLOR OF TYPING FIELD */
  178. opacity:70%;
  179.  
  180. position:absolute; margin:auto;
  181. right:60px; top:7px;
  182. }
  183.  
  184. .searchlock {
  185. font-size:11px;
  186.  
  187. position:absolute; margin:auto;
  188. top:3px; left:10px;
  189.  
  190. opacity:70%;
  191. }
  192.  
  193. .searchterm {
  194. width:740px; height:20px;
  195.  
  196. font-size:10px;
  197. font-family:roboto;
  198.  
  199. position:absolute; margin:auto;
  200. top:4px; left:28px;
  201. }
  202.  
  203. /* (!!!!) END OF MAIN FEATURE: CHROME WINDOW */
  204.  
  205. /* (!!!!) MAIN FEATURE: NEWSPAGE */
  206.  
  207. /* (!!!) SUB FEATURE: BREAKING NEWS */
  208.  
  209. #breakingbanner {
  210. width:900px; height:40px;
  211.  
  212. background-color:#E23A31;
  213. /* (COLOR EDIT) CHANGE COLOR OF BREAKING NEWS BANNER */
  214.  
  215. position:absolute; margin:auto;
  216. top:70px;
  217. }
  218.  
  219. .breaking {
  220. width:110px; height:40px;
  221.  
  222. color:white;
  223. /* (COLOR EDIT) CHANGE COLOR OF "BREAKING" */
  224. font-size:20px; font-weight:700; text-align:center;
  225.  
  226. position:absolute; margin:auto;
  227. top:5px; left:15px;
  228. }
  229.  
  230. .breakingheadline {
  231. width:500px; height:40px;
  232.  
  233. color:white;
  234. /* (COLOR EDIT) CHANGE COLOR OF BREAKING HEADLINE */
  235. font-size:13px;
  236.  
  237. position:absolute; margin:auto;
  238. top:10px; left:140px;
  239. }
  240.  
  241. .breakinginfo {
  242.  
  243. color:white;
  244. /* (COLOR EDIT) CHANGE COLOR OF BREAKING ICON */
  245. font-size:20px;
  246.  
  247. position:absolute; margin:auto;
  248. top:6px; right:10px;
  249. }
  250.  
  251. /* (!!!) END SUB FEATURE: BREAKING NEWS */
  252.  
  253. /* (!!!) SUB FEATURE: WEBSITE HEADER */
  254.  
  255. #timesheader {
  256. width:900px; height:50px;
  257.  
  258. background-color:#0D3B66;
  259. /* (COLOR EDIT) CHANGE COLOR OF WEBSITE HEADER */
  260.  
  261. position:absolute; margin:absolute;
  262. top:110px;
  263. }
  264.  
  265. .timesicons {
  266. color:white;
  267. /* (COLOR EDIT) CHANGE COLOR OF ICONS */
  268. font-size:26px; letter-spacing:6px;
  269.  
  270. position:absolute; margin:auto;
  271. top:9px; left:10px;
  272. }
  273.  
  274. .times {
  275. color:white;
  276. /* (COLOR EDIT) CHANGE COLOR OF "TIMES" */
  277. font-size:20px; font-family:roboto slab;
  278.  
  279. position:absolute; margin:auto;
  280. top:11px; left:92px;
  281. }
  282.  
  283. .timesnav {
  284. width:450px; height:50px;
  285.  
  286. color:white;
  287. /* (COLOR EDIT) CHANGE COLOR OF NAVI BUTTONS */
  288. text-align:center; font-size:10px;
  289.  
  290. display:inline-block;
  291. position:absolute; margin:auto;
  292. top:18px; left:250px;
  293. }
  294.  
  295. .timesnav xo { padding:10px; }
  296.  
  297. .timesweather {
  298. color:white;
  299. /* (COLOR EDIT) CHANGE COLOR OF TEMP ICON */
  300. font-size:30px;
  301.  
  302. position:absolute; margin:auto;
  303. top:6px; right:60px;
  304. }
  305.  
  306. .timestemp {
  307. color:white;
  308. /* (COLOR EDIT) CHANGE COLOR OF TEMP TEXT */
  309. font-size:22px; font-weight:500px;
  310.  
  311. position:absolute; margin:auto;
  312. top:9px; right:15px;
  313. }
  314.  
  315. /* (!!!) END SUB FEATURE: WEBSITE HEADER */
  316.  
  317. /* ~~~~ ESTABLISHING A SHAPE FOR THE CONTENTS OF THE WEBSITE ~~~~ */
  318.  
  319. #website {
  320. width:900px; height:540px;
  321. border-radius:0px 0px 10px 10px;
  322.  
  323. overflow:hidden;
  324.  
  325. position:absolute; margin:auto;
  326. top:160px;
  327. }
  328.  
  329. /* ~~~~ ^ ESTABLISHING A SHAPE FOR THE CONTENTS OF THE WEBSITE
  330. if you mess with that box above, it will throw off the
  331. proportions of the rest of the news website! ~~~~ */
  332.  
  333. /* (!!!) SUB FEATURE: NEWS VIDEO #1 */
  334.  
  335. #vidonebox {
  336. width:500px; height:300px;
  337.  
  338. background-color:#a5e4de;
  339.  
  340. position:absolute; margin:auto;
  341. top:20px; left:20px;
  342. }
  343.  
  344. #vidonebox img { width:500px; height:300px; }
  345.  
  346. .playbutton {
  347. color:white;
  348. /* (COLOR EDIT) CHANGE COLOR OF PLAY BUTTON */
  349. font-size:45px;
  350.  
  351. text-shadow:1px #000;
  352.  
  353. position:absolute; margin:auto;
  354. top:180px; left:10px;
  355. }
  356.  
  357. .videoclass {
  358. color:white;
  359. /* (COLOR EDIT) CHANGE COLOR OF VIDEO CLASSIFICATION */
  360. font-size:12px; letter-spacing:1px; font-weight:300;
  361.  
  362. text-shadow:1px #000;
  363.  
  364. position:absolute; margin:auto;
  365. top:240px; left:15px;
  366. }
  367.  
  368. .videotitle {
  369. color:white;
  370. /* (COLOR EDIT) CHANGE COLOR OF VIDEO TITLE */
  371. font-size:18px; font-weight:500;
  372.  
  373. text-shadow:1px #000;
  374.  
  375. position:absolute; margin:auto;
  376. top:260px; left:15px;
  377. }
  378.  
  379. /* (!!!) END SUB FEATURE: WEBSITE HEADER */
  380.  
  381.  
  382. /* (!!!) SUB FEATURE: POPULAR ARTICLES */
  383.  
  384. #populartitle {
  385. color:black;
  386. /* (COLOR EDIT) CHANGE COLOR OF 'POPULAR' TITLE */
  387. font-size:24px; letter-spacing:1px; font-weight:bold;
  388.  
  389. position:absolute; margin:auto;
  390. top:333px; left:60px;
  391. }
  392.  
  393. .popularicon {
  394. color:#E23A31;
  395. /* (COLOR EDIT) CHANGE COLOR OF 'POPULAR' ICON */
  396. font-size:24px; letter-spacing:1px; font-weight:bold;
  397.  
  398. position:absolute; margin:auto;
  399. top:335px; left:20px;
  400. }
  401.  
  402. #popularsub {
  403. color:black;
  404. /* (COLOR EDIT) CHANGE COLOR OF 'POPULAR' SUBTITLE */
  405. font-size:10px; letter-spacing:1px; font-weight:300;
  406. font-style:italic;
  407.  
  408. position:absolute; margin:auto;
  409. top:343px; left:305px;
  410. }
  411.  
  412. #poparticle1 {
  413. width:160px; height:100px;
  414. background-image:url('https://placehold.co/160x100');
  415. /* (IMAGE EDIT) CHANGE ARTICLE 1 IMAGE */
  416.  
  417. position:absolute; margin:auto;
  418. top:380px; left:20px;
  419. }
  420.  
  421. .article1 {
  422. width:140px;
  423. color:white;
  424. /* (COLOR EDIT) CHANGE COLOR OF 'ARTICLE 1' TITLE */
  425. font-size:10px; font-weight:600;
  426. text-align:justify;
  427.  
  428. position:absolute;
  429. bottom:10px; left:10px;
  430. }
  431.  
  432. .article1tag {
  433. width:60px; height:15px; padding:5px;
  434. background-color:#E23A31;
  435. /* (COLOR EDIT) CHANGE COLOR OF 'TAG' BG */
  436. border-radius:15px;
  437.  
  438. color:white;
  439. /* (COLOR EDIT) CHANGE COLOR OF 'TAG BUTTON' TEXT */
  440. font-size:10px; font-weight:600; text-align:center;
  441.  
  442. position:absolute; margin:auto;
  443. top:485px; left:104px;
  444. }
  445.  
  446.  
  447. .article1button {
  448. width:60px; height:15px; padding:5px;
  449. background-color:#0D3B66;
  450. /* (COLOR EDIT) CHANGE COLOR OF 'READ BUTTON' BG */
  451. border-radius:15px;
  452.  
  453. color:white;
  454. /* (COLOR EDIT) CHANGE COLOR OF 'READ BUTTON' TEXT */
  455. font-size:10px; font-weight:600; text-align:center;
  456.  
  457. position:absolute; margin:auto;
  458. top:485px; left:24px;
  459. }
  460.  
  461. #poparticle2 {
  462. width:160px; height:100px;
  463. background-image:url('https://placehold.co/160x100');
  464. /* (IMAGE EDIT) CHANGE ARTICLE 2 IMAGE */
  465.  
  466. position:absolute; margin:auto;
  467. top:380px; left:190px;
  468. }
  469.  
  470. .article2 {
  471. width:140px;
  472. color:white;
  473. /* (COLOR EDIT) CHANGE COLOR OF 'ARTICLE 2' TITLE */
  474. font-size:10px; font-weight:600;
  475. text-align:justify;
  476.  
  477. position:absolute;
  478. bottom:10px; left:10px;
  479. }
  480.  
  481. .article2tag {
  482. width:60px; height:15px; padding:5px;
  483. background-color:#E23A31;
  484. /* (COLOR EDIT) CHANGE COLOR OF 'TAG' BG */
  485. border-radius:15px;
  486.  
  487. color:white;
  488. /* (COLOR EDIT) CHANGE COLOR OF 'TAG BUTTON' TEXT */
  489. font-size:10px; font-weight:600; text-align:center;
  490.  
  491. position:absolute; margin:auto;
  492. top:485px; left:274px;
  493. }
  494.  
  495.  
  496. .article2button {
  497. width:60px; height:15px; padding:5px;
  498. background-color:#0D3B66;
  499. /* (COLOR EDIT) CHANGE COLOR OF 'READ BUTTON' BG */
  500. border-radius:15px;
  501.  
  502. color:white;
  503. /* (COLOR EDIT) CHANGE COLOR OF 'READ BUTTON' TEXT */
  504. font-size:10px; font-weight:600; text-align:center;
  505.  
  506. position:absolute; margin:auto;
  507. top:485px; left:194px;
  508. }
  509.  
  510. #poparticle3 {
  511. width:160px; height:100px;
  512. background-image:url('https://placehold.co/160x100');
  513. /* (IMAGE EDIT) CHANGE ARTICLE 3 IMAGE */
  514.  
  515. position:absolute; margin:auto;
  516. top:380px; left:360px;
  517. }
  518.  
  519. .article3 {
  520. width:140px;
  521. color:white;
  522. /* (COLOR EDIT) CHANGE COLOR OF 'ARTICLE 3' TITLE */
  523. font-size:10px; font-weight:600;
  524. text-align:justify;
  525.  
  526. position:absolute;
  527. bottom:10px; left:10px;
  528. }
  529.  
  530. .article3tag {
  531. width:60px; height:15px; padding:5px;
  532. background-color:#E23A31;
  533. /* (COLOR EDIT) CHANGE COLOR OF 'TAG' BG */
  534. border-radius:15px;
  535.  
  536. color:white;
  537. /* (COLOR EDIT) CHANGE COLOR OF 'TAG BUTTON' TEXT */
  538. font-size:10px; font-weight:600; text-align:center;
  539.  
  540. position:absolute; margin:auto;
  541. top:485px; left:444px;
  542. }
  543.  
  544.  
  545. .article3button {
  546. width:60px; height:15px; padding:5px;
  547. background-color:#0D3B66;
  548. /* (COLOR EDIT) CHANGE COLOR OF 'READ BUTTON' BG */
  549. border-radius:15px;
  550.  
  551. color:white;
  552. /* (COLOR EDIT) CHANGE COLOR OF 'READ BUTTON' TEXT */
  553. font-size:10px; font-weight:600; text-align:center;
  554.  
  555. position:absolute; margin:auto;
  556. top:485px; left:364px;
  557. }
  558.  
  559. /* (!!!) END SUB FEATURE: POPULAR ARTICLES */
  560.  
  561.  
  562. /* (!!!) SUB FEATURE: ARTICLE LIST */
  563.  
  564. #readinglist {
  565. width:310px; height:500px;
  566.  
  567. position:absolute; margin:auto;
  568. top:10px; right:40px;
  569.  
  570. overflow-y:auto;
  571. }
  572.  
  573. #readingbox {
  574. width:310px; height:130px;
  575. background-color:white;
  576.  
  577. border-bottom:1px solid black;
  578.  
  579. padding-top:10px;
  580. }
  581.  
  582. .readingtitle {
  583. width:310px; text-align:justify;
  584.  
  585. color:black;
  586. /* (COLOR EDIT) CHANGE COLOR OF 'READ BUTTON' TEXT */
  587. font-size:20px; font-weight:600;
  588. }
  589.  
  590. .readingtitle i { color:#E23A31; font-size:16px; }
  591.  
  592. .readingdesc {
  593. width:310px;
  594.  
  595. color:black; text-align:justify;
  596. /* (COLOR EDIT) CHANGE COLOR OF 'READ BUTTON' TEXT */
  597. font-size:12px; font-weight:300;
  598. }
  599.  
  600. .readingtag { margin-top:5px; }
  601.  
  602. .readingtag pre { display:inline; padding:4px; border-radius:4px; background-color:#eaeaea; width:auto; height:auto; font-size:10px; }
  603.  
  604. /* (!!!) END SUB FEATURE: ARTICLE LIST */
  605.  
  606.  
  607. /* (!!!!) END OF MAIN FEATURE: NEWSPAGE */
  608.  
  609. #credits { position:absolute; margin:auto; bottom:10px; right:10px; color:#000; }
  610. #credits a { color:#000; }
  611.  
  612. </style>
  613. <body>
  614.  
  615. <div id="container">
  616.  
  617. <div id="topbar">
  618. <div class="buttons">
  619. <b>●</b> <i>●</i> ●
  620. </div>
  621. <div class="tab">
  622. <div class="tabicon"><i class='bx bxs-castle'></i></div>
  623. <div class="tabtitle">
  624. Local Breaking News
  625. <!-- (EDIT) TITLE OF TAB ^ -->
  626. </div>
  627. <div class="tabbutton"><i class='bx bx-x'></i></div>
  628. </div>
  629. </div> <!-- this div belongs to the end of the topbar -->
  630.  
  631. <div id="searchbar">
  632. <div class="searchbuttons">
  633. <i class='bx bx-left-arrow-alt' ></i>
  634. <i class='bx bx-right-arrow-alt' ></i>&nbsp;
  635. <i class='bx bx-refresh' ></i>
  636. </div>
  637.  
  638. <div class="profilebutton">
  639. <i class='bx bxs-user-circle'></i>
  640. <i class='bx bx-dots-vertical-rounded'></i>
  641. </div>
  642.  
  643. <div class="searchfield">
  644. <div class="searchlock"><i class='bx bxs-lock-alt' ></i></div>
  645. <div class="searchterm">
  646. localtimes.com<i>&#47;local-news#&#47;</i>
  647. <!-- (EDIT) SEARCH BAR URL ^ -->
  648. </div>
  649. </div>
  650. </div> <!-- this div belongs to the end of the searchbar -->
  651.  
  652. <div id="breakingbanner">
  653. <div class="breaking">BREAKING</div>
  654. <div class="breakingheadline">Breaking news headline goes here; <u>read more</u>.</div>
  655. <!-- (EDIT) ^ BREAKING NEWS HEADLINE -->
  656. <div class="breakinginfo"><i class='bx bx-info-circle'></i></div>
  657. </div> <!-- this div belongs to the end of the breaking news -->
  658.  
  659. <div id="timesheader">
  660. <div class="timesicons">
  661. <i class='bx bx-menu'></i>
  662. <i class='bx bx-search bx-sm'></i>
  663. </div>
  664. <div class="times">NEWS SITE TITLE</div>
  665. <!-- (EDIT) ^ WEBSITE TITLE -->
  666. <div class="timesnav">
  667. <xo>LOCAL</xo>
  668. <xo>WEATHER</xo>
  669. <xo>INVESTIGATIONS</xo>
  670. <xo>VIDEOS</xo>
  671. <xo>NEWSLETTERS</xo>
  672. <!-- (EDIT) ^ WEBSITE LINKS -->
  673. </div>
  674. <div class="timesweather"><i class='bx bxs-cloud'></i></div>
  675. <div class="timestemp">68º</div>
  676. <!-- (EDIT) ^ DISPLAY TEMP -->
  677. </div> <!-- this div belongs to the end of the website banner -->
  678.  
  679.  
  680. <div id="website">
  681.  
  682. <div id="vidonebox">
  683. <img src="https://placehold.co/500x300">
  684. <!-- (EDIT) HOMEPAGE VIDEO IMAGE ^ -->
  685.  
  686. <div class="playbutton"><i class='bx bx-play-circle'></i></div>
  687. <div class="videoclass">
  688. EXCLUSIVE INTERVIEW • <i>1 hour ago</i>
  689. <!-- (EDIT) ^ MAIN STORY SUBTITLE -->
  690. </div>
  691. <div class="videotitle">
  692. Main story headline goes here! One-liners only...
  693. <!-- (EDIT) ^ MAIN STORY TITLE -->
  694. </div>
  695.  
  696.  
  697. </div> <!-- this div belongs to the end of the homepage video -->
  698.  
  699. <div class="popularicon"><i class='bx bx-trending-up'></i></div>
  700. <!-- (EDIT) POPOULAR ICON ^ -->
  701. <div id="populartitle">
  702. TRENDING NOW
  703. <!-- (EDIT) POPULAR TITLE ^ -->
  704. </div> <!-- this div belongs to the end of the popular title -->
  705. <div id="popularsub">
  706. see what everyone's buzzing about
  707. <!-- (EDIT) POPULAR SUBTITLE ^ -->
  708. </div> <!-- this div belongs to the end of the popular subtitle -->
  709.  
  710. <!-- (SECTION) BEGIN TRENDING ARTICLES -->
  711. <div id="poparticle1">
  712. <div class="article1">Trending article #1 here...</div>
  713. <!-- (EDIT) ^ TRENDING ARTICLE 1 -->
  714. </div> <!-- this div belongs to the end of article 1 image -->
  715. <div class="article1tag">#SPOTTED</div>
  716. <div class="article1button">READ</div>
  717.  
  718. <div id="poparticle2">
  719. <div class="article2">Trending article #2 here...</div>
  720. <!-- (EDIT) ^ TRENDING ARTICLE 2 -->
  721. </div> <!-- this div belongs to the end of article 1 image -->
  722. <div class="article2tag">#SPOTTED</div>
  723. <div class="article2button">READ</div>
  724.  
  725. <div id="poparticle3">
  726. <div class="article3">Trending article #3 here...</div>
  727. <!-- (EDIT) ^ TRENDING ARTICLE 2 -->
  728. </div> <!-- this div belongs to the end of article 1 image -->
  729. <div class="article3tag">#SPOTTED</div>
  730. <div class="article3button">READ</div>
  731. <!-- (SECTION) END TRENDING ARTICLES -->
  732.  
  733.  
  734. <div id="readinglist">
  735.  
  736. <div id="readingbox">
  737. <div class="readingtitle">
  738. <i class='bx bxs-book-bookmark' ></i>&nbsp;
  739. SIDEBAR ARTICLE 1 TITLE.
  740. <!-- (EDIT) ^ SIDE ARTICLE -->
  741. </div>
  742. <div class="readingdesc">
  743. Description for the news article can go here. It does not scroll (nor does it shrink to fit), so you'll want to take up three lines.
  744. <!-- (EDIT) ^ SIDE ARTICLE DESC -->
  745. </div>
  746. <div class="readingtag"><pre>#tags</pre> <pre>#tags2</pre></div>
  747. <!-- (EDIT) ^ SIDE ARTICLE TAGS -->
  748. </div>
  749.  
  750. <div id="readingbox">
  751. <div class="readingtitle">
  752. <i class='bx bxs-book-bookmark' ></i>&nbsp;
  753. SIDEBAR ARTICLE 2 TITLE.
  754. <!-- (EDIT) ^ SIDE ARTICLE -->
  755. </div>
  756. <div class="readingdesc">
  757. You can add as many of these boxes as you'd like. Just look for "ADD MORE ARTICLES" in the code for instructions. This little side box does scroll.
  758. <!-- (EDIT) ^ SIDE ARTICLE DESC -->
  759. </div>
  760. <div class="readingtag"><pre>#tags</pre> <pre>#tags2</pre></div>
  761. <!-- (EDIT) ^ SIDE ARTICLE TAGS -->
  762. </div>
  763.  
  764. <div id="readingbox">
  765. <div class="readingtitle">
  766. <i class='bx bxs-book-bookmark' ></i>&nbsp;
  767. SIDEBAR ARTICLE 3 TITLE.
  768. <!-- (EDIT) ^ SIDE ARTICLE -->
  769. </div>
  770. <div class="readingdesc">
  771. Description for the news article can go here. It does not scroll (nor does it shrink to fit), so you'll want to take up three lines.
  772. <!-- (EDIT) ^ SIDE ARTICLE DESC -->
  773. </div>
  774. <div class="readingtag"><pre>#tags</pre> <pre>#tags2</pre></div>
  775. <!-- (EDIT) ^ SIDE ARTICLE TAGS -->
  776. </div>
  777.  
  778. <div id="readingbox">
  779. <div class="readingtitle">
  780. <i class='bx bxs-book-bookmark' ></i>&nbsp;
  781. SIDEBAR ARTICLE 4 TITLE.
  782. <!-- (EDIT) ^ SIDE ARTICLE -->
  783. </div>
  784. <div class="readingdesc">
  785. Description for the news article can go here. It does not scroll (nor does it shrink to fit), so you'll want to take up three lines.
  786. <!-- (EDIT) ^ SIDE ARTICLE DESC -->
  787. </div>
  788. <div class="readingtag"><pre>#tags</pre> <pre>#tags2</pre></div>
  789. <!-- (EDIT) ^ SIDE ARTICLE TAGS -->
  790. </div>
  791.  
  792. <!-- ADD MORE ARTICLES (!!!) by copying this:
  793.  
  794. <div id="readingbox">
  795. <div class="readingtitle">
  796. <i class='bx bxs-book-bookmark' ></i>&nbsp;
  797. SIDEBAR ARTICLE 1 TITLE.
  798. </div>
  799. <div class="readingdesc">
  800. Description for the news article can go here. It does not scroll (nor does it shrink to fit), so you'll want to take up three lines.
  801. </div>
  802. <div class="readingtag"><pre>#tags</pre> <pre>#tags2</pre></div>
  803. </div>
  804.  
  805. & pasting it above </div> that's below -->
  806.  
  807.  
  808.  
  809.  
  810. </div>
  811.  
  812.  
  813.  
  814.  
  815. </div> <!-- this div belongs to the end of the website box -->
  816.  
  817.  
  818. </div> <!-- this div belongs to the end of the container -->
  819.  
  820.  
  821. <div id="credits"><a href="https://dayslily.tumblr.com/"><i class='bx bx-heart-circle'></i></a></div>
  822.  
  823. </body>
  824. </html>
  825.  
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!