updated contact form for isuue #157

Kritika30032002 · Mar 13, 2024 · a6155d1 · a6155d1
1 parent b595b87
commit a6155d1
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 97 deletions.
diff --git a/public/css/contact.css b/public/css/contact.css
@@ -1,117 +1,188 @@
-.modal-div{
+.modal-div {
+  margin-bottom: 35px;
+  margin-top: 25px;
   width: 60%;
   display: block;
-  background-color:#F3F8FF;
-   padding:2vh ;
-    border-radius:0 10px 10px 0; 
-    box-shadow:4px 4px 4px black
-
-
-}
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
+  background-color: rgba(255, 255, 255, 0.473);
+  padding: 2vh;
+  border-radius: 0 10px 10px 0;
+  box-shadow: 4px 4px 4px black;
+}
+
+.modal-div.dark {
+  background-color: rgba(255, 255, 255, 0.105);
+}
+
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
 
-.suggest-subheader{
+.suggest-subheader {
   text-align: center;
-  margin:4vh 0;
-
-
+  margin: 4vh 0;
+
+  font-size: 2rem;
+  font-weight: 500;
+  color: #001e45;
+}
+.suggest-subheader.dark {
+  text-align: center;
+  margin: 4vh 0;
+
   font-size: 2rem;
   font-weight: 500;
-  color: black;
-}
-.input-box{
- background-color:inherit;
- border:none;
- border-bottom:2px solid black;
- border-radius:none!important;
- font-size: 1.5rem;
- border-color: #3559E0;
- padding: 1px 5px;
- width: 50%;
-
-}
-.input-box:focus{
+  color: rgb(255, 255, 255);
+}
+.input-box {
+  background-color: inherit;
+  border: none;
+  border-bottom: 2px solid black;
+  border-radius: none !important;
+  font-size: 1rem;
+  border-color: #002d67;
+  padding: 1px 5px;
+  width: 50%;
+}
+.input-box:focus {
   outline: none;
-  border-color: #a7daff;
+  border-color: #63a0cc;
+}
+.input-box.dark {
+  background-color: inherit;
+  border: none;
+  border-bottom: 2px solid #63a0cc;
+  border-radius: none !important;
+  font-size: 1rem;
+  color: #a7daff;
+  padding: 1px 5px;
+  width: 50%;
+}
+.input-box.dark:focus {
+  outline: none;
+  border-color: #002d67;
+}
+.input-header {
+  font-size: 1.25rem;
+  color: #001e45;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
 }
-.input-header{
+.input-header.dark {
   font-size: 1.25rem;
-  color: #3559E0;
+  color: #ffffff;
   font-weight: 600;
-
   margin-bottom: 0.5rem;
 }
-.suggest-textarea{
-    width: 80%;
-    margin: 1vh 0;
-    border-radius: 5px;
-    background-color: #F3F8FF;
-    border: 2px solid #3559E0;
-    font-size: 1.5rem;
-    padding: 5px;
-}
-.suggest-textarea:focus{
-  border-color: #a7daff;
+
+input::placeholder {
+  color: #7a7a7a;
+  font-size: 1rem;
+}
+textarea::placeholder {
+  color: #7a7a7a;
+  font-size: 1rem;
+}
+
+.suggest-textarea {
+  background-color: inherit;
+  width: 80%;
+  margin: 1vh 0;
+  border-radius: 5px;
+  border: 2px solid #002d67;
+  font-size: 1rem;
+  padding: 5px;
+}
+.suggest-textarea:focus {
+  border-color: #63a0cc;
   outline: none;
 }
-.suggest-btn{
+.suggest-textarea.dark {
+  background-color: inherit;
+  width: 80%;
+  margin: 1vh 0;
+  border-radius: 5px;
+  border: 2px solid #63a0cc;
+  font-size: 1rem;
+  padding: 5px;
+  color: #a7daff;
+}
+.suggest-textarea.dark:focus {
+  border-color: #002d67;
+  outline: none;
+}
+.suggest-btn {
   display: block;
-  margin: auto;
+  margin: 25px auto;
   padding: 1vh 4vh;
-  font-size: 1.5rem;
-  background-color: #3559E0;
+  font-size: 1.4rem;
+  background-color: #002d67;
   color: white;
   border: none;
-  box-shadow:3px 3px 3px black ;
-  border-radius:5px ;
+  box-shadow: 3px 3px 3px black;
+  border-radius: 5px;
   cursor: pointer;
 }
-.suggest-btn:active{
+.suggest-btn:active {
   box-shadow: none;
 }
-.suggest-btn:hover{
+.suggest-btn:hover {
   background-color: #a7daff;
-  color:#3559E0 ;
+  color: #002d67;
 }
-.banner-img-suggest{
-  width:45%;
-  border-radius:10px 0 0 10px;
+.suggest-btn.dark {
+  display: block;
+  margin: 25px auto;
+  padding: 1vh 4vh;
+  font-size: 1.4rem;
+  background-color: #a7daff;
+  color: #002d67;
+  border: none;
+  box-shadow: 3px 3px 3px black;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.suggest-btn.dark:active {
+  box-shadow: none;
+}
+.suggest-btn.dark:hover {
+  background-color: #002d67;
+  color: white;
+}
+.banner-img-suggest {
+  margin-bottom: 15px;
+  width: 45%;
+  border-radius: 10px 0 0 10px;
   box-shadow: 4px 4px 4px black;
 }
-.input-suggest-flexbox{
+.input-suggest-flexbox {
   display: flex;
 }
-.modal-box{
-  width:68%;
-   margin:3vh auto;
-   border-radius:10px;
-   max-height:fit-content;
-   display:flex;
-   z-index: 100;
-}
-@media only screen and (max-width: 768px)
-{
-  .modal-box{
-      flex-direction: column;
-
+.modal-box {
+  width: 68%;
+  margin: 3vh auto;
+  border-radius: 10px;
+  max-height: fit-content;
+  display: flex;
+  z-index: 100;
+}
+@media only screen and (max-width: 768px) {
+  .modal-box {
+    flex-direction: column;
   }
-  *{
-      font-size: 70%;
+  * {
+    font-size: 70%;
   }
-  .banner-img-suggest{
-      width: 100%;
-      height: 20vh;
-      display: none;
+  .banner-img-suggest {
+    width: 100%;
+    height: 20vh;
+    display: none;
   }
-  .input-suggest-flexbox{
-      flex-direction: column;
+  .input-suggest-flexbox {
+    flex-direction: column;
   }
-  .modal-div{
-      width: 100%;
-      border-radius: 10px 10px 10px 10px;
+  .modal-div {
+    width: 100%;
+    border-radius: 10px 10px 10px 10px;
   }
-  .suggest-textarea{
-      width: 100%;
+  .suggest-textarea {
+    width: 100%;
   }
 }
-
diff --git a/public/css/dark-styles.css b/public/css/dark-styles.css
@@ -30,7 +30,7 @@ button.secondary.dark {
   color: #192e4e;
   background-color: #a7daff;
 }
-}
+
 #about.dark {
   background-color: #093c7e !important;
   color: white !important;

diff --git a/public/css/styles.css b/public/css/styles.css
@@ -71,7 +71,7 @@ nav a:hover {
   border-radius: 50px;
   background-color: #a7daff;
   background: transparent;
-  color:#a7daff;
+  color: #a7daff;
   margin-right: 20px;
 }
 button {
@@ -82,7 +82,7 @@ button {
   outline: none;
   background: var(--accent-clr);
   color: #a7daff;
-  font-size: 1.0rem;
+  font-size: 1rem;
   border-radius: 10px;
   transition: background-color 0.5s, box-shadow 0.5s, color 0.5s;
 
@@ -95,7 +95,7 @@ button.secondary {
   outline: none;
   background: var(--accent-clr);
   color: #a7daff;
-  font-size: 1.0rem;
+  font-size: 1rem;
   border-radius: 10px;
   transition: background-color 0.5s, box-shadow 0.5s, color 0.5s;
   -webkit-tap-highlight-color: transparent;
@@ -264,25 +264,23 @@ header h1 {
   padding: 1rem;
   display: flex;
 }
-.vote-container{
+.vote-container {
   display: flex;
 }
-.inner-secret-text{
+.inner-secret-text {
   margin-left: 30%;
   margin-right: 15px;
 }
-.vote-container{
+.vote-container {
   padding: 0 5px;
 }
-.vote-container img{
+.vote-container img {
   margin: 0 5px;
 }
-.vote-count{
+.vote-count {
   margin-right: 10px;
 }
 
-
-
 @media (max-width: 600px) {
   .hero {
     flex-direction: column-reverse;
@@ -325,10 +323,10 @@ header h1 {
     align-items: center;
     width: 100%;
   }
-  button{
+  button {
     font-size: 0.9em;
   }
-  .tagline{
+  .tagline {
     font-size: 0.6rem;
   }
 }

diff --git a/views/contact.ejs b/views/contact.ejs
@@ -6,7 +6,7 @@
 
           <div class='modal-div'>
 
-       <p class='suggest-subheader'>Get In Touch</p>
+       <p class='suggest-subheader'> Get In Touch</p>
        <div class='input-suggest-flexbox' >
        <div style="margin:3vh 4vh">
        <p class='input-header' id="NAME">Name</p>
@@ -36,7 +36,7 @@
 
        <div style="margin:4vh">
        <p class='input-header' id="TEXT">Message</p>
-        <textarea class='suggest-textarea' cols="43" rows="3" placeholder='Hello!'></textarea>
+        <textarea class='suggest-textarea' cols="30" rows="3" placeholder='Hello!'></textarea>
 
        </div>
        <button class='suggest-btn' id="send_button">Send</button>