Need help or advice? 1890 253 402
0
.wrapper { z-index:9999; height:auto; } body { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/xmas.jpg"); color: #fff; font-family: 'Oleo Script', cursive; padding: 20px; font-weight: 400; } ul { margin:0 auto 30px auto; padding:0; list-style-type:none; max-width:900px; width: 100%; text-align: center; user-select: none; } li { font-weight: 400; background-color: #fff; box-sizing: border-box; border-radius: 6px; display: inline-block; color:#111; cursor:pointer; font-size: 26px; padding:15px; margin:25px 12px; width: 130px; height:130px; line-height: 100px; text-align:center; position: relative; vertical-align:top; user-select: none; perspective: 800px; transition: all 0.4s ease-in-out; } ul li:last-child .door { font-size: 100px; width: 200px; height: 275px; line-height: 240px; } ul li:last-child .revealed { line-height: 123px; } .door { user-select: none; color:#fff; font-size: 70px; position: absolute; top:0; left:0; background-color: #91c1cc; box-sizing: border-box; border-top: 2px #eee dashed; border-right: 2px #eee dashed; border-bottom: 2px #eee dashed; border-left: 1px #eee solid; border-radius: 6px; padding:15px; width: 130px; height:130px; transform-origin: 0 40%; transition: all 0.4s ease-in-out; transform-style: preserve-3d; } .current .door { background-color: #7EAD44; } .current .door.open{ color: #7EAD44; } .revealed { user-select: none; } #message { box-sizing: border-box; color: #222; display: none; font-size: 24px; padding: 20px; background: #eddecb; max-width: 500px; width: 100%; border-radius: 15px; margin: 0 auto; } .open { box-shadow: 14px 0px 15px -1px rgba(0,0,0,0.2); color: #91c1cc; transform: rotate3d(0, 1, 0, -98deg); } .jiggle { animation: jiggle 0.2s infinite; transform: rotate(-1deg); } @keyframes jiggle { 0% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } } @media screen and (min-width: 480px) { li { margin:25px 20px; } } @media screen and (min-width: 768px) { body { background-size:150px; } p { right: 6%; top: 20%; bottom: auto; margin-left: auto; left: auto; } }

Merry Christmas

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25