Update index.html and style.css for improved project section and resp…

…onsive design

Portfolio-Website-Task1/index.html

@@ -18,7 +18,7 @@
       <div class="container-md ">
         <a class="navbar-brand btn btn-outline-secondary navbtn" href="#Introduction">Introduction</a>
           <a class="navbar-brand btn btn-outline-secondary navbtn" href="#Skills" >Skills</a>
-          <a class="navbar-brand btn btn-outline-secondary navbtn" href="#">Projects</a>
+          <a class="navbar-brand btn btn-outline-secondary navbtn" href="#Projects">Projects</a>
           <a class="navbar-brand btn btn-outline-secondary navbtn" href="#" url="#skills">Connent With me </a>
         </div>
       </nav>
@@ -33,7 +33,7 @@ <h1 style="font-size: 3.4rem; margin-bottom: 30px; margin-top: 40px; margin-left
             <p class="desc col-md-6 text-center" style=" margin-left: 40px;">My name is Aitzaz Hassan and I am a web developer. I have been working in the field of web development for the past 0.5 years. I have worked on a variety of projects ranging from simple websites to complex web applications. I am passionate about creating clean, responsive and user-friendly websites that provide a great user experience. I am always looking to learn new technologies and improve my skills. I am currently looking for new opportunities and would love to work on exciting projects.</p>
           </div>
           <div class="Animation col-md-4 overflow-visible position-relative">
-            <div class="hoverimage">
+            <div class="hoverimage ">
               <img src="media/profilephoto.png" alt="profilephoto" class="profilephoto img-fluid"> 
             </div>
             <div class="animate1">  <img src="media/html5.svg" alt="" class="img-fluid col-md-2 logo1" ></div>
@@ -93,7 +93,7 @@ <h6 class="card-title">Lorem ipsum dolor sit amet <br>consectetur adipisicing el
         </div>
         </div>
       </div>
-        <h1>technologies:</h1>
+        <h1>Tools <span class="text-primary">&</span> technologies:</h1>
         <div class="col">
               <div class="row">
 
@@ -142,24 +142,24 @@ <h5 class="card-title">MS Office</h5>
           <hr>
 
         <!-- ********************----Projects Portion ----************************************************************************ -->
-        <div class="col-md-8" id="Projects" style="margin-top: 90px;">
+        <div class="col-md-8  " id="Projects" style="margin-top: 90px;">
           <h1 style="font-size: 3.4rem; margin-bottom: 30px;  margin-left: 40px; ">My <span class="text-primary">Projects</span></h1>
 
           <p class="desc col-md-6 text-center" style=" margin-left: 40px;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint ut rerum natus minus eos, aliquam optio nam iusto quae ab quas facere corporis quasi atque accusamus? Blanditiis corporis molestias aperiam. </p>
         </div>
 
-       <div class="col">
-         <di class="row">
+       <div class="col Projects">
+         <div class="row">
          <div class="card mb-3" style="max-width: 540px;">
            <div class="row g-0">
              <div class="col-md-4">
                <img src="media/codexecute.png" class="img-fluid rounded-start" alt="...">
              </div>
              <div class="col-md-8">
                <div class="card-body">
-                 <h5 class="card-title">CodeXecute Landing Page</h5>
+                 <h5 class="card-title"><a href="https://aitzaz-hakro.github.io/CodeXecute-LandingPage/">CodeXecute Landing Page</a></h5>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-                 <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+                 <!-- <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> -->
                </div>
              </div>
            </div>
@@ -171,15 +171,19 @@ <h5 class="card-title">CodeXecute Landing Page</h5>
              </div>
              <div class="col-md-8">
                <div class="card-body">
-                 <h5 class="card-title"></h5>
+                 <h5 class="card-title"><a href="https://aitzaz-hakro.github.io/Projects/Project1/">Socially Landing Page</a></h5>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-                 <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+                 <!-- <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> -->
                </div>
              </div>
            </div>
          </div>
        </div>
-       </div>        
+       </div>    
+       <hr style="margin: ;"> 
+       <div class="contactportion">
+
+       </div>   
 
           </div>
         </div>

Portfolio-Website-Task1/style.css

@@ -131,4 +131,20 @@ body{
   }
 .card{
   margin: 15px !important;
-}
+}
+.Projects{
+  margin-bottom: 200px !important;
+}
+media screen and (max-width: 600px){
+  .desc{
+    font-size: 1rem;
+  }
+  .animate1,
+  .animate2,
+  .animate3,
+  .animate4,
+  .animate5, .img {
+    opacity: 0;
+
+  }
+}