diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 145dc18..b346653 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,7 @@ async src="https://www.googletagmanager.com/gtag/js?id=UA-113861388-2" > + +

Tic-Tac-Toe

Scoreboard

diff --git a/index.mjs b/index.mjs new file mode 100644 index 0000000..751683a --- /dev/null +++ b/index.mjs @@ -0,0 +1,8 @@ +let instuctions = document.querySelector(".popup-container"); +let startButtun = document.querySelector("#start-btn"); +let customContainer = document.querySelector(".container-custom"); + +startButtun.addEventListener("click", () =>{ + instuctions.style.display = "none"; + customContainer.style.display = "flex"; +}) \ No newline at end of file diff --git a/main.css b/main.css index 8934a8a..e29ca99 100644 --- a/main.css +++ b/main.css @@ -19,8 +19,16 @@ h1 { .right { text-align: right; } +.container-custom{ + display: none; +} +/* styling for instruction container */ +.popup-container{ + position: absolute; + width: 20%; +} /*****************************/ /* Styling For Menu */ diff --git a/style.css b/style.css index 9b6264d..afd4b92 100644 --- a/style.css +++ b/style.css @@ -4,12 +4,43 @@ box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } +.popup-container{ + position: absolute; + width: 50%; + display: block; + font-size: 1rem; + background-color: green; + margin:2% 20%; + line-height: 2.5rem; + padding: 1%; + color: #ffff; +} +.instructions{ + background-color: #fff; + color: #000; + padding: 4%; +} +.instructions h1{ + color: green; +} +#start-btn{ + margin: 2% 20%; + border: 2px solid green; + background-color: #fff; + color: green; + border-radius: 15px; + padding: 25px 90px; +} +#start-btn:hover{ + background-color: green; + color: #fff; +} .container-custom { /* border: 5px solid black; */ padding-top: 10px; min-height: 100vh; - display: flex; + display: none; flex-direction: column; align-items: center; justify-content: center;