API tools faq
paste
Sky_Blue

RED LOVE layout

Sky_Blue
Sep 5th, 2023
213
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.20 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4.  
  5.  
  6. <!---
  7.  
  8. RED LOVE neocities layout by adilene @ adilene.net
  9.  
  10. credit is not necessary but it is greatly appreciated!
  11.  
  12. if you need any help, feel free to shoot me an email at a@adilene.net!!!!
  13.  
  14. --->
  15.  
  16.  
  17. <meta charset="UTF-8">
  18.  
  19. <!-- viewport - for mobile screens -->
  20. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  21.  
  22. <!-- favicon & title -->
  23. <link rel="shortcut icon" href="FAVICON LINK HERE">
  24. <title>TITLE HERE</title>
  25.  
  26. <!-- fonts -->
  27. <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500&display=swap" rel="stylesheet">
  28. </head>
  29. <style>
  30. *{
  31. cursor: url(https://static.tumblr.com/diohc0k/mg2mlt7bs/knife.cur), default;
  32. }
  33.  
  34. /****** fonts ******/
  35. @font-face {
  36. font-family: scratch boys;
  37. src: url(https://files.catbox.moe/1sb02z.ttf);
  38. }
  39.  
  40. @font-face {
  41. font-family: cerl;
  42. src: url(https://dl.dropbox.com/s/vaz4fe5yzk1uiku/CHERL___.TTF);
  43. }
  44.  
  45. @font-face {
  46. font-family: Adorable Doll;
  47. src: url(https://dl.dropbox.com/s/plehp3a9xbtct7n/AdorableDoll.ttf);
  48. }
  49.  
  50. @font-face{
  51. font-family: vintage;
  52. src: url(https://files.catbox.moe/nwq0cf.ttf);
  53. }
  54.  
  55. @font-face{
  56. font-family:Porky;
  57. src:url(https://files.catbox.moe/k3akma.TTF);
  58. }
  59.  
  60. @font-face{
  61. font-family:Ace;
  62. src:url(https://files.catbox.moe/q5w88y.TTF);
  63. }
  64.  
  65. @font-face{
  66. font-family: Rounded;
  67. src: url(https://files.catbox.moe/ur2f53.ttf);
  68. }
  69.  
  70. /****** scrollbar ******/
  71. ::-webkit-scrollbar{
  72. display:none;
  73. }
  74.  
  75. /****** select hightlight ******/
  76. ::selection {
  77. background: #dd1a42;
  78. color:white;
  79. }
  80.  
  81. ::-moz-selection {
  82. background: #dd1a42;
  83. color:white;
  84. }
  85.  
  86. /****** body ******/
  87. body {
  88. background-color:#ffffff;
  89. background-image:url();
  90. background-repeat: repeat;
  91. background-position: 0 0;
  92. background-attachment: fixed;
  93. color:#000; /* default font color */
  94. font-family:rounded; /* default font */
  95. font-size:20px; /* default font size */
  96. margin:0px;
  97.  
  98. }
  99.  
  100. /****** links ******/
  101. a{
  102. text-decoration: underline;
  103. color:#dd1a42;
  104. transition:0.3s;
  105. }
  106.  
  107. a:hover{
  108. cursor: url(https://static.tumblr.com/diohc0k/WKcmlt7dc/knife1.cur), help;
  109. transition:0.3s;
  110. color:#fdcccf;
  111. text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  112. }
  113.  
  114. /****** wrappers ******/
  115. #wrapper{
  116. animation: fadeEffect 1s;
  117. margin: auto;
  118. width:800px;
  119. padding:100px 10px;
  120. }
  121.  
  122. @keyframes fadeEffect {
  123. from {opacity: 0;}
  124. to {opacity: 1;}
  125. }
  126.  
  127. #header{
  128. width:100%;
  129. border:5px solid #dd1a42;
  130. border-radius:20px 20px 0px 0px;
  131. object-fit: cover;
  132. box-sizing:border-box;
  133. background: linear-gradient(0deg, rgba(253,204,207,1) 0%, rgba(255,255,255,1) 100%);
  134. }
  135.  
  136. #header img{
  137. width:100%;
  138. display:block;
  139. margin-top:-110px;
  140.  
  141. }
  142.  
  143. #container{
  144. border:5px solid #dd1a42;
  145. border-top:none;
  146. width:100%;
  147. box-sizing:border-box;
  148. background-color:white;
  149. display:flex;
  150.  
  151. }
  152.  
  153. #left{
  154. border-right:5px solid #dd1a42;
  155. width:263px;
  156. padding:10px;
  157. display:flex;
  158. flex-direction: column;
  159. justify-content: space-between;
  160. }
  161.  
  162. #title{
  163. font-family:Rounded;
  164. font-size:80px;
  165. position:absolute;
  166. margin-top:20px;
  167. margin-left:20px;
  168. color:#fdcccf;
  169. text-shadow: rgb(221,26,66) 5px 0px 0px, rgb(221,26,66) 4.90033px 0.993347px 0px, rgb(221,26,66) 4.60531px 1.94709px 0px, rgb(221,26,66) 4.12668px 2.82321px 0px, rgb(221,26,66) 3.48353px 3.58678px 0px, rgb(221,26,66) 2.70151px 4.20736px 0px, rgb(221,26,66) 1.81179px 4.6602px 0px, rgb(221,26,66) 0.849836px 4.92725px 0px, rgb(221,26,66) -0.145998px 4.99787px 0px, rgb(221,26,66) -1.13601px 4.86924px 0px, rgb(221,26,66) -2.08073px 4.54649px 0px, rgb(221,26,66) -2.94251px 4.04248px 0px, rgb(221,26,66) -3.68697px 3.37732px 0px, rgb(221,26,66) -4.28444px 2.57751px 0px, rgb(221,26,66) -4.71111px 1.67494px 0px, rgb(221,26,66) -4.94996px 0.7056px 0px, rgb(221,26,66) -4.99147px -0.291871px 0px, rgb(221,26,66) -4.83399px -1.27771px 0px, rgb(221,26,66) -4.48379px -2.2126px 0px, rgb(221,26,66) -3.95484px -3.05929px 0px, rgb(221,26,66) -3.26822px -3.78401px 0px, rgb(221,26,66) -2.4513px -4.35788px 0px, rgb(221,26,66) -1.53666px -4.75801px 0px, rgb(221,26,66) -0.560763px -4.96845px 0px, rgb(221,26,66) 0.437495px -4.98082px 0px, rgb(221,26,66) 1.41831px -4.79462px 0px, rgb(221,26,66) 2.34258px -4.41727px 0px, rgb(221,26,66) 3.17346px -3.86382px 0px, rgb(221,26,66) 3.87783px -3.15633px 0px, rgb(221,26,66) 4.4276px -2.32301px 0px, rgb(221,26,66) 4.80085px -1.39708px 0px, rgb(221,26,66) 4.98271px -0.415447px 0px;
  170. }
  171.  
  172. #subtitle{
  173. border-radius:20px;
  174. background: radial-gradient(circle, rgba(253,204,207,1) 0%, rgba(255,255,255,1) 100%);
  175. text-align: center;
  176. padding:5px;
  177. color:#000;
  178. margin-bottom:10px;
  179. }
  180.  
  181. .link{
  182. margin-bottom:10px;
  183. display:flex;
  184. gap:5px;
  185. margin-left:10px;
  186. }
  187.  
  188. .updates{
  189. width:100%;
  190. height:200px;
  191. overflow:auto;
  192. padding:10px;
  193. box-sizing:border-box;
  194. border:5px solid #dd1a42;
  195. }
  196.  
  197. .highlight{
  198. background-color:#dd1a42;
  199. color:white;
  200. }
  201.  
  202. #right{
  203. width:100%;
  204. padding:10px;
  205. overflow:auto;
  206. height:400px;
  207. }
  208.  
  209. /****** music player ******/
  210. #musicplayer{
  211. margin:auto;
  212. width:378px;;
  213. border:5px solid #dd1a42;
  214. box-sizing:border-box;
  215. border-radius:0px 0px 20px 20px;
  216. border-top:none;
  217. background-color:#fdcccf;
  218. }
  219.  
  220. .songtitle{
  221. padding:5px;
  222. display:block;
  223. }
  224.  
  225. .controls{
  226. font-size:25px !important; /* size of controls */
  227. text-align:center;
  228. width:100%;
  229. }
  230.  
  231. .controls td{
  232. padding:5px;
  233. }
  234.  
  235. i.fas:hover{
  236. cursor: url(https://static.tumblr.com/diohc0k/WKcmlt7dc/knife1.cur), help;
  237. }
  238.  
  239. i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
  240. color:#dd1a42; /* color of controls */
  241. }
  242.  
  243. i.fas.fa-pause, i.fas.fa-play{
  244. font-size:30px;
  245. }
  246.  
  247. /* phone */
  248. #phonewrapper{
  249. position:fixed;
  250. bottom:-445px;
  251. left:23px;
  252. transition:0.5s;
  253. }
  254.  
  255. #phonewrapper:hover{
  256. bottom:0;
  257. transition:0.5s;
  258. }
  259.  
  260. #screen{
  261. border:4px solid black;
  262. width:200px;
  263. height:300px;
  264. background-color:white;
  265. overflow:auto;
  266. z-index:1;
  267. }
  268.  
  269. #screen2{
  270. padding:40px 10px 0px 10px;
  271. border:4px solid #000;
  272. border-radius:10px 10px 0px 0px;
  273. background-color:#1f201c;
  274. margin-bottom:-4px;
  275. }
  276.  
  277. #outer{
  278. padding:0px 15px 0px 15px;
  279. border-left:4px double #498292;
  280. border-right:4px solid #498292;
  281. border-top:4px solid #498292;
  282. border-bottom:4px solid #000;
  283. background:radial-gradient(circle, rgba(125,197,218,1) 0%, rgba(80,149,169,1) 100%);
  284. border-radius:30px 30px 0px 0px;
  285. }
  286.  
  287. #bottom{
  288. height:30px;
  289. background: linear-gradient(180deg, rgba(125,197,218,1) 0%, rgba(80,149,169,1) 100%);
  290. border-left:4px double #498292;
  291. border-right:4px solid #498292;
  292. border-top:4px solid #498292;
  293. }
  294.  
  295. #earpiece{
  296. width:100px;
  297. height:8px;
  298. border-radius:10px;
  299. border:4px solid #498292;
  300. margin:20px auto;
  301. background-color:#346472;
  302. }
  303.  
  304. #bar{
  305. width:120px;
  306. height:5px;
  307. border:4px solid #d3d3d3;
  308. background-color:#d3d3d3;
  309. margin:20px auto;
  310. }
  311.  
  312. </style>
  313. <body>
  314.  
  315. <!--- this is the phone --->
  316. <div id="phonewrapper">
  317. <div id="outer">
  318. <div id="earpiece"></div>
  319. <div id="screen2">
  320. <div id="screen">
  321. <!---CHATBOX CODE GOES HEREEEEEEEEE---->
  322. </div>
  323. <div id="bar"></div>
  324. </div>
  325. </div>
  326. <div id="bottom"></div>
  327. </div>
  328. <!--- above is the phone --->
  329.  
  330. <div id="wrapper">
  331. <div id="header">
  332. <div id="title">未来日記</div>
  333. <img src="https://files.catbox.moe/vdcnwg.png">
  334. </div>
  335. <div id="container">
  336. <div id="left">
  337. <div>
  338. <div id="subtitle">navigation</div>
  339. <div class="link"><img src="https://files.catbox.moe/ry3045.gif"> <a href="">home</a></div>
  340. <div class="link"><img src="https://files.catbox.moe/ry3045.gif"> <a href="">about</a>
  341. </div>
  342. <div class="link"><img src="https://files.catbox.moe/ry3045.gif"> <a href="">diary</a></div>
  343. <div class="link"><img src="https://files.catbox.moe/ry3045.gif"> <a href="">shrines</a></div>
  344. <div class="link"><img src="https://files.catbox.moe/ry3045.gif"> <a href="">guestbook</a></div>
  345. </div>
  346.  
  347. <div>
  348. <div style="margin-top:15px;display:flex;">
  349. <img src="https://files.catbox.moe/m63axc.gif">
  350. <img src="https://buttonwall.neocities.org/clickhere-red.gif" style="margin-left:10px;">
  351. </div>
  352. <img src="https://files.catbox.moe/v58d1w.jpg" style="width:100%;margin-top:10px;display:block;">
  353. </div>
  354. </div>
  355.  
  356. <div id="right">
  357. mirai nikki (未来日記, future diary) is a japanese anime and manga series written and illustrated by sakae esuno.<br><br>
  358.  
  359. <div id="subtitle">plot</div>
  360.  
  361. middle school student amano yukiteru has problem making friends. he thinks of himself as a bystander and will always write down everything he sees in a cell phone diary.<br><br>
  362.  
  363. tormented by solitude, yukiteru interacts with his imaginary friends deus ex machina, the god of time and space, and muru muru, deus' servant. one day, deus grants yukiteru's cell phone the ability to record the future for the next 90 days. yukiteru is then forced to participate in a battle royale with eleven other people, each of whom also have a diary that can predict the future in some unique way.<br><br>
  364.  
  365. the rules of the game are simple: before the world ends on day 90, the contestants must find and kill all the other contestants, and the last one standing will become deus' successor.
  366. </div>
  367. </div>
  368.  
  369. <div id="musicplayer">
  370. <!---ignore this too--->
  371. <div style="display:none">
  372. <marquee scrollamount="8" class="songtitle"></marquee>
  373. </div>
  374. <!--- --->
  375.  
  376. <table class="controls">
  377. <tr>
  378. <td>
  379. <div class="prev-track" onclick="prevTrack()"><i class="fas fa-backward"></i></div>
  380. </td>
  381. <td>
  382. <div class="playpause-track" onclick="playpauseTrack()" ><i class="fas fa-play"></i></div>
  383. </td>
  384. <td>
  385. <div class="next-track" onclick="nextTrack()"><i class="fas fa-forward"></i></div>
  386. </td>
  387. </tr>
  388. </table>
  389.  
  390. <!---ignore this im too lazy to edit it out--->
  391. <div class="seeking" style="display:none;">
  392. <div class="current-time">00:00</div>
  393.  
  394. <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
  395.  
  396. <div class="total-duration">0:00</div>
  397. </div>
  398. <!--- --->
  399.  
  400. <audio id="music" src=""></audio>
  401. </div>
  402.  
  403.  
  404. <!-- music player code -->
  405. <script>
  406. //
  407. // DEFINE YOUR SONGS HERE!!!!!
  408. // MORE THAN FOUR SONGS CAN BE ADDED!!
  409. // JUST ADD ANOTHER BRACKET WITH NAME AND PATH
  410. // CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES
  411. let track_list = [
  412. {
  413. name:"",
  414. path:"https://files.catbox.moe/p4swjl.mp3"
  415. },
  416. {
  417. name:"",
  418. path:"https://files.catbox.moe/ldzble.mp3"
  419. },
  420. {
  421. name:"",
  422. path:"https://files.catbox.moe/hh8d05.mp3"
  423. },
  424. {
  425. name: "",
  426. path: "https://files.catbox.moe/wqzr1u.mp3",
  427. },
  428. ];
  429. //
  430. //
  431. //
  432. //
  433. //
  434. </script>
  435. <script src="https://kit.fontawesome.com/f936906ae0.js" crossorigin="anonymous"></script>
  436. <script type="text/javascript" src="https://adilene.net/musicplayer.js"></script>
  437. </div>
  438. </body>
  439. </html>
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!