API tools faq
paste
Alacodes

Perspective

Alacodes
Oct 1st, 2024 (edited)
39
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.12 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. @font-face {
  3. font-family: "Baginda";
  4. src:
  5. url("https://cdn.statically.io/gh/Asmera25/baginda/main/BagindaScript.otf")
  6. format("woff2"),
  7. url("https://cdn.statically.io/gh/Asmera25/baginda/main/BagindaScript.otf")
  8. format("woff");
  9. font-weight: normal;
  10. font-style: normal;
  11. }
  12.  
  13. @font-face {
  14. font-family: "Aranta";
  15. src:
  16. url("https://cdn.statically.io/gh/Asmera25/aranta/main/ARANTA-BF652f954b0f5b9.otf")
  17. format("woff2"),
  18. url("https://cdn.statically.io/gh/Asmera25/aranta/main/ARANTA-BF652f954b0f5b9.otf")
  19. format("woff");
  20. font-weight: normal;
  21. font-style: normal;
  22. }
  23.  
  24. @font-face {
  25. font-family: "Kallinsha";
  26. src:
  27. url("https://cdn.statically.io/gh/Asmera25/kallinsha/main/Kallinsha.otf")
  28. format("woff2"),
  29. url("https://cdn.statically.io/gh/Asmera25/kallinsha/main/Kallinsha.otf")
  30. format("woff");
  31. font-weight: normal;
  32. font-style: normal;
  33. }
  34.  
  35. @font-face {
  36. font-family: "Edmond";
  37. src:
  38. url("https://cdn.statically.io/gh/Asmera25/edmond/main/EdmondsansRegular_web.ttf")
  39. format("woff2"),
  40. url("https://cdn.statically.io/gh/Asmera25/edmond/main/EdmondsansRegular_web.ttf")
  41. format("woff");
  42. font-weight: normal;
  43. font-style: normal;
  44. }
  45.  
  46. @font-face {
  47. font-family: "Aredo";
  48. src:
  49. url("https://cdn.statically.io/gh/Asmera25/aredo/main/aredo.ttf")
  50. format("woff2"),
  51. url("https://cdn.statically.io/gh/Asmera25/aredo/main/aredo.ttf")
  52. format("woff");
  53. font-weight: normal;
  54. font-style: normal;
  55. }
  56.  
  57. @font-face {
  58. font-family: "Halim";
  59. src:
  60. url("https://cdn.statically.io/gh/Asmera25/halimun/main/Halimun.ttf")
  61. format("woff2"),
  62. url("https://cdn.statically.io/gh/Asmera25/halimun/main/Halimun.ttf")
  63. format("woff");
  64. font-weight: normal;
  65. font-style: normal;
  66. }
  67.  
  68. ::-webkit-scrollbar {
  69. display: none;
  70. }
  71.  
  72. @keyframes fadeIn {
  73. 0% {
  74. opacity: 0;
  75. }
  76.  
  77. 100% {
  78. opacity: 1;
  79. }
  80. }
  81.  
  82. ::-webkit-scrollbar-track {
  83. box-shadow: inset 0 0 5px black;
  84. border-radius: 10px;
  85. }
  86.  
  87. ::-webkit-scrollbar-thumb {
  88. background: #8bb9dd;
  89. border-radius: 10px;
  90. }
  91.  
  92. ::-webkit-scrollbar-thumb:hover {
  93. background: #2a628f;
  94. }
  95.  
  96. ::-webkit-scrollbar-corner {
  97. width: 5px;
  98. }
  99.  
  100. .title {
  101. background: linear-gradient(to bottom left, #fff, #55efc4);
  102. font-family: "Aranta";
  103. font-size: 65px;
  104. width: 90%;
  105. height: auto;
  106. font-weight: bold;
  107. text-align: center;
  108. color: #1f1f1f;
  109. padding: 10px;
  110. margin: auto;
  111. border: 2px ridge #000;
  112. border-bottom: none;
  113. text-shadow: 2px 3px 4px #000;
  114. box-shadow: 2px 2px 6px 2px #000;
  115. }
  116.  
  117. .title1 {
  118. font-family: "Aredo";
  119. font-size: 45px;
  120. font-weight: bold;
  121. text-align: center;
  122. color: #4d4855;
  123. padding: 5px;
  124. margin: auto;
  125. text-shadow: 1px 1px 1px #000;
  126. }
  127.  
  128. .title2 {
  129. font-family: "Halim";
  130. font-weight: bold;
  131. text-align: right;
  132. font-size: 30px;
  133. padding: 5px;
  134. margin: auto;
  135. text-shadow: 2px 2px 2px #000;
  136. }
  137.  
  138. .body {
  139. background: linear-gradient(to bottom right, #008645, #fff);
  140. width: 90%;
  141. height: auto;
  142. padding: 10px;
  143. margin: auto;
  144. text-align: justify;
  145. border: 2px ridge #000;
  146. border-top: none;
  147. overflow: scroll;
  148. overflow-x: hidden;
  149. box-shadow: 2px 2px 6px 2px #000;
  150. }
  151.  
  152. .text {
  153. text-align: center;
  154. color: #000;
  155. font-family: "Edmond";
  156. font-size: 20px;
  157. padding: auto;
  158. font-weight: bold;
  159. overflow: hidden;
  160. }
  161.  
  162. * {
  163. box-sizing: border-box;
  164. }
  165.  
  166. .column {
  167. float: left;
  168. width: 50%;
  169. padding: 10px;
  170. height: auto;
  171. margin: auto;
  172. color: #000;
  173. word-wrap: break-word;
  174. text-align: justify;
  175. overflow: hidden;
  176. }
  177.  
  178. .row:after {
  179. content: "";
  180. display: table;
  181. clear: both;
  182. }
  183. </style>
  184.  
  185. <div class="background">
  186. <div class="title">
  187. Article Title <br />
  188. <div class="title2" style="color: #2a628f">
  189. <span
  190. style="
  191. color: #000;
  192. font-family: &quot;Aredo&quot;;
  193. text-shadow: 1px 1px 1px #000;
  194. "
  195. >ft.</span
  196. >Name
  197. </div>
  198. </div>
  199. <br />
  200. <center>
  201. <b style="color: #1e453e; font-size: 20px"
  202. >.·:*¨ ¨*:·..·:*¨ ¨*:·..·:*¨ ¨*:·..·:*¨ ¨*:·..·:*¨ ¨*:·..·:*¨ ¨*:·..·:*¨
  203. ¨*:·..·:*¨ ¨*:·..·:*¨ ¨*:·..·:*¨ ¨*:·..</b
  204. >
  205. </center>
  206. <br />
  207. <div class="body">
  208. <div class="title1">Title</div>
  209. <div class="text">
  210. <img
  211. alt="pfp"
  212. src="https://64.media.tumblr.com/e2a3098b45c965d397846883e466f63d/d30198844357c118-71/s400x600/64ec98951cf56bfc9af796e6e933af06370cf91a.gif"
  213. style="
  214. float: left;
  215. object-fit: cover;
  216. width: 200px;
  217. height: 150px;
  218. border: 3px ridge #3e4143;
  219. margin-right: 7px;
  220. "
  221. />
  222. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  223. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
  224. veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
  225. commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
  226. velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
  227. cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
  228. est laborum.<br /><br />
  229.  
  230. <img
  231. alt="pfp"
  232. src="https://i.pinimg.com/originals/59/78/a2/5978a2e4bc05159792e9e8994017a33b.gif"
  233. style="
  234. float: right;
  235. object-fit: cover;
  236. width: 200px;
  237. height: 150px;
  238. border: 3px ridge #3e4143;
  239. margin-left: 7px;
  240. "
  241. />
  242. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  243. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
  244. veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
  245. commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
  246. velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
  247. cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
  248. est laborum.
  249. </div>
  250. <br />
  251.  
  252. <div style="border-bottom: 3px ridge #3e4143"></div>
  253. <br />
  254.  
  255. <div class="row">
  256. <div class="column">
  257. <div class="title1">Title 1</div>
  258. <div class="text">
  259. <img
  260. alt="pfp"
  261. src="https://img.wattpad.com/f359ef7df1aa3d290feb3ac7043feb31bc7feda1/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f38673950654f6e6f6b74727853413d3d2d3730323330303439382e313632386231396534306163613435343635353531353435323237332e676966?s=fit&w=720&h=720"
  262. style="
  263. float: right;
  264. object-fit: cover;
  265. width: 200px;
  266. height: 150px;
  267. border: 3px ridge #3e4143;
  268. margin-left: 7px;
  269. "
  270. />
  271. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
  272. eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
  273. minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  274. aliquip ex ea commodo consequat. Duis aute irure dolor in
  275. reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  276. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
  277. culpa qui officia deserunt mollit anim id est laborum.
  278. </div>
  279. </div>
  280.  
  281. <div class="column">
  282. <div class="title1">Title 2</div>
  283. <div class="text">
  284. <img
  285. alt="pfp"
  286. src="https://media.tenor.com/qbK5jMIfOrAAAAAM/shraddha-kapoor-stree-2.gif"
  287. style="
  288. float: left;
  289. object-fit: cover;
  290. width: 200px;
  291. height: 150px;
  292. border: 3px ridge #3e4143;
  293. margin-right: 7px;
  294. "
  295. />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
  296. eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
  297. minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  298. aliquip ex ea commodo consequat. Duis aute irure dolor in
  299. reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  300. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
  301. culpa qui officia deserunt mollit anim id est laborum.
  302. </div>
  303. </div>
  304. </div>
  305. </div>
  306. </div>
  307.  
  308. <center>
  309. <div class="credit">
  310. <a
  311. href="https://alacodes.tumblr.com/"
  312. target="_blank"
  313. style="
  314. text-decoration: none;
  315. color: #000;
  316. text-align: center;
  317. text-shadow: 1px 1px 1px #000;
  318. font-size: 25px;
  319. font-family: &quot;Baginda&quot;;
  320. "
  321. >Coded by Ala</a
  322. >
  323. </div>
  324. </center>
  325.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!