SHARE
TWEET

Untitled

a guest Jun 26th, 2019 57 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. *{
  2.     padding: 0;
  3.     margin: 0;
  4.     box-sizing: border-box;
  5. }
  6.  
  7. .panel
  8. {
  9.     position: absolute;
  10.     top: 50%;
  11.     right: 10%;
  12.     width:50px;
  13.     justify-content: center;
  14. }
  15.  
  16. .panel select
  17. {
  18.     background:darkgray;
  19.     color: papayawhip;
  20.     width:250px;
  21.     height: 50px;
  22.     padding: 10px;
  23.     border: none;
  24.     font-size: 30px;
  25.     box-shadow: 0 5px 25px rgba(0,0,0,0.5);
  26. }
  27. .panel:before
  28. {
  29.     position: absolute;
  30.     content: '';
  31.     position: absolute;
  32.     top: 0;
  33.     right: 0;
  34.     width: 50px;
  35.     height: 50px;
  36.     background: blueviolet;
  37. }
  38. .panel:hover::before
  39. {
  40.     background: blue;
  41. }
  42.  
  43. body {
  44.     /*height: 100vh;
  45.     background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(6019.jpg);
  46.     display: flex;
  47.     margin: auto;
  48.     flex-wrap :wrap;
  49.     background-origin: cover;
  50.     background-size: unset;
  51.     background-repeat: no-repeat;
  52.     background-position: center;*/
  53.      margin: 0 ;
  54.     background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(6019.jpg);
  55.     background-origin: cover;
  56.     background-size: unset;
  57.     background-repeat: no-repeat;
  58.     background-position: center;
  59.  
  60. }
  61. html
  62. {
  63.     min-height: 100vh;
  64. }
  65. .game-container
  66. {
  67.     display: grid;
  68.     grid-template-columns: repeat(6,auto);
  69.     grid-gap: 10px;
  70.   /* grid-gap: 0.5px;*/
  71.  
  72.     justify-content: center;
  73. }
  74. .game-info-container
  75. {
  76.     grid-column: 1 /-1;
  77.     display: flex;
  78.     justify-content: space-between;
  79. }
  80.  
  81. .game-info
  82. {
  83.     color: white;
  84.     font-family: sans-serif;
  85.     text-align: center;
  86.     font font-weight: normal;
  87.     font size: 3 em;
  88. }
  89.  .page-title
  90. {
  91.     color: white;
  92.     font-family: myfnt,sans-serif;
  93.     text-align: center;
  94.     font font-weight: normal;
  95.     font size: 6 em;
  96. }
  97. .memory-game{
  98.     /*width: 700px;
  99.     height: 700px;
  100.     */
  101. /*
  102. width: 640px;
  103.     height: 640px;
  104. */
  105.    /* width: 600px;
  106.     height: 300px;*/
  107.     /*margin-left: 400px;*/
  108.     margin: auto:
  109.     /*margin: auto;
  110.     display: flex;
  111.     flex-wrap: wrap;
  112.     */
  113.     perspective: 1000px;
  114. }
  115. .memory-card {
  116.     /*width: calc(25% - 10px);
  117.     height: calc(33.333% - 10px);
  118.    
  119.     position: relative;
  120.     margin: 5px;
  121.     */
  122.     margin: 5px;
  123.     transform:scale(1);
  124.     transform-style: preserve-3d;
  125.     transition: transform .5s;
  126.     position: relative;
  127.    height: 100px;
  128.     width: 100px;
  129.    
  130.  
  131. }
  132. /*.memory-card: active{
  133. transform: scale(.97);
  134. transition: transform .2s;
  135. }*/
  136. .memory-card.flip{
  137.     transform: rotateY(180deg);
  138. }
  139.  
  140. .front-face,
  141. .back-face {
  142.     /*position: absolute;
  143.     width: 100%
  144.     height: 100%;
  145.     padding: 20px;
  146.     position: absolute;
  147.     backface-visibility: hidden;*/
  148.     position: absolute;
  149.     width: 100px;
  150.     height: 100px;
  151.     /*width: 120px;
  152.     height: 120px;*/
  153.     display: flex;
  154.     justify-content: center;
  155.     align-items: center;
  156.     padding: 20px;
  157.     backface-visibility: hidden;
  158.  
  159.     border-radius: 30px;
  160.     border width: 1px;
  161.     border border-style: solid;
  162.  
  163.   /* transition: transform 500ms ease-in-out;*/
  164.  
  165. }
  166. .front-face{
  167.     transform: rotateY(180deg);
  168.  
  169. }
  170. .back-face{
  171.     transform: translate(-20px);
  172.     transition: transform 100ms ease-in-out;
  173. }
  174.  
  175. .overlay-text{
  176.     display: none;
  177.     position: fixed;
  178.     top: 0;
  179.     left: 0;
  180.     right: 0;
  181.     bottom: 0;
  182.     justify-content: center;
  183.     align-items: center;
  184.     color: white;
  185.     font-family: cursive;
  186.     z-index: 100;
  187. }
  188. .overlay-text-small{
  189.     font-size: 0.3em;
  190. }
  191.  
  192. .overlay-text.visible
  193. {
  194.     display: flex;
  195.     flex-direction: column;
  196.     animation: overlay-grow 500ms forwards;
  197.  
  198.  
  199. }
  200.  
  201. @keyframes overlay-grow{
  202.     from{
  203.         background-color: black rgba(0,0,0,0);
  204.         font-size: 0;
  205.     }
  206.     to{
  207.         background-color: rgba(0,0,0,.8);
  208.         font-size:10em;
  209.     }
  210. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top