diff --git a/README.md b/README.md
index b02224a..8634b6f 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,15 @@
-kebabcase class names
+--tek index.html & style.css---
+
+\*font ekleme
+
+0. reset css css yazmaya başlarken hep yazdıgımız şeyler neden var?
+1. header tasarlanacak
+2. header refactor edilecek
+   farklı browser destekleri
+3. diğer componentlere geçiş
+
+---scss geçiş---
+
+---css folder structure----
+
+---responsive----
diff --git a/assets/icons/home.svg b/assets/icons/home.svg
old mode 100644
new mode 100755
diff --git a/assets/logo.svg b/assets/logo.svg
old mode 100644
new mode 100755
diff --git a/assets/pana.png b/assets/pana.png
new file mode 100644
index 0000000..8bbd790
Binary files /dev/null and b/assets/pana.png differ
diff --git a/assets/work.png b/assets/work.png
new file mode 100644
index 0000000..641c72a
Binary files /dev/null and b/assets/work.png differ
diff --git a/index.html b/index.html
index a8d1277..3858996 100644
--- a/index.html
+++ b/index.html
@@ -1,48 +1,83 @@
 <!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 rel="stylesheet" href="styles/main.css" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div class="page-content">
-      <div class="header">
-        <div class="logo-container">
-          <a href="/index.html">
-            <img src="assets/logo.svg" alt="logo" />
-          </a>
-        </div>
-        <div class="navigation-menu">
-          <ul>
-            <li class="nav-item"><a href="">Home</a></li>
-            <li class="nav-item"><a href="">Home</a></li>
-            <li class="nav-item dropdown">
-              <a href="">Home</a>
-              <ul>
-                <li><a href=""> Sub1</a></li>
-                <li><a href=""> Sub1</a></li>
-                <li><a href=""> Sub1</a></li>
-              </ul>
-            </li>
-            <li class="nav-item dropdown"><a href="">Home</a></li>
-            <li class="nav-item"><a href=""></a>Home</li>
-          </ul>
-        </div>
-        <div class="social-links">
-          <a href=""><img src="/assets/icons/home.svg" alt="home-icon" /></a>
-          <a href=""><img src="/assets/icons/mail.svg" alt="mail-icon" /></a>
-          <a href=""
-            ><img src="/assets/icons/shuffle.svg" alt="shuffle-icon"
-          /></a>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <div class="page-content">
+    <div class="header">
+      <div class="logo-container">
+        <a href="/index.html">
+          <img src="assets/logo.svg" alt="logo" />
+        </a>
+      </div>
+      <div class="navigation-menu">
+        <ul>
+          <li class="nav-item"><a href="">Home</a></li>
+          <li class="nav-item"><a href="">Home</a></li>
+          <li class="nav-item dropdown">
+            <a href="">Home</a>
+            <ul>
+              <li><a href=""> Sub1</a></li>
+              <li><a href=""> Sub1</a></li>
+              <li><a href=""> Sub1</a></li>
+            </ul>
+          </li>
+          <li class="nav-item dropdown"><a href="">Home</a></li>
+          <li class="nav-item"><a href="">Home</a></li>
+        </ul>
+      </div>
+      <div class="social-links">
+        <a href=""><img src="/assets/icons/home.svg" alt="home-icon" /></a>
+        <a href=""><img src="/assets/icons/mail.svg" alt="mail-icon" /></a>
+        <a href=""><img src="/assets/icons/shuffle.svg" alt="shuffle-icon" /></a>
+      </div>
+    </div>
+
+    <!-- banner-start -->
+    <div class="banner">
+      <div class="banner-text">
+        <h1>Making the most of the </br> ever-growing </h1>
+        <h2>Information Technology</h2>
+        <p>Managed by a team of professional experts with extensive</br> experience and impressive track records</p>
+        <div class="banner-btn">
+          <button>Read More</button>
         </div>
       </div>
+      <div class="banner-img"><img src="./assets/pana.png" alt="Pana"></div>
+    </div>
+    <!-- banner-end -->
+    <!-- section-start -->
+    <div class="section">
+      <div class="section-img">
+        <img src="./assets/work.png" alt="Work">
+      </div>
+      <div class="section-text">
+        <h1>Welcome to <span>Dwidasa Samsara </br>Indonesia (DSI)</span></h1>
+        <p>Dwidasa Samsara Indonesia (DSI) was firstly established in 2010</br> by the founders, who each of them has a
+          common end objective </br>to innovate new creations by making the most of the </br>ever-growing information
+          technology
+          through <span>DSI</span>’s distinct</br> front-end based application concept.
+        </p>
+        <p>Managed by a team of professional experts with extensive</br> experience and impressive track records,
+          <span>DSI</span>
+          believes that</br> continuous improvements and innovations assure your business</br> to run effectively and
+          efficiently.
+        </p>
+      </div>
+
+
     </div>
