diff --git a/data/index.html b/data/index.html new file mode 100644 index 00000000..f8a685c9 --- /dev/null +++ b/data/index.html @@ -0,0 +1,53 @@ + + + + + + + Codejam + + + +
+
+
+ card-1 + card-2 + card-3 + card-4 +
+
+ + + +
+
+ + result-img +
+ image-1 + image-2 + image-3 + image-4 + image-5 + image-6 + image-7 + image-8 + image-9 + image-10 + image-11 + image-12 + image-13 + image-14 + image-15 + image-16 + image-17 + image-18 +
+
+
+
+ + + + \ No newline at end of file diff --git a/data/style.css b/data/style.css new file mode 100644 index 00000000..dfcc1bbe --- /dev/null +++ b/data/style.css @@ -0,0 +1,95 @@ +body { + background: url(../assets/home.png); +} + +main { + padding: 15px; + display: flex; + justify-content: center; + align-items: center; +} + +.game { + width: 95%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.cards { + display: flex; + flex-direction: column; + justify-content: center; + gap: 20px; +} + +.img-button{ + width: 150px; + height: 200px; +} + +.img-button:hover { + cursor: pointer; +} + +.levels { + visibility: hidden; + display: flex; + flex-direction: column; + gap: 20px; +} + +.levels button { + width: 100px; + height: 50px; + border-radius: 10px; + border: none; + background-color: antiquewhite; +} + +.levels button:hover { + cursor: pointer; + background-color: greenyellow; +} + +.result { + display: flex; + flex-direction: column; + gap: 10px; +} + +.result-button { + visibility: hidden; + width: 150px; + height: 50px; + border-radius: 10px; + border: none; + background-color: khaki; +} + +.result-button:hover { + cursor: pointer; + background-color: greenyellow; +} + +.result-img { + visibility: hidden; + width: 150px; + height: 200px; +} + +.result-img:hover { + cursor: pointer; +} + +.images { + visibility: hidden; + position: relative; +} + +.images img { + width: 150px; + height: 200px; + position: absolute; + right: 0; +} \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 00000000..1d7552b1 --- /dev/null +++ b/script.js @@ -0,0 +1,24 @@ +const cardButton = document.querySelector('.cards'); +const popup = document.querySelector('.levels'); +const levelButton = document.querySelector('.level-1'); +const popup2 = document.querySelector('.result-button'); +const resultButton = document.querySelector('.result-button'); +const popup3 = document.querySelector('.result-img'); +const finish = document.querySelector('.images'); + +cardButton.addEventListener('click', () => { + popup.style.visibility = 'visible'; +}) + +levelButton.addEventListener('click', () => { + popup2.style.visibility = 'visible'; +}) + +resultButton.addEventListener('click', () => { + popup3.style.visibility= 'visible'; + resultButton.style.visibility = 'hidden'; +}) + +popup3.addEventListener('click', () => { + finish.style.visibility = 'visible'; +}) \ No newline at end of file