changes

index.html

@@ -4,9 +4,11 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- TODO: change the title tag - this is the name of the tab title -->
-    <!-- TODO: try adding a favicon -->
-    <title>My Profile</title>
+    <!-- TODO: change the title tag - this is the name of the tab title (DONE) -->
+    <!-- TODO: try adding a favicon (DONE)-->
+    <title> Danyaal's Profile</title>
+    <link rel="icon" href="images/favicon.png" type="image/png" />
+
     <script
       src="https://kit.fontawesome.com/a86c93a2cb.js"
       crossorigin="anonymous"
@@ -17,35 +19,29 @@
     <div class="container">
       <div class="card-white">
         <!-- TODO: change the name and subtitle below -->
-        <h1>Hello I'm [edit your name here]</h1>
-        <h2>[Edit your subtitle]</h2>
+        <h1>Hello I'm Danyaal</h1>
+        <h2>Graduate Software Engineer</h2>
         <img
-          src="images/github-icon.webp"
-          alt="Profile Picture of Aaron Lambley"
+          src="images/portrait.jpg"
+          alt="Profile Picture"
           width="200px"
           height="200px"
           class="img-circle"
         />
-        <h3>^ change the image above ^</h3>
-        <p>Write something about yourself</p>
-        <!-- TODO: update the email below - think about how the email link operate. Does it open in the same or new tab? -->
-        <a href="mailto:@test.com" class="btn-blue">Contact Me</a>
+        <p>Testing.</p>
+        <!-- TODO: update the email below - think about how the email link operate. Does it open in the same or new tab? (DONE)-->
+        <a href="email:danyaal.zar@solirius.com" class="btn-blue">Contact Me</a>
       </div>
       <div class="card-white">
         <h3>Follow Me</h3>
-        <!-- TODO: add some social links here and use Fontawesome icons -->
+        <!-- TODO: add some social links here and use Fontawesome icons (DONE) -->
         <!-- https://fontawesome.com/search?o=r&m=free -->
         <ul class="list-inline">
           <li>
-            <a href="https://github.com/lambley">
+            <a href="https://github.com/DanyaalZar-Solirius">
               <i class="fa-brands fa-github icon-larger"></i>
             </a>
           </li>
-          <li>
-            <a href="https://www.instagram.com/maya_the_collie_cross/">
-              <i class="fa-brands fa-instagram icon-larger"></i
-            ></a>
-          </li>
         </ul>
       </div>
     </div>

style.css

@@ -29,66 +29,62 @@
 }
 
 body {
-  background-color:aliceblue;
-  /* TODO: change the font - be mindful of how fonts are imported in the webpage */
-  font-family: 'Noto Sans', sans-serif;
-  /* TODO: change the background colour */
-  color: #827397;
+  background-color: #f5f5f5; /* Light gray background for a clean look */
+  color: #333333; /* Dark gray text for readability */
+  font-family: 'Source Sans Pro', sans-serif;
   font-size: 16px;
-  line-height:normal;
+  line-height: 1.5;
 }
+
 h1, h2, h3 {
-  /* TODO: change the header font colour */
-  color: #4D4C7D;
+  color: #2c3e50; /* Deep blue for headers to create a distinct hierarchy */
 }
 
 h1 {
   font-size: 24px;
-  line-height: 24px;
+  line-height: 28px;
 }
 
 h2 {
   font-size: 20px;
-  line-height: 20px;
+  line-height: 24px;
 }
 
 h3 {
   font-size: 18px;
-  line-height: 18px;
+  line-height: 22px;
 }
 
 p {
   margin-bottom: 40px;
 }
 
 a {
-  /* TODO: change the link colours */
+  color: #2980b9; /* Blue links for clear visibility */
   text-decoration: none;
-  color: #363062;
 }
 
 a:hover {
-  background-color: #827397;
+  color: #1abc9c; /* Teal hover effect for links */
 }
 
 .img-circle {
   border-radius: 50%;
 }
 
 .card-white {
-  /* TODO: change the card background colour */
-  background-color: white;
+  background-color: #ffffff; /* White card background for contrast */
+  color: #333333; /* Matching text color with body for consistency */
   padding: 40px;
-  box-shadow: 0px 10px 30px rgba(0 0 0 / 10%);
+  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   margin: 20px 0px;
   text-align: center;
 }
 
 .btn-blue {
-  /* TODO: change the button colour */
-  background-color:#4D4C7D;
-  color: #E9D5CA;
+  background-color: #3498db; /* Vibrant blue button */
+  color: #ffffff; /* White text on buttons */
   padding: 15px 20px;
   border-radius: 4px;
 }