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/cogwheel.png b/assets/cogwheel.png new file mode 100644 index 0000000..45579e5 Binary files /dev/null and b/assets/cogwheel.png differ diff --git a/assets/description.png b/assets/description.png new file mode 100644 index 0000000..03bbf5b Binary files /dev/null and b/assets/description.png differ 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/verified.png b/assets/verified.png new file mode 100644 index 0000000..93ad428 Binary files /dev/null and b/assets/verified.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..0e04794 100644 --- a/index.html +++ b/index.html @@ -1,48 +1,115 @@ - - - - Document - - - - - -
-
-
- - logo - + + + + + Document + + + + + + +
+
+
+ + logo + +
+
+ +
+ +
+ + + + + +
+
+ Work +
+
+

Welcome to Dwidasa Samsara
Indonesia (DSI)

+

Dwidasa Samsara Indonesia (DSI) was firstly established in 2010
by the founders, who each of them has a + common end objective
to innovate new creations by making the most of the
ever-growing information + technology + through DSI’s distinct
front-end based application concept. +

+

Managed by a team of professional experts with extensive
experience and impressive track records, + DSI + believes that
continuous improvements and innovations assure your business
to run effectively and + efficiently. +

+
+
+ + +
+

Product and Service

+
+
+ +

Our Product

+

Our product is made on the base of our
team’s careful research and analyses,
ranging from + internet + based
application.

+
-
- +
+ +

Our Service

+

DSI’s shared service solutions focus on
the front-end based software development, designed + specifically + for
the banking and financial sectors. +

+
- +
- - + + +
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..0bb5970 --- /dev/null +++ b/style.css @@ -0,0 +1,285 @@ +*, +*::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-end*/ + +/*product-start*/ +.product { + margin-top: 67px; + display: flex; + justify-content: center; + flex-direction: column; +} + +.product h1 { + display: flex; + margin-top: 20px; + justify-content: center; + margin-bottom: 17px; +} +.product-block { + display: flex; + justify-content: center; + margin-right: 9px; +} + +.product-item { + margin-bottom: 19px; +} +product-item img { + margin-top: 24px; + margin-left: 24px; + margin-bottom: 15px; +} + +.product-item h2 { + margin-top: 15px; + font-family: Roboto; + font-style: normal; + font-weight: 500; + font-size: 28px; + line-height: 133.69%; + margin-left: 24px; + color: #ee4248; +} +.product-item p { + font-family: Roboto; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 150%; + margin-top: 15px; + margin-left: 24px; + margin-right: 20px; + color: #30444e; +} + +.product-item button { + padding: 8px 16px; + font-family: Roboto; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 144.69%; + /* identical to box height, or 26px */ + + color: #ffffff; + width: 119px; + height: 42px; + + background: #ee4248; + box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); + border-radius: 4px; + border: none; + outline: none; + width: 161px; + height: 53px; + margin-bottom: 4px; + margin-left: 24px; + margin-top: 15px; +} +/*product-end*/ 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 { -}