grimm-auto-finance · mtoohey31 · Oct 20, 2021 · Oct 19, 2021 · Oct 19, 2021 · Oct 20, 2021
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/src/CarImages/Mercedes.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>GRIMM AUTO-FINANCE</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,36 +1,98 @@
-import logo from './logo.png'
+import { useState } from 'react'
+import logo from './logo-new.png'
+import Honda from './CarImages/Honda.png'
+import Mercedes from './CarImages/Mercedes.png'
+import Ford from './CarImages/Ford.png'
+import Audi from './CarImages/Audi.png'
+import Car from './CarImages/Car.png'
+import Suzuki from './CarImages/Suzuki.png'
+
 import './App.css'
-import HelloAPI from './components/HelloAPI';
 
 function App() {
+  const [count, setCount] = useState(0)
+
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
-        <p>GRIMM AUTO FINANCE</p>
-        <HelloAPI />
-        <p>
-          Edit <code>App.tsx</code> and save to test HMR updates.
+        <p> GRIMM AUTO FINANCING  <br/>
+          AUTO-FINANCING MADE EASY
         </p>
+
+
+
+        <form>
+          <label>Credit Score : </label>
+          <input type="text" placeholder="Credit Score" name="CreditScore" required/>
+
+          <label> Budget : </label>
+          <input type="password" placeholder="Enter Budget" name="budget" required/>
+
+            <label> Vehicle Model and Year : </label>
+          <input type="text" placeholder="Enter Vehicle" name="Vehicle" required/>
+
+            <button type="submit">Enter</button>
+        </form>
+
+
         <p>
           <a
             className="App-link"
-            href="https://reactjs.org"
+            href="https://auto-loan-docs-service-daqxu6wc3q-nn.a.run.app/#/Rate/rate_create"
             target="_blank"
             rel="noopener noreferrer"
           >
-            Learn React
-          </a>
-          {' | '}
-          <a
-            className="App-link"
-            href="https://vitejs.dev/guide/features.html"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Vite Docs
+            Senso API
           </a>
         </p>
+
+        <p>
+            <div class="responsive">
+                <div class="gallery">
+                    <a target="_blank" href="./CarImages/Mercedes.png">
+                        <img src={Mercedes} alt="Cinque Terre" width="512" height="512"/>
+                    </a>
+                    <div class="desc"> Mercedes SUV 2017</div>
+                </div>
+            </div>
+
+
+          <div class="responsive">
+            <div class="gallery">
+              <a target="_blank" href="./CarImages/car.png">
+                <img src={Car} alt="Car" width="512" height="512"/>
+              </a>
+              <div class="desc"> BMW something 2019</div>
+            </div>
+          </div>
+
+            <div class="responsive">
+                <div class="gallery">
+                    <a target="_blank" href="./CarImages/Suzuki.png">
+                        <img src= {Honda} alt="Suzuki " width="1312" height="897"/>
+                    </a>
+                    <div class="desc">Suzuki Pattern 2020 </div>
+                </div>
+            </div>
+
+            <div class="responsive">
+                <div class="gallery">
+                    <a target="_blank" href="./CarImages/Ford.png">
+                        <img src= {Ford} alt="Ford Focus 2016" width="512" height="512"/>
+                    </a>
+                    <div class="desc">Ford Focus 2016</div>
+                </div>
+            </div>
+        </p>
+
+        <p>
+          <button type="button" onClick={() => setCount((count) => count + 1)}>
+            count is: {count}
+          </button>
+        </p>
+
+
       </header>
     </div>
   )

diff --git a/src/CarImages/Audi.png b/src/CarImages/Audi.png
diff --git a/src/CarImages/Car.png b/src/CarImages/Car.png
diff --git a/src/CarImages/Ford.png b/src/CarImages/Ford.png
diff --git a/src/CarImages/Honda.png b/src/CarImages/Honda.png
diff --git a/src/CarImages/Mercedes.png b/src/CarImages/Mercedes.png
diff --git a/src/CarImages/Suzuki.png b/src/CarImages/Suzuki.png
diff --git a/src/index.css b/src/index.css
@@ -11,3 +11,90 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+button {
+  background-color: #01373d;
+  width: 100%;
+  color: #1125fc;
+  padding: 15px;
+  margin: 10px 0;
+  border: none;
+  border-radius: 25px;
+  cursor: pointer;
+}
+form {
+  width: 70%;
+  border-radius: 5px;
+}
+input[type=text], input[type=password] {
+  background: #faf7f7;
+  width: 100%;
+  margin: 8px 0;
+  padding: 52px 20px;
+  display: inline-block;
+  border: 2px solid #0c8c9f;
+  border-radius: 22px;
+  box-sizing: border-box;
+}
+button:hover {
+  opacity: 0.7;
+}
+.cancelbtn {
+  width: auto;
+  padding: 10px 18px;
+  margin: 10px 5px;
+}
+
+
+.container {
+  padding: 25px;
+  border-radius: 23px;
+  background-color: lightblue;
+}
+
+div.gallery {
+  border: 1px solid #ccc;
+}
+
+div.gallery:hover {
+  border: 1px solid #777;
+}
+
+div.gallery img {
+  width: 100%;
+  height: auto;
+}
+
+div.desc {
+  padding: 15px;
+  text-align: center;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.responsive {
+  padding: 0 6px;
+  float: left;
+  width: 24.99999%;
+}
+
+@media only screen and (max-width: 700px) {
+  .responsive {
+    width: 49.99999%;
+    margin: 6px 0;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .responsive {
+    width: 100%;
+  }
+}
+
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
diff --git a/src/logo-new.png b/src/logo-new.png
diff --git a/src/logo.png b/src/logo.png
diff --git a/src/logo.svg b/src/logo.svg