diff --git a/src/index.html b/src/index.html
index 6a7c812fa..61b824cd4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,8 +7,70 @@
   <title>HTML Portfolio</title>
 </head>
 <body>
+  <header>
+    <div class="container">
+        <h1>Shaik Rasool</h1>
+        <div class="image">
+        <img src="https://res.cloudinary.com/dd20dakdu/image/upload/v1715845852/download_kftkvo.jpg" alt="shaik-rasool" height="100" width="100">
+        </div>
+        <nav>
+            <ul>
+                <li><a href="#about">About Me</a></li>
+                <li><a href="#skills">Skills</a></li>
+                <li><a href="#projects">Projects</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+        </nav>
+    </div>
+</header>
 
-  Welcome to the HTML Portfolio Project
+<section id="about" class="about-section">
+    <div class="container">
+        <h2>About Me</h2>
+        <p>I am a student with experience in web development (HTML, CSS, JavaScript) and C programming. Passionate about playing badminton and online games, I have a strong background in developing responsive websites and writing efficient code.</p>
+    </div>
+</section>
+
+<section id="skills" class="skills-section">
+    <div class="eff">
+        <h2>Skills</h2>
+    </div>
+    <div class="effect">
+        <ul>
+            <li>HTML & CSS</li>
+            <li>JavaScript</li>
+            <li>c programming(basic)</li>
+        </ul>
+    </div>
+</section>
+
+<section id="projects" class="projects-section">
+    <div class="container">
+        <h2>Projects</h2>
+        <div class="project">
+            <h3>Project One</h3>
+            <p>I developed a personal project that allows users to check the weather and air quality by inputting their longitude and latitude coordinates. This project utilizes APIs to fetch real-time weather data and air quality indices, providing users with up-to-date environmental information. The technologies used include HTML, CSS, JavaScript, and API integration. The outcome was a fully functional web application that enhances user awareness of environmental conditions in their specific location.</p>
+            <a href=" https://merasool.github.io/weather.com/" class="btn">View Project</a>
+        </div>
+        <div class="project">
+            <h3>Project Two</h3>
+            <p>Description of your project, its technologies, and outcomes.</p>
+            <a href="#" class="btn">View Project</a>
+        </div>
+    </div>
+</section>
+
+<section id="contact" class="contact-section">
+    <div class="container">
+        <h2>Contact</h2>
+        <p>If you'd like to get in touch, feel free to reach out via email or connect with me on LinkedIn.</p>
+        <img src="https://res.cloudinary.com/dd20dakdu/image/upload/v1723321629/360_F_497386968_dqjeA07m8bhT9156WbUseVqrqhOBjgYB_prgm9i.jpg" alt="mail"href="https://mail.google.com/mail/u/0/?tab=rm&ogbl#inbox" class="btn" height="20" width="20"></img>
+
+        <img src="https://res.cloudinary.com/dd20dakdu/image/upload/v1723832770/linkiedin_ryrgob.png" href="https://www.linkedin.com/in/shaik-rasool/" class="btn" height="20" weidth="20"></img>
+        <img src="https://res.cloudinary.com/dd20dakdu/image/upload/v1723832989/github_1_evvqnp.png" href="https://github.com/merasool" class="btn" height="20" weidth="20"></img>
+
+    </div>
+</section>
 
 </body>
 </html>
diff --git a/src/main.css b/src/main.css
index e69de29bb..ee17b69e9 100644
--- a/src/main.css
+++ b/src/main.css
@@ -0,0 +1,141 @@
+
+body {
+    font-family: Arial, sans-serif;
+    color: #333;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    width: 80%;
+    margin: 0 auto;
+    
+}
+
+.effect :hover{
+    color: #ff6347;
+}
+
+
+header {
+    background-color: #333;
+    color: #fff;
+    padding: 10px 0;
+    text-align: center;
+}
+
+header h1 {
+    margin: 0;
+    font-size: 2.5em;
+}
+
+nav ul {
+    list-style: none;
+    padding: 0;
+}
+
+nav ul li {
+    display: inline;
+    margin: 0 10px;
+}
+
+nav ul li a {
+    color: #fff;
+    text-decoration: none;
+    font-size: 1.1em;
+}
+
+nav ul li a:hover {
+    color: #ff6347;
+}
+
+section {
+    padding: 20px 0;
+    border-bottom: 1px solid #ddd;
+}
+
+section h2 {
+    font-size: 2em;
+    margin-bottom: 20px;
+}
+
+
+.about-section p {
+    font-size: 1.2em;
+}
+
+
+.skills-section ul {
+    list-style: none;
+    padding: 0;
+}
+
+.skills-section ul li {
+    background-color: #f4f4f4;
+    margin-bottom: 10px;
+    padding: 10px;
+    font-size: 1.1em;
+}
+
+
+.projects-section .project {
+    margin-bottom: 20px;
+}
+
+.projects-section .project h3 {
+    font-size: 1.5em;
+    margin-bottom: 10px;
+}
+
+.projects-section .btn {
+    display: inline-block;
+    background-color: #333;
+    color: #fff;
+    padding: 10px 20px;
+    text-decoration: none;
+    border-radius: 5px;
+}
+
+.projects-section .btn:hover {
+    background-color: #ff6347;
+}
+
+
+.contact-section p {
+    font-size: 1.2em;
+}
+
+.contact-section .btn {
+    display: inline-block;
+    background-color: #333;
+    color: #fff;
+    padding: 10px 10px;
+    text-decoration: none;
+    border-radius: 5px;
+    margin-right: 5px;
+}
+
+.contact-section .btn:hover {
+    background-color: #ff6347;
+}
+
+
+footer {
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    padding: 10px 0;
+    margin-top: 10px;
+}
+
+footer p {
+    margin: 0;
+}
+.image{
+     align-items: right;
+    justify-content: right;
+    
+
+}
+
