diff --git a/src/index.html b/src/index.html
index 6a7c812fa..d22fee6a1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,14 +1,43 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
   <link rel="stylesheet" href="main.css">
   <title>HTML Portfolio</title>
 </head>
+
 <body>
 
-  Welcome to the HTML Portfolio Project
+  <header class="header">
+    <h1 class="name">Sarvajeet Singh</h1>
+    <h2 class="job-title">FrontEnd Developer</h2>
+  </header>
+
+
+  <div class="tagline">
+    <h3>Here's What I Do</h3>
+    <p>Hi, I'm Sarvajeet, and I graduated from <span class="college-name">Kiet Group Of Institutions</span> with a degree in Electrical And Electronics. My interests are in Front End Engineering, and I love to create beautiful and performant products with
+      delightful user experiences.</p>
+  </div>
 
+
+  <div class="skills">
+    <h3>My skills</h3>
+    <p>I enjoy writing front-end code with these technologies</p>
+    <ul>
+      <li>HTML</li>
+      <li>CSS</li>
+      <li>JAVASCRIPT</li>
+    </ul>
+  </div>
+
+
+  <div class="contact">
+    <h3>Contact Me</h3>
+    <p><a href="https://www.linkedin.com/in/sarvajeet-singh-a775a0244/">Linkedin Account</a></p>
+  </div>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/src/main.css b/src/main.css
index e69de29bb..653cf2c35 100644
--- a/src/main.css
+++ b/src/main.css
@@ -0,0 +1,115 @@
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    overflow-x: hidden;
+    
+}
+.header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 200px;
+    background-image: url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
+}
+
+.name{
+    padding: 10px;
+    font-weight: bold;
+    font-size: 50px;
+    letter-spacing: 5px;
+    color: white;
+    text-shadow: 2px 2px 2px black;
+}
+
+.job-title{
+    color: white;
+    opacity: 80%;
+    letter-spacing: 1px;
+}
+
+.tagline{
+    
+    padding: 10px;
+    color: black;
+    background-color: rgb(182, 222, 208);
+}
+.tagline h3{
+    
+    font-weight: 800;
+    font-size: larger;
+    margin: 5px auto;
+    letter-spacing: 2px;
+    
+}
+.tagline p{
+    
+    font-weight: 400;
+    margin: 10px 0;
+    font-size: large;
+}
+.college-name{
+    color: blue;
+    font-weight: 600;
+}
+
+.skills{
+    color:black;
+   
+    padding: 10px;
+    background-color: rgb(219, 202, 180);
+    
+}
+.skills h3{
+    font-size: larger;
+    font-size: larger;
+    font-weight: 800;
+    letter-spacing: 2px;
+    padding: 5px 0;
+    margin: 5px 0;
+}
+.skills p{
+    font-weight: 400;
+    margin: 5px 0;
+    font-size: large;
+}
+.skills ul{
+    padding: 10px 0;
+    margin:5px 0;
+}
+.skills ul li {
+    
+    padding: 5px 0;
+    margin:5px 10px;
+}
+
+.contact{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: white;
+    height: 180px;
+    padding: 10px;
+    background-color: blueviolet;
+}
+
+
+.contact h3{
+    font-size: larger;
+    font-size: larger;
+    font-weight: 800;
+    letter-spacing: 2px;
+    padding: 5px 0;
+    margin: 2px 0;
+}
+.contact p a{
+    cursor: pointer;
+    
+    padding: 5px 0;
+    
+    color: black;
+    
+}
\ No newline at end of file
