Guest User

Untitled

a guest
May 24th, 2021
1,613
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. body {
  7. font-family: Arial, Helvetica, sans-serif;
  8. }
  9.  
  10. .flip-card {
  11. background-color: transparent;
  12. width: 300px;
  13. height: 380px;
  14. perspective: 1000px;
  15. }
  16.  
  17. .flip-card-inner {
  18. position: relative;
  19. width: 100%;
  20. height: 100%;
  21. text-align: center;
  22. transition: transform 0.6s;
  23. transform-style: preserve-3d;
  24. }
  25.  
  26. .flip-card:hover .flip-card-inner {
  27. transform: rotateY(180deg);
  28. }
  29.  
  30. .flip-card-front, .flip-card-back {
  31. position: absolute;
  32. width: 100%;
  33. height: 100%;
  34. -webkit-backface-visibility: hidden;
  35. backface-visibility: hidden;
  36. }
  37.  
  38. .flip-card-front {
  39. background: white;
  40. color: black;
  41. border: 4px double black;
  42. }
  43.  
  44. .flip-card-back {
  45. background: black;
  46. color: white;
  47. border: 4px double white;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52.  
  53. <center><div class="flip-card">
  54. <div class="flip-card-inner">
  55. <div class="flip-card-front">
  56. <img src="image.jpg" alt="Avatar" style="width:100%;height:100%;">
  57. </div>
  58. <div class="flip-card-back">
  59. doing your mom
  60. </div>
  61. </div>
  62. </div>
  63. </center>
  64. </body>
  65. </html>
RAW Paste Data