diff --git a/2048.css b/2048.css new file mode 100644 index 0000000..c8a3573 --- /dev/null +++ b/2048.css @@ -0,0 +1,104 @@ +body { + background-color: black; + color: white; /* opsional, biar teks tetap terlihat */ + font-family: Arial, Helvetica, sans-serif; + text-align: center; +} + +hr { + width: 500px; +} + +#board { + width: 400px; + height: 400px; + background-color: black; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(4, 1fr); + gap: 5px; + padding: 10px; + box-sizing: border-box; + border: 2px solid red; + box-shadow: 0 0 20px red, 0 0 40px red, 0 0 60px red; + border-radius: 15px; +} + +.tile { + font-size: 40px; + font-weight: bold; + display: flex; + justify-content: center; + align-items: center; + background-color: white; + border-radius: 15px; +} + + +/* colored tiles */ + +.x2 { + background-color: #eee4da; + color: #727371; +} + +.x4 { + background-color: #ece0ca; + color: #727371; +} + +.x8 { + background-color: #f4b17a; + color: white; +} + +.x16{ + background-color: #f59575; + color: white; +} + +.x32{ + background-color: #f57c5f; + color: white; +} + +.x64{ + background-color: #f65d3b; + color: white; +} + +.x128{ + background-color: #edce71; + color: white; +} + +.x256{ + background-color: #edcc63; + color: white; +} + +.x512{ + background-color: #edc651; + color: white; +} + +.x1024{ + background-color: #eec744; + color: white; +} + +.x2048{ + background-color: #ecc230; + color: white; +} + +.x4096 { + background-color: #fe3d3d; + color: white; +} + +.x8192 { + background-color: #ff2020; + color: white; +} \ No newline at end of file