-  </body>
-</html>
+    <!-- section-start -->
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..56a24c0
--- /dev/null
+++ b/style.css
@@ -0,0 +1,208 @@
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+}
+:root {
+  font-size: 16px;
+}
+body {
+  box-sizing: border-box;
+  background: #fff;
+  font-family: "Roboto", sans-serif;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 32px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
+}
+
+.header .logo-container a {
+  display: flex;
+}
+
+.header .logo-container a img {
+  max-width: 120px;
+}
+
+.header .social-links {
+  display: flex;
+}
+
+.header .social-links a:not(:last-child) {
+  padding-right: 24px;
+}
+
+.header .social-links a img {
+  max-width: 20px;
+  height: auto;
+}
+/*navigation-start*/
+.navigation-menu a {
+  color: #1f2e35;
+  text-decoration: none;
+}
+.navigation-menu ul {
+  display: flex;
+  list-style: none;
+}
+.navigation-menu > ul {
+  display: flex;
+  list-style: none;
+}
+.navigation-menu > ul > li {
+  padding: 0 25px;
+  display: flex;
+  align-items: center;
+}
+.navigation-menu > ul > li.dropdown:after {
+  display: flex;
+  content: "";
+  margin-left: 8px;
+  width: 13px;
+  height: 9px;
+  background-image: url(./assets/icons/chevron_down.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+.navigation-menu > ul > li > a {
+  font-size: 18px;
+  transition: 0.2s all;
+}
+.navigation-menu > ul > li {
+  position: relative;
+}
+.navigation-menu > ul > li > a:hover {
+  color: rgba(31, 46, 53, 0.8);
+}
+
+.navigation-menu > ul > li.nav-item > ul {
+  display: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: 0.3s all ease;
+}
+.navigation-menu > ul > li:hover > ul {
+  display: flex;
+  position: absolute;
+  opacity: 100%;
+  visibility: visible;
+}
+.navigation-menu > ul > li.nav-item > ul > li > a {
+  font-size: 16px;
+}
+
+/*navigation-end*/
+
+/*banner-start*/
+
+.banner {
+  display: flex;
+  justify-content: center;
+  margin-top: 31px;
+}
+
+.banner-text {
+  margin-right: 17px;
+  margin-top: 75px;
+  margin-bottom: 74px;
+}
+.banner-text h1 {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 48px;
+  line-height: 133.69%;
+  color: #1f2e35;
+}
+.banner-text h2 {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 48px;
+  line-height: 133.69%;
+  color: #ee4248;
+}
+
+.banner-text p {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 29px;
+  color: #30444e;
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+.banner-img {
+  margin-top: 59px;
+  margin-bottom: 59px;
+}
+.banner-btn {
+  display: inline-block;
+}
+.banner-btn button {
+  padding: 12px 32px;
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 20px;
+  line-height: 29px;
+
+  color: #ffffff;
+  background: #ee4248;
+  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+  border: none;
+  outline: none;
+  width: 161px;
+  height: 53px;
+}
+
+/*banner-end*/
+
+/*section-start*/
+.section {
+  margin-top: 87px;
+  display: flex;
+  justify-content: center;
+  padding-bottom: 63px;
+}
+.section-img {
+  margin-top: 80px;
+  margin-left: 193px;
+  margin-right: 82px;
+}
+.section-text {
+  margin-top: 57px;
+}
+.section-text h1 {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 32px;
+  line-height: 133.69%;
+  margin-top: 57px;
+
+  color: #1f2e35;
+}
+.section-text span {
+  color: #ee4248;
+}
+.section-text p {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 18px;
+  line-height: 150%;
+  margin-top: 24px;
+
+  color: #30444e;
+}
+/*section-start*/
diff --git a/styles/abstracts/_functions.scss b/styles/abstracts/_functions.scss
deleted file mode 100644
index 7cf61e7..0000000
--- a/styles/abstracts/_functions.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$space: 16px;
-$space-sm: calc($space * 0.5);
diff --git a/styles/abstracts/_global.scss b/styles/abstracts/_global.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/styles/abstracts/_mixins.scss b/styles/abstracts/_mixins.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/styles/base/_base.scss b/styles/base/_base.scss
deleted file mode 100644
index 02d8531..0000000
--- a/styles/base/_base.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-*,
-*::after,
-*::before {
-    margin: 0;
-    padding: 0;
-    box-sizing: inherit;
-}
-:root {
-    font-size: 16px;
-}
-body {
-    box-sizing: border-box;
-    background: #fff;
-}
diff --git a/styles/base/_typography.scss b/styles/base/_typography.scss
deleted file mode 100644
index 60d0ca8..0000000
--- a/styles/base/_typography.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-    font-family: "Roboto", sans-serif;
-}
diff --git a/styles/layout/_header.scss b/styles/layout/_header.scss
deleted file mode 100644
index 7d66f6a..0000000
--- a/styles/layout/_header.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 32px;
-    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
-    .logo-container {
-        a {
-            display: inline-block;
-            img {
-                max-width: 120px;
-            }
-        }
-    }
-    .navigation-menu {
-    }
-    .social-links {
-        display: flex;
-        a {
-            &:not(:last-child) {
-                padding-right: 24px;
-            }
-            img {
-                max-width: 20px;
-                height: auto;
-            }
-        }
-    }
-}
diff --git a/styles/layout/_navigation.scss b/styles/layout/_navigation.scss
deleted file mode 100644
index 6d855ec..0000000
--- a/styles/layout/_navigation.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.navigation-menu {
-    ul {
-        display: flex;
-        li.nav-item {
-            a {
-                ul {
-                    opacity: 0;
-                    visibility: hidden;
-                }
-            }
-        }
-    }
-}
diff --git a/styles/main.css b/styles/main.css
deleted file mode 100644
index c2b0694..0000000
--- a/styles/main.css
+++ /dev/null
@@ -1,72 +0,0 @@
-body {
-  font-family: "Roboto", sans-serif;
-}
-
-*,
-*::after,
-*::before {
-  margin: 0;
-  padding: 0;
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-}
-
-:root {
-  font-size: 16px;
-}
-
-body {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  background: #fff;
-}
-
-.header {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  padding: 0 32px;
-  -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
-          box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
-}
-
-.header .logo-container a {
-  display: inline-block;
-}
-
-.header .logo-container a img {
-  max-width: 120px;
-}
-
-.header .social-links {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.header .social-links a:not(:last-child) {
-  padding-right: 24px;
-}
-
-.header .social-links a img {
-  max-width: 20px;
-  height: auto;
-}
-
-.navigation-menu ul {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.navigation-menu ul li.nav-item a ul {
-  opacity: 0;
-  visibility: hidden;
-}
-/*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/styles/main.css.map b/styles/main.css.map
deleted file mode 100644
index 08c5259..0000000
--- a/styles/main.css.map
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-    "version": 3,
-    "mappings": "AIAA,AAAA,IAAI,CAAC;EACD,WAAW,EAAE,oBAAoB;CACpC;;ACFD,AAAA,CAAC;AACD,CAAC,AAAA,OAAO;AACR,CAAC,AAAA,QAAQ,CAAC;EACN,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,OAAO;CACtB;;AACD,AAAA,KAAK,CAAC;EACF,SAAS,EAAE,IAAI;CAClB;;AACD,AAAA,IAAI,CAAC;EACD,UAAU,EAAE,UAAU;EACtB,UAAU,EAAE,IAAI;CACnB;;ACbD,AAAA,OAAO,CAAC;EACJ,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,WAAW,EAAE,MAAM;EACnB,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,mBAAmB;CAuB9C;;AA5BD,AAOQ,OAPD,CAMH,eAAe,CACX,CAAC,CAAC;EACE,OAAO,EAAE,YAAY;CAIxB;;AAZT,AASY,OATL,CAMH,eAAe,CACX,CAAC,CAEG,GAAG,CAAC;EACA,SAAS,EAAE,KAAK;CACnB;;AAXb,AAgBI,OAhBG,CAgBH,aAAa,CAAC;EACV,OAAO,EAAE,IAAI;CAUhB;;AA3BL,AAmBY,OAnBL,CAgBH,aAAa,CAET,CAAC,AACI,IAAK,CAAA,WAAW,EAAE;EACf,aAAa,EAAE,IAAI;CACtB;;AArBb,AAsBY,OAtBL,CAgBH,aAAa,CAET,CAAC,CAIG,GAAG,CAAC;EACA,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,IAAI;CACf;;ACzBb,AACI,gBADY,CACZ,EAAE,CAAC;EACC,OAAO,EAAE,IAAI;CAShB;;AAXL,AAKgB,gBALA,CACZ,EAAE,CAEE,EAAE,AAAA,SAAS,CACP,CAAC,CACG,EAAE,CAAC;EACC,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,MAAM;CACrB",
-    "sources": [
-        "main.scss",
-        "abstracts/_functions.scss",
-        "abstracts/_mixins.scss",
-        "abstracts/_variables.scss",
-        "base/_typography.scss",
-        "base/_base.scss",
-        "layout/_header.scss",
-        "layout/_navigation.scss",
-        "themes/_theme.scss"
-    ],
-    "names": [],
-    "file": "main.css"
-}
\ No newline at end of file
diff --git a/styles/main.scss b/styles/main.scss
deleted file mode 100644
index 5c57327..0000000
--- a/styles/main.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import "abstracts/functions";
-@import "abstracts/mixins";
-@import "abstracts/variables";
-
-@import "base/typography";
-@import "base/base";
-
-@import "layout/header";
-@import "layout/navigation";
-
-@import "themes/theme";
diff --git a/styles/themes/_theme.scss b/styles/themes/_theme.scss
deleted file mode 100644
index 2ae5121..0000000
--- a/styles/themes/_theme.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.page-content {
-}
