diff --git a/index.html b/index.html
index dc73fbe..042aecd 100644
--- a/index.html
+++ b/index.html
@@ -9,5 +9,86 @@
   </head>
   <body>
 
+    <div class="container">
+      <div class="tabbar">
+          <div class="portfolio-name">Farshad Bagdeli</div>
+          <div class="option">
+          
+            <div><a href="#aboutMe">About Me</a></div>
+            <div><a href="#portfolio">Portfolio</a></div>
+            <div><a href="#experience">Experience</a></div>
+          
+        </div>
+      </div>
+      <div class="description">
+        <h1> Hiring A Full-Stack Developer? </h1>
+        <p>I have experience with <span>React</span>, <span>NodeJs</span> and <span>Typescript</span>. I would love to work at an <sl>innovative</sl> and <sl>eco-frienly</sl> start-up in the <span> sustainable energy sector.</span></p>
+      </div>
+      
+      <div class="aboutMe" id="aboutMe">
+        <h1>ABOUT ME</h1>
+        <h3>Introduction</h3>
+        
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <h3>Technical Skills</h3>
+        <ul>
+          <li>HTML \& Css</li>
+          <li>Java Script</li>
+          <li>Type Script</li>
+        </ul>
+        <ul>
+          <li>React</li>
+          <li>Redux</li>
+          <li>NodeJS</li>
+        </ul>
+      </div>
+      
+      <div class="portfolio" id="portfolio">
+        <h1>PORTFOLIO</h1>
+        <div class="portfolio-parts">
+          <div class="each-portfolio">
+            <h2>Title</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  </p>
+            <div>
+              <button>READ MORE</button>
+              <p><span>Github Ripo</span></p>
+            </div>
+          </div>
+          <div class="each-portfolio">
+            <h2>Title</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  </p>
+            <div>
+              <button>READ MORE</button>
+              <p><span>Github Ripo</span></p>
+            </div>
+          </div>
+          <div class="each-portfolio">
+            <h2>Title</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  </p>
+            <div>
+              <button>READ MORE</button>
+              <p><span>Github Ripo</span></p>
+            </div>
+          </div>
+        </div>
+        
+      </div>
+      
+      <div class="experience" id="experience">
+        <h1>EXPERIENCE</h1>
+        <div class="experience-job">
+          <h2>Job Title</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+        </div>
+        <div class="experience-job">
+          <h2>Job Title</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+        </div>
+      </div>
+      <div class="footer">
+        @Farshad Bagdeli
+      </div>
+    </div>
+  
   </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..5f54b8a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,162 @@
+* {
+  margin: 0;
+}
+.container {
+  display: grid;
+  grid-template-rows: 50px 500px 450px 600px 450px 50px;
+  width: 1150px;
+  height: 100vh;
+  grid-template-areas: 
+  'tabbar'
+  'description'
+  'aboutMe'
+  'portfolio'
+  'experience'
+  'footer';
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+a {
+  text-decoration: none;
+}
+.tabbar {
+ grid-area: tabbar;
+ background-color: #4EB6AC;
+ color: #E5FFFF ;
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ padding: 10px;
+}
+.portfolio-name {
+  font-weight: bold;
+ }
+.option {
+  display: grid;
+  grid-template-columns: 100px 100px 100px;
+  gap: 20px;
+  div {
+    height: 17px ;
+    background-color: #E5FFFF;
+    text-align: center;
+    padding: 10px;
+    border-radius: 10px;
+    color: #4EB6AC;
+    font-size: 15px;
+  }
+}
+
+
+
+.description {
+  padding: 50px 200px 50px 200px;
+  grid-area: description;
+  background-color: #4EB6AC;
+  color: #E5FFFF;
+  border-bottom: 5px solid black;
+  text-align: left;
+  font-size: 42px;
+  p {
+    padding-top: 25px;
+    font-size: 15px;
+    text-align: left;
+    span {
+      color: black;
+    }
+    sl {
+      text-decoration: underline;
+      text-decoration-color: black;
+    }
+  }
+}
+
+.aboutMe {
+  padding: 50px 200px 50px 200px;
+  grid-area: aboutMe;
+  background-color: white;
+  border-bottom: 5px solid black;
+
+  h1 {
+    text-align: center;
+    padding-bottom: 20px;
+  }
+  p{
+    font-size: 17px;
+    padding-bottom: 20px;
+  }
+  h3 {
+    padding-bottom: 20px;
+  }
+  ul {
+    display: inline-block;
+  }
+}
+
+.portfolio {
+  grid-area: portfolio;
+  background-color: #FFEBEE;
+  border-bottom: 5px solid black;
+  text-align: center;
+  padding: 40px 60px 40px 60px;
+  display: grid;
+  grid-template-rows: 50px 450px;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  .portfolio-parts {
+    display: grid;
+    grid-template-columns: repeat(3,330px);
+    gap: 20px;
+    .each-portfolio {
+      background-color: #FBFFFC;
+      border: 5px solid #AE1457;
+      box-shadow: 1px 1px 5px #AE1457;
+      padding: 20px 30px 10px 30px;
+      display: grid;
+      grid-template-rows: 40px 300px 100px ;
+      h2 {
+        text-align: left;
+      }
+      p {
+        text-align: left;
+        font-family: 'Courier New', Courier, monospace;
+      }
+      div {
+        button {
+          color: white;
+          background-color: #AE1457;
+          height: 30px;
+          width: 250px;
+          align-items: center;
+          border: 0;
+          border-radius: 5px;
+          margin-bottom:15px ;
+        }
+        
+        p {
+          text-align: center;
+          span {
+            color: #B8336B;
+            text-decoration: underline;
+            text-decoration-color: red;
+          }
+        }
+      }
+    }
+  }
+}
+.experience {
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  grid-area: experience;
+  padding-top: 20px;
+  text-align: center;
+  .experience-job {
+    font-family: 'Courier New', Courier, monospace;
+    padding: 20px 200px 20px 200px;
+    text-align: left;
+  }
+}
+
+.footer {
+  grid-area: footer;
+  padding: 15px 0px 15px 15px;
+  background-color: #1D313A;
+  color: white;
+}
\ No newline at end of file
