diff --git a/README.md b/README.md new file mode 100644 index 0000000..194a890 --- /dev/null +++ b/README.md @@ -0,0 +1,34 @@ +# Tic Tac Toe +A simple game of Tic Tac Toe created using HTML, CSS, and JavaScript. + +## Live Demo + +You can try out the live version of the application here: https://mitgajera.github.io/Tic-Tac-Toe + +## Features + +* Play as X or O +* Try to get three in a row +* Easy to use interface + +## Technologies Used + +* HTML +* CSS +* JavaScript + +## How it Works + +1. Click on a square to place your piece +2. Try to get three in a row +3. If all squares are filled and no one has won, the game is a draw + +## Future Development + +* Add more features to the game +* Implement a more robust game logic +* Improve the user interface and user experience + +## Contributing + +If you'd like to contribute to this project, please fork the repository and submit a pull request. All contributions are welcome. \ No newline at end of file diff --git a/style.css b/style.css index 99abc41..4417913 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,4 @@ +<<<<<<< HEAD * { margin: 0; padding: 0; @@ -70,4 +71,174 @@ h1{ color: white; margin-left: 15px; background-color: rgb(0, 0, 0) +======= +* { + margin: 0; + padding: 0; +} + +body { + background-color: blanchedalmond; + font-family: "Poppins", sans-serif; + font-weight: 100; + font-style: normal; +} + +h1 { + text-align: center; + margin-top: 150px; + margin-right: 30px; +} + +.container { + height: 60vh; + display: flex; + text-align: center; + justify-content: center; + margin-top: 55px; + +} + +.game { + height: 40vmin; + width: 50vmin; + display: flex; + flex-wrap: wrap; + gap: 5px; +} + +.box { + height: 15vmin; + width: 15vmin; + border-radius: 5px; + border: none; + background-color: rgb(255, 215, 146); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); + font-size: 45px; + color: red; +} + +.reset { + display: flex; + justify-content: center; + margin-top: -50px; + margin-left: -30px; +} + +.reset #reset-btn { + padding: 7px 20px; + border-radius: 5px; + border: none; + font-size: 15px; + cursor: pointer; + color: white; + background-color: rgb(219, 186, 129) +} + +.reset #ng-btn { + padding: 8px 20px; + border-radius: 5px; + border: none; + font-size: 15px; + cursor: pointer; + color: white; + margin-left: 15px; + background-color: rgb(0, 0, 0) +} + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .container { + height: 65vh; + } + + .game { + height: 45vmin; + width: 55vmin; + } + + .box { + height: 18vmin; + width: 18vmin; + } +} + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .container { + height: 60vh; + } + + .game { + height: 40vmin; + width: 50vmin; + } + + .box { + height: 15vmin; + width: 15vmin; + } +} + +@media only screen and (max-width: 767px) { + .container { + display: flex; + justify-content: center; + height: 20vh; + } + + h1 { + display: flex; + justify-content: center; + margin-top: 150px; + margin-right: 4px; + } + + .game { + display: flex; + justify-content: center; + width: 80vmin; + } + + .box { + height: 20vmin; + width: 20vmin; + } + + .reset { + display: flex; + justify-content: center; + margin-left: 5px; + } +} + +@media only screen and (min-width: 360px) { + .container { + display: flex; + justify-content: center; + height: 50vh; + } + + h1 { + display: flex; + justify-content: center; + margin-top: 150px; + margin-right: 4px; + } + + .game { + display: flex; + justify-content: center; + width: 80vmin; + } + + .box { + height: 20vmin; + width: 20vmin; + } + + .reset { + display: flex; + justify-content: center; + margin-left: 5px; + } +>>>>>>> b352cd0 ("Updated CSS styling for various elements, including h1, container, game, box, and reset, with added media queries for responsive design.") } \ No newline at end of file