changed styling

Naman-Monga · Nov 8, 2024 · 5d0b90d · 5d0b90d
1 parent 9e13c3f
commit 5d0b90d
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -20,6 +20,10 @@
 
 <body>
     <main>
+        <div class="profile-photo">
+            <!-- Replace with your photo URL -->
+            <img src="./style/me.jpg" alt="Naman Monga" />
+        </div>
         <h1 class="intro">Hello, I'm Naman!</h1>
         <div class="buttons">
           <a target="_blank" href="https://blog.namanmonga.in"
@@ -32,14 +36,14 @@ <h1 class="intro">Hello, I'm Naman!</h1>
         I 💙 programming | speaking | social-media
       </p>
       <div class="icons-social">
-        <a target="_blank" href="https://twitter.com/inamanmonga"><i class="fab fa-twitter"></i></a>
+            <a target="_blank" href="https://twitter.com/inamanmonga"><i class="fab fa-twitter"></i></a>
             <a target="_blank" href="https://www.youtube.com/c/bahutscopehai"><i class="fab fa-youtube"></i></a>
             <a target="_blank" href="https://github.com/Naman-Monga"><i class="fab fa-github"></i></a>
             <a target="_blank" href="https://www.linkedin.com/in/namanmonga"><i class="fab fa-linkedin"></i></a>
             <a target="_blank" href="https://www.instagram.com/findingelephants/"><i class="fab fa-instagram"></i></a>
         </div>
         <br />
-        <p><i class="far fa-envelope"></i> &nbsp; [email protected]</p>
+        <a href="mailto:[email protected]" style="text-decoration: none; color: inherit;"><i class="far fa-envelope"></i> &nbsp; [email protected]</a>
     </main>
 
     <footer style="color: black"></footer>

diff --git a/style/me.jpg b/style/me.jpg
diff --git a/style/styles.css b/style/styles.css
@@ -10,16 +10,21 @@ html {
 
 .btn {
     font-family: "Reem Kufi", sans-serif;
-    background-color: #0277bd;
-    color: white;
-    /* Green */
+    background-color: #64b5f6;
+    color: #1a1a1a;
     border: none;
     padding: 5px 16px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     border-radius: 18px;
+    transition: all 0.3s ease;
+}
+
+.btn:hover {
+    background-color: #90caf9;
+    transform: translateY(-2px);
 }
 
 @media (min-width: 576px) {
@@ -87,4 +92,30 @@ main>.tagline {
     margin-left: 0.675rem;
     width: 2.65rem;
     height: 2.65rem;
+}
+
+.profile-photo {
+    margin-bottom: 1rem;
+}
+
+.profile-photo img {
+    width: 180px;
+    height: 180px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 3px solid #d3ebff;
+    transition: transform 0.3s ease, border-color 0.3s ease;
+}
+
+.profile-photo img:hover {
+    transform: scale(1.05);
+    border-color: #90caf9;
+}
+
+/* Adjust photo size for different screen sizes */
+@media (max-width: 576px) {
+    .profile-photo img {
+        width: 150px;
+        height: 150px;
+    }
 }
diff --git a/style/theme.css b/style/theme.css
@@ -1,14 +1,19 @@
 /* Theme */
 
 main {
-	background: #FAFAFA;
-	color: #0277BD;
+	background: #1a1a1a;
+	color: #e0e0e0;
 }
 
 .icons-social a {
-	color: #0277BD;
+	color: #64b5f6;
+	transition: color 0.3s ease;
 }
 
-.icons-social a svg path{
-	fill: #0277BD;
+.icons-social a:hover {
+	color: #90caf9;
+}
+
+.icons-social a svg path {
+	fill: #64b5f6;
 }