diff --git a/README.md b/README.md
index 7d95e0f..1f65f5e 100644
Binary files a/README.md and b/README.md differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c69f090
--- /dev/null
+++ b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link
+    href="https://cdn.jsdelivr.net/npm/remixicon@4.7.0/fonts/remixicon.css"
+    rel="stylesheet"
+/>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js"></script>
+</head>
+<body>
+    <h1>Hi, My Name is Mohin Goyal</h1>
+    <h2>"Building web, one element at a time"</h2>
+    <p>I am a student in Thapar Institute of information and technology and I have joined MLSC to learn exceptional skills in modern fields like web development with interactive seniors.I hope it will be a really good journey ahead.</p>
+    <h2>Get in touch with me;</h2>
+    <div id="box">
+        <div id="email"> 
+            <i class="ri-mail-line"></i><br>
+            
+            <a href="mailto:mohiingoyal@gmail.com">Email me.</a>
+            
+        </div> 
+        <div id="linkedin"> 
+            <i class="ri-linkedin-fill"></i><br>
+        <a href="https://www.linkedin.com/in/mohin-goyal-ab9550379"target="_blank">Connect with on linkedin.</a> </div>
+        <div id="Github">
+            <i class="ri-github-fill"></i><br>
+            <a href="http://github.com/Mohingoyal" target="_blank">View my Github account.</a></div>
+
+    </div>
+    <div id="backgroundcolors">
+    <button onclick="changeColor()">Click me to get a new background color.</button><br>
+    <button onclick="changeColor1()">surprise!</button><br>
+    <button onclick="changeColor2()">Try this one.</button></div>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..488c9b9
--- /dev/null
+++ b/script.js
@@ -0,0 +1,3 @@
+function changeColor() {document.body.style.backgroundColor="lightgreen";}
+function changeColor1() {document.body.style.backgroundColor="lightblue";}
+function changeColor2() {document.body.style.backgroundColor="lavender";}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e8637ae
--- /dev/null
+++ b/style.css
@@ -0,0 +1,100 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+html,body{
+    height: 100%;
+    width: 100%;
+}
+h1{ color:rgba(237, 239, 236, 0.908);
+    font-size: 85px ;
+    font-family: cursive;
+    text-align: center;
+    font-weight: bolder;
+    background-color: black;
+text-shadow: 60px;
+margin-bottom: 10px;}
+
+    h2{ color: rgb(6, 9, 3);
+    font-size: 55px;
+font-family: cursive;
+font-style: italic;
+ text-align:center ;
+ font-weight: bold;
+}
+
+p{ color: color-mix(in srgb, rgb(0, 0, 0) 40%, rgba(255, 64, 0, 0.74) 60%);
+text-align: center;
+font-size: 35px;
+text-decoration: wavy;
+font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+font-weight: lighter;
+ margin: 50px;
+ padding: 20px;}
+
+#box{ height:18% ;
+width: 80%;
+background-color: rgba(250, 235, 215, 0.421);
+margin-top: 45px;
+margin-left: 10%;
+border-radius: 40px;
+display: flex;
+justify-content: space-evenly;
+align-items: center;
+}
+
+#email{ height: 80px;
+width: 100px;
+border-color: black;
+font-size: 21px;
+border-width: 5px;
+border-color: black;
+border-style: groove;
+text-align: center;
+border-radius: 25px;
+background-color: rgba(250, 235, 215, 0.185);}
+
+#linkedin{height: 80px;
+width: 180px;
+border-color: black;
+font-size: 21px;
+ background-color: rgba(250, 235, 215, 0.185);
+ border-width: 5px;
+ border-color: black;
+ border-style: groove;
+ text-align: center;
+ border-radius: 25px;
+}
+
+#Github{
+    height: 80px;
+    width: 190px;
+    background-color: rgba(250, 235, 215, 0.185);
+    border-color: black;
+    border-width: 5px;
+    border-style: groove;
+    font-size: 21px;
+    text-align: center;
+    border-radius: 25px;
+    }
+   #Changebackgroundcolors{height: 10%;
+width: 100%;
+justify-content: space-evenly;
+align-items: center;
+display: flex;
+
+}
+#backgroundcolors{height: 40px;
+width: 70%;
+display: flex;
+justify-content: space-evenly;}
+
+
+
+
+
+
+
+    
+
