greenmelon

slide up container

May 24th, 2022 (edited)
1,647
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.37 KB | None | 0 0
  1. <link rel="preconnect" href="https://fonts.googleapis.com">
  2. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  3. <link href="https://fonts.googleapis.com/css2?family=Kosugi&display=swap" rel="stylesheet">
  4.  
  5. <style>
  6. @font-face {
  7. font-family: hugh is life;
  8. src: url(https://dl.dropbox.com/s/bki6gilknxxouuk/HughIsLifePersonalUseItalic-K7axe.ttf);
  9. }
  10.  
  11. .container {
  12. position: relative;
  13. width: 300px;
  14. height: 200px;
  15. margin: auto;
  16. z-index: 999;
  17. /* change the background image and the gradient */
  18. background-image: linear-gradient(#ffffff50, #A6B9FF), url('https://64.media.tumblr.com/786d8c9b7b5d747e36efd1f13e6f15e0/6eac967820d3f4ba-f5/s540x810/3b50ada35904f905e087f80bcadf5a7661ac4084.gifv');
  19. background-position: center;
  20. background-size: cover;
  21. color: #fff;
  22. overflow: hidden;
  23. box-shadow: 0px 3px 7px #aaa, inset 13px 0px 6px -10px #fff, inset -13px 0px 6px -10px #fff, inset 0px 13px 6px -9px #ffffff, inset 0px -13px 6px -10px #fff;
  24. border-radius: 10px;
  25. }
  26.  
  27. h1 {
  28. font-family: hugh is life;
  29. color: #fff;
  30. font-size: 4em;
  31. text-align: left;
  32. animation: glow 1.5s infinite;
  33. }
  34.  
  35. @keyframes glow { 0% { text-shadow: 0px 0px 15px white; } 50% { text-shadow: 0px 0px 5px white; } 100% { text-shadow: 0px 0px 15px white; }
  36. }
  37.  
  38. p {
  39. font-family: kosugi;
  40. color: #424242;
  41. font-size: 0.9em;
  42. text-align: right;
  43. }
  44.  
  45. p2 {
  46. font-family: kosugi;
  47. color: #fff;
  48. font-size: 0.6em;
  49. text-align: right;
  50. font-style: italic;
  51. font-weight: 900;
  52. }
  53.  
  54. mark {
  55. color: #ffffff;
  56. font-size: 1.2em;
  57. background: transparent;
  58. -webkit-filter: drop-shadow(0px 0px 1px #fff);
  59. }
  60.  
  61. a {
  62. color: #ffffff;
  63. -webkit-filter: drop-shadow(0px 0px 1px #fff);
  64. text-decoration: none;
  65. }
  66.  
  67. .top-left {
  68. position: absolute;
  69. top: 0px;
  70. left: 8px;
  71. }
  72.  
  73. .top-right {
  74. position: absolute;
  75. top: 4px;
  76. right: 8px;
  77. }
  78.  
  79. .content {
  80. position: absolute;
  81. top: 60px;
  82. /* change the opacity of the slide up */
  83. opacity: .7;
  84. width: 100%;
  85. height: 90%;
  86. /* change the background color of the slide up */
  87. background-color: #A6B9FF;
  88. padding-right: 10px;
  89. padding-left: 10px;
  90. /* make the shadow the same color as the background */
  91. box-shadow: 0 0 30px 35px #A6B9FF;
  92. -webkit-transform: translateY(80%);
  93. transform: translateY(80%);
  94. -webkit-backface-visibility: hidden;
  95. backface-visibility: hidden;
  96. -webkit-transition: opacity 0.2s 0.3s, -webkit-transform 0.4s;
  97. transition: opacity 0.2s 0.3s, -webkit-transform 0.4s;
  98. transition: transform 0.4s, opacity 0.2s 0.3s;
  99. transition: transform 0.4s, opacity 0.2s 0.3s, -webkit-transform 0.4s;
  100. }
  101.  
  102. .slide-up:hover .content {
  103. /* change the opacity of the slide up */
  104. opacity: .8;
  105. -webkit-transform: translateY(0px);
  106. transform: translateY(0px);
  107. -webkit-transition: opacity 0.2s, -webkit-transform 0.4s;
  108. transition: opacity 0.2s, -webkit-transform 0.4s;
  109. transition: transform 0.4s, opacity 0.2s;
  110. transition: transform 0.4s, opacity 0.2s, -webkit-transform 0.4s;
  111. }
  112. </style>
  113.  
  114. <div class='container slide-up'>
  115. <!--- DON'T REMOVE --->
  116. <div class="top-right">
  117. <p2>cr. aicoholdrink</p2></div>
  118.  
  119. <div class="top-left"><h1>Name</h1></div>
  120.  
  121. <div class='content'>
  122. <p><mark>Info</mark> info info info info info info info info info info info info info info info </p>
  123. <br>
  124. <p><mark>Info</mark> info info info info info info info info info info info info info info info </p>
  125. <br>
  126. <p><mark>Info</mark> info info info info info info info info info info info info info info info </p>
  127. </div>
  128. </div>
Add Comment
Please, Sign In to add comment