input function front end complete

fac31 · May 27, 2024 · 15ad4bb · 15ad4bb
1 parent 735b725
commit 15ad4bb
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 26 deletions.
diff --git a/public/CSS/index_styles.css b/public/CSS/index_styles.css
@@ -38,37 +38,50 @@ h1 {
 
 
 /* input object */
-.inputContainer {
-    position: relative;
+.indexRectangle {
+    background: rgb(255,165,30);
     width: 650px;
     height: 75px;
+    border-radius: 20px;
     margin: -340px auto 80px;
+    position: relative;
 }
 
-.indexRectangle {
-    background: rgb(255,165,30);
-    width: 100%;
-    height: 100%;
+.indexForm {
+    width: 200px;
+    height: 75px;
     border-radius: 20px;
+    background: transparent;
     position: absolute;
-    top: 0;
-    left: 0;
+    font-size: 28px;
+    color: rgb(30,30,30);
+    outline: none;
+    border: 0px;
+    bottom: -20px;
+    left: 30px;
+    font-family: Arial, Helvetica, sans-serif;
 }
 
 .input {
-    width: 100%;
-    height: 100%;
+    width: 450px;
+    height: 75px;
     border-radius: 20px;
     background: transparent;
     position: absolute;
     top: 0;
     left: 0;
     font-size: 28px;
-    border: none;
     color: rgb(30,30,30);
     outline: none;
+    border: 0px;
+    left: 130px;
+    top: -23px;
+    font-family: Arial, Helvetica, sans-serif;
 }
 
+.input::placeholder {
+    color: rgba(0,0,0,.4)
+}
 
 
 /* submit object */
@@ -89,7 +102,9 @@ h1 {
     position: absolute;
     top: 0;
     left: 0;
-    font-size: 37px
+    font-size: 37px;
+    outline: none;
+    border: 0px;
 }
 
 
@@ -160,10 +175,10 @@ span {
     margin: -1080px 70%;
 }
 
-.cityRectTall {
+/* .cityRectTall {
     background: rgb(255,165,30);
     width: 400px;
     height: 750px;
     border-radius: 20px;
     margin: -80% 1100px;
-}
+} */
diff --git a/public/index.html b/public/index.html
@@ -11,15 +11,11 @@
       <h1 id = "welcomeText">Welcome to Radar</h1>
     </section>
 
-    <section>
-      <div class = "inputContainer">
-        <div class = "indexRectangle">
-          <form class="indexForm" id='indexForm'>
-            RADAR:
-          <input type="text" id="input" class="input" />
-          </form>
-        </div>
-      </div>
+    <section class = "indexRectangle">
+      <form class="indexForm" id='indexForm'>
+        RADAR:
+        <input type="text" id="input" class="input" placeholder="Type here..." />
+      </form>
     </section>
 
     <section class = "indexSquare">
@@ -37,9 +33,6 @@ <h1 id = "welcomeText">Welcome to Radar</h1>
     <section class = "indexCircle">
     </section>
 
-    <section class = "cityRectTall">
-    </section>
-
 <!-- Hidden instructions popup -->
     <div id = "indexHelpPopup" class = "indexHelpPopup">
       <div class = "indexPopupContent">