Improved_Home

Author: Prithwi32

index.html

@@ -20,10 +20,10 @@
         </nav>
        <!-- navBar end -->
     <div class="container">
-        <h1>Who are we?</h1>
+        <h1 id="main-heading">Who are we?</h1>
         <div class="container_1">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores maxime blanditiis veritatis nisi eligendi repellendus, ducimus cupiditate quis veniam deserunt velit! Laboriosam assumenda, commodi quae neque fugit unde nam veniam aliquid optio? Necessitatibus sed maiores delectus ab perferendis magnam nobis excepturi vitae cum eos, enim ipsam quos explicabo, voluptas beatae assumenda, cupiditate quasi voluptatem ut nostrum culpa blanditiis quidem dolor veritatis. Eum mollitia amet est aliquid dicta, temporibus error laboriosam quos animi laudantium sequi ratione eius quam debitis veritatis libero deleniti a tempora tenetur aperiam repellat nihil! Ut voluptates at, aliquid architecto, aperiam, perferendis ipsa tempora esse vitae atque laudantium!</p>
-            <img src="/public/images/home-img.png" alt="">
+            <p id="about">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex cumque accusantium, neque veritatis a est voluptates nisi sit odio mollitia.</p>
+            <img id="home_img" src="/public/images/home-img.png" alt="">
         </div>
         <div class="container_2">
             <div class="first">
@@ -32,7 +32,7 @@ <h1>Who are we?</h1>
                 </div>
                 <div class="innerTwo">
                     <h3>Problem of the day</h3>
-                    <button>visit</button>
+                    <button>VISIT</button>
                 </div>
             </div>
             <div class="second">
@@ -41,7 +41,7 @@ <h3>Problem of the day</h3>
                 </div>
                 <div class="innerTwo">
                     <h3>Contests</h3>
-                    <button>visit</button>
+                    <button>VISIT</button>
                 </div>
             </div>
         </div>

public/css/index.css

@@ -7,7 +7,7 @@
 body {
   height: 100vh;
   width: 100%;
-  background-color: black;
+  background-color: rgb(26, 23, 32);
   color: white;
 }
 
@@ -40,7 +40,7 @@ ul.nav-ul li a:hover:not(.active) {
 }
 
 ul.nav-ul li a.active {
-  color: #04aa6d;
+  color: #84ebc5;
 }
 
 ul.nav-ul li.right {
@@ -54,18 +54,30 @@ ul.nav-ul li.right {
   }
 }
 
-h1 {
+#main-heading {
   margin-top: 60px;
   margin-left: 150px;
   color: bisque;
   text-align: start;
+  font-size: 48px;
+  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
+    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+}
+
+#about {
+  font-size: 35px;
+  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif,
+    "Lucida Sans", Arial, sans-serif;
 }
 
 .container_1 {
   display: flex;
   margin: 50px 150px;
   gap: 18%;
 }
+#home_img {
+  height: 300px;
+}
 
 .container_2 {
   display: flex;
@@ -91,66 +103,86 @@ h1 {
 }
 
 .first {
+  padding: 10px;
   width: 50%;
   height: 50%;
   border: 3px solid rgb(132, 128, 128);
   border-radius: 10px;
 }
 
 .second {
+  padding: 10px;
   width: 50%;
   height: 50%;
   border: 3px solid rgb(146, 140, 140);
   border-radius: 10px;
 }
 
+h3 {
+  color: rgba(241, 177, 202, 0.995);
+  font-size: 30px;
+  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  text-shadow: 2px 1px rgb(243, 31, 16);
+}
+
 button {
+  width: 120px;
   border-radius: 6px;
   padding: 8px;
-  background-color: rgb(216, 236, 125);
+  background-color: rgba(100, 11, 118, 0.806);
   margin: 10%;
-  font-size: 18px;
-  font-weight: 400;
-  color: rgb(14, 14, 2);
-  box-shadow: 2px 2px #0d0333;
+  font-size: 26px;
+  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+  font-weight: 700;
+  color: whitesmoke;
+  box-shadow: 2px 2px #ebeaed;
+}
+
+button:hover {
+  cursor: pointer;
+  width: 140px;
+  color: #e7eae6;
+  background-color: #04aa6d;
 }
 
 .innerOne img {
-  width: 60%;
+  width: 88%;
 }
 
-.foot-container{
-    display: flex;
-    float: right;
-    background-color: #0d0333; ;
+.foot-container {
+  width: 100%;
+  height: 45px;
+  display: flex;
+  justify-content: center;
+  background-color: #0d0333;
 }
 
 .fa {
-    padding: 10px;
-    font-size: 30px;
-    width: 30px;
-    text-align: center;
-    text-decoration: none;
-    margin: 5px 12px;
-    border-radius: 70%;
-    gap: 15px;
-  }
-  
-  .fa:hover {
-      opacity: 0.7;
-  }
-  
-  .fa-facebook {
-    background: #3B5998;
-    color: white;
-  }
-  
-  .fa-twitter {
-    background: #55ACEE;
-    color: white;
-  }
+  padding: 10px;
+  font-size: 30px;
+  width: 30px;
+  text-align: center;
+  text-decoration: none;
+  margin: 5px 42px;
+  border-radius: 70%;
+  gap: 15px;
+}
 
-  .fa-instagram {
-    background: #125688;
-    color: white;
-  }
+.fa:hover {
+  opacity: 0.8;
+}
+
+.fa-facebook {
+  background: #3b5998;
+  color: white;
+}
+
+.fa-twitter {
+  background: #55acee;
+  color: white;
+}
+
+.fa-instagram {
+  background: #125688;
+  color: white;
+}