portfolio completed

index.html

@@ -29,7 +29,7 @@
          <!-- hero -->
             <div class="hero-section">
 
-                <div class="faded-text">Yashwant Belgahe</div>
+                <div class="faded-text">Projects</div>
 
                 <div class="hero-section-left">
                     <div class="hero-section-heading">Hi! Yashwant Belgahe</div>
@@ -71,7 +71,7 @@
             </div>
         </div>
         <!-- Project -->
-        <div class="project-section">
+        <div class="project-section" id="projects">
             <h2 class="page-header">Projects</h2>
 
             <div class="project-container">
@@ -266,7 +266,7 @@ <h2 class="skill-heading">
         </div>
 
          <!-- Contact Me -->
-         <div class="contactus-form-container">
+         <div class="contactus-form-container" id="contactme">
           <div class="container">
             <h1 class="Contactus-heading">Contact me</h1> 
 
@@ -275,19 +275,19 @@ <h3 class="Contactus-sub-heading">Question, thoughts or just want to say hello?<
             <div class="contactus-form-container">
               <form class="form" action="">
                 <div class="formfield-container">
-                  <input type="formfield" 
+                  <input class="formfield" 
                   type="text" 
                   name="name" 
                   id="" 
                   placeholder="Enter your name">
 
-                  <input type="formfield" 
+                  <input class="formfield" 
                   type="email" 
                   name="email" 
                   id="" 
                   placeholder="Enter your email address">
 
-                  <input type="formfield" 
+                  <input class="formfield" 
                   type="text" 
                   name="subject" 
                   id="" 
@@ -311,7 +311,30 @@ <h3 class="Contactus-sub-heading">Question, thoughts or just want to say hello?<
 
           </div>
         </div>
+
+        <footer>
+          <div class="container">
+            <div class="footer-wrapper">
+              <div class="footer-faded-text">Yashwant</div>
+
+              <div class="link-wrapper">
+                <div><a href="#projects">Projects</a></div>
+                <div><a href="#skills">Skills</a></div>
+                <div><a href="#contactme">Contact Me</a></div>
+              </div>
+
+              <div class="icon-wrapper">
+                <i class="fa-brands fa-linkedin icon"></i>
+                <i class="fa-brands fa-github icon"></i>
+                <i class="fa-brands fa-twitter icon"></i>
+              </div>
+            </div>
+          </div>
+        </footer>
     </div>
+
+
+
   <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
   <script src="https://kit.fontawesome.com/58a810656e.js" crossorigin="anonymous"></script>
   <script>

styles.css

@@ -647,7 +647,7 @@ a{
   box-shadow: 2px 2px 10px #1f1f1f;
   font-weight: 500;
   border: none;
-  margin-top: 27px;
+  margin-top: 17px;
 
 }
 
@@ -670,4 +670,50 @@ a{
   padding: 0 1rem;
   font-size: 1.5rem;
 
+}
+
+footer{
+position: relative;
+margin-top: -1px;
+background-color: #343d68;
+padding: 5rem;
+}
+
+.footer-wrapper{
+  display: flex;
+  gap: 1rem;
+  padding: 1.2rem;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.footer-faded-text{
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  color: #535c87;
+  user-select: none;
+  font-size: 5rem;
+}
+
+.link-wrapper{
+  display: flex;
+  gap: 1.2rem;
+
+}
+
+.link-wrapper div a{
+  color: white;
+  text-decoration: none;
+  transition: all 0.6s;
+
+}
+
+.link-wrapper div a:hover{
+  color: var(--bgOrange);
+}
+
+.icon-wrapper{
+  display: flex;
+  gap: 2rem;
 }