Welcome to CODEBOX! (Copy 1584) (Copy 1598) (Copy ..
✨ นายณัฐภัทร วัฒนพิทักษ์พงศ์
<html lang="en"> <head> <style>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500&display=swap'); /*? GLOBAL */ :root { --mainBgColor: #f3f3f3; --secondaryBgColor: #fff; --hoverColor: #f5465d; --mainTextColor: #444; } * { font-family: 'Poppins', sans-serif; font-weight: 200; margin: 0; padding: 0; box-sizing: border-box; color: var(--mainTextColor); } body { background-color: var(--mainBgColor); height: 100vh; display: grid; place-items: center; } h1 { text-align: center; margin-bottom: 1rem; } /*? CONTAINER */ .wrapper { background-color: var(--secondaryBgColor); border-radius: 25px; padding: 2rem; box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66); -webkit-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66); -moz-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66); display: grid; grid-template-columns: 1fr 1fr; position: relative; } /*? PLAYER */ .player { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; } .player button { margin: 1rem; border: none; } .player-option { padding: 1.5rem 1.5rem; border-radius: 25px; cursor: pointer; transform: rotate(90deg); } .option-rock { background: linear-gradient(to top left, #e52a5a, #ff585f); grid-column: span 2; justify-self: center; } .option-rock:hover { background: linear-gradient(to bottom right, #e52a5a, #ff585f); } .option-paper { background: linear-gradient(to top left, #39b385, #9be15d); } .option-paper:hover { background: linear-gradient(to bottom right, #39b385, #9be15d); } .option-scissor { background: linear-gradient(to top left, #ffb003, #ffcb03); transform: rotate(180deg); transform: scale(-1, 1); } .option-scissor:hover { background: linear-gradient(to bottom right, #ffb003, #ffcb03); } /*? COMPUTER */ .computer { display: grid; place-content: center; border-left: 1px solid var(--mainTextColor); } .computer-option { padding: 1.5rem 1.5rem; border-radius: 25px; background: linear-gradient(to top left, #c8c8c8, #a8a7a7); height: 10rem; width: 10rem; } /*? NEXT GAME */ #next-round { margin-top: 1rem; padding: 0.5rem; border-radius: 10px; border: 2px solid var(--mainTextColor); outline: none; cursor: pointer; font-size: 1rem; background: linear-gradient(to top left, #ffb003, #ffcb03); } #next-round:hover { background: linear-gradient(to bottom right, #ffb003, #ffcb03); } .message { position: absolute; top: 1rem; left: 50%; transform: translate(-50%); background-color: var(--secondaryBgColor); border-radius: 25px; font-size: 2rem; padding: 1rem; box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66); -webkit-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66); -moz-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66); opacity: 0; transition: opacity 0.3s; } </style> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css" /> <script defer src="main.js"></script> <title>Rock-Paper-Scissors</title> </head> <body> <div class="container"> <h1>Rock-Paper-Scissors</h1> <div class="wrapper"> <div class="message"></div> <div class="player"> <button class="player-option option-rock" data-options="rock"> <div class="rock-wrapper"> <i class="far fa-hand-rock fa-7x"></i> </div> </button> <button class="player-option option-paper" data-options="paper"> <i class="far fa-hand-paper fa-7x"></i> </button> <button class="player-option option-scissor" data-options="scissors"> <i class="far fa-hand-scissors fa-7x"></i> </button> </div> <div class="computer"> <div class="computer-option"></div> </div> </div> <button id="next-round">Next Round</button> </div> </body> </html>