Updated header section and styled the css

Author: Anvita Prasad

Art-Gallery/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

Art-Gallery/index.html

@@ -14,6 +14,7 @@
     <div class="header">
         <a href="#container">MY ART</a>
         <a href="#about">ABOUT</a>
+        <a href="#contact">CONTACT ME</a> 
     </div>
     <div id="container">
         <div class="half">
@@ -35,26 +36,28 @@
                 tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue
                 gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta
                 lectus vitae, ultricies congue gravida diam non fringilla.</p>
+            </div>
+            <div id="contact"> 
+                <div class="input">
+                    <p class="red">Do not hesitate to contact me!</p>
+                </div>
+                <div class="input">
+                    <span>Name</span>
+                    <input type="text">
+                </div>
+                <div class="input">
+                    <span>Email</span>
+                    <input type="text">
+                </div>
+                <div class="input">
+                    <span>Message</span>
+                    <input type="text">
+                </div>
+                <div class="input">
+                    <input class="button" type="button" value="Send">
+                </div>
+            </div>
         </div>
-        <div class="input">
-            <p class="red">Do not hesitate to contact me!</p>
-        </div>
-        <div class="input">
-            <span>Name</span>
-            <input type="text">
-        </div>
-        <div class="input">
-            <span>Email</span>
-            <input type="text">
-        </div>
-        <div class="input">
-            <span>Message</span>
-            <input type="text">
-        </div>
-        <div class="input">
-            <input class="button" type="button" value="Send">
-        </div>
-    </div>
 
     <div class="footer">
         Made by ❤Jugesh Raghav

Art-Gallery/mobile.css

@@ -1,23 +1,85 @@
-*{
-    margin:0;
-    padding:0;
-}
-@media (max-width:595px){
-    #container{
-        display:grid;
-        grid-template-columns:auto;
-    }
-    .header{
-        padding-top:30px;
-        padding-bottom:30px;
-        padding-right: 10px;
-        padding-left:10px;
-    }
-    img{
-        width:250px;
-        height:300px;
-    }
-    .footer{
-        padding:10px
-    }
-}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+}
+
+.header {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background-color: #333;
+    padding: 15px 0;
+    color: white;
+    font-size: 18px;
+}
+
+.header a {
+    color: white;
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+.header a:hover {
+    color: #ff6347;
+}
+
+#container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding: 20px;
+}
+
+.half {
+    flex: 1;
+    max-width: 45%;
+    margin: 10px;
+}
+
+img {
+    width: 100%;
+    border-radius: 8px;
+}
+
+.about-block {
+    padding: 20px;
+}
+
+.red {
+    color: red;
+}
+
+.input {
+    margin: 10px 0;
+}
+
+.input span {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.button {
+    padding: 10px 15px;
+    background-color: #333;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.button:hover {
+    background-color: #ff6347;
+}
+
+.footer {
+    text-align: center;
+    padding: 15px;
+    background-color: #333;
+    color: white;
+}