content overflow solved and CSS improved

ak-sh-at · ak-sh-at · commit c47b66178a27 · 2023-07-05T10:18:09.000+05:30
diff --git a/Projects/Pincode checker/index.html b/Projects/Pincode checker/index.html
@@ -4,15 +4,18 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Kalam&display=swap" rel="stylesheet">
     <title>Document</title>
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
     <div class="container">
-      <div class="row">
+      <div class="row1">
         <div class="col-md-12">
           <div class="form-group">
-            <label for="pincode">Pincode</label>
+            <label for="pincode">Pincode: </label>
             <input
               type="text"
               id="pincode"
diff --git a/Projects/Pincode checker/styles.css b/Projects/Pincode checker/styles.css
@@ -1,28 +1,56 @@
 body{
-    text-align: center;
+    height:90vh;
     display: flex;
     justify-content: center;
+    align-items: center;
+    text-align: center;
 }
 .container {
-    background-color: #c2c2c2;
-    margin: 20px;
+    background-color:#d5f4e6;
     padding: 30px;
-    width: 40%;
-    align-items: center;
+    height:200px;
+    width: 275px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    border: 5px solid black;
+    border-radius: 20px;
   }
   button{
-    margin-top: 3%;
+    background-color: lightgray;
+    margin-top: 30px;
+    font-size: medium;
+    font-family: 'Kalam', cursive;
+    letter-spacing: 2px;
   }
-  label{
+  button:hover{
+    box-shadow: 2px 5px black;
+    background-color: #618685;
+  }
+  label,#result{
     font-size: larger;
+    font-family: 'Kalam', cursive;
+    letter-spacing: 2px;
   }
   #result {
     margin-top: 20px;
     padding: 20px;
-    /* background-color: #f2f2f2; */
     border-radius: 5px;
   }
-
+  #pincode{
+    font-size: small;
+    font-family: 'Kalam', cursive;
+    letter-spacing: 2px;
+    border-radius: 4px;
+  }
+  @media(max-width:245px) {
+    .container{
+        width:fit-content;
+    }
+    #pincode{
+        width: 50%;
+    }
+  }
   .bg {
     background: url(https://i.ibb.co/87GbbFP/2799006.jpg) no-repeat;
     background-size: cover;
