Improved Responsiveness of home page (Spandan-Bhattacharya#329)

css_files/styles.css

@@ -269,15 +269,23 @@ html {
   }
 
 }
-
+.nav-div{
+  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+}
 /* Change the color of links on hover */
-.topnav a:hover {
+.topnav .nav-div:hover {
   background-color: #f99548;
   border-radius: 10px;
   color: #0a1629;
   text-decoration: none;
 }
 
+.topnav a:hover {
+  text-decoration: none;
+}
+
 /* Add a color to the active/current link */
 .topnav a.active {
   /* background-color: #2b61a8; */
@@ -460,16 +468,11 @@ h3 {
   border: rgb(39, 2, 113);
   box-shadow: inset 6px 6px 6px #311f95, inset -6px -6px 6px rgb(88, 29, 206);
   border-radius: 50px;
-  margin: 0px 100px 100px 100px;
+  margin: 20px;
   text-align: center;
-  padding: 40px 40px 50px 40px;
+  padding: 20px;
   color: white;
-  font-size: 29px;
-
-}
-
-.puzzle-title {
-  padding: 30px 300px 50px 300px;
+  font-size: 2rem;
 
 }
 
@@ -478,11 +481,17 @@ h3 {
 
 }
 
-
+@media (max-width:500px){
+  .email a {
+   font-size: 4vw;
+  }
+}
 .email {
 
   height: 100px;
   align-items: center;
+  display: flex;
+  flex-direction: column;
 }
 
 .email button {
@@ -526,8 +535,17 @@ h3 {
 
 /* css for suggestion section ends */
 
+#logo-img{
+  height: 450px;
+  width: 450px;
+}
 
-
+@media (max-width:450px){
+  #logo-img{
+    height: 100vw;
+    width:  100vw;
+  }
+}
 /* css for the footer begins*/
 .footer {
   padding: 20px;

index.html

@@ -108,19 +108,19 @@ <h1>Solve it!</h1>
       <div class="search-space"></div>
 
       <!-- Top Nav-Bar Texts -->
-      <div>
+      <div class="nav-div">
         <a class="active" href="#home"><i class="fa-solid fa-house"></i> Home</a>
       </div>
-      <div>
+      <div class="nav-div">
         <a href="html_files/newContact.html"><i class="fa-solid fa-square-phone"></i> Contact</a>
       </div>
-      <div>
+      <div class="nav-div">
         <a href="html_files/about.html"><i class="fa-solid fa-clipboard-user"></i> About</a>
       </div>
-      <div>
+      <div class="nav-div">
         <a href="./html_files/faq.html"><i class="fa-solid fa-comments"></i> FAQ</a>
       </div>
-      <div>
+      <div class="nav-div">
         <a href="html_files/contributors.html"><i class="fa-solid fa-hand-holding-heart"></i> Contributors</a>
       </div>
 
@@ -199,7 +199,7 @@ <h1>Solve it!</h1>
 
     <section class="hero-section" id="hero">
       <div class="herocontainer">
-        <img src="assets/bodylogo.png" alt="img" height="450px" width="450px" />
+        <img src="assets/bodylogo.png" alt="img" id="logo-img" />
         <h3>Find Solutions to all those mind-numbing puzzles right here!</h3>
         <p class="paragraph">
           Solve it! is a website that contains solvers for common games like