esmaydogdu · ograsyilmaz · Feb 12, 2021 · Feb 13, 2021 · Feb 13, 2021 · Feb 13, 2021
diff --git 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/cogwheel.png b/assets/cogwheel.png
diff --git a/assets/description.png b/assets/description.png
diff --git a/assets/icons/home.svg b/assets/icons/home.svg
diff --git a/assets/logo.svg b/assets/logo.svg
diff --git a/assets/pana.png b/assets/pana.png
diff --git a/assets/verified.png b/assets/verified.png
diff --git a/assets/work.png b/assets/work.png
diff --git a/index.html b/index.html
@@ -1,48 +1,115 @@
 <!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>
+
+<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>
+    <!-- section-end -->
+    <!-- product-start -->
+    <div class="product">
+      <h1>Product and Service</h1>
+      <div class="product-block">
+        <div class="product-item">
+          <img src="./assets/description.png" alt="">
+          <h2>Our Product</h2>
+          <p>Our product is made on the base of our</br> team’s careful research and analyses,</br> ranging from
+            internet
+            based </br>application.</p>
+          <button>Read More</button>
         </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 class="product-item">
+          <img src="./assets/verified.png" alt="">
+          <h2>Our Service </h2>
+          <p>DSI’s shared service solutions focus on </br>the front-end based software development, designed
+            specifically
+            for</br> the banking and financial sectors.
+          </p>
+          <button>Read More</button>
         </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 class="product-item">
+          <img src="./assets/cogwheel.png" alt="">
+          <h2>Our Technology</h2>
+          <p>First JAVA, runs on more than 850</br> million personal computers worldwide,</br> and on billions of
+            devices
+            worldwide,</br> including mobile and TV devices.</p>
+          <button>Read More</button>
         </div>
       </div>
+
     </div>
-  </body>
-</html>
+    <!-- product-end -->
+
+  </div>
+</body>
+
+</html>