API tools faq
paste
Advertisement
dcylily

dayslily 💌 phone page.

dcylily
Apr 6th, 2023 (edited)
230
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.84 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <title>{Title}</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8.  
  9. <!-- META TAGS, SCRIPTS, AND CUSTOM FONTS GO HERE-->
  10.  
  11. <link rel="preconnect" href="https://fonts.googleapis.com">
  12. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  13. <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&display=swap" rel="stylesheet">
  14.  
  15. <link rel="stylesheet" href="https://fonts.sandbox.google.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  16.  
  17. <link rel="preconnect" href="https://fonts.googleapis.com">
  18. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  19. <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
  20.  
  21. <link rel="preconnect" href="https://fonts.googleapis.com">
  22. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  23. <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700;900&display=swap" rel="stylesheet">
  24.  
  25.  
  26.  
  27. </head>
  28. <style type="text/css">
  29. /* ALL STYLING GOES HERE */
  30.  
  31. /* hide scrollbar but allow scrolling */
  32. element {
  33. -ms-overflow-style: none; /* for Internet Explorer, Edge */
  34. scrollbar-width: none; /* for Firefox */
  35. overflow-y: scroll;
  36. }
  37.  
  38. element::-webkit-scrollbar {
  39. display: none; /* for Chrome, Safari, and Opera */
  40. }
  41.  
  42. body { background-color:#E9E9E9; font-family:Plus Jakarta Sans; }
  43.  
  44. .button { width:7px; height:40px; background-color:#EEFFF7; border-radius:20px 0px 0px 20px; position:absolute; margin:auto; left:0px; right:370px; top:210px; }
  45.  
  46. .button2 { width:7px; height:40px; background-color:#EEFFF7; border-radius:20px 0px 0px 20px; position:absolute; margin:auto; left:0px; right:370px; top:270px; }
  47.  
  48. .button3 { width:7px; height:50px; background-color:#EEFFF7; border-radius:0px 20px 20px 0px; position:absolute; margin:auto; right:0px; left:370px; top:210px; }
  49.  
  50. .phone {
  51. width:366px; height:656px;
  52. background-color:#f2f2f2;
  53. border-radius:33px;
  54.  
  55. position:absolute; margin:auto;
  56. left:0px; right:0px; top:0px; bottom:0px;
  57. }
  58.  
  59. .iphone {
  60. width:360px; height:650px;
  61. background-color:#262423;
  62. border-radius:30px;
  63.  
  64. position:absolute; margin:auto;
  65. left:0px; right:0px; top:0px; bottom:0px;
  66. }
  67.  
  68. .screen {
  69. width:337px; height:627px;
  70. background-color:#e8e8e8;
  71. border-radius:20px;
  72.  
  73. position:absolute; margin:auto;
  74. left:0px; right:0px; top:0px; bottom:0px;
  75. }
  76.  
  77. .dip {
  78. width:185px; height:32px;
  79. background-color:#262423;
  80. border-radius:0px 0px 20px 20px;
  81.  
  82. position:absolute; margin:auto;
  83. left:0px; right:0px; top:0px;
  84. }
  85.  
  86. .speaker {
  87. width:40px; height:6px; background-color:white; opacity:.10;
  88. border-radius:4px; position:absolute; margin:auto;
  89. left:0px; right:0px; top:0px; bottom:6px;
  90. }
  91.  
  92. .camera {
  93. width:12px; height:12px; background-color:white; opacity:.06;
  94. border-radius:100%; position:absolute; margin:auto;
  95. left:80px; right:0px; top:0px; bottom:6px;
  96. }
  97.  
  98. .time {
  99. width:75px; height:25px; text-align:center;
  100. color:white; font-size:14px; font-weight:600;
  101.  
  102. position:absolute; margin:auto;
  103. left:3px; top:8px;
  104. }
  105.  
  106. .symbols {
  107. width:75px; height:25px; text-align:center;
  108. color:white; font-size:10px; font-weight:600;
  109.  
  110. position:absolute; margin:auto;
  111. right:2px; top:8px;
  112. }
  113.  
  114.  
  115. .material-symbols-outlined { font-size:16px; }
  116.  
  117.  
  118.  
  119. #title { text-align:center; font-family:Righteous; font-size:30px; color:black; position:absolute; margin:auto; left:0px; right:0px; top:45px; }
  120.  
  121. .background {
  122. width:337px; height:627px;
  123. background-color:#e8e8e8;
  124. border-radius:20px;
  125.  
  126. position:absolute; margin:auto;
  127. left:0px; right:0px; top:0px; bottom:0px;
  128. z-index:0;
  129. }
  130.  
  131. .background img { width:337px; height:627px; border-radius:20px; }
  132.  
  133. .lockscreen {
  134. width:337px; height:580px;
  135. background-color:none;
  136. border-radius:20px;
  137.  
  138. position:absolute; margin:auto;
  139. left:0px; right:0px; bottom:0px;
  140. }
  141.  
  142. #locksymbol { width:40px; height:40px; position:absolute;
  143. margin:auto; left:0px; right:0px; color:white; }
  144.  
  145. .lockscreen .material-symbols-outlined { font-size:40px; }
  146.  
  147. #locktime { text-align:center; margin-top:40px; color:white;
  148. font-size:60px; }
  149.  
  150. #lockdate { text-align:center; color:white; }
  151.  
  152. .notifications {
  153. width:330px; height:420px;
  154. background-color:none;
  155.  
  156. position:absolute; margin:auto;
  157. left:0px; right:0px; bottom:0px;
  158.  
  159. }
  160.  
  161. .notibox {
  162. width:316px; height:88px;
  163. background-color:#fff; opacity:.75;
  164. border-radius:10px;
  165. margin-top:0px; margin-left:6px;
  166. overflow:hidden;
  167. z-index:1;
  168.  
  169. }
  170.  
  171. #notiimg { width:50px; height:50px; border-radius:10px;
  172. margin-top:19px; margin-left:17px; }
  173. #notiimg img { width:50px; height:50px; border-radius:10px; }
  174.  
  175. #notitext { width:240px; height:88px; position:absolute;
  176. margin:auto; top:0px; right:0px; border-radius:0px 10px 10px 0px; }
  177.  
  178. /* FOR TOP NOTI */
  179.  
  180. #notiapp { color:black; font-weight:700; top:19px;
  181. font-size:14px; position:absolute; margin:auto; }
  182.  
  183. #notidesc { color:black; font-size:11px; top:38px;
  184. position:absolute; margin:auto;}
  185.  
  186. /* FOR BOTTOM NOTI */
  187.  
  188. #notiapp2 { color:black; font-weight:700; top:125px;
  189. font-size:14px; position:absolute; margin:auto; }
  190.  
  191. #notidesc2 { color:black; font-size:11px; top:144px;
  192. position:absolute; margin:auto;}
  193.  
  194.  
  195.  
  196. /* CREDIT DETAILS - no need 2 edit :p ! */
  197.  
  198. #credit { height:10px; width:10px; position:absolute; margin:auto; top:10px; left:10px; color:#000; font-size:12px; }
  199.  
  200. </style>
  201.  
  202. </head><body>
  203. <div id="credit"><a href="https://dayslily.tumblr.com/">©</a></div>
  204.  
  205. <div class="button"></div>
  206. <div class="button2"></div>
  207. <div class="button3"></div>
  208.  
  209. <div class="phone">
  210. <div class="iphone">
  211.  
  212. <div class="screen">
  213. <div class="background">
  214. <img src="https://i.ibb.co/K5Pm8SR/bg.png">
  215. <!-- REPLACE THE LINK ABOVE WITH UR LOCKSCREEN PIC LINK -->
  216. </div>
  217. <div class="dip">
  218. <div class="speaker"></div>
  219. <div class="camera"></div>
  220. </div>
  221. <div class="time">12:43</div>
  222. <div class="symbols">
  223. <span class="material-symbols-outlined">signal_cellular_alt</span>&nbsp;
  224. <span class="material-symbols-outlined">wifi</span>&nbsp;
  225. <span class="material-symbols-outlined">battery_full_alt</span>
  226. </div>
  227.  
  228. <div class="lockscreen">
  229.  
  230. <div id="locksymbol">
  231. <span class="material-symbols-outlined">lock_open</span>
  232. </div>
  233. <div id="locktime">3:00</div>
  234. <div id="lockdate">Friday, June 10</div>
  235.  
  236. <div class="notifications">
  237.  
  238. <!-- start TOP NOTI box -->
  239. <div class="notibox">
  240.  
  241. <div id="notiimg">
  242. <img src="https://chevaliier.carrd.co/assets/images/image05.jpg?v=22d13830">
  243. </div>
  244. <!-- REPLACE THE LINK ABOVE WITH UR APP PIC LINK -->
  245.  
  246. <div id="notitext">
  247.  
  248. <div id="notiapp">NOTIFICATION #1</div>
  249. <div id="notidesc">
  250. top notification text goes here.
  251. <br>you can use line breaks!
  252. </div>
  253.  
  254. </div>
  255.  
  256. </div>
  257. <!-- end TOP NOTI box -->
  258.  
  259. <p>
  260.  
  261. <!-- start BOTTOM NOTI box -->
  262. <div class="notibox">
  263.  
  264. <div id="notiimg">
  265. <img src="https://chevaliier.carrd.co/assets/images/image02.jpg?v=22d13830">
  266. </div>
  267. <!-- REPLACE THE LINK ABOVE WITH UR APP PIC LINK -->
  268.  
  269. <div id="notitext">
  270.  
  271. <div id="notiapp2">NOTIFICATION #2</div>
  272. <div id="notidesc2">
  273. bottom notification text goes here.
  274. <br>you can use line breaks!
  275. </div>
  276.  
  277. </div>
  278.  
  279. </div>
  280. <!-- end BOTTOM NOTI box -->
  281.  
  282. </div> <!-- close notifications -->
  283.  
  284. </div> <!-- close lockscreen -->
  285.  
  286. </div> <!-- close screen -->
  287.  
  288. </div></div>
  289.  
  290. </div></div>
  291.  
  292. </body>
  293. </html>
  294.  
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!