Scribd
Upload
23 views2 pages

Styles Css

The document contains CSS styles for a Tic-Tac-Toe game interface. It includes styles for the body background, game container, board layout, cells, buttons, and a result screen. The design features a linear gradient background and responsive elements for user interaction.

Uploaded by

sparshagrawal2698
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
23 views2 pages

Styles Css

The document contains CSS styles for a Tic-Tac-Toe game interface. It includes styles for the body background, game container, board layout, cells, buttons, and a result screen. The design features a linear gradient background and responsive elements for user interaction.

Uploaded by

sparshagrawal2698
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

/* Background with linear gradient */

body {
text-align: center;
font-family: Arial, sans-serif;
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}

/* Game Container */
.game-container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Tic-Tac-Toe Board */
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 5px;
justify-content: center;
margin: 20px auto;
}

.cell {
width: 100px;
height: 100px;
background-color: #f2f2f2;
border: 2px solid #333;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}

.cell.taken {
pointer-events: none;
}

/* Buttons */
button {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
background: #ff758c;
color: white;
border: none;
border-radius: 5px;
transition: 0.3s;
}

button:hover {
background: #ff5274;
}

/* Result Screen */
.result-screen {
display: none;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
text-align: center;
}

You might also like