diff --git a/gym-form/Palak Aggarwal/contact.html b/gym-form/Palak Aggarwal/contact.html new file mode 100644 index 0000000..a3b9525 --- /dev/null +++ b/gym-form/Palak Aggarwal/contact.html @@ -0,0 +1,238 @@ + + + + + + + +
+

Membership Form

+ +
+
+

+

+ +
+ +
+ + +

Please select your Gender:





+ + +
+
+

Choose the range of Membership:


+ +  
+   +  
+   +  
+ + + +
+
Login Info: +

+

+
+
+
+ + +
+
+ +
+ + + + +
+
+
+ + + + + diff --git a/gym-form/Palak Aggarwal/demo.js b/gym-form/Palak Aggarwal/demo.js new file mode 100644 index 0000000..de55ed5 --- /dev/null +++ b/gym-form/Palak Aggarwal/demo.js @@ -0,0 +1,89 @@ +const signUpButton = document.getElementById('signUp'); +const signInButton = document.getElementById('signIn'); +const container = document.getElementById('container'); + +signUpButton.addEventListener('click', () => { + container.classList.add("right-panel-active"); +}); + +signInButton.addEventListener('click', () => { + container.classList.remove("right-panel-active"); +}); + + + + + + +var currentTab = 0; // Current tab is set to be the first tab (0) +showTab(currentTab); // Display the current tab + +function showTab(n) { + // This function will display the specified tab of the form ... + var x = document.getElementsByClassName("tab"); + x[n].style.display = "block"; + // ... and fix the Previous/Next buttons: + if (n == 0) { + document.getElementById("prevBtn").style.display = "none"; + } else { + document.getElementById("prevBtn").style.display = "inline"; + } + if (n == (x.length - 1)) { + document.getElementById("nextBtn").innerHTML = "Submit"; + } else { + document.getElementById("nextBtn").innerHTML = "Next"; + } + // ... and run a function that displays the correct step indicator: + fixStepIndicator(n) +} + +function nextPrev(n) { + // This function will figure out which tab to display + var x = document.getElementsByClassName("tab"); + // Exit the function if any field in the current tab is invalid: + if (n == 1 && !validateForm()) return false; + // Hide the current tab: + x[currentTab].style.display = "none"; + // Increase or decrease the current tab by 1: + currentTab = currentTab + n; + // if you have reached the end of the form... : + if (currentTab >= x.length) { + //...the form gets submitted: + document.getElementById("regForm").submit(); + return false; + } + // Otherwise, display the correct tab: + showTab(currentTab); +} + +function validateForm() { + // This function deals with validation of the form fields + var x, y, i, valid = true; + x = document.getElementsByClassName("tab"); + y = x[currentTab].getElementsByTagName("input"); + // A loop that checks every input field in the current tab: + for (i = 0; i < y.length; i++) { + // If a field is empty... + if (y[i].value == "") { + // add an "invalid" class to the field: + y[i].className += " invalid"; + // and set the current valid status to false: + valid = false; + } + } + // If the valid status is true, mark the step as finished and valid: + if (valid) { + document.getElementsByClassName("step")[currentTab].className += " finish"; + } + return valid; // return the valid status +} + +function fixStepIndicator(n) { + // This function removes the "active" class of all steps... + var i, x = document.getElementsByClassName("step"); + for (i = 0; i < x.length; i++) { + x[i].className = x[i].className.replace(" active", ""); + } + //... and adds the "active" class to the current step: + x[n].className += " active"; +} \ No newline at end of file diff --git a/gym-form/Palak Aggarwal/images/favicon.png b/gym-form/Palak Aggarwal/images/favicon.png new file mode 100644 index 0000000..ee83dfa Binary files /dev/null and b/gym-form/Palak Aggarwal/images/favicon.png differ diff --git a/gym-form/Palak Aggarwal/images/form_bg.jpeg b/gym-form/Palak Aggarwal/images/form_bg.jpeg new file mode 100644 index 0000000..0cbdc4a Binary files /dev/null and b/gym-form/Palak Aggarwal/images/form_bg.jpeg differ diff --git a/gym-form/Palak Aggarwal/images/hero.jpeg b/gym-form/Palak Aggarwal/images/hero.jpeg new file mode 100644 index 0000000..be98282 Binary files /dev/null and b/gym-form/Palak Aggarwal/images/hero.jpeg differ diff --git a/gym-form/Palak Aggarwal/signup.html b/gym-form/Palak Aggarwal/signup.html new file mode 100644 index 0000000..3251220 --- /dev/null +++ b/gym-form/Palak Aggarwal/signup.html @@ -0,0 +1,71 @@ + + + + + + + + sign-up form + + + + + + + +
+
+
+

Create Account

+ + or use your email for registration + + + + + +
+
+
+
+

Sign in

+ + or use your account + + + Forgot your password? + +
+
+
+
+
+

Welcome Back!

+

To keep connected with us please login with your personal info

+ +
+
+

Hey There!

+

Enter your details and start journey with us

+ +
+
+
+
+
+ Get Membership +
+ + + + \ No newline at end of file diff --git a/gym-form/Palak Aggarwal/style.css b/gym-form/Palak Aggarwal/style.css new file mode 100644 index 0000000..278dd84 --- /dev/null +++ b/gym-form/Palak Aggarwal/style.css @@ -0,0 +1,241 @@ +@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); + +* { + box-sizing: border-box; +} + +.member{ + + color: #faf9f0; + border: 1px solid black; + font-size: 15px; + background-color: black; + margin-top: 20px; +} + + + +body { + background:#331d14ad; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-family: 'Montserrat', sans-serif; + height: 100vh; + margin: -20px 0 50px; +} + +h1 { + font-weight: bold; + margin: 0; +} + +h2 { + text-align: center; +} + +p { + font-size: 14px; + font-weight: 100; + line-height: 20px; + letter-spacing: 0.5px; + margin: 20px 0 30px; +} + +span { + font-size: 12px; +} + +a { + color: #333; + font-size: 14px; + text-decoration: none; + margin: 15px 0; +} + +button { + border-radius: 20px; + border: 1px solid #0e0d0d; + background-color: #0c0c0c; + color: #FFFFFF; + font-size: 12px; + font-weight: bold; + padding: 12px 45px; + letter-spacing: 1px; + text-transform: uppercase; + transition: transform 80ms ease-in; + cursor: pointer; +} + +button:active { + transform: scale(0.95); +} + +button:focus { + outline: none; +} + +button.ghost { + background-color:#0e0e0e8a; + border-color: #faf6f6; +} + +form { + background-color: #FFFFFF; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 50px; + height: 100%; + text-align: center; +} + +input { + background-color: #eee; + border: none; + padding: 12px 15px; + margin: 8px 0; + width: 100%; +} + +.container { + background-color: #fff; + border-radius: 10px; + box-shadow: 0 14px 28px rgba(0,0,0,0.25), + 0 10px 10px rgba(0,0,0,0.22); + position: relative; + overflow: hidden; + width: 768px; + max-width: 100%; + min-height: 480px; +} + +.form-container { + position: absolute; + top: 0; + height: 100%; + transition: all 0.6s ease-in-out; +} + +.sign-in-container { + left: 0; + width: 50%; + z-index: 2; +} + +.container.right-panel-active .sign-in-container { + transform: translateX(100%); +} + +.sign-up-container { + left: 0; + width: 50%; + opacity: 0; + z-index: 1; +} + +.container.right-panel-active .sign-up-container { + transform: translateX(100%); + opacity: 1; + z-index: 5; + animation: show 0.6s; +} + +@keyframes show { + 0%, 49.99% { + opacity: 0; + z-index: 1; + } + + 50%, 100% { + opacity: 1; + z-index: 5; + } +} + +.overlay-container { + position: absolute; + top: 0; + left: 50%; + width: 50%; + height: 100%; + overflow: hidden; + transition: transform 0.6s ease-in-out; + z-index: 100; +} + +.container.right-panel-active .overlay-container{ + transform: translateX(-100%); +} + +.overlay { + background: #FF416C; + background-image: url(../images/hero.jpeg); + /* background-color: url("https://images.pexels.com/photos/136404/pexels-photo-136404.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); */ + /* background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C); + background: linear-gradient(to right, #FF4B2B, #FF416C); */ + background-repeat: no-repeat; + background-size: cover; + background-position: 0 0; + color: #FFFFFF; + position: relative; + left: -100%; + height: 100%; + width: 200%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.container.right-panel-active .overlay { + transform: translateX(50%); +} + +.overlay-panel { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 40px; + text-align: center; + top: 0; + height: 100%; + width: 50%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.overlay-left { + transform: translateX(-20%); +} + +.container.right-panel-active .overlay-left { + transform: translateX(0); +} + +.overlay-right { + right: 0; + transform: translateX(0); +} + +.container.right-panel-active .overlay-right { + transform: translateX(20%); +} + +.social-container { + margin: 20px 0; +} + +.social-container a { + border: 1px solid #DDDDDD; + border-radius: 50%; + display: inline-flex; + justify-content: center; + align-items: center; + margin: 0 5px; + height: 40px; + width: 40px; +} + diff --git a/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (819).png b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (819).png new file mode 100644 index 0000000..6fd3efd Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (819).png differ diff --git a/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (820).png b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (820).png new file mode 100644 index 0000000..f5d1634 Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (820).png differ diff --git a/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (821).png b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (821).png new file mode 100644 index 0000000..7711438 Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (821).png differ diff --git a/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (822).png b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (822).png new file mode 100644 index 0000000..fc5cb82 Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (822).png differ diff --git a/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (823).png b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (823).png new file mode 100644 index 0000000..92208c1 Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (823).png differ diff --git a/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (824).png b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (824).png new file mode 100644 index 0000000..3914a6e Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (824).png differ diff --git a/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (825).png b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (825).png new file mode 100644 index 0000000..d4d12e2 Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (825).png differ diff --git a/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (826).png b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (826).png new file mode 100644 index 0000000..c9540d3 Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (826).png differ diff --git a/rock-paper-scissors/Palak Aggarwal/app.js b/rock-paper-scissors/Palak Aggarwal/app.js new file mode 100644 index 0000000..003b3e6 --- /dev/null +++ b/rock-paper-scissors/Palak Aggarwal/app.js @@ -0,0 +1,124 @@ +// Prevent animation on load +setTimeout(() => { + document.body.classList.remove("preload"); + }, 500); + + // DOM + const btnRules = document.querySelector(".rules-btn"); + const btnClose = document.querySelector(".close-btn"); + const modalRules = document.querySelector(".modal"); + + const CHOICES = [ + { + name: "paper", + beats: "rock", + }, + { + name: "scissors", + beats: "paper", + }, + { + name: "rock", + beats: "scissors", + }, + ]; + const choiceButtons = document.querySelectorAll(".choice-btn"); + const gameDiv = document.querySelector(".game"); + const resultsDiv = document.querySelector(".results"); + const resultDivs = document.querySelectorAll(".results__result"); + + const resultWinner = document.querySelector(".results__winner"); + const resultText = document.querySelector(".results__text"); + + const playAgainBtn = document.querySelector(".play-again"); + + const scoreNumber = document.querySelector(".score__number"); + let score = 0; + + // Game Logic + choiceButtons.forEach((button) => { + button.addEventListener("click", () => { + const choiceName = button.dataset.choice; + const choice = CHOICES.find((choice) => choice.name === choiceName); + choose(choice); + }); + }); + + function choose(choice) { + const aichoice = aiChoose(); + displayResults([choice, aichoice]); + displayWinner([choice, aichoice]); + } + + function aiChoose() { + const rand = Math.floor(Math.random() * CHOICES.length); + return CHOICES[rand]; + } + + function displayResults(results) { + resultDivs.forEach((resultDiv, idx) => { + setTimeout(() => { + resultDiv.innerHTML = ` +
+ ${results[idx].name} +
+ `; + }, idx * 1000); + }); + + gameDiv.classList.toggle("hidden"); + resultsDiv.classList.toggle("hidden"); + } + + function displayWinner(results) { + setTimeout(() => { + const userWins = isWinner(results); + const aiWins = isWinner(results.reverse()); + + if (userWins) { + resultText.innerText = "you win"; + resultDivs[0].classList.toggle("winner"); + keepScore(1); + } else if (aiWins) { + resultText.innerText = "you lose"; + resultDivs[1].classList.toggle("winner"); + keepScore(0); + } else { + resultText.innerText = "draw"; + } + resultWinner.classList.toggle("hidden"); + resultsDiv.classList.toggle("show-winner"); + }, 1000); + } + + function isWinner(results) { + return results[0].beats === results[1].name; + } + + function keepScore(point) { + score += point; + scoreNumber.innerText = score; + } + + // Play Again + playAgainBtn.addEventListener("click", () => { + gameDiv.classList.toggle("hidden"); + resultsDiv.classList.toggle("hidden"); + + resultDivs.forEach((resultDiv) => { + resultDiv.innerHTML = ""; + resultDiv.classList.remove("winner"); + }); + + resultText.innerText = ""; + resultWinner.classList.toggle("hidden"); + resultsDiv.classList.toggle("show-winner"); + }); + + // Show/Hide Rules + btnRules.addEventListener("click", () => { + modalRules.classList.toggle("show-modal"); + }); + btnClose.addEventListener("click", () => { + modalRules.classList.toggle("show-modal"); + }); \ No newline at end of file diff --git a/rock-paper-scissors/Palak Aggarwal/game.html b/rock-paper-scissors/Palak Aggarwal/game.html new file mode 100644 index 0000000..259b303 --- /dev/null +++ b/rock-paper-scissors/Palak Aggarwal/game.html @@ -0,0 +1,70 @@ + + + + + + + + + + + + Rock, Paper, Scissors + + + +
+
+ +
+
score
+
0
+
+
+
+ + + +
+
+ + + + + + + + + + \ No newline at end of file diff --git a/rock-paper-scissors/Palak Aggarwal/images/bg-pentagon.svg b/rock-paper-scissors/Palak Aggarwal/images/bg-pentagon.svg new file mode 100644 index 0000000..5dd1e6f --- /dev/null +++ b/rock-paper-scissors/Palak Aggarwal/images/bg-pentagon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rock-paper-scissors/Palak Aggarwal/images/bg-triangle.svg b/rock-paper-scissors/Palak Aggarwal/images/bg-triangle.svg new file mode 100644 index 0000000..4ccb369 --- /dev/null +++ b/rock-paper-scissors/Palak Aggarwal/images/bg-triangle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rock-paper-scissors/Palak Aggarwal/images/favicon.png b/rock-paper-scissors/Palak Aggarwal/images/favicon.png new file mode 100644 index 0000000..5245ed4 Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/images/favicon.png differ diff --git a/rock-paper-scissors/Palak Aggarwal/images/icon-close.svg b/rock-paper-scissors/Palak Aggarwal/images/icon-close.svg new file mode 100644 index 0000000..52407f4 --- /dev/null +++ b/rock-paper-scissors/Palak Aggarwal/images/icon-close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rock-paper-scissors/Palak Aggarwal/images/icon-lizard.svg b/rock-paper-scissors/Palak Aggarwal/images/icon-lizard.svg new file mode 100644 index 0000000..a34cf30 --- /dev/null +++ b/rock-paper-scissors/Palak Aggarwal/images/icon-lizard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rock-paper-scissors/Palak Aggarwal/images/icon-paper.svg b/rock-paper-scissors/Palak Aggarwal/images/icon-paper.svg new file mode 100644 index 0000000..5d21904 --- /dev/null +++ b/rock-paper-scissors/Palak Aggarwal/images/icon-paper.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rock-paper-scissors/Palak Aggarwal/images/icon-rock.svg b/rock-paper-scissors/Palak Aggarwal/images/icon-rock.svg new file mode 100644 index 0000000..2852f5a --- /dev/null +++ b/rock-paper-scissors/Palak Aggarwal/images/icon-rock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rock-paper-scissors/Palak Aggarwal/images/icon-scissors.svg b/rock-paper-scissors/Palak Aggarwal/images/icon-scissors.svg new file mode 100644 index 0000000..fb1d7b5 --- /dev/null +++ b/rock-paper-scissors/Palak Aggarwal/images/icon-scissors.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rock-paper-scissors/Palak Aggarwal/images/icon-spock.svg b/rock-paper-scissors/Palak Aggarwal/images/icon-spock.svg new file mode 100644 index 0000000..8b171d7 --- /dev/null +++ b/rock-paper-scissors/Palak Aggarwal/images/icon-spock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rock-paper-scissors/Palak Aggarwal/images/image-rules-bonus.svg b/rock-paper-scissors/Palak Aggarwal/images/image-rules-bonus.svg new file mode 100644 index 0000000..d54fc66 --- /dev/null +++ b/rock-paper-scissors/Palak Aggarwal/images/image-rules-bonus.svg @@ -0,0 +1 @@ +BEATSBEATSBEATSBEATSBEATSBEATSBEATSBEATSBEATSBEATS \ No newline at end of file diff --git a/rock-paper-scissors/Palak Aggarwal/images/image-rules.svg b/rock-paper-scissors/Palak Aggarwal/images/image-rules.svg new file mode 100644 index 0000000..bc82403 --- /dev/null +++ b/rock-paper-scissors/Palak Aggarwal/images/image-rules.svg @@ -0,0 +1 @@ +BEATSBEATSBEATS \ No newline at end of file diff --git a/rock-paper-scissors/Palak Aggarwal/images/logo-bonus.svg b/rock-paper-scissors/Palak Aggarwal/images/logo-bonus.svg new file mode 100644 index 0000000..10a3070 --- /dev/null +++ b/rock-paper-scissors/Palak Aggarwal/images/logo-bonus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rock-paper-scissors/Palak Aggarwal/images/logo.svg b/rock-paper-scissors/Palak Aggarwal/images/logo.svg new file mode 100644 index 0000000..7469d63 --- /dev/null +++ b/rock-paper-scissors/Palak Aggarwal/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rock-paper-scissors/Palak Aggarwal/styles.css b/rock-paper-scissors/Palak Aggarwal/styles.css new file mode 100644 index 0000000..b0b9ec5 --- /dev/null +++ b/rock-paper-scissors/Palak Aggarwal/styles.css @@ -0,0 +1,410 @@ +/* Font */ +@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&display=swap"); + +/* Variables */ +:root { + --light-text: #ffffff; + --dark-text: hsl(229, 25%, 31%); + --score-text: hsl(229, 64%, 46%); + --outline: hsl(217, 16%, 45%); + --bg-grad-1: hsl(214, 47%, 23%); + --bg-grad-2: hsl(237, 49%, 15%); + --scissors-1: hsl(39, 89%, 49%); + --scissors-2: hsl(40, 84%, 53%); + --paper-1: hsl(230, 89%, 62%); + --paper-2: hsl(230, 89%, 65%); + --rock-1: hsl(349, 71%, 52%); + --rock-2: hsl(349, 70%, 56%); + --shadow-light: #00000026; + --shadow-med: #0000004d; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Barlow Semi Condensed", sans-serif; + background: radial-gradient(at top, var(--bg-grad-1), var(--bg-grad-2)); + min-height: 100vh; + text-transform: uppercase; + color: var(--light-text); +} + +/* Main Content */ +.container { + position: relative; + max-width: 700px; + margin: 0 auto; + padding-top: 2rem; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + height: 150px; + border: 3px solid var(--outline); + border-radius: 20px; + padding: 1rem 1.4rem 1rem 2rem; +} + +.logo img { + height: 100%; +} + +.score { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: #fff; + border-radius: 10px; + width: 150px; + height: 100%; + line-height: 1; +} + +.score__title { + font-size: 1.1rem; + letter-spacing: 0.1em; + color: var(--score-text); +} + +.score__number { + font-size: 4rem; + font-weight: 700; + color: var(--dark-text); +} + +/* Game */ +.game { + position: relative; + display: grid; + grid-template-columns: (repeat(2, 1fr)); + grid-template-areas: + "paper scissors" + "rock rock"; + place-items: center; + height: 30rem; + padding-top: 4rem; +} +.game::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + left: 28%; + top: 35%; + background: url("images/bg-triangle.svg") no-repeat; + /* background: url("./images/bg-triangle.svg") no-repeat; */ + z-index: -1; +} + +.choice-btn { + border: none; + outline: none; + background: none; + cursor: pointer; +} +.choice { + position: relative; + width: 10rem; + height: 10rem; + background: #fff; + border-radius: 50%; + display: grid; + place-items: center; + box-shadow: inset 0 0.5rem var(--shadow-light); +} +.choice::before, +.choice::after { + content: ""; + position: absolute; + left: -15%; + top: -15%; + width: 130%; + height: 130%; + border-radius: 50%; + z-index: -1; +} + +.choice::after { + opacity: 0; + transition: opacity 0.4s ease; +} +.choice-btn:focus .choice::after { + opacity: 1; + box-shadow: 0 0 0 2rem #223351; + z-index: -2; +} + +.choice img { + transform: scale(1.5); +} + +.choice.paper::before { + background: linear-gradient(to bottom, var(--paper-1), var(--paper-2)); + box-shadow: 0 0.5rem var(--shadow-med), 0 0.5rem var(--paper-2); +} +.choice.scissors::before { + background: linear-gradient(to bottom, var(--scissors-1), var(--scissors-2)); + box-shadow: 0 0.5rem var(--shadow-med), 0 0.5rem var(--scissors-2); +} +.choice.rock::before { + background: linear-gradient(to bottom, var(--rock-1), var(--rock-2)); + box-shadow: 0 0.5rem var(--shadow-med), 0 0.5rem var(--rock-2); +} + +.choice-btn[data-choice="paper"] { + grid-area: paper; +} +.choice-btn[data-choice="scissors"] { + grid-area: scissors; +} +.choice-btn[data-choice="rock"] { + grid-area: rock; +} + +/* Results */ +.results { + display: grid; + grid-template-columns: repeat(2, 1fr); + place-items: center; + grid-template-areas: + "you-title ai-title" + "you-picked ai-picked"; + max-width: 1000px; + margin: 0 auto; +} + +.results__heading { + font-size: 1.5rem; + letter-spacing: 0.1em; + padding: 4rem 0 8rem; +} +.results__result { + min-width: 10rem; + min-height: 10rem; + /* background: #16213d; + border-radius: 50%; + transform: scale(1.4); */ + z-index: -1; +} + +.results__heading:first-of-type { + grid-area: you-title; +} +.results__heading:last-of-type { + grid-area: ai-title; +} +.results__result:first-of-type { + grid-area: you-picked; +} +.results__result:last-of-type { + grid-area: ai-picked; +} + +.results.show-winner { + grid-template-columns: repeat(3, 1fr); + grid-template-areas: + "you-title . ai-title" + "you-picked result-winner ai-picked"; +} + +.winner .choice::after { + box-shadow: 0 0 0 40px #293251, 0 0 0 80px #232c4b, 0 0 0 130px #1e2949; + animation: winner 1s ease forwards; +} + +@keyframes winner { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.results__winner { + grid-area: result-winner; + display: grid; + place-items: center; +} +.results__text { + font-size: 3.5rem; + padding-bottom: 1.5rem; +} +.play-again { + background: #fff; + outline: none; + border: 2px solid transparent; + border-radius: 0.6rem; + color: var(--dark-text); + padding: 0.6rem 3.5rem; + font-family: inherit; + text-transform: inherit; + font-size: 1.3rem; + letter-spacing: 0.1em; + cursor: pointer; +} +.play-again:focus { + border: 2px solid var(--outline); +} + +/* Rules Button */ +.rules-btn { + position: absolute; + bottom: 2rem; + right: 2rem; + background: none; + outline: none; + border: 2px solid var(--outline); + border-radius: 0.6rem; + color: var(--light-text); + padding: 0.6rem 2.5rem; + font-family: inherit; + text-transform: inherit; + font-size: 1.3rem; + letter-spacing: 0.1em; + cursor: pointer; +} +.rules-btn:focus { + border: 2px solid #fff; +} + +/* Rules Modal */ +.modal { + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + display: grid; + place-items: center; + background: var(--shadow-med); + opacity: 0; + transition: opacity 0.3s ease-in-out; + pointer-events: none; +} +.modal__container { + background: #fff; + border-radius: 0.5rem; +} +.modal__header { + display: flex; + width: 100%; + justify-content: space-between; + padding: 2rem 2rem 1rem; +} +.modal__heading { + font-size: 1.5rem; + color: var(--dark-text); +} +.close-btn { + border: none; + outline: none; + background: none; + cursor: pointer; +} +.rules-img { + padding: 2rem 4rem; +} +.show-modal { + opacity: 1; + pointer-events: initial; +} + + + +/* Utilities */ +.preload * { + transition: none; +} + +.hidden { + display: none; +} + +@media screen and (max-width: 376px){ +.results__text { + font-size: 2.5rem; + margin-top: -90px; + margin-left: auto; + /* padding-bottom: 1.5rem; */ +} +.rules-btn { + position: absolute; + bottom: -7rem; + right: 0rem; + background: none; + outline: none; + border: 2px solid var(--outline); + border-radius: 0.6rem; + color: var(--light-text); + padding: 0.6rem 2.5rem; + font-family: inherit; + text-transform: inherit; + font-size: 1.3rem; + letter-spacing: 0.1em; + cursor: pointer; +} +.results__result { + + min-height: 30rem; + z-index: -1; + margin-top: -70px; +} +.choice { + position: relative; + width: 7rem; + height: 7rem; + background: #fff; + border-radius: 50%; + display: grid; + place-items: center; + box-shadow: inset 0 0.5rem var(--shadow-light); +} + +.winner .choice::after { + box-shadow: 0 0 0 20px #293251, 0 0 0 40px #232c4b, 0 0 0 65px #1e2949; + animation: winner 1s ease forwards; +} +.play-again { + background: #fff; + outline: none; + border: 2px solid transparent; + border-radius: 0.6rem 1rem; + color: var(--dark-text); + padding: 0.6rem; + font-family: inherit; + text-transform: inherit; + font-size: 1.3rem; + letter-spacing: 0.1em; + cursor: pointer; + /* margin-top: -30px; */ + margin-left:-9px; +} +.play-again:focus { + border: 2px solid var(--outline); +} +.game::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + left: 13%; + top: 35%; + background: url("images/bg-triangle.svg") no-repeat; + /* background: url("./images/bg-triangle.svg") no-repeat; */ + z-index: -1; +} +.rules-img { + padding: 2rem; +} +} + + + \ No newline at end of file