Merge pull request khushi-joshi-05#1181 from AmbitiousCoder-07/main

Addition of Bootstrap for improving responsiveness of the website

Css-files/footer.css

@@ -24,22 +24,22 @@ footer {
   color: #dddddd;
 }
 
-#email,
-#message {
+#footer-email,
+#footer-message {
   padding-left: 10px;
   padding-right: 10px;
   background-color: rgba(210, 167, 167, 0.5);
   color: white;
   border: none;
 }
 
-#email:focus,
-#message:focus {
+#footer-email:focus,
+#footer-message:focus {
   box-shadow: none;
 }
 
-#email::placeholder,
-#message::placeholder {
+#footer-email::placeholder,
+#footer-message::placeholder {
   color: white;
 }
 

Css-files/login.css

@@ -0,0 +1,127 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
+
+.main-content-login {
+  background-color: brown;
+  padding: 4rem 0;
+  font-family: 'Noto Sans', sans-serif;
+}
+
+.left-login img{
+  width: 100%;
+}
+
+.right-login .title, .modal .title {
+  color: rgb(208, 50, 50);
+  font-weight: 700;
+}
+
+.card-body {
+  padding: 7%;
+}
+
+.textfield {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 20px 0px;
+  position: relative;
+}
+
+.textfield>label {
+  font-weight: bold;
+}
+
+.textfield>input {
+  width: 100%;
+  border: none;
+  border-radius: 10px;
+  padding: 15px;
+  background: #E6E6FA;
+  color: #030707de;
+  font-size: 12pt;
+  box-shadow: 0px 2px 5px #00000056;
+  outline: none;
+}
+
+.textfield>input::placeholder {
+  color: #000000;
+}
+
+.right-login .row{
+  font-size: 0.9rem;
+}
+
+.right-login .row a{
+  text-align: right;
+}
+
+.btn-login {
+  width: 85%;
+  padding: 16px 0;
+  margin: 20px;
+  border: none;
+  border-radius: 8px;
+  outline: none;
+  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 3px;
+  color: white;
+  background: rgb(208, 50, 50);
+  box-shadow: 0px 10px 40px -12px #b10f1f85;
+}
+
+.btn-login:hover {
+  background: rgba(208, 50, 50, 0.9);
+}
+
+#login-hide {
+  right: 20px;
+  position: absolute;
+  bottom: 10%;
+}
+
+.hide-icon {
+  font-size: 27px;
+}
+
+.card {
+  box-shadow: 0px 10px 50px #000000a4;
+  width: 80%;
+}
+
+@media screen and (width <= 600px) {
+  .card{
+    width: 95%;
+  }
+}
+
+@media screen and (width < 992px){
+  .left-login img{
+    width: 60%;
+  }
+  .main-content-login{
+    padding-bottom: 4rem;
+    padding-top: 0;
+  }
+}
+
+#rememberCheckbox{
+  border-color: rgb(208, 50, 50);
+  border-radius: 4px;
+}
+
+#rememberCheckbox:checked{
+  background-color: rgb(208, 50, 50);
+}
+
+#rememberCheckbox:focus{
+  box-shadow: none;
+}
+
+#login-form a{
+    color: rgb(208, 50, 50);
+    text-decoration: none;
+}
+