diff --git a/.gitignore b/.gitignore
index e43b0f988..a82e0fd85 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 .DS_Store
+img
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index cc35ecd07..eed8a788c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,23 +1,86 @@
-/* Stylez */
-body {font-family: Franklin Gothic Book, Source Sans Pro, Helvetica Neue, sans-serif; margin: 0 auto; background: #efefef; line-height: 1.8em; padding: 12px; box-sizing: border-box; color: #333;}
-body, html {height: 100%;}
+body{
+  display:relative;
+  width:100%;
+  padding:0;
+  margin:0;
+  font-family:"Montserrat";
+  background-color:#FF0000;
+}
+p{
+  margin:0;
+}
+h2{
+  color:#281a59;
+}
+hr{
+  background-color:#c2d82e;
+}
+.ana-alan{
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  border-radius:50px;
+  width:70%;
+  background:linear-gradient(223.88deg, #c9c8ce 10.31%,#848484 70%, #c9c8ce 94.31%);
+  padding:2%;
+  display:grid;
+}
+.ust-alan{
+  width:100%;
+  display:grid;
+}
+.ust-sol-alan{
+  grid-column:0/2;
+  grid-row:0/2;
+}
+.ust-sag-alan{
+  grid-column:2/10;
+  grid-row:0/2;
+}
+.gorsel-isim-alan{
+  grid-column:0/2;
+  grid-row:0/2;
+}
+.isim-alan{
+  text-align:center;
+}
+.aciklama-alan{
+  padding-left:5%;
+  grid-column:2/10;
+  grid-row:0/2;
+}
+.gorsel-alan{
+  width:150px;
+  height:150px;
+  border-radius:50%;
+  margin:0 auto;
+  background-color:purple;
+}
+.alt-sol-alan{
+  margin-top:20%;
+  grid-column:0/2;
+  grid-row:2/6;
+}
+.social-wrapper{
+  width:100%;
+}
+.logo{
+  width:25px;
+}
+.social{
+  display:inline-block;
+  height:25px;
+}
+.skills{
+  display:inline-block;
 
-.wrapper {box-sizing: border-box; background: #fff; box-shadow: 0 0 5px #888; box-shadow: 0 0 5px #888; height: 100%; overflow: auto; }
-
-
-a {color: #777; text-decoration: none; border-bottom: 1px solid #CCFF26;}
-a:hover {border-bottom: 1px solid #CCFF26; color: #222}
-p {font-weight: 200; font-size: 20px;}
-
-.name {font-family: Playfair Display; font-size: 50px; font-weight: 900; padding-bottom: 20px;}
-
-.container {margin: 0 auto; width: 600px; height: 400px; padding: 80px 12px; overflow: auto;}
-
-.meta {text-transform: uppercase; font-family: Courier New, Quicksand, "Helvetica Neue", "Arial", sans-serif; font-size: 11px; letter-spacing: .15em;}
-.meta a:hover {border-bottom: 1px solid #CCFF26; color: #333;}
-
-.inline-list {list-style: none; margin: 0; padding: 0;}
-.inline-list li {display: inline-block;}
-
-footer .inline-list li {padding-right: 40px;}
-footer {margin: 0 auto; position: absolute; bottom: 0px; padding: 40px 0; width: 600px;}
+  height:25px;
+}
+.alt-sag-alan{
+  padding-left:5%;
+  grid-column:2/10;
+  grid-row:2/6;
+}
\ No newline at end of file
diff --git a/css/style2.css b/css/style2.css
index d1ee066ad..e69de29bb 100644
--- a/css/style2.css
+++ b/css/style2.css
@@ -1,53 +0,0 @@
-body {font-family: Montserrat, Helvetica Neue, sans-serif; margin: 0 auto; line-height: 2em; padding: 12px; box-sizing: border-box; color: #333; overflow: auto;
-background: #ffded1; /* Old browsers */
-background: -moz-linear-gradient(-45deg,  #ffded1 0%, #ffded1 50%, #ffc5af 50%, #ffc5af 100%); /* FF3.6+ */
-background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffded1), color-stop(50%,#ffded1), color-stop(50%,#ffc5af), color-stop(100%,#ffc5af)); /* Chrome,Safari4+ */
-background: -webkit-linear-gradient(-45deg,  #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); /* Chrome10+,Safari5.1+ */
-background: -o-linear-gradient(-45deg,  #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); /* Opera 11.10+ */
-background: -ms-linear-gradient(-45deg,  #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); /* IE10+ */
-background: linear-gradient(135deg,  #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); /* W3C */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffded1', endColorstr='#ffc5af',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-
-}
-
-body, html {height: 100%;}
-
-.wrapper {box-sizing: border-box; height: 100%; overflow: auto; }
-
-
-a {text-decoration: none; color: #333; border-bottom: 3px solid #0068FF;}
-a:hover {color: #0068FF}
-p {font-weight: 200; font-size: 20px;}
-
-.name {font-family: Montserrat; font-size: 45px; text-transform: uppercase; font-weight: 900; padding: 12px; border: 4px solid #0068FF; color: #0068FF; display: inline-block; position: absolute; margin-bottom: 60px; top: 60px; left: 90px;}
-
-.container {margin: 0 auto; width: 700px; padding: 120px 12px 50px; overflow: auto;}
-article {padding: 60px;}
-/* TODO find better cross-platform characters */
-/* article::before {
-  content: '\2601';
-  position: relative;
-  top: 0;
-  left: -30px;
-  color: #0068FF;
-  font-size: 24px;
-}
-article::after {
-  content: '\2A55\2A55\2A55\2A55';
-  position: relative;
-  top: 40px;
-  left: 300px;
-  color: #0068FF;
-  font-size: 44px;
-} */
-hr {border-bottom: 3px solid #0068FF;}
-
-.meta {text-transform: uppercase; font-family: Arial, Courier New, Source Sans Pro, sans-serif; font-size: 10px; letter-spacing: .15em;}
-.meta a:hover {color: #333;}
-
-.inline-list {list-style: none; margin: 0; padding: 0;}
-.inline-list li {display: inline-block;}
-
-footer .inline-list li {margin-right: 40px;}
-footer a {border: none; color: #0068FF;}
-footer {margin: 0 auto; position: absolute; bottom: 55%; right: -255px; padding: 40px 0 0 0; width: 600px; -webkit-transform: rotate(-90deg);}
diff --git a/img/GitHub-Mark-64px.png b/img/GitHub-Mark-64px.png
new file mode 100644
index 000000000..182a1a3f7
Binary files /dev/null and b/img/GitHub-Mark-64px.png differ
diff --git a/index.html b/index.html
index 91f22f2f4..d5d4fe821 100644
--- a/index.html
+++ b/index.html
@@ -3,29 +3,71 @@
   <head>
     <meta charset="utf-8">
     <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Montserrat" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" type="text/css" href="css/style2.css">
     <link rel="icon" href="favicon.png" type="image/x-icon">
-    <title>Hello World</title>
+    <link rel="stylesheet" href="css/style.css">
+    <title>Cihan Gönen</title>
   </head>
   <body>
-    <div class="wrapper">
-    <div class="container">
-      <header>
-        <h1 class="name">jlord</h1>
-      </header>
-      <article>
-        <p>I'm an <a href="http://en.wikipedia.org/wiki/Open-source_software" target="_blank">open source</a> developer and designer living in Oakland, California. Far, far away from my <a href="http://en.wikipedia.org/wiki/Central_Georgia" target="_blank">East Coast US roots</a>. I work at <a href="http://www.github.com/about" target="_blank">GitHub</a>, mentor at programming events (<a href="http://www.nodeschool.io">NodeSchool.io</a>, <a href="https://github.com/blog/1805-patchwork-night" target="_blank">Patchwork</a>) and do some conferences, too.</p>
-        <p> Previously I was an <a href="http://www.bostonredevelopmentauthority.org" target="_blank">urban designer</a>, but the call of the wild open tech world would win me over.</p>
-      </article>
+    <div class="ana-alan">
 
-    <footer>
-      <ul class="meta inline-list">
-        <li><a href="mailto:to.jlord@gmail.com">to.jlord@gmail.com</a></li>
-        <li><a href="http://www.twitter.com/jllord" target="_blank">twitter/jllord</a></li>
-        <li><a href="http://www.github.com/jlord" target="_blank">github/jlord</a></li>
-      </ul>
-    </footer>
-  </div>
-  </div>
+      <div class="ust-sol-alan">
+
+        <div class="gorsel-isim-alan">
+          <div class="gorsel-alan">
+          </div>
+          <div class="isim-alan">
+            <p>Cihan Gönen</p>
+            <p>Web Developer</p><!-- it can also be frontend developer-->
+          </div>
+        </div>
+
+      </div>
+
+      <div class="ust-sag-alan">
+
+        <div class="aciklama-alan">
+          <h2 class="aciklama-baslik">Sample Header</h2>
+          <article class="aciklama-text">sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation</article>
+        </div>
+
+      </div>
+
+      <div class="alt-sol-alan">
+        <div class="contact">
+          <div class="social-wrapper"><img src="./img/telefon-64x64.png" alt="phone-logo" class="logo"><p class="social">tel</p></div>
+          <div class="social-wrapper"><img src="./img/linkedin-64x64.png" alt="linkedin-logo" class="logo"><p class="social">linkedin</p></div>
+          <div class="social-wrapper"><img src="./img/GitHub-Mark-64px.png" alt="github-logo" class="logo"><p class="social">github</p></div>
+        </div>
+        <hr/>
+        <div class="skills">
+          <div class="skills-wrapper"><img src="./img/newhtml64x64.png" alt="html-logo" class="logo"><p class="skills">HTML</p></div>
+          <div class="skills-wrapper"><img src="./img/newcss64x64.png" alt="css-logo" class="logo"><p class="skills">CSS</p></div>
+          <div class="skills-wrapper"><img src="./img/newjs64x64.png" alt="js-logo" class="logo"> <p class="skills">JS</p></div>
+        </div>
+        <hr/>
+        <div class="power-sides">
+          <p>honesty</p>
+          <p>gratitude</p>
+          <p>hope</p>
+          <p>humor</p>
+          <p>perspective</p>
+        </div>
+        <hr/>
+        <div class="hobies">
+          <p>some icons that represent my hobies</p>
+        </div>
+      </div>
+      <div class="alt-sag-alan">
+        <article class="experience">
+          <h2 class="experience-header">Experience</h2>
+          <p>experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text</p>
+        </article>
+        <article class="education">
+          <h2 class="education-header">Education</h2>
+          <p>experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text</p>
+        </article>
+      </div>
+    
+    </div>
   </body>
 </html>