Advertisement
greenmelon

phone

Aug 1st, 2022
2,783
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.07 KB | None | 0 0
  1. <style>
  2. .cutephone {
  3. position: relative;
  4. width: 283px;
  5. height: 500px;
  6. margin: auto;
  7. border: 14px #F2D5E6 solid;
  8. border-top-width: 60px;
  9. border-bottom-width: 60px;
  10. border-radius: 36px;
  11. }
  12.  
  13. .cutephone:before {
  14. content: "";
  15. display: block;
  16. width: 60px;
  17. height: 5px;
  18. position: absolute;
  19. top: -30px;
  20. left: 50%;
  21. transform: translate(-50%, -50%);
  22. background: #DBB4CB;
  23. border-radius: 10px;
  24. }
  25.  
  26. .cutephone:after {
  27. content: "";
  28. display: block;
  29. width: 35px;
  30. height: 35px;
  31. position: absolute;
  32. left: 50%;
  33. bottom: -65px;
  34. transform: translate(-50%, -50%);
  35. background: #F2D5E6;
  36. border-radius: 50%;
  37. box-shadow: inset 13px 0px 6px -10px #DBB4CBAD, inset -13px 0px 6px -10px #DBB4CBAD, inset 0px 13px 6px -10px #DBB4CBAD, inset 0px -13px 6px -10px #DBB4CBAD;
  38. }
  39.  
  40. .cutephone .screen {
  41. width: 255px;
  42. height: 380px;
  43. background: #fff;
  44. box-shadow: inset 11px 0px 6px -10px #42424260, inset -11px 0px 6px -10px #42424260, inset 0px 11px 6px -10px #42424260, inset 0px -11px 6px -10px #42424260;
  45. }
  46.  
  47. .lines {
  48. position: absolute;
  49. left: 0;
  50. top: 0;
  51. width: 255px;
  52. height: 380px;
  53. pointer-events: none;
  54. z-index: 300;
  55. opacity: 0.05;
  56. }
  57.  
  58. .lines:before {
  59. content: '';
  60. position: absolute;
  61. left: 0;
  62. top: 0;
  63. right: 0;
  64. bottom: 0;
  65. pointer-events: none;
  66. background: linear-gradient(to bottom, transparent 20%, rgba(0, 0, 0, .5) 51%);
  67. background-size: 100% 4px;
  68. will-change: background, background-size; animation: scanlines 0.2s linear infinite;
  69. }
  70.  
  71. @keyframes scanlines {
  72. from {
  73. background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, .5) 51%); background-size: 100% 4px; }
  74. to {
  75. background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
  76. background-size: 100% 4px;
  77. }
  78. }
  79. @media only screen and (max-width: 600px);
  80. {
  81. </style>
  82. </head>
  83.  
  84. <body>
  85. <div class="cutephone">
  86. <div class="screen">
  87. <div class="lines"></div>
  88. </div>
  89. </div>
  90.  
  91. <script>
  92. function waithide()
  93. {
  94. var obj = document.getElementById("lockscreen");
  95. obj.style.opacity = '0';
  96. window.setTimeout(
  97. function removethis()
  98. {
  99. obj.style.display='none';
  100. }, 300);
  101. }
  102. </script>
  103. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement