From 35029e8ede91e8b15f0b89a8b39b03f7afd07866 Mon Sep 17 00:00:00 2001
From: CihanGonen <48177270+CihanGonen@users.noreply.github.com>
Date: Thu, 24 Dec 2020 02:18:51 +0300
Subject: [PATCH 1/5] Update index.html

---
 index.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 91f22f2f4..444d4527a 100644
--- a/index.html
+++ b/index.html
@@ -14,8 +14,7 @@
         <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>
+         I am Cihan Gönen freelance web developer :) ...
       </article>
 
     <footer>

From 3db37dd69af222bbc5d0c27cede329533a1d6ffd Mon Sep 17 00:00:00 2001
From: Cihan <cihangonen35@gmail.com>
Date: Thu, 24 Dec 2020 18:48:09 +0300
Subject: [PATCH 2/5] added top part

---
 css/style.css  | 59 ++++++++++++++++++++++++++++++--------------------
 css/style2.css | 53 ---------------------------------------------
 index.html     | 37 +++++++++++++++----------------
 3 files changed, 54 insertions(+), 95 deletions(-)

diff --git a/css/style.css b/css/style.css
index cc35ecd07..24ba2ef09 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,23 +1,36 @@
-/* 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{
+  width:100%;
+  padding:0;
+  margin:0;
+}
+.ana-alan{
+  width:700px;
+  height:auto;
+  background-color:red;
+  margin:0 auto;
+  padding:2%;
+}
+.ust-alan{
+  width:100%;
+  display:grid;
+  grid-template-columns:1fr 5fr;
+  grid-template-rows:auto;
+  grid-template-areas:
+  "sol-alan sag-alan sag-alan sag-alan sag-alan sag-alan";
+}
+.gorsel-isim-alan{
+  grid-area:sol-alan;
+}
+.isim-alan{
+  text-align:center;
+}
+.aciklama-alan{
+  padding-left:5%;
+  grid-area:sag-alan;
+}
+.gorsel-alan{
+  width:150px;
+  height:150px;
+  border-radius:50%;
+  background-color:purple;
+}
\ 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 444d4527a..77766d505 100644
--- a/index.html
+++ b/index.html
@@ -3,28 +3,27 @@
   <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>
-         I am Cihan Gönen freelance web developer :) ...
-      </article>
+    <div class="ana-alan">
+      <div class="ust-alan">
+        <div class="gorsel-isim-alan">
+          <div class="gorsel-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>
+          <div class="isim-alan">
+            <p>Cihan Gönen</p>
+            <p>Web Developer</p>
+          </div>
+        </div>
+        <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>
   </body>
 </html>

From cf205c8b505d70456043495f73c0fff8eb049e94 Mon Sep 17 00:00:00 2001
From: Cihan <cihangonen35@gmail.com>
Date: Fri, 25 Dec 2020 18:36:26 +0300
Subject: [PATCH 3/5] very raw template ready

---
 css/style.css | 15 +++++++++++++++
 index.html    | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+)

diff --git a/css/style.css b/css/style.css
index 24ba2ef09..add65e8c0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2,6 +2,7 @@ body{
   width:100%;
   padding:0;
   margin:0;
+  font-family:"Montserrat";
 }
 .ana-alan{
   width:700px;
@@ -33,4 +34,18 @@ body{
   height:150px;
   border-radius:50%;
   background-color:purple;
+}
+.alt-alan{
+  width:100%;
+  display:grid;
+  grid-template-columns:1fr 5fr;
+  grid-template-rows:auto;
+  grid-template-areas:
+  "sol-alan sag-alan sag-alan sag-alan sag-alan sag-alan";
+}
+.alt-sag-alan{
+  grid-area:sag-alan;
+}
+.alt-sol-alan{
+  grid-area:sol-alan;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 77766d505..9ad225a1b 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,40 @@ <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-alan">
+        <div class="alt-sol-alan">
+          <div class="contact">
+            <p>tel</p>
+            <p>linkedin</p>
+            <p>github</p>
+          </div>
+          <div class="skills">
+            <p>HTML</p>
+            <p>CSS</p>
+            <p>JS</p>
+          </div>
+          <div class="power-sides">
+            <p>honesty</p>
+            <p>gratitude</p>
+            <p>hope</p>
+            <p>humor</p>
+            <p>perspective</p>
+          </div>
+          <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>
     </div>
   </body>
 </html>

From e10e5595c1016bd5916148a5ba91d924f595e77c Mon Sep 17 00:00:00 2001
From: Cihan <cihangonen35@gmail.com>
Date: Fri, 25 Dec 2020 19:13:01 +0300
Subject: [PATCH 4/5] grid system added

---
 css/style.css | 51 ++++++++++++++++++++-------------
 index.html    | 78 +++++++++++++++++++++++++++++----------------------
 2 files changed, 75 insertions(+), 54 deletions(-)

diff --git a/css/style.css b/css/style.css
index add65e8c0..6cd1d76d4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,33 +1,48 @@
 body{
+  display:relative;
   width:100%;
   padding:0;
   margin:0;
   font-family:"Montserrat";
 }
+p{
+  margin:0;
+}
 .ana-alan{
-  width:700px;
-  height:auto;
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width:70%;
   background-color:red;
-  margin:0 auto;
   padding:2%;
+  display:grid;
 }
 .ust-alan{
   width:100%;
   display:grid;
-  grid-template-columns:1fr 5fr;
-  grid-template-rows:auto;
-  grid-template-areas:
-  "sol-alan sag-alan sag-alan sag-alan sag-alan sag-alan";
+}
+.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-area:sol-alan;
+  grid-column:0/2;
+  grid-row:0/2;
 }
 .isim-alan{
   text-align:center;
 }
 .aciklama-alan{
   padding-left:5%;
-  grid-area:sag-alan;
+  grid-column:2/10;
+  grid-row:0/2;
 }
 .gorsel-alan{
   width:150px;
@@ -35,17 +50,13 @@ body{
   border-radius:50%;
   background-color:purple;
 }
-.alt-alan{
-  width:100%;
-  display:grid;
-  grid-template-columns:1fr 5fr;
-  grid-template-rows:auto;
-  grid-template-areas:
-  "sol-alan sag-alan sag-alan sag-alan sag-alan sag-alan";
+.alt-sol-alan{
+  margin-top:20%;
+  grid-column:0/2;
+  grid-row:2/6;
 }
 .alt-sag-alan{
-  grid-area:sag-alan;
-}
-.alt-sol-alan{
-  grid-area:sol-alan;
+  padding-left:5%;
+  grid-column:2/10;
+  grid-row:2/6;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 9ad225a1b..5875c5f7d 100644
--- a/index.html
+++ b/index.html
@@ -9,55 +9,65 @@
   </head>
   <body>
     <div class="ana-alan">
-      <div class="ust-alan">
+
+      <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>
           </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-alan">
-        <div class="alt-sol-alan">
-          <div class="contact">
-            <p>tel</p>
-            <p>linkedin</p>
-            <p>github</p>
-          </div>
-          <div class="skills">
-            <p>HTML</p>
-            <p>CSS</p>
-            <p>JS</p>
-          </div>
-          <div class="power-sides">
-            <p>honesty</p>
-            <p>gratitude</p>
-            <p>hope</p>
-            <p>humor</p>
-            <p>perspective</p>
-          </div>
-          <div class="hobies">
-            <p>some icons that represent my hobies</p>
-          </div>
+
+      <div class="alt-sol-alan">
+        <div class="contact">
+          <p>tel</p>
+          <p>linkedin</p>
+          <p>github</p>
         </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>
+        <hr/>
+        <div class="skills">
+          <p>HTML</p>
+          <p>CSS</p>
+          <p>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>

From dd0f59c85a5313a914d5839ecc68b551c1ae2d9a Mon Sep 17 00:00:00 2001
From: Cihan <cihangonen35@gmail.com>
Date: Fri, 25 Dec 2020 19:34:33 +0300
Subject: [PATCH 5/5] a comment added

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 5875c5f7d..4df8e7f3d 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,7 @@
           </div>
           <div class="isim-alan">
             <p>Cihan Gönen</p>
-            <p>Web Developer</p>
+            <p>Web Developer</p><!-- it can also be frontend developer-->
           </div>
         </div>