Advertisement
slstar

flip card

May 25th, 2021
807
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.01 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="preconnect" href="https://fonts.gstatic.com">
  5. <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap" rel="stylesheet">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <style>
  8. ::-moz-selection { /* Code for Firefox */
  9. color: #000;
  10. background: #56708D;
  11. }
  12.  
  13. ::selection {
  14. color: #000;
  15. background: #56708D;
  16. }
  17.  
  18. body {
  19. position: relative;
  20. width: 100%;
  21. }
  22. .links {
  23. text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0;
  24. font-size:275%;
  25. font-weight:bold;
  26. color: #8accd6;
  27. font-family: 'arial', cursive;
  28. text-decoration:none;
  29.  
  30. }
  31. .flip-card {
  32. background-color: transparent;
  33. width: 100%;
  34. height: 300px;
  35. perspective: 600px;
  36. border-radius:9px;
  37.  
  38. }
  39.  
  40. .flip-card-inner {
  41. position: relative;
  42. width: 100%;
  43. height: 100%;
  44. text-align: center;
  45. transition: transform 0.6s;
  46. transform-style: preserve-3d;
  47. box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  48. border: #000 double;
  49. border-radius:9px;
  50. }
  51.  
  52. .flip-card:hover .flip-card-inner {
  53. transform: rotateY(180deg);
  54. }
  55.  
  56. .flip-card-front, .flip-card-back {
  57. position: absolute;
  58. width: 100%;
  59. height: 100%;
  60. -webkit-backface-visibility: hidden;
  61. backface-visibility: hidden;
  62. border-radius:9px;
  63. }
  64.  
  65. .flip-card-front {
  66. background-color: #bbb;
  67. color: black;
  68. }
  69.  
  70. .flip-card-back {
  71. background-color: #ffe36b;
  72. color: white;
  73. transform: rotateY(180deg);
  74. border-radius:6px;
  75. }
  76. </style>
  77. </head>
  78. <body>
  79. <div class="flip-card">
  80. <div class="flip-card-inner">
  81. <div class="flip-card-front">
  82. <img src="https://dl.dropbox.com/s/nevqkcuzdlruf17/Photo%20May%2022%2C%2012%2022%2040%20PM.jpg?" alt="Avatar" style="width:100%;height:100%;border-radius:6px;">
  83. </div>
  84. <div class="flip-card-back">
  85. <div class="links"> <br></br>
  86. <a href="#i">about</a></div>
  87. <div class="links"> <a href="#ii">loves</a></div>
  88. <div class="links"> <a href="#iii">rules</a></div>
  89. <div class="links">
  90. <a
  91. href="https://mobile.twitter.com/ketsu_neko?lang=en">Β©</a></div>
  92. </div>
  93. </div>
  94. </div>
  95.  
  96. </body>
  97. </html>
  98.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement