API tools faq
paste
Advertisement
kay_kodes

little fox || article

kay_kodes
Jul 9th, 2023 (edited)
1,041
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.38 KB | None | 1 0
raw download clone embed print report
  1. <html>
  2. <link href="https://fonts.cdnfonts.com/css/dialettich-modelle" rel="stylesheet">
  3.  
  4. <center>
  5. <style>
  6. /*Scrollbar*/
  7. ::-webkit-scrollbar {width: 0px;}
  8. ::-webkit-scrollbar-thumb {background: #fff;}
  9. ::-webkit-scrollbar-thumb:hover {background: #fff;}
  10.  
  11. /*BOX EFFECTS*/
  12. .zoom{
  13. transition: all 1.5s
  14.  
  15. }
  16. .zoom:hover {
  17. transform: translateY(-7px);
  18. transform: scale(1.02);
  19.  
  20.  
  21. }
  22.  
  23. .zoom:active {
  24. transform: translateY(-1px);
  25. }
  26.  
  27. .dropdown{
  28. float: center;
  29. text-align: center;
  30. max-width:100%;
  31. max-height:100%;
  32. outline:2px #ad928e solid;
  33. outline-offset:6px;
  34. overflow: auto;
  35. font-size:15px;
  36. border-radius:15px 0px 15px 0px
  37. }
  38.  
  39. i{
  40. color:#fff;
  41. font-weight:bold;
  42.  
  43.  
  44. </style>
  45.  
  46. <div style="background:#bda3a0;background-size:cover;width:80%;box-shadow:0px 0px 15px #696969;margin-bottom:10px;margin-top:15px;outline:#fff 2px solid; outline-offset:-12px">
  47.  
  48. <br>
  49.  
  50. <!--ARTICLE TITLE-->
  51. <div class="zoom" style="background:#e5ccc9;background-size:cover;width:90%;height:20%;outline:1px #fff solid;outline-offset:-12px;margin-top:10px;box-shadow:0 0 10px #000">
  52.  
  53. <!--ADD BORDER TO SEE TEXT BOX!!-->
  54. <div style="text-align:center;border-radius:0px;color:#ad928e;font-family:'Dialettich Modelle';font-size:35px;width:90%;text-align:center;margin-right:10px;margin-left:10px;border:0px #000 solid">
  55. <br>
  56. <b>Article Title Here</b>
  57.  
  58. </div><div></div></div>
  59.  
  60. <br>
  61.  
  62. <!--MAIN BOX-->
  63. <div class="zoom" style="background:#e5ccc9;background-size:cover;width:90%;margin-top:10px;box-shadow:0 0 10px #000;overflow:auto;outline:2px #fff solid;outline-offset:-12px">
  64. <br>
  65. <div style="text-align:justify;border-radius:0px;color:#ad928e;font-family:'Times New Roman';font-size:15px;width:90%;text-align:justify;margin-right:10px;margin-left:10px">
  66. <br>
  67.  
  68. <!--HEADLINE & IMAGE-->
  69. <center>
  70. <hr style="border:double;border-width:thin;">
  71. <span><marquee direction="right" style="font-size:20px;font-family:Times New Roman'">Advertisement Here // Article #000</marquee>
  72. <hr style="border:double;border-width:thin;">
  73.  
  74. <br><br>
  75.  
  76. <img src="https://i.pinimg.com/564x/3b/bd/6e/3bbd6e9e7246e6a80c0dffef7a72ad13.jpg" style="width:60%;height:200px;outline:2px solid #ad928e;outline-offset: 4px;object-fit:cover;margin-right:10px;float:center" />
  77.  
  78. </center>
  79.  
  80. <br><br>
  81.  
  82. <!--REPORTER DETAILS-->
  83. <div style="background: rgba(255,255,255, 0.2);width:170px;height:190px;outline:2px #fff solid;outline-offset:6px;float:left;margin-right:20px;margin-bottom:10px">
  84. <center>
  85.  
  86. <img src="https://i.pinimg.com/236x/db/cb/12/dbcb12c816f1eced421bd05a596375a6.jpg" style="width:100px;height:100px;outline:2px #ad928e solid;outline-offset: 4px;object-fit:cover;float:center;margin-top:10px;border-radius:100%" />
  87. <p>
  88. <hr style="width:90%;background-color:#fff;height:1px;color:#fff">
  89. Written by:
  90. <br>Reporter Name
  91.  
  92. </center>
  93. </div>
  94.  
  95.  
  96. Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? <i>"Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam."</i> Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet.
  97. <p>
  98. Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? <i>"Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam."</i> Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet.
  99. <p>
  100. Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? <i>"Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam."</i> Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet.
  101.  
  102. <br><br>
  103.  
  104. <!--DROPDOWN 1-->
  105. <div class="dropdown">
  106. <details>
  107. <summary>
  108. <div>
  109. <b style="font-family:Brighton Daction;font-size:20px">BLURB</b>
  110. <br>
  111.  
  112. </div></summary>
  113.  
  114. <div style="margin-left:10px">
  115. <p>
  116. <center>
  117. <!--every article-->
  118. <i>"Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam."</i> Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam.
  119.  
  120.  
  121. </p></div></details>
  122. </div>
  123.  
  124. <br><br>
  125.  
  126.  
  127.  
  128. <hr style="width:90%;border-color:#ad928e">
  129. <hr style="width:80%;border-color:#ad928e">
  130. <hr style="width:70%;border-color:#ad928e">
  131.  
  132. <center>
  133.  
  134. <!--ADVERTISEMENT-->
  135. <br><b style="font-size:25px;font-family:'Dialettich Modelle';letter-spacing:2px">Advertisements!</b>
  136. </center>
  137.  
  138. <br><br>
  139.  
  140. <center>
  141. <div style="background: rgba(255,255,255, 0.2);;width:90%;outline:2px #fff solid;outline-offset:6px;float:center;overflow:auto">
  142. <center>
  143. <br>
  144.  
  145.  
  146. <b style="font-size:25px">LOREM IPSUM</b>
  147. <p>
  148. <hr style="width:90%;border-color:#ad928e">
  149.  
  150. <br>
  151.  
  152. <!--DROPDROWN 2-->
  153. <div class="dropdown" style="max-width:90%">
  154. <details>
  155. <summary>
  156. <div>
  157. <b style="font-family:Brighton Daction;font-size:20px">BLURB</b>
  158. <br>
  159.  
  160. </div></summary>
  161.  
  162. <div style="margin-left:10px">
  163. <p>
  164. <center>
  165. <!--every article-->
  166. ▻ Blurb <br>
  167. ▻ Blurb <br>
  168. ▻ Blurb <br>
  169. ▻ Blurb <br>
  170.  
  171. </center>
  172.  
  173.  
  174. </p></div></details>
  175. </div>
  176.  
  177. <br>
  178. <br>
  179.  
  180. <!--DROPDOWN 3-->
  181. <div class="dropdown" style="max-width:90%">
  182. <details>
  183. <summary>
  184. <div>
  185. <b style="font-family:Brighton Daction;font-size:20px">BLURB</b>
  186. <br>
  187.  
  188. </div></summary>
  189.  
  190. <div style="margin-left:10px">
  191. <p>
  192. <center>
  193. <!--every article-->
  194. ▻ Blurb <br>
  195. ▻ Blurb <br>
  196. ▻ Blurb <br>
  197. ▻ Blurb <br>
  198.  
  199. </center>
  200.  
  201.  
  202. </p></div></details>
  203. </div>
  204.  
  205. </center>
  206. <br><br></div>
  207.  
  208. <br><br></div></div>
  209. <br><br>
  210.  
  211. </div>
  212. <center><a href="https://kaykodes.tumblr.com/" style="color:#000;font-size:12px"><b><u>kay kodes</u></b></a></center>
  213. <br>
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!