Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- *{
- padding: 0;
- margin: 0;
- box-sizing: border-box;
- }
- .panel
- {
- position: absolute;
- top: 50%;
- right: 10%;
- width:50px;
- justify-content: center;
- }
- .panel select
- {
- background:darkgray;
- color: papayawhip;
- width:250px;
- height: 50px;
- padding: 10px;
- border: none;
- font-size: 30px;
- box-shadow: 0 5px 25px rgba(0,0,0,0.5);
- }
- .panel:before
- {
- position: absolute;
- content: '';
- position: absolute;
- top: 0;
- right: 0;
- width: 50px;
- height: 50px;
- background: blueviolet;
- }
- .panel:hover::before
- {
- background: blue;
- }
- body {
- /*height: 100vh;
- background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(6019.jpg);
- display: flex;
- margin: auto;
- flex-wrap :wrap;
- background-origin: cover;
- background-size: unset;
- background-repeat: no-repeat;
- background-position: center;*/
- margin: 0 ;
- background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(6019.jpg);
- background-origin: cover;
- background-size: unset;
- background-repeat: no-repeat;
- background-position: center;
- }
- html
- {
- min-height: 100vh;
- }
- .game-container
- {
- display: grid;
- grid-template-columns: repeat(6,auto);
- grid-gap: 10px;
- /* grid-gap: 0.5px;*/
- justify-content: center;
- }
- .game-info-container
- {
- grid-column: 1 /-1;
- display: flex;
- justify-content: space-between;
- }
- .game-info
- {
- color: white;
- font-family: sans-serif;
- text-align: center;
- font font-weight: normal;
- font size: 3 em;
- }
- .page-title
- {
- color: white;
- font-family: myfnt,sans-serif;
- text-align: center;
- font font-weight: normal;
- font size: 6 em;
- }
- .memory-game{
- /*width: 700px;
- height: 700px;
- */
- /*
- width: 640px;
- height: 640px;
- */
- /* width: 600px;
- height: 300px;*/
- /*margin-left: 400px;*/
- margin: auto:
- /*margin: auto;
- display: flex;
- flex-wrap: wrap;
- */
- perspective: 1000px;
- }
- .memory-card {
- /*width: calc(25% - 10px);
- height: calc(33.333% - 10px);
- position: relative;
- margin: 5px;
- */
- margin: 5px;
- transform:scale(1);
- transform-style: preserve-3d;
- transition: transform .5s;
- position: relative;
- height: 100px;
- width: 100px;
- }
- /*.memory-card: active{
- transform: scale(.97);
- transition: transform .2s;
- }*/
- .memory-card.flip{
- transform: rotateY(180deg);
- }
- .front-face,
- .back-face {
- /*position: absolute;
- width: 100%
- height: 100%;
- padding: 20px;
- position: absolute;
- backface-visibility: hidden;*/
- position: absolute;
- width: 100px;
- height: 100px;
- /*width: 120px;
- height: 120px;*/
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 20px;
- backface-visibility: hidden;
- border-radius: 30px;
- border width: 1px;
- border border-style: solid;
- /* transition: transform 500ms ease-in-out;*/
- }
- .front-face{
- transform: rotateY(180deg);
- }
- .back-face{
- transform: translate(-20px);
- transition: transform 100ms ease-in-out;
- }
- .overlay-text{
- display: none;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- justify-content: center;
- align-items: center;
- color: white;
- font-family: cursive;
- z-index: 100;
- }
- .overlay-text-small{
- font-size: 0.3em;
- }
- .overlay-text.visible
- {
- display: flex;
- flex-direction: column;
- animation: overlay-grow 500ms forwards;
- }
- @keyframes overlay-grow{
- from{
- background-color: black rgba(0,0,0,0);
- font-size: 0;
- }
- to{
- background-color: rgba(0,0,0,.8);
- font-size:10em;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement