From 2ee058fd921d99c5aa32b8c7de06748c3e449466 Mon Sep 17 00:00:00 2001
From: Javesshhh <javeshlodha02@gmail.com>
Date: Sun, 16 Oct 2022 23:20:47 +0530
Subject: [PATCH] contribution

---
 CSS/index.css          |  12 +-
 SIGNIN.html            | 537 +++++++++++++++++++++++++++++++++++++++++
 hacktoberfest2022.html |   5 +-
 3 files changed, 548 insertions(+), 6 deletions(-)
 create mode 100644 SIGNIN.html
diff --git a/CSS/index.css b/CSS/index.css
index d3d08999..5e6a5684 100644
--- a/CSS/index.css
+++ b/CSS/index.css
@@ -1,12 +1,14 @@
 /*------- styling for the contributor section ------*/
 .contributors-holder{
-    background-color: black;
+    background-color: #800020;
     padding: 30px;
     text-align: center;
+    justify-content: center;
 }
 .contributors-holder h3{
     font-size: 22px;
-    color: white;
+    font-weight: 100;
+    color: #fff;
     margin-bottom: 30px;
 }
 #contributor , #contributor a , #contributor a img{
@@ -40,11 +42,11 @@
 #contributor a img:hover {
     transition: 0.2s ease;
     scale: 1.05;
-    box-shadow: 0px 1px 8px 5px rgba(249, 247, 247, 0.335);
+    box-shadow: 0px 3px 10px 5px rgba(249, 247, 247, 0.335);
 }
 #contributor a:hover span{
-    transition: 0.5s ease;
-    opacity: 1;
+    transition: 0.6s ease;
+    opacity: 10%;
 }
 
 
