Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Kosugi&display=swap" rel="stylesheet">
- <style>
- @font-face {
- font-family: hugh is life;
- src: url(https://dl.dropbox.com/s/bki6gilknxxouuk/HughIsLifePersonalUseItalic-K7axe.ttf);
- }
- .container {
- position: relative;
- width: 300px;
- height: 200px;
- margin: auto;
- z-index: 999;
- /* change the background image and the gradient */
- background-image: linear-gradient(#ffffff50, #A6B9FF), url('https://64.media.tumblr.com/786d8c9b7b5d747e36efd1f13e6f15e0/6eac967820d3f4ba-f5/s540x810/3b50ada35904f905e087f80bcadf5a7661ac4084.gifv');
- background-position: center;
- background-size: cover;
- color: #fff;
- overflow: hidden;
- 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;
- border-radius: 10px;
- }
- h1 {
- font-family: hugh is life;
- color: #fff;
- font-size: 4em;
- text-align: left;
- animation: glow 1.5s infinite;
- }
- @keyframes glow { 0% { text-shadow: 0px 0px 15px white; } 50% { text-shadow: 0px 0px 5px white; } 100% { text-shadow: 0px 0px 15px white; }
- }
- p {
- font-family: kosugi;
- color: #424242;
- font-size: 0.9em;
- text-align: right;
- }
- p2 {
- font-family: kosugi;
- color: #fff;
- font-size: 0.6em;
- text-align: right;
- font-style: italic;
- font-weight: 900;
- }
- mark {
- color: #ffffff;
- font-size: 1.2em;
- background: transparent;
- -webkit-filter: drop-shadow(0px 0px 1px #fff);
- }
- a {
- color: #ffffff;
- -webkit-filter: drop-shadow(0px 0px 1px #fff);
- text-decoration: none;
- }
- .top-left {
- position: absolute;
- top: 0px;
- left: 8px;
- }
- .top-right {
- position: absolute;
- top: 4px;
- right: 8px;
- }
- .content {
- position: absolute;
- top: 60px;
- /* change the opacity of the slide up */
- opacity: .7;
- width: 100%;
- height: 90%;
- /* change the background color of the slide up */
- background-color: #A6B9FF;
- padding-right: 10px;
- padding-left: 10px;
- /* make the shadow the same color as the background */
- box-shadow: 0 0 30px 35px #A6B9FF;
- -webkit-transform: translateY(80%);
- transform: translateY(80%);
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- -webkit-transition: opacity 0.2s 0.3s, -webkit-transform 0.4s;
- transition: opacity 0.2s 0.3s, -webkit-transform 0.4s;
- transition: transform 0.4s, opacity 0.2s 0.3s;
- transition: transform 0.4s, opacity 0.2s 0.3s, -webkit-transform 0.4s;
- }
- .slide-up:hover .content {
- /* change the opacity of the slide up */
- opacity: .8;
- -webkit-transform: translateY(0px);
- transform: translateY(0px);
- -webkit-transition: opacity 0.2s, -webkit-transform 0.4s;
- transition: opacity 0.2s, -webkit-transform 0.4s;
- transition: transform 0.4s, opacity 0.2s;
- transition: transform 0.4s, opacity 0.2s, -webkit-transform 0.4s;
- }
- </style>
- <div class='container slide-up'>
- <!--- DON'T REMOVE --->
- <div class="top-right">
- <p2>cr. aicoholdrink</p2></div>
- <div class="top-left"><h1>Name</h1></div>
- <div class='content'>
- <p><mark>Info</mark> info info info info info info info info info info info info info info info </p>
- <br>
- <p><mark>Info</mark> info info info info info info info info info info info info info info info </p>
- <br>
- <p><mark>Info</mark> info info info info info info info info info info info info info info info </p>
- </div>
- </div>
Add Comment
Please, Sign In to add comment