Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- @font-face {
- font-family: PC98;
- src: url(https://dl.dropbox.com/s/q6te1rmeglfy4bf/pc-9800.ttf);
- }
- .mom {
- position: absolute;
- bottom: 195px;
- left: 160px;
- width: 192px;
- height: 280px;
- border: 9px solid #ffffff;
- border-radius: 4px;
- box-shadow: 0px 0px 1px #666666;
- background-image: linear-gradient(0deg, #ffffff 13%, #ffffff00 0%);
- }
- .image {
- opacity: 1;
- display: block;
- width: 100%;
- height: auto;
- transition: .5s ease;
- backface-visibility: hidden;
- }
- .middle {
- transition: .5s ease;
- opacity: 0;
- position: absolute;
- bottom: -2%;
- left: 50%;
- width: 12em;
- transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- text-align: center;
- }
- .mom:hover .image {
- opacity: 0.3;
- }
- .mom:hover .middle {
- opacity: 1;
- }
- .text {
- background-color: #ffffffb3;
- border-radius: 4px;
- color: #424242;
- font-size: 12px;
- font-family: PC98;
- height: 113px;
- width: 160px;
- overflow-y: scroll;
- padding: 10px 5px 10px 5px;
- position: relative;
- bottom: 93px;
- left: 23.5px;
- }
- @media only screen and (max-width: 600px) {
- .mom {
- position: absolute;
- bottom: 220px;
- left: 95px;
- width: 185px;
- height: 190px;
- border: 9px solid #ffffff;
- border-radius: 4px;
- box-shadow: 0px 0px 1px #666666;
- background-image: linear-gradient(0deg, #ffffff 13%, #ffffff00 0%);
- }
- .text {
- background-color: #ffffffb3;
- border-radius: 4px;
- color: #424242;
- font-size: 12px;
- font-family: PC98;
- height: 10.3em;
- width: 158px;
- overflow-y: scroll;
- padding: 10px 5px 10px 5px;
- position: relative;
- bottom: -16px;
- left: 9px;
- }
- }
- mark {
- background: #E8E0FF;
- border: 1px solid #A6A6A6;
- padding: 2px 6px;
- border-radius: 10px;
- font-family: PC98;
- width: 67px;
- position: relative;
- }
- </style>
- </head>
- <body>
- <div class="mom">
- <img src="https://cdn.discordapp.com/attachments/851155413831254076/1114211824217362513/Screenshot_2023-06-01_at_10.22.36_AM.jpg" class="image" style="width:100%; height: 230px;">
- <div class="middle">
- <div class="text">
- insert your text here for your carrd
- </div>
- </div>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment