corawons

gumamela update log

Oct 13th, 2022 (edited)
77
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.30 KB | None | 0 0
  1. <div id="log">
  2. <div class="title" align="center">updates</div>
  3. <div class="info" align="left">
  4. <br>
  5. <mark>??/??/??</mark> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  6. <br>
  7. <mark>??/??/??</mark> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  8. <br>
  9. <mark>??/??/??</mark> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  10. </div>
  11. </div>
  12.  
  13. <style>
  14. #log {
  15. position: fixed;
  16. top: 20px;
  17. left: 20px;
  18. z-index: 99;
  19. overflow: hidden;
  20. padding: 5px;
  21. background: #fff;
  22. border-radius: 15px;
  23. box-shadow: 0 0 4px 7px #fff;
  24. width: 20px;
  25. height: 18px;
  26. font: 0 system-ui;
  27. color: #fff;
  28. line-height: 14px;
  29. transition: opacity 0.5s linear;
  30. transition: all 0.5s ease-in-out;
  31. }
  32.  
  33. #log:hover {
  34. opacity: 1;
  35. width: 150px;
  36. height: 170px;
  37. padding: 5px 5px 5px 5px;
  38. overflow: auto;
  39. background: #fff;
  40. border-radius: 5px;
  41. box-shadow: 0 0 7px 10px #fff;
  42. font: 11px system-ui;
  43. color: #303030;
  44. line-height: 14px;
  45. transition: opacity 0.5s linear;
  46. transition: all 0.5s ease-in-out;
  47. }
  48.  
  49. .title {
  50. opacity: 0;
  51. font: 0 system-ui;
  52. background: linear-gradient(#e0afb6, #fff);
  53. -webkit-background-clip: text;
  54. -webkit-text-fill-color: transparent;
  55. -webkit-text-stroke: 0.5px #bd8088;
  56. transition: opacity 0.5s linear;
  57. transition: all 0.5s ease-in-out;
  58. }
  59.  
  60. #log:hover .title {
  61. opacity: 1;
  62. font: 19px system-ui;
  63. background: linear-gradient(#e0afb6, #fff);
  64. -webkit-background-clip: text;
  65. -webkit-text-fill-color: transparent;
  66. -webkit-text-stroke: 0.5px #bd8088;
  67. transition: opacity 1s linear;
  68. transition: all 0.5s ease-in-out;
  69. }
  70.  
  71. #log mark {
  72. opacity: 0;
  73. font-size: 0;
  74. background: linear-gradient(#e0afb6, #fff);
  75. border: 0.7px solid #e0afb6;
  76. border-radius: 15px;
  77. padding: 0 5px 0 5px;
  78. color: #303030;
  79. transition: opacity 0.5s linear;
  80. transition: all 0.5s ease-in-out;
  81. }
  82.  
  83. #log:hover mark {
  84. opacity: 1;
  85. font-size: 11px;
  86. background: linear-gradient(#E0AFB6, #fff);
  87. border: 0.7px solid #E0AFB6;
  88. border-radius: 15px;
  89. padding: 0 5px 0 5px;
  90. color: #303030;
  91. transition: opacity 0.5s linear;
  92. transition: all 0.5s ease-in-out;
  93. }
  94.  
  95. br {
  96. display: block;
  97. content: "";
  98. margin-top: 10px;
  99. }
  100. </style>
Tags: update log
Add Comment
Please, Sign In to add comment