diff --git a/css/style.css b/css/style.css
index cc35ecd07..6cd1d76d4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,23 +1,62 @@
-/* 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%;}
-
-.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;}
+body{
+  display:relative;
+  width:100%;
+  padding:0;
+  margin:0;
+  font-family:"Montserrat";
+}
+p{
+  margin:0;
+}
+.ana-alan{
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width:70%;
+  background-color:red;
+  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%;
+  background-color:purple;
+}
+.alt-sol-alan{
+  margin-top:20%;
+  grid-column:0/2;
+  grid-row:2/6;
+}
+.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/index.html b/index.html
index 91f22f2f4..4df8e7f3d 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">
+          <p>tel</p>
+          <p>linkedin</p>
+          <p>github</p>
+        </div>
+        <hr/>
+        <div class="skills">
+          <p>HTML</p>
+          <p>CSS</p>
+          <p>JS</p>
+        </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>