Merge pull request #438 from Ojas-Arora/test

UI Refinements: Adding Shadows and Aligning Login Page Elements

src/Components/Login.css

@@ -12,6 +12,12 @@
   width: 2.5rem;
   cursor: pointer;
 }
+.signin-signup.home-link.no-margin-right{
+  position: relative;
+  top: 1.0rem;
+  left: 1.5rem;
+  width: 2.5rem;
+}
 body,
 input {
   font-family: "Poppins", sans-serif;
@@ -28,8 +34,10 @@ input {
   background-color: #121026 !important;
   min-height: 100vh;
   overflow: hidden;
+  margin-top: 20px;
 }
 
+
 .error-text {
   color: darkturquoise !important; /* Default error text color */
   font-size: 1.1rem;
@@ -41,6 +49,8 @@ input {
   height: 100%;
   top: 0;
   left: 0;
+  margin-top: -38vh;
+
 }
 
 .signin-signup {
@@ -65,6 +75,7 @@ form {
   overflow: hidden;
   grid-column: 1 / 2;
   grid-row: 1 / 2;
+
 }
 
 form.sign-up-form {
@@ -219,15 +230,17 @@ form.sign-in-form {
   left: 0;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
+
 }
 
 .container1:before {
   content: "";
   position: absolute;
+  margin-top: 18vh;
   height: 1520px;
   width: 800px;
   top: -10%;
-  right: 48%;
+  right: 53%;
   transform: translateY(-50%);
   background-image: linear-gradient(
     -45deg,
@@ -297,7 +310,7 @@ form.sign-in-form {
 
 .container1.sign-up-mode:before {
   transform: translate(100%, -50%);
-  right: 51%;
+  right: 46%;
   width: 780px;
 }
 

src/Components/Login.js

@@ -128,7 +128,6 @@ const LogIn = () => {
 
   return (
     <div className={`container1 ${isSignUpMode ? 'sign-up-mode' : ''}`}>
-      {/* Home Link */}
       <div className="forms-container">
         <div className="signin-signup">
           <form className="sign-in-form" onSubmit={handleNextClick}>

src/Components/footer_section/BlogPage/BlogPage.css

@@ -5,19 +5,16 @@
     padding: 20px;
     margin: 0 auto;
 }
-
 .blog-page h1 {
     text-align: center;
     margin-bottom: 20px;
 }
-
 .blogs {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
 }
-
 .blog-post {
     background: #1f1c35;
     padding: 10px 20px;
@@ -26,8 +23,7 @@
     width: 100%;
     max-width: 800px;
     overflow: hidden;
-
-
+    box-shadow: 7px 7px 32px 0 #6052ff;
 }
 .blog-post:not(.active):hover {
     box-shadow: 0 0px 10px rgba(193, 193, 193, 0.3);
@@ -41,7 +37,6 @@
 }
 .blog-post.active {
     background-color: #1f1c35;
-
 }
 .blog-post.active * {
     color: #ff21bc;
@@ -50,7 +45,6 @@
     font-size: 13px;
     color: #aaa;
 }
-
 .blogs .content {
     line-height: 1.6;
     transition: 0.1s;
@@ -63,17 +57,19 @@
     margin-bottom: 12px;
     padding: 0 20px;
     border-top: 2px solid #121026;
+    box-shadow: 7px 7px 32px 0 #6052ff;
 }
-.blogs .content.expand {
-    opacity: 1;
-    transform: scaleY(1);
-    padding: 20px;
-}
-
 .home-icon {
     position: absolute;
     top: 1rem;
     left: 1rem;
     width: 2.5rem;
     cursor: pointer;
 }
+.blogs .content.expand {
+    opacity: 1;
+    transform: scaleY(1);
+    padding: 20px;
+}
+
+