final changes

Anishkagupta04 · Jun 18, 2024 · 5656ee6 · 5656ee6
1 parent 113b097
commit 5656ee6
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 36 deletions.
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,15 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "compat-api/css": [
+      "default",
+      {
+        "ignore": [
+          "backdrop-filter"
+        ]
+      }
+    ]
+  }
+}
diff --git a/Css-Files/input.css b/Css-Files/input.css
@@ -1,43 +1,130 @@
-body{
-    background-color: #74EBD5;
-    background-image: linear-gradient(90deg, #74EBD5 0%, #9FACE6 100%);
+body {
+    background-color: black;
     overflow-x: hidden;
     overflow-y: hidden;
     height: 100vh;
     width: 100vw;
+    margin: 0;
 }
-.map{
+
+.container {
     display: flex;
     height: 100%;
-    flex-direction: column;
-    justify-content: center;
+    width: 100%;
+    flex-direction: row;
+    justify-content: right;
     align-items: center;
     gap: 2rem;
-
+    background: #0f0c29;
+    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
+    background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
+    color: white;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+
 }
-.map-input{
+
+.items {
+    width: 25vw;
+    height: 100%;
     display: flex;
+    height: 100vh;
     flex-direction: column;
-    gap: 1.5rem;
+    justify-content: space-around;
+    align-items: center;
+    z-index: 10;
+}
+
+.item1,
+.item2,
+.item3 {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    height: 20vh;
+    background-color: #39365b;
+    backdrop-filter: blur(20px);
+    border: 1px solid #332e5e;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5%;
+    font-weight: bold;
 }
-#text{
-    font-size: 3rem;
+
+.text1 {
+    width: 100%;
+    font-size: 40px;
+    display: flex;
+    justify-content: center;
+}
+.text2 {
+    width: 50%;
+    margin-left: 5px;
+    font-size:20px;
+    display: flex;
+    justify-content: center;
+}
+
+.doc {
+    display: flex;
+    width: 40vw;
+    height: 100vh;
+    justify-content: end;
+}
+.docimg {
+
+    display: flex;
+    justify-content: start;
+}
+.text {
+    width: 50vw;
+    padding-right: 50px;
+    height: 100vh;
     color: black;
-    font-weight: 700;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 20px;
 }
-#location-input{
-    height: 2rem;
-    width: 15rem;
-    font-size: 1.5rem;
-    border-radius: 10px;
-    border: 1px solid white;
-}
-.map button{
-    background-color: #74EBD5;
-    background-image: linear-gradient(90deg, #74EBD5 0%, #9FACE6 100%);
-    border: 2px solid black;
-    height: 2.5rem;
-    border-radius: 15px;
-    font-size: large;
+
+.head1 {
+    padding: auto;
+    color: white;
+    font-size: 70px;
     font-weight: 500;
+}
+
+.head2 {
+    color: wheat;
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.text input {
+    width: 60%;
+    background-color: #f5f5f5;
+    border-radius: 5px;
+    font-size: 20px;
+}
+.text button {
+    width: 25%;
+    height: 50px;
+    border-radius: 10px;
+    font-size: 20px;
+    font: weight 5px;
+    border-radius: 5px;
+    background-color: #f5f5f5;
+    align-items: center;
+    background: #ADA996;
+    background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
+    background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
+}
+
+.text button:hover {
+    cursor: pointer;
+}
+
+.input {
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
 }
diff --git a/Html-Files/input.html b/Html-Files/input.html
@@ -7,17 +7,32 @@
     <title>Document</title>
 </head>
 <body>
-    <!-- <h3>Find Nearby Hospitals</h3>
-    <input id="location-input" type="text" placeholder="Enter your location">
-    <button onclick="findHospitals()">Search</button> -->
-    <!-- <div id="map"></div> -->
-    <div class="map">
-        <div id="text">
-            Enter Your Location
+
+    <div class="container">
+        <div class="items">
+            <div class="item1">
+                <div class="text1">6+</div>
+                <div class="text2">Years of Experience</div>
+            </div>
+            <div class="item2">
+                <div class="text1">5K</div>
+                <div class="text2">Doctor Specialist</div>
+            </div>
+            <div class="item3">
+                <div class="text1">100%</div>
+                <div class="text2">Patient Satisfication</div>
+            </div>
         </div>
-        <div class="map-input">
-            <input id="location-input" type="text" placeholder="Enter the data">
-            <button onclick="getCoordinates()">Get the nearby clinics</button>
+        <div class="doc">
+            <img src="../images/newdoc.png" alt="doc" class="docimg">
+        </div>
+        <div class="text">
+            <div class="head1">Find a doctor for you now!</div>
+            <div class="head2">We take the guesswork out of locating a doctor,hospital or other medical facility in your area for you and your family</div>
+            <div class="input">
+                <input id="location-input" type="text" placeholder="Enter your location">
+                <button onclick="getCoordinates()" >Explore</button>
+            </div>
         </div>
     </div>
 

diff --git a/images/newdoc.png b/images/newdoc.png