index.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Javascript Beginner Projects: Tic Tac Toe</title>
  5. <style>
  6. .header {
  7. font-size: 3em;
  8. color: white;
  9. background: #404040;
  10. text-align: center;
  11. height: 2.5em;
  12. text-shadow: 4px 4px 4px black;
  13. display: flex;
  14. justify-content: center;
  15. align-items: center;
  16. }
  17. .container {
  18. display: flex;
  19. justify-content: center;
  20. align-items: center;
  21. flex-direction: column;
  22. margin: 1em;
  23. }
  24. #description {
  25. font-size: 2em;
  26. color: white;
  27. height: 50px;
  28. text-shadow: 2px 2px 2px black;
  29. }
  30. .row {
  31. display: flex;
  32. flex-direction: row;
  33. justify-content: center;
  34. }
  35. .square {
  36. width: 192px;
  37. height: 192px;
  38. background: white;
  39. border-radius: 16px;
  40. border: 4px solid grey;
  41. margin: 4px;
  42. }
  43. .highlight {
  44. border-color: red;
  45. }
  46. body {
  47. background: #202020;
  48. margin: 0;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <div class="header">
  54. <span>Tic Tac Toe!</span>
  55. </div>
  56. <div class="container">
  57. <div id="description"></div>
  58. </div>
  59. <div id="rows">
  60. </div>
  61. <script src="main.js" type="module">
  62. </script>
  63. </body>
  64. </html>