Add files via upload

Jarvis1337 · Oct 25, 2021 · 1e26de2 · 1e26de2
1 parent f69075a
commit 1e26de2
Show file tree

Hide file tree

Showing 10 changed files with 977 additions and 0 deletions.
diff --git a/Your's Jarvis/Css/Login.css b/Your's Jarvis/Css/Login.css
@@ -0,0 +1,249 @@
+/* Google Font Link */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins" , sans-serif;
+}
+body{
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-image: url("../image/image.jpg");
+  background-size: cover;
+  padding: 30px;
+}
+.container{
+  position: relative;
+  max-width: 100%;
+  border-radius: 8%;
+  width: 400px;
+  background-color: rgba(0, 0, 0, 0.25);
+  padding: 40px 30px;
+  box-shadow: 0 5px 10px rgba(0,0,0,0.25);
+  perspective: 700px;
+}
+.container .cover{
+  position: absolute;
+  top: 0;
+  left: 100%;
+  height: 100%;
+  width: 40%;
+  z-index: 98;
+  transition: all 1s ease;
+  transform-origin: left;
+  transform-style: preserve-3d;
+}
+
+ .container .cover .front,
+ .container .cover .back{
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+.cover .back{
+  transform: rotateY(180deg);
+  backface-visibility: hidden;
+}
+.container .cover::before,
+.container .cover::after{
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background: aqua;
+  opacity: 0.3;
+  z-index: 12;
+}
+.container .cover::after{
+  opacity: 0.3;
+  transform: rotateY(180deg);
+  backface-visibility: hidden;
+}
+.container .cover img{
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  z-index: 10;
+}
+.container .cover .text{
+  position: absolute;
+  z-index: 130;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.cover .text .text-1,
+.cover .text .text-2{
+  font-size: 26px;
+  font-style: italic;
+  font-weight: 600;
+  color: #fff;
+  text-align: center;
+}
+.cover .text .text-2{
+  font-size: 15px;
+  font-weight: 500;
+}
+.container .forms{
+  height: 100%;
+  width: 100%;
+  background-color:  rgba(255, 255, 255,0.0);
+}
+.container .form-content{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.form-content .login-form,
+.form-content{
+  width: 100%;
+}
+
+.forms .form-content .title span{
+  font-size: 30px;
+  padding-left: -12px;
+}
+
+.forms .form-content .title span:hover{
+  color: aqua;
+}
+
+.forms .form-content .title{
+  position: relative;
+  font-size: 24px;
+  font-style: italic;
+  font-weight: 500;
+  color: rgb(255, 255, 255);
+}
+.forms .form-content .title:before{
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 3px;
+  width: 25px;
+  background: aqua;
+}
+.forms .title:before{
+  width: 20px;
+}
+.forms .form-content .input-boxes{
+  margin-top: 30px;
+}
+
+
+
+.forms .form-content .input-box{
+  display: flex;
+  align-items: center;
+  height: 50px;
+  width: 100%;
+  margin: 10px 0;
+  position: relative;
+}
+.form-content .input-box input{
+  height: 100%;
+  width: 100%; 
+  background-color: rgba(0,0,0,0.20);
+  color: #fff;
+  font-style: italic;
+  outline: none;
+  border: none;
+  padding: 0 30px;
+  font-size: 16px;
+  font-weight: 500;
+  border-bottom: 2px solid rgba(0,0,0,0.01);
+  transition: all 0.3s ease;
+}
+
+::-webkit-input-placeholder{
+  color: rgba(255, 255, 255, 0.40)
+}
+
+.form-content .input-box input:focus,
+.form-content .input-box:valid{
+  border-color: aqua
+}
+
+.form-content .input-box input:valid{
+  border-color: white;
+}
+
+.form-content .input-box i{
+  position: absolute;
+  color: aqua;
+  font-size: 24px;
+}
+.forms .form-content .text{
+  font-size: 14px;
+  font-weight: 500;
+  font-style: italic;
+  color: #333;
+}
+.forms .form-content .text a{
+  text-decoration: none;
+  font-style: italic;
+  color: rgb(255, 255, 255);
+}
+.forms .form-content .text a:hover{
+  color: aqua;
+  /*text-decoration: underline;*/
+}
+.forms .form-content .button{
+  color: #fff;
+  margin-top: 40px;
+}
+.forms .form-content .button input{
+  color: #fff;
+  background-color: rgba(255,255,255,0.1);
+  border-radius: 6px;
+  padding: 0;
+  cursor: pointer;
+  transition: all 0.4s ease;
+}
+.forms .form-content .button input:hover{
+  color: aqua;
+  background-color: rgba(255, 255, 255, 0.2)
+}
+.forms .form-content label{
+  color: #ffffff;
+  cursor: pointer;
+}
+.forms .form-content label:hover{
+  text-decoration: underline;
+}
+.forms .form-content .login-text,
+.forms .form-content .sign-up-text{
+  text-align: center;
+  margin-top: 25px;
+}
+.container #flip{
+  display: none;
+}
+@media (max-width: 730px) {
+  .container .cover{
+    display: none;
+  }
+  .form-content .login-form,
+  .form-content{
+    width: 100%;
+  }
+  .form-content{
+    display: none;
+  }
+  .container ~ .forms{
+    display: block;
+  }
+  .container ~ .forms .login-form{
+    display: none;
+  }
+}