diff --git a/SIGNIN.html b/SIGNIN.html
new file mode 100644
index 00000000..6cd6d8b0
--- /dev/null
+++ b/SIGNIN.html
@@ -0,0 +1,537 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>sign_in</title>
+  <!-- <link rel="stylesheet" href="./style.css"> -->
+  <link rel="icon" href="faviconn.ico">
+  <style>
+    :root{
+  --form-height:550px;
+  --form-width: 900px;
+  /*  Sea Green */
+  --left-color:  #800020;
+  /*  Light Blue  */
+  --right-color: #b3002d ;
+}
+
+body, html{
+
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-family: 'Helvetica Neue', sans-serif;
+  letter-spacing: 0.5px;
+}
+
+.container{
+  width: var(--form-width);
+  height: var(--form-height);
+  position: relative;
+  margin: auto;
+  box-shadow: 2px 10px 40px rgba(22,20,19,0.4);
+  border-radius: 10px;
+  margin-top: 150px;
+}
+/* 
+----------------------
+      Overlay
+----------------------
+*/
+.overlay{
+  width: 100%; 
+  height: 100%;
+  position: absolute;
+  z-index: 100;
+  background-image: linear-gradient(to right, var(--left-color), var(--right-color));
+  border-radius: 10px;
+  color: white;
+  clip: rect(0, 385px, var(--form-height), 0);
+}
+
+.open-sign-up{
+    animation: slideleft 1s linear forwards;
+}
+
+.open-sign-in{
+    animation: slideright 1s linear forwards;
+}
+
+.overlay .sign-in, .overlay .sign-up{
+  /*  Width is 385px - padding  */
+  --padding: 50px;
+  width: calc(385px - var(--padding) * 2);
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  padding: 0px var(--padding);
+  text-align: center;
+}
+
+.overlay .sign-in{
+  float: left;
+}
+
+.overlay-text-left-animation{
+    animation: text-slide-in-left 1s linear;
+}
+.overlay-text-left-animation-out{
+    animation: text-slide-out-left 1s linear;
+}
+
+.overlay .sign-up{
+  float:right;
+}
+
+.overlay-text-right-animation{
+    animation: text-slide-in-right 1s linear;
+}
+
+.overlay-text-right-animation-out{
+    animation: text-slide-out-right 1s linear;
+}
+
+
+.overlay h1{
+  margin: 0px 5px;
+  font-size: 2.1rem;
+}
+
+.overlay p{
+  margin: 20px 0px 30px;
+  font-weight: 200;
+}
+/* 
+------------------------
+      Buttons
+------------------------
+*/
+.switch-button, .control-button{
+  cursor: pointer;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 140px;
+  height: 40px;
+  font-size: 14px;
+  text-transform: uppercase;
+  background: none;
+  border-radius: 20px;
+  color: white;
+}
+
+.switch-button{
+  border: 2px solid;
+}
+
+.control-button{
+  border: none;
+  margin-top: 15px;
+}
+
+.switch-button:focus, .control-button:focus{
+  outline:none;
+}
+
+.control-button.up{
+  background-color: var(--left-color);
+}
+
+.control-button.in{
+  background-color: var(--right-color);
+}
+
+/* 
+--------------------------
+      Forms
+--------------------------
+*/
+.form{
+  width: 100%; 
+  height: 100%;
+  position: absolute;
+  border-radius: 10px;
+}
+
+.form .sign-in, .form .sign-up{
+  --padding: 50px;
+  position:absolute;
+    /*  Width is 100% - 385px - padding  */
+  width: calc(var(--form-width) - 385px - var(--padding) * 2);
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  padding: 0px var(--padding);
+  text-align: center;
+}
+
+/* Sign in is initially not displayed */
+.form .sign-in{
+  display: none;
+}
+
+.form .sign-in{
+  left:0;
+}
+
+.form .sign-up{
+  right: 0;
+}
+
+.form-right-slide-in{
+  animation: form-slide-in-right 1s;
+}
+
+.form-right-slide-out{
+  animation: form-slide-out-right 1s;
+}
+
+.form-left-slide-in{
+  animation: form-slide-in-left 1s;
+}
+
+.form-left-slide-out{
+  animation: form-slide-out-left 1s;
+}
+
+.form .sign-in h1{
+  color: var(--right-color);
+  margin: 0;
+}
+
+.form .sign-up h1{
+  color: var(--left-color);
+  margin: 0;
+}
+
+.social-media-buttons{
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin: 15px;
+}
+
+.social-media-buttons .icon{
+  width: 40px;
+  height: 40px;
+  border: 1px solid #dadada;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 10px 7px;
+}
+
+.small{
+  font-size: 13px;
+  color: grey;
+  font-weight: 200;
+  margin: 5px;
+}
+.logo {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    font-size: 18px;
+    background-color: white;
+}
+
+.social-media-buttons .icon svg{
+  width: 25px;
+  height: 25px;
+}
+
+#sign-in-form input, #sign-up-form input{
+  margin: 12px;
+  font-size: 14px;
+  padding: 15px;
+  width: 260px;
+  font-weight: 300;
+  border: none;
+  background-color: #e4e4e494;
+  font-family: 'Helvetica Neue', sans-serif;
+  letter-spacing: 1.5px;
+  padding-left: 20px;
+}
+
+#sign-in-form input::placeholder{
+  letter-spacing: 1px;
+}
+
+.forgot-password{
+  font-size: 12px;
+  display: inline-block;
+  border-bottom: 2px solid #efebeb;
+  padding-bottom: 3px;
+}
+
+.forgot-password:hover{
+  cursor: pointer;
+}
+
+/* 
+---------------------------
+    Animation
+---------------------------
+*/
+@keyframes slideright{
+  0%{
+    clip: rect(0, 385px, var(--form-height), 0);
+  }
+  30%{
+        clip: rect(0, 480px, var(--form-height), 0);
+  }
+  /*  we want the width to be slightly larger here  */
+  50%{
+     clip: rect(0px, calc(var(--form-width) / 2 + 480px / 2), var(--form-height), calc(var(--form-width) / 2 - 480px / 2));
+  }
+  80%{
+         clip: rect(0px, var(--form-width), var(--form-height), calc(var(--form-width) - 480px));
+  }
+  100%{
+     clip: rect(0px, var(--form-width), var(--form-height), calc(var(--form-width) - 385px));
+  }
+}
+
+@keyframes slideleft{
+  100%{
+    clip: rect(0, 385px, var(--form-height), 0);
+  }
+  70%{
+        clip: rect(0, 480px, var(--form-height), 0);
+  }
+  /*  we want the width to be slightly larger here  */
+  50%{
+     clip: rect(0px, calc(var(--form-width) / 2 + 480px / 2), var(--form-height), calc(var(--form-width) / 2 - 480px / 2));
+  }
+  30%{
+         clip: rect(0px, var(--form-width), var(--form-height), calc(var(--form-width) - 480px));
+  }
+  0%{
+     clip: rect(0px, var(--form-width), var(--form-height), calc(var(--form-width) - 385px));
+  }
+}
+
+@keyframes text-slide-in-left{
+  0% {
+    padding-left: 20px;
+  }
+  100% {
+    padding-left: 50px;
+  }
+}
+
+@keyframes text-slide-in-right{
+  0% {
+    padding-right: 20px;
+  }
+  100% {
+    padding-right: 50px;
+  }
+}
+
+@keyframes text-slide-out-left{
+  0% {
+    padding-left: 50px;
+  }
+  100% {
+    padding-left: 20px;
+  }
+}
+
+@keyframes text-slide-out-right{
+  0% {
+    padding-right: 50px;
+  }
+  100% {
+    padding-right: 20px;
+  }
+}
+
+@keyframes form-slide-in-right{
+  0%{
+    padding-right: 100px;
+  }
+  100%{
+    padding-right: 50px;
+  }
+}
+
+@keyframes form-slide-in-left{
+  0%{
+    padding-left: 100px;
+  }
+  100%{
+    padding-left: 50px;
+  }
+}
+
+@keyframes form-slide-out-right{
+  0%{
+    padding-right: 50px;
+  }
+  100%{
+    padding-right: 80px;
+  }
+}
+
+@keyframes form-slide-out-left{
+  0%{
+    padding-left: 50px;
+  }
+  100%{
+    padding-left: 80px;
+  }
+}
+  </style>
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="logo">
+  <img src="donation.png" alt="" height="100px" width="100px">
+</div>
+<div class="container">
+  <div class="overlay" id="overlay">
+    <div class="sign-in" id="sign-in">
+      <h1>Welcome To All Care!</h1>
+      <p></p>
+      <button class="switch-button" id="slide-right-button">Sign In</button>
+    </div>
+    <div class="sign-up" id="sign-up">
+      <h1>Hello! Welcome to All Care</h1>
+      <p>Enter your personal details and start a journey with us</p>
+      <button class="switch-button" id="slide-left-button">Sign Up</button>
+    </div>
+  </div>
+  <div class="form">
+    <div class="sign-in" id="sign-in-info">
+      <h1>Sign In</h1>
+      <div class="social-media-buttons">
+        <div class="icon">
+          <svg viewBox="0 0 24 24">
+            <path fill="#000000" d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
+        </svg>
+        </div>
+        <div class="icon">
+        <svg viewBox="0 0 24 24">
+            <path fill="#000000" d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" />
+        </svg>
+        </div>
+        <div class="icon">
+        <svg viewBox="0 0 24 24">
+          <path fill="#000000" d="M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z" />
+        </svg>
+        </div>
+      </div>
+      <p class="small">or use your email account:</p>
+      <form id="sign-in-form">      
+        <input type="email" placeholder="Email"/>
+        <input type="password" placeholder="Password"/>
+        <p class="forgot-password">Forgot your password?</p>
+        <button class="control-button in">Sign In</button>
+      </form>
+    </div>
+    <div class="sign-up" id="sign-up-info">
+      <h1>Create Account</h1>
+      <div class="social-media-buttons">
+        <div class="icon">
+          <svg viewBox="0 0 24 24">
+            <path fill="#000000" d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
+        </svg>
+        </div>
+        <div class="icon">
+        <svg viewBox="0 0 24 24">
+            <path fill="#000000" d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" />
+        </svg>
+        </div>
+        <div class="icon">
+        <svg viewBox="0 0 24 24">
+          <path fill="#000000" d="M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z" />
+        </svg>
+        </div>
+      </div>
+      <p class="small">or use your email for registration:</p>
+      <form id="sign-up-form">
+        <input type="text" placeholder="Name"/>
+        <input type="email" placeholder="Email"/>
+        <input type="password" placeholder="Password"/>
+        <button class="control-button up">Sign Up</button>
+      </form>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+  <script>
+    var overlay = document.getElementById("overlay");
+
+// Buttons to 'switch' the page
+var openSignUpButton = document.getElementById("slide-left-button");
+var openSignInButton = document.getElementById("slide-right-button");
+
+// The sidebars
+var leftText = document.getElementById("sign-in");
+var rightText = document.getElementById("sign-up");
+
+// The forms
+var accountForm = document.getElementById("sign-in-info")
+var signinForm = document.getElementById("sign-up-info");
+
+// Open the Sign Up page
+openSignUp = () =>{
+  // Remove classes so that animations can restart on the next 'switch'
+  leftText.classList.remove("overlay-text-left-animation-out");
+  overlay.classList.remove("open-sign-in");
+  rightText.classList.remove("overlay-text-right-animation");
+  // Add classes for animations
+  accountForm.className += " form-left-slide-out"
+  rightText.className += " overlay-text-right-animation-out";
+  overlay.className += " open-sign-up";
+  leftText.className += " overlay-text-left-animation";
+  // hide the sign up form once it is out of view
+  setTimeout(function(){
+    accountForm.classList.remove("form-left-slide-in");
+    accountForm.style.display = "none";
+    accountForm.classList.remove("form-left-slide-out");
+  }, 700);
+  // display the sign in form once the overlay begins moving right
+  setTimeout(function(){
+    signinForm.style.display = "flex";
+    signinForm.classList += " form-right-slide-in";
+  }, 200);
+}
+
+// Open the Sign In page
+openSignIn = () =>{
+  // Remove classes so that animations can restart on the next 'switch'
+  leftText.classList.remove("overlay-text-left-animation");
+  overlay.classList.remove("open-sign-up");
+  rightText.classList.remove("overlay-text-right-animation-out");
+  // Add classes for animations
+  signinForm.classList += " form-right-slide-out";
+  leftText.className += " overlay-text-left-animation-out";
+  overlay.className += " open-sign-in";
+  rightText.className += " overlay-text-right-animation";
+  // hide the sign in form once it is out of view
+  setTimeout(function(){
+    signinForm.classList.remove("form-right-slide-in")
+    signinForm.style.display = "none";
+    signinForm.classList.remove("form-right-slide-out")
+  },700);
+  // display the sign up form once the overlay begins moving left
+  setTimeout(function(){
+    accountForm.style.display = "flex";
+    accountForm.classList += " form-left-slide-in";
+  },200);
+}
+
+// When a 'switch' button is pressed, switch page
+openSignUpButton.addEventListener("click", openSignUp, false);
+openSignInButton.addEventListener("click", openSignIn, false);
+  </script>
+
+</body>
+</html>
diff --git a/hacktoberfest2022.html b/hacktoberfest2022.html
index dabd8e3a..7c3edfab 100644
--- a/hacktoberfest2022.html
+++ b/hacktoberfest2022.html
@@ -471,7 +471,7 @@ <h1 class="text-center mt-5 community_title wow fadeInDown animated" data-wow-du
       ==================================== -->
   <div class="community_partner">
     <div class="container" data-aos="fade-up" data-aos-duration="1500">
-      <h1 class="text-center mt-5 community_title wow fadeInDown animated" data-wow-duration="500ms">OUR COMMUNITY
+      <h1 class="text-center mt-5 community_title wow fadeInDown animated" data-wow-duration="500ms">COMMUNITY
         PARTNERS</h1>
       <div class="shape wow fadeInDown" data-wow-delay="0.3s"></div>
 
@@ -580,6 +580,9 @@ <h2 class="section-title wow fadeInDown" data-wow-delay="0.3s">Contact Us</h2>
         </div>
       </div>
     </div>
+    <!-- <div class="signin">
+      <a href="assets/SIGNIN.html"></a>
+    </div> -->
   </section>
   <!-- Contact Section End -->
 
