Merge pull request #412 from P-lavanya16/valid

Added validation form for password and email of Signup form
khushi-joshi-05 · May 22, 2024 · 8e7fb76 · 8e7fb76
2 parents 687540d + 48ec8df
commit 8e7fb76
Show file tree

Hide file tree

Showing 7 changed files with 420 additions and 23 deletions.
diff --git a/Css-files/content.css b/Css-files/content.css
@@ -365,7 +365,6 @@ textarea {
 #butt{
     background-color:rgb(66, 16, 16);
     color: white;
-    padding: 2px;
     border: 1px solid white ;
     border-radius: 2px;
     cursor: pointer;
@@ -409,4 +408,29 @@ textarea {
 
 #bill{
   color: rgb(196, 74, 74);
-}
+}
+.star-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #ccc; /* Default color for empty star */
+  font-size: 15px;
+  padding: 0;
+}
+
+.star-button:hover,
+.star-button:focus {
+  color: #f1c40f; /* Yellow color for filled star */
+  outline: none;
+}
+
+.star-button.rated {
+  color: #f1c40f; /* Yellow color for filled star */
+}
+.menu_items .items {
+  position: relative;
+  /* Ensure relative positioning for the parent container */
+}
+
+
+
diff --git a/Css-files/signup1.css b/Css-files/signup1.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
+/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
 
 body {
   margin: 0;
@@ -157,4 +157,147 @@ body * {
   .card-login {
     width: 90%;
   }
-}
+} */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
+
+body {
+  margin: 0;
+  font-family: 'Noto Sans', sans-serif;
+}
+
+body * {
+  box-sizing: border-box;
+}
+
+.main-login {
+  width: 100vw;
+  height: 100vh;
+  background: hsl(240, 61%, 82%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.left-login {
+  width: 50vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.left-login > h1 {
+  color: #e13838;
+  font-size: 2.5vw;
+}
+
+.left-login-image {
+  width: 35vw;
+}
+
+.right-login {
+  width: 50vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-login {
+  width: 60%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 30px 35px;
+  border-radius: 20px;
+  box-shadow: 0px 10px 40px #00000056;
+}
+
+.card-login > h1 {
+  color: #e13838;
+  font-weight: 800;
+  margin: 0;
+}
+
+.textfield {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 10px 0px;
+}
+
+.textfield > input {
+  width: 100%;
+  border: none;
+  border-radius: 10px;
+  padding: 15px;
+  background: #E6E6FA;
+  color: #030707de;
+  font-size: 12pt;
+  box-shadow: 0px 10px 40px #00000056;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.textfield > label {
+  color: #f0ffffde;
+  margin-bottom: 10px;
+}
+
+.textfield > input::placeholder {
+  color: #000000;
+}
+
+.btn-login, #google-login {
+  width: 100%;
+  padding: 16px 0;
+  margin: 10px 0;
+  border: none;
+  border-radius: 8px;
+  outline: none;
+  text-transform: uppercase;
+  font-weight: 800;
+  letter-spacing: 3px;
+  color: #bec44b;
+  background: #5f50d4;
+  cursor: pointer;
+  box-shadow: 0px 10px 40px -12px #00ff8052;
+}
+
+@media only screen and (max-width: 950px) {
+  .card-login {
+    width: 85%;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .main-login {
+    flex-direction: column;
+  }
+
+  .left-login > h1 {
+    display: none;
+  }
+
+  .left-login {
+    width: 100%;
+    height: auto;
+  }
+
+  .right-login {
+    width: 100%;
+    height: auto;
+  }
+
+  .left-login-image {
+    width: 40vh;
+  }
+
+  .card-login {
+    width: 90%;
+  }
+}
diff --git a/Css-files/style.css b/Css-files/style.css
@@ -264,7 +264,7 @@ body {
 .menu_items .items {
     background-color:#f2f2f2;
     border: 3px solid brown;
-    padding: 25px;
+    padding: 0;
     margin: 15px;
     height: 400px;
     width: 400px;
@@ -292,6 +292,8 @@ body {
     margin-top: 10px;
 }
 
+
+
 .app_download {
     background-color: brown;
     height: 320px;
@@ -459,7 +461,9 @@ ul a{
 
 }
 
-
+.item{
+    padding-bottom: 0px;
+}
 
 .pages{
     padding-top: 25px;
@@ -554,7 +558,7 @@ textarea {
     /* margin-bottom: 20px; */
     /* float: left; */
 
-    
+
     .pages {
         height: fit-content;
         padding: 8px;