add game board design

HuiGong-dev · Jan 9, 2022 · 1502ea5 · 1502ea5
1 parent 4151032
commit 1502ea5
Show file tree

Hide file tree

Showing 2 changed files with 249 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Tic Tac Toe</title>
+ <!-- font aswsome for icons -->
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+ integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
+ crossorigin="anonymous" referrerpolicy="no-referrer" />
+ <!-- google fonts -->
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link
+ href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&family=Source+Code+Pro:wght@400;900&family=Source+Sans+Pro:wght@300;900&display=swap"
+ rel="stylesheet">
+ <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+ <div class="container">
+ <div class="top-status-bar">
+ <div class="logo">
+ <i class="fa-solid fa-xmark"></i>
+ <i class="fa-solid fa-circle-dot"></i>
+ </div>
+ <div class="turn-indicator">
+ <i class="fa-solid fa-xmark turn-indicator__icon"></i>
+ <span class="turn-indicator__text">TURN</span>
+ </div>
+ <div class="restart-button">
+ <a href=""><i class="fas fa-redo"></i></a>
+ </div>
+ </div>
+ <div class="board">
+ <div class="cell" data-cell></div>
+ <div class="cell" data-cell></div>
+ <div class="cell" data-cell></div>
+ <div class="cell" data-cell></div>
+ <div class="cell" data-cell></div>
+ <div class="cell" data-cell></div>
+ <div class="cell" data-cell></div>
+ <div class="cell" data-cell></div>
+ <div class="cell" data-cell></div>
+ </div>
+ <div class="bottom-status-bar">
+ <div class="x-wins-count"></div>
+ <div class="tie-count"></div>
+ <div class="o-wins-count"></div>
+ </div>
+ </div>
+
+</body>
+
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,192 @@
+*,
+*::before,
+*::after {
+ box-sizing: border-box !important;
+}
+
+/* Custom Properties */
+
+:root {
+ --clr-cyan: #38C0C0;
+ --clr-yellow: #F2B237;
+ --clr-shalowdark: #1A2B33;
+ --clr-lightdark: #1F3540;
+ --clr-grey: #a2aaad;
+
+ --ff-primary: 'Lato', sans-serif;
+ --ff-secondary:'Source Code Pro', monospace;
+ --ff-tertiary: 'Source Sans Pro', sans-serif;
+
+
+ --bs: 0 10px 20px rgba(0,0,0,0.19),
+ 0 6px 6px rgba(0,0,0,0.23);
+
+ --cell-size: 100px;
+ --mark-size: calc(var(--cell-size) * 0.9);
+
+ --status-bar-height: 60px;
+ --cell-margin: 0.5em;
+}
+
+body {
+ margin: 0;
+ height: 100vh;
+ background: var(--clr-shalowdark);
+ display: grid;
+ justify-content: center;
+ align-content: center;
+ justify-items: center;
+ align-items: center;
+
+
+ border:var(--clr-cyan) solid;
+}
+
+.container {
+
+ display: grid;
+ justify-content: center;
+ align-content: center;
+ justify-items: center;
+ align-items: center;
+
+
+ /* border:var(--clr-cyan) solid; */
+}
+
+/* top status bar */
+
+.top-status-bar,
+.bottom-status-bar {
+ height: var(--status-bar-height);
+ display: grid;
+ grid-template-columns: repeat(3, auto);
+}
+
+.logo,
+.turn-indicator,
+.restart-button {
+ width: var(--cell-size);
+ margin:var(--cell-margin);
+ border-radius: 8px;
+}
+
+.logo {
+ display: flex;
+ justify-content: flex-start;
+ align-items:center;
+
+}
+
+.logo .fa-xmark {
+ color: var(--clr-cyan);
+ font-size: calc(var(--status-bar-height) * 0.6);
+ font-weight: bolder ;
+}
+
+.logo .fa-circle-dot {
+ color: var(--clr-yellow);
+ font-size: calc(var(--status-bar-height) * 0.425);
+
+ padding-left: 0.15em;
+
+}
+
+.turn-indicator {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: var(--ff-primary);
+ color: var(--clr-grey);
+ /* height: calc(var(--status-bar-height) * 0.6); */
+ background: var(--clr-lightdark);
+ box-shadow: var(--bs);
+}
+.turn-indicator__icon {
+ font-size: larger;
+ font-weight: bolder;
+}
+
+.turn-indicator__text {
+ padding-left: 0.5em;
+ font-size: small;
+}
+
+
+
+.restart-button {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+
+}
+.restart-button a{
+ text-decoration: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: var(--clr-grey);
+ box-shadow: var(--bs);
+ padding: 5px;
+ border-radius: 5px;
+ height: calc(var(--status-bar-height) * 0.6);
+ width: calc(var(--status-bar-height) * 0.6);
+}
+.fa-redo{
+ color: var(--clr-shalowdark);
+}
+
+
+/* bottom status bar */
+
+.x-wins-count,
+.tie-count,
+.o-wins-count {
+ width: var(--cell-size);
+ margin:var(--cell-margin);
+ border-radius: 8px;
+ box-shadow: var(--bs);
+}
+
+.x-wins-count {
+ background: var(--clr-cyan);
+}
+
+.tie-count {
+ background: var(--clr-grey);
+}
+
+.o-wins-count {
+ background: var(--clr-yellow);
+}
+
+
+
+/* game board and cells */
+
+.board {
+ display: grid;
+ justify-content: center;
+ align-content: center;
+ justify-items: center;
+ align-items: center;
+ grid-template-columns: repeat(3, auto);
+
+ border: none;
+}
+
+.cell {
+ width: var(--cell-size);
+ height: var(--cell-size);
+ border: none;
+ box-shadow: var(--bs);
+ background: var(--clr-lightdark);
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ cursor: pointer;
+ border-radius: 10%;
+ margin: var(--cell-margin);
+}