diff --git a/README.md b/README.md new file mode 100644 index 0000000..5d2bbe7 --- /dev/null +++ b/README.md @@ -0,0 +1,26 @@ +[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-24ddc0f5d75046c5622901739e7c5dd533143b0c8e959d652212380cedb1ea36.svg)](https://classroom.github.com/a/poMAp5Go) + +This repository contains all the files necessary for a online Jigsaw Puzzle game. The website can be found at: + +https://birkbeck2.github.io/web-project-adeledsg/index.html + +This online game was made in the context of a homework assignment and is not for commercial use. It is submitted along a report via Turnitin. + +# File content +The following HTML and Javascript files are used to create the game: + +| File | Content | +| --- | --- | +| `index.html` | Landing page | +| `puzzle1.html` | Game 1 - 2x2 Puzzle | +| `puzzle2.html` | Game 2 - 3x3 Puzzle | +| `puzzle3.html` | Game 3 - 4x4 Puzzle | +| `interactive1.js` | Javascript for Puzzle 1 | +| `interactive2.js` | Javascript for Puzzle 2 | +| `interactive13.js` | Javascript for Puzzle 3 | + +Additionally, a global stylesheet entitled `style.css` is used to set styles for all four HTML pages above. + +Detailed comments providing explanation on implementation details, the files' structure, and references are mainly included in interactive1.js and style.CSS. As interactive2.js and intercative3.js follow the exact same logic, no further comments have been provided. + +All images (individual puzzle pieces) can be found in either the `puzzle1`, `puzzle2`, or `puzzle3` folder. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..3968f5b --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + Jigsaw Puzzle + + + + + +
+ +
+
+
+

Pick a jigsaw to complete

+ +
+
+ + diff --git a/interactive1.js b/interactive1.js new file mode 100644 index 0000000..8ecbce5 --- /dev/null +++ b/interactive1.js @@ -0,0 +1,226 @@ +// I. Dynamically creating 4 div (box for the pieces) within my Puzzle container and then the img element within each div. +let puzzleContainer = document.getElementById("puzzle-container"); + +function creatingGrid() { //2*2 puzzle + let rows = 2; + let columns = 2; + + for(let i=0; i aka they are they correctly placed + if (currentDrop !== dropId) { + allCorrect = false; + } + } + + if (allPlaced && !allCorrect) {// All pieces are placed, but some are wrong + setTimeout(() => { + alert("You are almost there! But some pieces are in the wrong place."); + }, 500); // Delay to allow for the puzzle to be visually completed before showing the message + } else if (allPlaced && allCorrect) { // All pieces are placed correctly + Array.from(dropZone).forEach(function(drop){ //purely aesthetics considerations, otherwise, we would see the borders + drop.style.border = "none"; + }) + setTimeout(() => { + alert("Congratulations! You completed the puzzle."); + }, 500); + } + + return true; +} \ No newline at end of file diff --git a/interactive2.js b/interactive2.js new file mode 100644 index 0000000..9f917e4 --- /dev/null +++ b/interactive2.js @@ -0,0 +1,250 @@ +// 3*3 puzzle grid + +let puzzleContainer = document.getElementById("puzzle-container"); + +function creatingGrid() { //3*3 puzzle + let rows = 3; + let columns = 3; + + for(let i=0; i { + alert("You are almost there! But some pieces are in the wrong place."); + }, 500); + } else if (allPlaced && allCorrect) { + Array.from(dropZone).forEach(function(drop){ + drop.style.border = "none"; + }) + setTimeout(() => { + alert("Congratulations! You completed the puzzle."); + }, 500); + } + + return true; +} diff --git a/interactive3.js b/interactive3.js new file mode 100644 index 0000000..c7ac737 --- /dev/null +++ b/interactive3.js @@ -0,0 +1,297 @@ +// 4*4 puzzle grid + +let puzzleContainer = document.getElementById("puzzle-container"); + +function creatingGrid() { //4*4 puzzle + let rows = 4; + let columns = 4; + + for(let i=0; i { + alert("You are almost there! But some pieces are in the wrong place."); + }, 500); + } else if (allPlaced && allCorrect) { + Array.from(dropZone).forEach(function(drop){ + drop.style.border = "none"; + }) + setTimeout(() => { + alert("Congratulations! You completed the puzzle."); + }, 500); + } + + return true; +} \ No newline at end of file diff --git a/puzzle1.html b/puzzle1.html new file mode 100644 index 0000000..1b725fe --- /dev/null +++ b/puzzle1.html @@ -0,0 +1,28 @@ + + + + + + Jigsaw Puzzle + + + + + + +
+
+

Puzzle 1

+
    +
    • +
    • +
  • Leave
    • +
+
+
+
+
+
+
+ + diff --git a/puzzle1/full-image.jpg b/puzzle1/full-image.jpg new file mode 100644 index 0000000..d2690e7 Binary files /dev/null and b/puzzle1/full-image.jpg differ diff --git a/puzzle1/piece1.png b/puzzle1/piece1.png new file mode 100644 index 0000000..334c712 Binary files /dev/null and b/puzzle1/piece1.png differ diff --git a/puzzle1/piece2.png b/puzzle1/piece2.png new file mode 100644 index 0000000..6d21caa Binary files /dev/null and b/puzzle1/piece2.png differ diff --git a/puzzle1/piece3.png b/puzzle1/piece3.png new file mode 100644 index 0000000..359cefa Binary files /dev/null and b/puzzle1/piece3.png differ diff --git a/puzzle1/piece4.png b/puzzle1/piece4.png new file mode 100644 index 0000000..b083d5e Binary files /dev/null and b/puzzle1/piece4.png differ diff --git a/puzzle2.html b/puzzle2.html new file mode 100644 index 0000000..981efe6 --- /dev/null +++ b/puzzle2.html @@ -0,0 +1,28 @@ + + + + + + Jigsaw Puzzle + + + + + + +
+
+

Puzzle 2

+
    +
    • +
    • +
  • Leave
    • +
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/puzzle2/IMG_0529.jpg b/puzzle2/IMG_0529.jpg new file mode 100644 index 0000000..d703b82 Binary files /dev/null and b/puzzle2/IMG_0529.jpg differ diff --git a/puzzle2/IMG_0529.jpg:Zone.Identifier b/puzzle2/IMG_0529.jpg:Zone.Identifier new file mode 100644 index 0000000..6703eae --- /dev/null +++ b/puzzle2/IMG_0529.jpg:Zone.Identifier @@ -0,0 +1,4 @@ +[ZoneTransfer] +ZoneId=3 +ReferrerUrl=https://mail.google.com/ +HostUrl=https://mail-attachment.googleusercontent.com/attachment/u/1/?ui=2&ik=08aadfbd9b&attid=0.3&permmsgid=msg-f:1795877045770611679&th=18ec3ca87d6f6bdf&view=att&disp=safe&saddbat=ANGjdJ_tMuaSwu-6ndqFDZy7itx7pc-t4n67bVwOIwhD3i7EgIZPCNVqxX53eHAkjwpQZSVOUqdqDvY9yCecIwb5yOk-HrPOJ_WWD8ZIxjJUc9GYsnAibPJexkX3Cr9EMkWEVyqXjEwwWyfl4FgyIudB59xhxuTLAj2wh4LlXe-oiHvz4ppmqDtCPyy1QWVzgkhtQvlxyg7qQhp56N26McF-KOxvtbim61awIDX9trMv8JCkueC5IBO0GKd5fnPl6LTVpvDQKrISMdSBcPeZZYrxfk56NBuroCKY1fF0R3LF6iG0WgnXBbzht1b8hfCehcoepW-ZXWPYpRp08xNBOOY3QFChEMPQAhdNnT0YGa4ZTcPW19jyJljzQ2Wi8KfhOOuXWzpAF_5WmAPKbpWrK2hXXx21_zzp0eOGj1-ThxCTTDqtep34Q4LDkmA14yYX-8bo7wV_czRaW1eCAUnOixLbILNQBz2LuBt7oztzuW3ijuCenglxTHPULXLt24zQu-MPV6k9bDjI9cOvWZKWqhD8OQFejlNki5Y-qEim6XzfuqoNXgTEdPHPj1OP0ZFqCiKX4wNDvVZvieoOZjFmJMqfePy7dsK71TqCaQ8MVSnybh1LXEKz8j7ZqBMIDHgfH8mUlOYk-tb6C99U57OqdyzCfEOmfQS9RsSTMpsc0asRQ7OWlOhBO94PVkVO0h4T3-xrMryo3lhbzq35IFhwjKCWkWi_HXpvXaAsAj27CC-us1A3yfSg_hw0ABWauGJ1YJuy1rrF5Zfa4F4YR8xXfKuBq1a0Mxk-hIiniaPSCTtU6rZkEa9xkW_r4FRSqagcZF2QsbDtp57S_XBmSHs0RekRCv5-lI4F1Kh_5RNyF-Tg1rO6_jBiAJWeGhWVmGLKy8wD7eEgt6raKfVxuQnHQFAV3vltwMvRhkGv9Z2SH2A3jJMs1XZMkPoSXvOvQFj0LYMsM9dEDdjlyqhdAh3rYA9GTGXsvSn0EzW3BBMDcBqZM5-xTwP0Hh0QlNGpmk-OWozFp5_XM0HjZ4xLe20WQNZ1jlG2esseLSYG46O7Qw diff --git a/puzzle2/Piece1.png b/puzzle2/Piece1.png new file mode 100644 index 0000000..b12690a Binary files /dev/null and b/puzzle2/Piece1.png differ diff --git a/puzzle2/Piece2.png b/puzzle2/Piece2.png new file mode 100644 index 0000000..bc1e05b Binary files /dev/null and b/puzzle2/Piece2.png differ diff --git a/puzzle2/Piece3.png b/puzzle2/Piece3.png new file mode 100644 index 0000000..905b54f Binary files /dev/null and b/puzzle2/Piece3.png differ diff --git a/puzzle2/Piece4.png b/puzzle2/Piece4.png new file mode 100644 index 0000000..3413509 Binary files /dev/null and b/puzzle2/Piece4.png differ diff --git a/puzzle2/Piece5.png b/puzzle2/Piece5.png new file mode 100644 index 0000000..8b944d8 Binary files /dev/null and b/puzzle2/Piece5.png differ diff --git a/puzzle2/Piece6.png b/puzzle2/Piece6.png new file mode 100644 index 0000000..c82ce16 Binary files /dev/null and b/puzzle2/Piece6.png differ diff --git a/puzzle2/Piece7.png b/puzzle2/Piece7.png new file mode 100644 index 0000000..78ae3a5 Binary files /dev/null and b/puzzle2/Piece7.png differ diff --git a/puzzle2/Piece8.png b/puzzle2/Piece8.png new file mode 100644 index 0000000..8bf5674 Binary files /dev/null and b/puzzle2/Piece8.png differ diff --git a/puzzle2/Piece9.png b/puzzle2/Piece9.png new file mode 100644 index 0000000..8b7a2ef Binary files /dev/null and b/puzzle2/Piece9.png differ diff --git a/puzzle3.html b/puzzle3.html new file mode 100644 index 0000000..6f600fe --- /dev/null +++ b/puzzle3.html @@ -0,0 +1,29 @@ + + + + + + Jigsaw Puzzle + + + + + + + +
+
+

Puzzle 3

+
    +
    • +
    • +
  • Leave
    • +
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/puzzle3/IMG_0526.jpg b/puzzle3/IMG_0526.jpg new file mode 100644 index 0000000..1253f58 Binary files /dev/null and b/puzzle3/IMG_0526.jpg differ diff --git a/puzzle3/IMG_0526.jpg:Zone.Identifier b/puzzle3/IMG_0526.jpg:Zone.Identifier new file mode 100644 index 0000000..ab2a507 --- /dev/null +++ b/puzzle3/IMG_0526.jpg:Zone.Identifier @@ -0,0 +1,4 @@ +[ZoneTransfer] +ZoneId=3 +ReferrerUrl=https://mail.google.com/ +HostUrl=https://mail-attachment.googleusercontent.com/attachment/u/1/?ui=2&ik=08aadfbd9b&attid=0.1&permmsgid=msg-f:1795877045770611679&th=18ec3ca87d6f6bdf&view=att&disp=safe&saddbat=ANGjdJ_qs2tN6Z39uf7SP6UaFtEFZxH3pB0ugJvnxH274eBO_hKAHqC4TbO02wjkHcEwtF_ApIQPprmn33Ul2xPPzN3E8ezCH9kXZc7KEbO2DySrCgBZaCT6TGzz9JmvJxPLGBCjkc3ShH1fV3GjrWdTz0zlSvqbJKrZ-r5Qt-pIGs9KLKblLrnlkBbnfmkHOArpn9i_pzeE4p_U2Yv1unGFy08NImUVRv0o7fixM9f0kRBTMBJu3XyKMde9Tl709tVBUR2GkKV-h4VSzKQ3C9M0YnliJ8AWeAaAqcXaFP1gF8lNH_dkzvX0wS7WFb8fl9qZcrD3sndGHqRKroF2quF9OrWzh9gechZnRRjOdE8unrlgDTWbQ8aT3Vs2GdoHJQXoPwG--xbzgoO7ZkeCrcm7auxkT5PI5up0Lok_aYPAh0m616I_rgel7qfVYwRRp1J4tErurDXE3tMp3Q1DgXONOBCBY_TnthehoBBdNCpY5IgfmsUs9Fq9GhbuTYneAx2S5iaWoY34Fun4bpL5JMn5hQOAlyxpTge5m9wR493MwmZObgVKaTnbzTvIqEXZU-BI3xzLprW6yjpr2muTFmT8XXtPUNOoi4g4_VovlCrbjc6pwj3fDJwmWKFvrWu-I13MYbKPh4yVqj7kaXHnvpoUFbM3f_YFN7M0lCvR_cey6vGmwiu-uZYkQDND9Fu2dsmP0LEYtQ_-OulAIxqB0LWbVqBBK24G0INqBiRLoApWWQTTzDG3uWBIuC0GY8kHdeJ1d8WORi4VpoKlphlRDb2Fid9h30vSLT-kbcz8nJ-UrWtfX-EusVlAYeQgvSqNeiwVM761puF-t9RPfJaMeVJqf2FV6v4b-i6pkMlMilJYjmVjrxwIXhyL-MUGSLmzacJxqdF_Xr7aIYngCn_y-X48TDUOCPHV2_mLp6R54Ok9r9PXXYBwbdbsSGViE4NTORHnSTmWG0K29ts9jzkts6q3_TBHI6n8hgYSmqR4fZdsoXIOSjmQyPU39Sgf2pCt_Lm6OuNhcStOjafRILFU-Hf32wz-Vox391EDmYoq7A diff --git a/puzzle3/piece1.png b/puzzle3/piece1.png new file mode 100644 index 0000000..3a4eb06 Binary files /dev/null and b/puzzle3/piece1.png differ diff --git a/puzzle3/piece10.png b/puzzle3/piece10.png new file mode 100644 index 0000000..45f44aa Binary files /dev/null and b/puzzle3/piece10.png differ diff --git a/puzzle3/piece11.png b/puzzle3/piece11.png new file mode 100644 index 0000000..139a6dd Binary files /dev/null and b/puzzle3/piece11.png differ diff --git a/puzzle3/piece12.png b/puzzle3/piece12.png new file mode 100644 index 0000000..ee3a30c Binary files /dev/null and b/puzzle3/piece12.png differ diff --git a/puzzle3/piece13.png b/puzzle3/piece13.png new file mode 100644 index 0000000..46ea13a Binary files /dev/null and b/puzzle3/piece13.png differ diff --git a/puzzle3/piece14.png b/puzzle3/piece14.png new file mode 100644 index 0000000..cefb163 Binary files /dev/null and b/puzzle3/piece14.png differ diff --git a/puzzle3/piece15.png b/puzzle3/piece15.png new file mode 100644 index 0000000..cbb9722 Binary files /dev/null and b/puzzle3/piece15.png differ diff --git a/puzzle3/piece16.png b/puzzle3/piece16.png new file mode 100644 index 0000000..7bb352c Binary files /dev/null and b/puzzle3/piece16.png differ diff --git a/puzzle3/piece2.png b/puzzle3/piece2.png new file mode 100644 index 0000000..412b191 Binary files /dev/null and b/puzzle3/piece2.png differ diff --git a/puzzle3/piece3.png b/puzzle3/piece3.png new file mode 100644 index 0000000..c08224b Binary files /dev/null and b/puzzle3/piece3.png differ diff --git a/puzzle3/piece4.png b/puzzle3/piece4.png new file mode 100644 index 0000000..02ce1e2 Binary files /dev/null and b/puzzle3/piece4.png differ diff --git a/puzzle3/piece5.png b/puzzle3/piece5.png new file mode 100644 index 0000000..72c9292 Binary files /dev/null and b/puzzle3/piece5.png differ diff --git a/puzzle3/piece6.png b/puzzle3/piece6.png new file mode 100644 index 0000000..05ece07 Binary files /dev/null and b/puzzle3/piece6.png differ diff --git a/puzzle3/piece7.png b/puzzle3/piece7.png new file mode 100644 index 0000000..f60f8a6 Binary files /dev/null and b/puzzle3/piece7.png differ diff --git a/puzzle3/piece8.png b/puzzle3/piece8.png new file mode 100644 index 0000000..5053c02 Binary files /dev/null and b/puzzle3/piece8.png differ diff --git a/puzzle3/piece9.png b/puzzle3/piece9.png new file mode 100644 index 0000000..e59b927 Binary files /dev/null and b/puzzle3/piece9.png differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..3fe4b70 --- /dev/null +++ b/style.css @@ -0,0 +1,2496 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-size: 16px; + font-family: Helvetica, Arial, sans-serif +} + +body, main { + width: 100%; + min-height: 100vh; + display: flex; + align-items: center; /* Centered children horizontally */ + justify-content: space-around; + background-color: silver; +} + +h1 { + display: flex; + justify-content: center; + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 2rem; + margin-bottom: 2%; + color: #333; +} + +.button{ + padding: 10px 20px; + color: #333; + text-align: center; + text-decoration: none; + display: inline-block; + margin: 5% 5% 5% 5%; + border: none; + border-radius: 4px; +} + +#puzzle1{ + background-color: #90EE90; +} + +#puzzle2{ + background-color: #FFA07A; +} + +#puzzle3{ + background-color: #FF6347; +} + +#leave { + background-color: #4682B4; +} + +#buttons { + display: flex; + justify-content: center; + list-style-type: none; + gap: 2px; +} + +#start { + display: flex; + justify-content: center; + list-style-type: none; + padding: 10px 20px; + color: #333; + text-align: center; + text-decoration: none; + display: inline-block; + margin: 5% 5% 5% 5%; + border: none; + border-radius: 4px; + background-color: #D8BFD8; +} + +#reset { + display: none; + list-style-type: none; + padding: 10px 20px; + color: #333; + text-align: center; + text-decoration: none; + margin: 5% 5% 5% 5%; + border: none; + border-radius: 4px; + background-color: #D8BFD8; +} + +.button:hover, .button:focus { + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0,0,0,0.2); +} + +button:hover, button:focus { + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0,0,0,0.2); +} + +@media (max-width: 767px) and (orientation: portrait) { /*Orientation property: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation*/ + +#containers{ /*All puzzles*/ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 90vw; + height: 80vh; + border-radius: 20px; + gap: 2vh; +} + +#piece-container{ /*All puzzles*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 70%; /*For all media queries, I toogled width and height each time until i was visually satisfied*/ + height: calc(50% - 1vh); /*For all media queries, I toogled width and height each time until i was visually satisfied*/ + border: 1px solid black; + position: relative; +} + +#puzzle-container{ /*All puzzles*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 70%; /*For all media queries, I toogled width and height each time until i was visually satisfied*/ + height: calc(50% - 1vh); /*For all media queries, I toogled width and height each time until i was visually satisfied*/ + border: 1px solid black; + position: relative; +} + +.piece{ /*Puzzle 1*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: 50%; +} + +.piece2{ /*Puzzle 2*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 33.33%; + height: 33.33%; +} + +.piece3{ /*Puzzle 3*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 25%; + height: 25%; +} + +.drop-zone{ /*Puzzle 1*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: 50%; +} + +.drop-zone2{ /*Puzzle 2*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 33.33%; + height: 33.33%; +} + +.drop-zone3{ /*Puzzle 3*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 25%; + height: 25%; +} + +/*Puzzle 1*/ +#img0{ + position: relative; + width: 100%; + height: 120%; + z-index: 2; +} +#img1{ + position: relative; + width: 117%; + height: 103%; + left: -17%; + z-index: 2; +} +#img2{ + position: relative; + width: 116.5%; + height: 100%; + z-index: 2; +} +#img3{ + position: relative; + top: -16%; + width: 101%; + height: 116%; + left: -1%; + z-index: 2; +} + +/*Puzzle 2*/ +#image0 { + position: relative; + width: 116%; + height: 115%; + z-index: 2; +} +#image1 { + position: relative; + width: 116%; + height: 115%; + left: -4%; + z-index: 2; +} +#image2{ + position: relative; + width: 116%; + height: 115%; + left: -16%; + z-index: 2; +} +#image3{ + position: relative; + width: 116%; + height: 110%; + bottom: 2%; + z-index: 2; +} +#image4{ + position: relative; + width: 110%; + height: 110%; + bottom: 2.4%; + left: -4%; + z-index: 2; +} +#image5{ + position: relative; + width: 116%; + height: 110%; + bottom: 2%; + left: -16%; + z-index: 2; +} +#image6{ + position: relative; + width: 116%; + height: 110%; + bottom: 10%; + z-index: 2; +} +#image7{ + position: relative; + width: 110%; + height: 109%; + bottom: 9%; + left: -3%; + z-index: 2; +} +#image8{ + position: relative; + width: 116%; + height: 110%; + left: -16%; + bottom: 10%; + z-index: 2; +} + +/*Puzzle 3*/ +#images0{ + position: relative; + width: 105%; + height: 109%; + z-index: 2; +} +#images1{ + position: relative; + width: 118%; + height: 110%; + left: -15%; + z-index: 2; +} +#images2{ + position: relative; + width: 129%; + height: 110%; + left: -15%; + z-index: 2; +} +#images3{ + position: relative; + width: 104%; + height: 125%; + left: -4%; + z-index: 2; +} +#images4{ + position: relative; + width: 121%; + height: 137%; + z-index: 2; + bottom: 12%; +} +#images5{ + position: relative; + width: 100%; + height: 120%; + z-index: 2; + bottom: 11%; + left: 1%; +} +#images6{ + position: relative; + width: 135%; + height: 137%; + left: -21%; + bottom: 11%; + z-index: 2; +} +#images7{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; + bottom: -6%; + left: -5%; +} +#images8{ + position: relative; + width: 125%; + height: 112%; + bottom: -7%; + z-index: 2; +} +#images9{ + position: relative; + width: 115%; + height: 110%; + bottom: 9%; + left: 1%; + z-index: 2; +} +#images10{ + position: relative; + width: 119%; + height: 96%; + left: -5%; + bottom: -6%; + z-index: 2; +} +#images11{ + position: relative; + width: 107%; + height: 125%; + left: -7%; + bottom: 10%; + z-index: 2; +} +#images12{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; +} +#images13{ + position: relative; + width: 130%; + height: 118%; + bottom: 18%; + left: -15%; + z-index: 2; +} +#images14{ + position: relative; + width: 120%; + height: 118%; + z-index: 2; + bottom: 18%; + left: -5%; +} +#images15{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; + left: -5%; +} + +} + +@media (max-width: 767px) and (orientation: landscape){ +#containers{ + display: flex; + flex-direction: row; + justify-content: center; + width: 90vw; + height: 80vh; + border-radius: 20px; + gap: 2vh; +} + +#piece-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 30%; /*For all media queries, I toogled width and height each time until i was visually satisfied*/ + height: calc(70% - 1vh); /*For all media queries, I toogled width and height each time until i was visually satisfied*/ + border: 1px solid black; + position: relative; + margin-top: 5%; +} + +#puzzle-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 30%; /*For all media queries, I toogled width and height each time until i was visually satisfied*/ + height: calc(70% - 1vh); /*For all media queries, I toogled width and height each time until i was visually satisfied*/ + border: 1px solid black; + position: relative; + margin-top: 5%; +} + +.piece{ /*Puzzle 1*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: 50%; +} + +.piece2{ /*Puzzle 2*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 33.33%; + height: 33.33%; +} + +.piece3{ /*Puzzle 3*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 25%; + height: 25%; +} + +.drop-zone{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: 50%; +} + +.drop-zone2{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 33.33%; + height: 33.33%; +} + +.drop-zone3{ /*Puzzle 3*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 25%; + height: 25%; +} + +/*Puzzle 1*/ +#img0{ + position: relative; + width: 100%; + height: 120%; + z-index: 2; +} +#img1{ + position: relative; + width: 117%; + height: 103%; + left: -17%; + z-index: 2; +} +#img2{ + position: relative; + width: 116.5%; + height: 100%; + z-index: 2; +} +#img3{ + position: relative; + top: -16%; + width: 101%; + height: 116%; + left: -1%; + z-index: 2; +} + +/*Puzzle 2*/ +#image0 { + position: relative; + width: 116%; + height: 115%; + z-index: 2; +} +#image1 { + position: relative; + width: 116%; + height: 115%; + left: -4%; + z-index: 2; +} +#image2{ + position: relative; + width: 116%; + height: 115%; + left: -16%; + z-index: 2; +} +#image3{ + position: relative; + width: 116%; + height: 110%; + bottom: 2%; + z-index: 2; +} +#image4{ + position: relative; + width: 110%; + height: 110%; + bottom: 2.4%; + left: -4%; + z-index: 2; +} +#image5{ + position: relative; + width: 116%; + height: 110%; + bottom: 2%; + left: -16%; + z-index: 2; +} +#image6{ + position: relative; + width: 116%; + height: 110%; + bottom: 10%; + z-index: 2; +} +#image7{ + position: relative; + width: 110%; + height: 109%; + bottom: 9%; + left: -3%; + z-index: 2; +} +#image8{ + position: relative; + width: 116%; + height: 110%; + left: -16%; + bottom: 10%; + z-index: 2; +} + +/*Puzzle 3*/ +#images0{ + position: relative; + width: 105%; + height: 109%; + z-index: 2; +} +#images1{ + position: relative; + width: 118%; + height: 110%; + left: -15%; + z-index: 2; +} +#images2{ + position: relative; + width: 129%; + height: 110%; + left: -15%; + z-index: 2; +} +#images3{ + position: relative; + width: 104%; + height: 125%; + left: -4%; + z-index: 2; +} +#images4{ + position: relative; + width: 121%; + height: 137%; + z-index: 2; + bottom: 12%; +} +#images5{ + position: relative; + width: 100%; + height: 120%; + z-index: 2; + bottom: 11%; + left: 1%; +} +#images6{ + position: relative; + width: 135%; + height: 137%; + left: -21%; + bottom: 11%; + z-index: 2; +} +#images7{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; + bottom: -6%; + left: -5%; +} +#images8{ + position: relative; + width: 125%; + height: 112%; + bottom: -7%; + z-index: 2; +} +#images9{ + position: relative; + width: 115%; + height: 110%; + bottom: 9%; + left: 1%; + z-index: 2; +} +#images10{ + position: relative; + width: 119%; + height: 96%; + left: -5%; + bottom: -6%; + z-index: 2; +} +#images11{ + position: relative; + width: 107%; + height: 125%; + left: -7%; + bottom: 10%; + z-index: 2; +} +#images12{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; +} +#images13{ + position: relative; + width: 130%; + height: 118%; + bottom: 18%; + left: -15%; + z-index: 2; +} +#images14{ + position: relative; + width: 120%; + height: 118%; + z-index: 2; + bottom: 18%; + left: -5%; +} +#images15{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; + left: -5%; +} + + +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) { +#containers{ + display: flex; + flex-direction: row; + justify-content: center; + width: 90vw; + height: 80vh; + border-radius: 20px; + gap: 2vh; /* Considering the gap in total height calculation */ +} + +#piece-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: calc(50% - 1vh); /* Adjusting for the gap, ensuring both fit within #containers without overflow */ + border: 1px solid black; + position: relative; + margin-top: 5%; +} + +#puzzle-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: calc(50% - 1vh); /* Adjusting for the gap, ensuring both fit within #containers without overflow */ + border: 1px solid black; + position: relative; /*there is a reason for this when drag and dropping element*/ + margin-top: 5%; +} + +.piece{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: 50%; +} + +.piece2{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 33.33%; + height: 33.33%; +} + +.piece3{ /*Puzzle 3*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 25%; + height: 25%; +} + +.drop-zone{ /*Puzzle 1*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: 50%; +} + +.drop-zone2{ /*Puzzle 2*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 33.33%; + height: 33.33%; +} + +.drop-zone3{ /*Puzzle 3*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 25%; + height: 25%; +} + +/*Puzzle 1*/ +#img0{ + position: relative; + width: 100%; + height: 120%; /* Increased height to overlap */ + z-index: 2; +} +#img1{ + position: relative; + width: 117%; + height: 103%; /* Increased height to overlap */ + left: -17%; + z-index: 2; +} +#img2{ + position: relative; + width: 116.5%; + height: 100%; + z-index: 2; +} +#img3{ + position: relative; + top: -16%; + width: 101%; + height: 116%; + left: -1%; + z-index: 2; +} +/*Puzzle 2*/ +#image0 { + position: relative; + width: 116%; + height: 115%; + z-index: 2; +} +#image1 { + position: relative; + width: 116%; + height: 115%; + left: -4%; + z-index: 2; +} +#image2{ + position: relative; + width: 116%; + height: 115%; + left: -16%; + z-index: 2; +} +#image3{ + position: relative; + width: 116%; + height: 110%; + bottom: 2%; + z-index: 2; +} +#image4{ + position: relative; + width: 110%; + height: 110%; + bottom: 2.4%; + left: -4%; + z-index: 2; +} +#image5{ + position: relative; + width: 116%; + height: 110%; + bottom: 2%; + left: -16%; + z-index: 2; +} +#image6{ + position: relative; + width: 116%; + height: 110%; + bottom: 10%; + z-index: 2; +} +#image7{ + position: relative; + width: 110%; + height: 109%; + bottom: 9%; + left: -3%; + z-index: 2; +} +#image8{ + position: relative; + width: 116%; + height: 110%; + left: -16%; + bottom: 10%; + z-index: 2; +} + +/*Puzzle 3*/ +#images0{ + position: relative; + width: 105%; + height: 109%; + z-index: 2; +} +#images1{ + position: relative; + width: 118%; + height: 110%; + left: -15%; + z-index: 2; +} +#images2{ + position: relative; + width: 129%; + height: 110%; + left: -15%; + z-index: 2; +} +#images3{ + position: relative; + width: 104%; + height: 125%; + left: -4%; + z-index: 2; +} +#images4{ + position: relative; + width: 121%; + height: 137%; + z-index: 2; + bottom: 12%; +} +#images5{ + position: relative; + width: 100%; + height: 120%; + z-index: 2; + bottom: 11%; + left: 1%; +} +#images6{ + position: relative; + width: 135%; + height: 137%; + left: -21%; + bottom: 11%; + z-index: 2; +} +#images7{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; + bottom: -6%; + left: -5%; +} +#images8{ + position: relative; + width: 125%; + height: 112%; + bottom: -7%; + z-index: 2; +} +#images9{ + position: relative; + width: 115%; + height: 110%; + bottom: 9%; + left: 1%; + z-index: 2; +} +#images10{ + position: relative; + width: 119%; + height: 96%; + left: -5%; + bottom: -6%; + z-index: 2; +} +#images11{ + position: relative; + width: 107%; + height: 125%; + left: -7%; + bottom: 10%; + z-index: 2; +} +#images12{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; +} +#images13{ + position: relative; + width: 130%; + height: 118%; + bottom: 18%; + left: -15%; + z-index: 2; +} +#images14{ + position: relative; + width: 120%; + height: 118%; + z-index: 2; + bottom: 18%; + left: -5%; +} +#images15{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; + left: -5%; +} + + +} + +@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) { +#containers{ + display: flex; + flex-direction: row; + justify-content: center; + width: 90vw; + height: 80vh; + border-radius: 20px; + gap: 2vh; +} + +#piece-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 30%; /*For all media queries, I toogled width and height each time until i was visually satisfied*/ + height: calc(80% - 1vh); /*For all media queries, I toogled width and height each time until i was visually satisfied*/ + border: 1px solid black; + position: relative; + margin-top: 5%; +} + +#puzzle-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 30%; /*For all media queries, I toogled width and height each time until i was visually satisfied*/ + height: calc(80% - 1vh); /*For all media queries, I toogled width and height each time until i was visually satisfied*/ + border: 1px solid black; + position: relative; + margin-top: 5%; +} + +.piece{ /*Puzzle 1*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: 50%; +} + +.piece2{ /*Puzzle 2*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 33.33%; + height: 33.33%; +} + +.piece3{ /*Puzzle 3*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 25%; + height: 25%; +} + +.drop-zone{ /*Puzzle 1*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: 50%; +} + +.drop-zone2{ /*Puzzle 2*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 33.33%; + height: 33.33%; +} + +.drop-zone3{ /*Puzzle 3*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 25%; + height: 25%; +} + +/*Puzzle 1*/ +#img0{ + position: relative; + width: 100%; + height: 120%; + z-index: 2; +} +#img1{ + position: relative; + width: 117%; + height: 103%; + left: -17%; + z-index: 2; +} +#img2{ + position: relative; + width: 116.5%; + height: 100%; + z-index: 2; +} +#img3{ + position: relative; + top: -16%; + width: 101%; + height: 116%; + left: -1%; + z-index: 2; +} + +/*Puzzle 2*/ +#image0 { + position: relative; + width: 116%; + height: 115%; + z-index: 2; +} +#image1 { + position: relative; + width: 116%; + height: 115%; + left: -4%; + z-index: 2; +} +#image2{ + position: relative; + width: 116%; + height: 115%; + left: -16%; + z-index: 2; +} +#image3{ + position: relative; + width: 116%; + height: 110%; + bottom: 2%; + z-index: 2; +} +#image4{ + position: relative; + width: 110%; + height: 110%; + bottom: 2.4%; + left: -4%; + z-index: 2; +} +#image5{ + position: relative; + width: 116%; + height: 110%; + bottom: 2%; + left: -16%; + z-index: 2; +} +#image6{ + position: relative; + width: 116%; + height: 110%; + bottom: 10%; + z-index: 2; +} +#image7{ + position: relative; + width: 110%; + height: 109%; + bottom: 9%; + left: -3%; + z-index: 2; +} +#image8{ + position: relative; + width: 116%; + height: 110%; + left: -16%; + bottom: 10%; + z-index: 2; +} + +/*Puzzle 3*/ +#images0{ + position: relative; + width: 105%; + height: 109%; + z-index: 2; +} +#images1{ + position: relative; + width: 118%; + height: 110%; + left: -15%; + z-index: 2; +} +#images2{ + position: relative; + width: 129%; + height: 110%; + left: -15%; + z-index: 2; +} +#images3{ + position: relative; + width: 104%; + height: 125%; + left: -4%; + z-index: 2; +} +#images4{ + position: relative; + width: 121%; + height: 137%; + z-index: 2; + bottom: 12%; +} +#images5{ + position: relative; + width: 100%; + height: 120%; + z-index: 2; + bottom: 11%; + left: 1%; +} +#images6{ + position: relative; + width: 135%; + height: 137%; + left: -21%; + bottom: 11%; + z-index: 2; +} +#images7{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; + bottom: -6%; + left: -5%; +} +#images8{ + position: relative; + width: 125%; + height: 112%; + bottom: -7%; + z-index: 2; +} +#images9{ + position: relative; + width: 115%; + height: 110%; + bottom: 9%; + left: 1%; + z-index: 2; +} +#images10{ + position: relative; + width: 119%; + height: 96%; + left: -5%; + bottom: -6%; + z-index: 2; +} +#images11{ + position: relative; + width: 117%; + height: 130%; + left: -4%; + bottom: 10%; + z-index: 2; +} +#images12{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; +} +#images13{ + position: relative; + width: 130%; + height: 118%; + bottom: 18%; + left: -15%; + z-index: 2; +} +#images14{ + position: relative; + width: 120%; + height: 118%; + z-index: 2; + bottom: 18%; + left: -5%; +} +#images15{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; + left: -5%; +} +} + +@media only screen and (min-width: 1024px) and (orientation: portrait){ +#containers{ + display: flex; + flex-direction: row; + justify-content: center; + width: 90vw; + height: 80vh; + border-radius: 20px; + gap: 2vh; + +} + +#piece-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: calc(70% - 1vh); + border: 1px solid black; + position: relative; + margin-top: 5%; +} + +#puzzle-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: calc(70% - 1vh); + border: 1px solid black; + position: relative; + margin-top: 5%; +} + +.piece{ /*Puzzle 1*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: 50%; +} + +.piece2{ /*Puzzle 2*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 33.33%; + height: 33.33%; +} + +.piece3{ /*Puzzle 3*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 25%; + height: 25%; +} + +.drop-zone{ /*Puzzle 1*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: 50%; +} + +.drop-zone2{ /*Puzzle 2*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 33.33%; + height: 33.33%; +} + +.drop-zone3{ /*Puzzle 3*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 25%; + height: 25%; +} + +/*Puzzle 1*/ +#img0{ + position: relative; + width: 100%; + height: 120%; + z-index: 2; +} +#img1{ + position: relative; + width: 117%; + height: 103%; + left: -17%; + z-index: 2; +} +#img2{ + position: relative; + width: 116.5%; + height: 100%; + z-index: 2; +} +#img3{ + position: relative; + top: -16%; + width: 101%; + height: 116%; + left: -1%; + z-index: 2; +} + +/*Puzzle 2*/ +#image0 { + position: relative; + width: 116%; + height: 115%; + z-index: 2; +} +#image1 { + position: relative; + width: 116%; + height: 115%; + left: -4%; + z-index: 2; +} +#image2{ + position: relative; + width: 116%; + height: 115%; + left: -16%; + z-index: 2; +} +#image3{ + position: relative; + width: 116%; + height: 110%; + bottom: 2%; + z-index: 2; +} +#image4{ + position: relative; + width: 110%; + height: 110%; + bottom: 2.4%; + left: -4%; + z-index: 2; +} +#image5{ + position: relative; + width: 116%; + height: 110%; + bottom: 2%; + left: -16%; + z-index: 2; +} +#image6{ + position: relative; + width: 116%; + height: 110%; + bottom: 10%; + z-index: 2; +} +#image7{ + position: relative; + width: 110%; + height: 109%; + bottom: 9%; + left: -3%; + z-index: 2; +} +#image8{ + position: relative; + width: 116%; + height: 110%; + left: -16%; + bottom: 10%; + z-index: 2; +} + +/*Puzzle 3*/ +#images0{ + position: relative; + width: 105%; + height: 109%; + z-index: 2; +} +#images1{ + position: relative; + width: 118%; + height: 110%; + left: -15%; + z-index: 2; +} +#images2{ + position: relative; + width: 129%; + height: 110%; + left: -15%; + z-index: 2; +} +#images3{ + position: relative; + width: 104%; + height: 125%; + left: -4%; + z-index: 2; +} +#images4{ + position: relative; + width: 121%; + height: 137%; + z-index: 2; + bottom: 12%; +} +#images5{ + position: relative; + width: 100%; + height: 120%; + z-index: 2; + bottom: 11%; + left: 1%; +} +#images6{ + position: relative; + width: 135%; + height: 137%; + left: -21%; + bottom: 11%; + z-index: 2; +} +#images7{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; + bottom: -6%; + left: -5%; +} +#images8{ + position: relative; + width: 125%; + height: 112%; + bottom: -7%; + z-index: 2; +} +#images9{ + position: relative; + width: 115%; + height: 110%; + bottom: 9%; + left: 1%; + z-index: 2; +} +#images10{ + position: relative; + width: 119%; + height: 96%; + left: -5%; + bottom: -6%; + z-index: 2; +} +#images11{ + position: relative; + width: 111%; + height: 125%; + left: -11%; + bottom: 10%; + z-index: 2; +} +#images12{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; +} +#images13{ + position: relative; + width: 130%; + height: 118%; + bottom: 18%; + left: -15%; + z-index: 2; +} +#images14{ + position: relative; + width: 120%; + height: 118%; + z-index: 2; + bottom: 18%; + left: -5%; +} +#images15{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; + left: -5%; +} +} + +@media only screen and (min-width: 1024px) and (orientation: landscape){ +#containers{ + display: flex; + flex-direction: row; + justify-content: center; + width: 90vw; + height: 80vh; + border-radius: 20px; + gap: 2vh; +} + +#piece-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: calc(80% - 1vh); + border: 1px solid black; + position: relative; + margin-top: 5%; +} + +#puzzle-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: calc(80% - 1vh); + border: 1px solid black; + position: relative; + margin-top: 5%; +} + +.piece{ /*Puzzle 1*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: 50%; +} + +.piece2{ /*Puzzle 2*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 33.33%; + height: 33.33%; +} + +.piece3{ /*Puzzle 3*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 25%; + height: 25%; +} + +.drop-zone{ /*Puzzle 1*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: 50%; +} + +.drop-zone2{ /*Puzzle 2*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 33.33%; + height: 33.33%; +} + +.drop-zone3{ /*Puzzle 3*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 25%; + height: 25%; +} + +/*Puzzle 1*/ +#img0{ + position: relative; + width: 100%; + height: 120%; + z-index: 2; +} +#img1{ + position: relative; + width: 117%; + height: 103%; + left: -17%; + z-index: 2; +} +#img2{ + position: relative; + width: 116.5%; + height: 100%; + z-index: 2; +} +#img3{ + position: relative; + top: -16%; + width: 101%; + height: 116%; + left: -1%; + z-index: 2; +} + +/*Puzzle 2*/ +#image0 { + position: relative; + width: 116%; + height: 115%; + z-index: 2; +} +#image1 { + position: relative; + width: 116%; + height: 115%; + left: -4%; + z-index: 2; +} +#image2{ + position: relative; + width: 116%; + height: 115%; + left: -16%; + z-index: 2; +} +#image3{ + position: relative; + width: 116%; + height: 110%; + bottom: 2%; + z-index: 2; +} +#image4{ + position: relative; + width: 110%; + height: 110%; + bottom: 2.4%; + left: -4%; + z-index: 2; +} +#image5{ + position: relative; + width: 116%; + height: 110%; + bottom: 2%; + left: -16%; + z-index: 2; +} +#image6{ + position: relative; + width: 116%; + height: 110%; + bottom: 10%; + z-index: 2; +} +#image7{ + position: relative; + width: 110%; + height: 109%; + bottom: 9%; + left: -3%; + z-index: 2; +} +#image8{ + position: relative; + width: 116%; + height: 110%; + left: -16%; + bottom: 10%; + z-index: 2; +} + +/*Puzzle 3*/ +#images0{ + position: relative; + width: 110%; + height: 115%; + z-index: 2; +} +#images1{ + position: relative; + width: 125%; + height: 115%; + left: -21%; + z-index: 2; +} +#images2{ + position: relative; + width: 129%; + height: 110%; + left: -15%; + z-index: 2; +} +#images3{ + position: relative; + width: 104%; + height: 125%; + left: -4%; + z-index: 2; +} +#images4{ + position: relative; + width: 121%; + height: 137%; + z-index: 2; + bottom: 12%; +} +#images5{ + position: relative; + width: 140%; + height: 110%; + z-index: 2; + bottom: 10%; + left: -4%; +} +#images6{ + position: relative; + width: 140%; + height: 140%; + left: -22%; + bottom: 20%; + z-index: 2; +} +#images7{ + position: relative; + width: 105%; + height: 109%; + z-index: 2; + bottom: 4%; + left: -5%; +} +#images8{ + position: relative; + width: 130%; + height: 120%; + bottom: 1%; + z-index: 2; +} +#images9{ + position: relative; + width: 140%; + height: 125%; + bottom: 22%; + left: -4%; + z-index: 2; +} +#images10{ + position: relative; + width: 119%; + height: 105%; + bottom: 2%; + z-index: 2; +} +#images11{ + position: relative; + width: 125%; + height: 130%; + bottom: 14%; + z-index: 2; +} +#images12{ + position: relative; + width: 115%; + height: 103%; + bottom: 3%; + z-index: 2; +} +#images13{ + position: relative; + width: 135%; + height: 120%; + bottom: 20%; + left: -17%; + z-index: 2; +} +#images14{ + position: relative; + width: 120%; + height: 120%; + z-index: 2; + bottom: 20%; +} +#images15{ + position: relative; + width: 115%; + height: 100%; + z-index: 2; +} + +} + +@media only screen and (min-width: 1200px){ +#containers{ + display: flex; + flex-direction: row; + justify-content: center; + width: 90vw; + height: 80vh; + border-radius: 20px; + gap: 2vh; + +} + +#piece-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 40%; + height: calc(80% - 1vh); + border: 1px solid black; + position: relative; + margin-top: 5%; +} + +#puzzle-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 40%; + height: calc(80% - 1vh); + border: 1px solid black; + position: relative; + margin-top: 5%; +} + +.piece{ /*Puzzle 1*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: 50%; +} + +.piece2{ /*Puzzle 2*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 33.33%; + height: 33.33%; +} + +.piece3{ /*Puzzle 3*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 25%; + height: 25%; +} + +.drop-zone{ /*Puzzle 1*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: 50%; +} + +.drop-zone2{ /*Puzzle 2*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 33.33%; + height: 33.33%; +} + +.drop-zone3{ /*Puzzle 3*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 25%; + height: 25%; +} + +/*Puzzle 1*/ +#img0{ + position: relative; + width: 100%; + height: 120%; + z-index: 2; +} +#img1{ + position: relative; + width: 117%; + height: 103%; + left: -17%; + z-index: 2; +} +#img2{ + position: relative; + width: 116.5%; + height: 100%; + z-index: 2; +} +#img3{ + position: relative; + top: -16%; + width: 101%; + height: 116%; + left: -1%; + z-index: 2; +} + +/*Puzzle 2*/ +#image0 { + position: relative; + width: 116%; + height: 115%; + z-index: 2; +} +#image1 { + position: relative; + width: 116%; + height: 115%; + left: -4%; + z-index: 2; +} +#image2{ + position: relative; + width: 116%; + height: 115%; + left: -16%; + z-index: 2; +} +#image3{ + position: relative; + width: 116%; + height: 110%; + bottom: 2%; + z-index: 2; +} +#image4{ + position: relative; + width: 110%; + height: 110%; + bottom: 2.4%; + left: -4%; + z-index: 2; +} +#image5{ + position: relative; + width: 116%; + height: 110%; + bottom: 2%; + left: -16%; + z-index: 2; +} +#image6{ + position: relative; + width: 116%; + height: 110%; + bottom: 10%; + z-index: 2; +} +#image7{ + position: relative; + width: 110%; + height: 109%; + bottom: 9%; + left: -3%; + z-index: 2; +} +#image8{ + position: relative; + width: 116%; + height: 110%; + left: -16%; + bottom: 10%; + z-index: 2; +} + +/*Puzzle 3*/ +#images0{ + position: relative; + width: 105%; + height: 109%; + z-index: 2; +} +#images1{ + position: relative; + width: 118%; + height: 110%; + left: -15%; + z-index: 2; +} +#images2{ + position: relative; + width: 129%; + height: 110%; + left: -15%; + z-index: 2; +} +#images3{ + position: relative; + width: 104%; + height: 125%; + left: -4%; + z-index: 2; +} +#images4{ + position: relative; + width: 121%; + height: 137%; + z-index: 2; + bottom: 12%; +} +#images5{ + position: relative; + width: 100%; + height: 120%; + z-index: 2; + bottom: 11%; + left: 1%; +} +#images6{ + position: relative; + width: 135%; + height: 137%; + left: -21%; + bottom: 11%; + z-index: 2; +} +#images7{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; + bottom: -6%; + left: -5%; +} +#images8{ + position: relative; + width: 125%; + height: 112%; + bottom: -7%; + z-index: 2; +} +#images9{ + position: relative; + width: 115%; + height: 110%; + bottom: 9%; + left: 1%; + z-index: 2; +} +#images10{ + position: relative; + width: 119%; + height: 96%; + left: -5%; + bottom: -6%; + z-index: 2; +} +#images11{ + position: relative; + width: 110%; + height: 125%; + left: -10%; + bottom: 10%; + z-index: 2; +} +#images12{ + position: relative; + width: 105%; + height: 103%; + z-index: 2; +} +#images13{ + position: relative; + width: 130%; + height: 118%; + bottom: 18%; + left: -15%; + z-index: 2; +} +#images14{ + position: relative; + width: 120%; + height: 118%; + z-index: 2; + bottom: 18%; + left: -5%; +} +#images15{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; + left: -5%; +} + +} + +@media only screen and (min-width: 1400px){ +#containers{ + display: flex; + flex-direction: row; + justify-content: center; + width: 90vw; + height: 80vh; + border-radius: 20px; + gap: 2vh; +} + +#piece-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 35%; + height: calc(80% - 1vh); + border: 1px solid black; + position: relative; + margin-top: 5%; +} + +#puzzle-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 35%; + height: calc(80% - 1vh); + border: 1px solid black; + position: relative; + margin-top: 5%; +} + +.piece{ /*Puzzle 1*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: 50%; +} + +.piece2{ /*Puzzle 2*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 33.33%; + height: 33.33%; +} + +.piece3{ /*Puzzle 3*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 25%; + height: 25%; +} + +.drop-zone{ /*Puzzle 1*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; + height: 50%; +} + +.drop-zone2{ /*Puzzle 2*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 33.33%; + height: 33.33%; +} + +.drop-zone3{ /*Puzzle 3*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 25%; + height: 25%; +} + +/*Puzzle 1*/ +#img0{ + position: relative; + width: 100%; + height: 120%; + z-index: 2; +} +#img1{ + position: relative; + width: 117%; + height: 103%; + left: -17%; + z-index: 2; +} +#img2{ + position: relative; + width: 116.5%; + height: 100%; + z-index: 2; +} +#img3{ + position: relative; + top: -16%; + width: 101%; + height: 116%; + left: -1%; + z-index: 2; +} + +/*Puzzle 2*/ +#image0 { + position: relative; + width: 116%; + height: 115%; + z-index: 2; +} +#image1 { + position: relative; + width: 116%; + height: 115%; + left: -4%; + z-index: 2; +} +#image2{ + position: relative; + width: 116%; + height: 115%; + left: -16%; + z-index: 2; +} +#image3{ + position: relative; + width: 116%; + height: 110%; + bottom: 2%; + z-index: 2; +} +#image4{ + position: relative; + width: 110%; + height: 110%; + bottom: 2.4%; + left: -4%; + z-index: 2; +} +#image5{ + position: relative; + width: 116%; + height: 110%; + bottom: 2%; + left: -16%; + z-index: 2; +} +#image6{ + position: relative; + width: 116%; + height: 110%; + bottom: 10%; + z-index: 2; +} +#image7{ + position: relative; + width: 110%; + height: 109%; + bottom: 9%; + left: -3%; + z-index: 2; +} +#image8{ + position: relative; + width: 116%; + height: 110%; + left: -16%; + bottom: 10%; + z-index: 2; +} + +/*Puzzle 3*/ +#images0{ + position: relative; + width: 105%; + height: 109%; + z-index: 2; +} +#images1{ + position: relative; + width: 118%; + height: 110%; + left: -15%; + z-index: 2; +} +#images2{ + position: relative; + width: 129%; + height: 110%; + left: -15%; + z-index: 2; +} +#images3{ + position: relative; + width: 104%; + height: 125%; + left: -4%; + z-index: 2; +} +#images4{ + position: relative; + width: 121%; + height: 137%; + z-index: 2; + bottom: 12%; +} +#images5{ + position: relative; + width: 100%; + height: 120%; + z-index: 2; + bottom: 11%; + left: 1%; +} +#images6{ + position: relative; + width: 135%; + height: 137%; + left: -21%; + bottom: 11%; + z-index: 2; +} +#images7{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; + bottom: -6%; + left: -5%; +} +#images8{ + position: relative; + width: 127%; + height: 115%; + bottom: -7%; + z-index: 2; +} +#images9{ + position: relative; + width: 115%; + height: 110%; + bottom: 9%; + left: 1.5%; + z-index: 2; +} +#images10{ + position: relative; + width: 119%; + height: 96%; + left: -3%; + bottom: -6%; + z-index: 2; +} +#images11{ + position: relative; + width: 108%; + height: 125%; + left: -2%; + bottom: 10%; + z-index: 2; +} +#images12{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; + bottom: 0.5%; +} +#images13{ + position: relative; + width: 130%; + height: 118%; + bottom: 18%; + left: -15%; + z-index: 2; +} +#images14{ + position: relative; + width: 120%; + height: 118%; + z-index: 2; + bottom: 18%; + left: -5%; +} +#images15{ + position: relative; + width: 105%; + height: 100%; + z-index: 2; + left: -5%; +} + +}