From f29a776a1fec982d3bad66a9e507d90b93aa1984 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ferit=20Yi=C4=9Fit=20BALABAN?= Date: Tue, 17 May 2022 23:54:58 +0300 Subject: [PATCH] Initial commit --- .idea/.gitignore | 5 ++ .idea/modules.xml | 8 +++ .idea/ugurgaleri.iml | 12 +++++ .idea/vcs.xml | 6 +++ .idea/watcherTasks.xml | 4 ++ hakkimizda.html | 11 ++++ iletisim.html | 11 ++++ index.html | 28 ++++++++++ resources/css/main.scss | 58 +++++++++++++++++++++ resources/css/mixins.scss | 31 +++++++++++ resources/css/partials/footer.scss | 0 resources/css/partials/header.scss | 32 ++++++++++++ resources/css/variables.scss | 7 +++ styles/main.css | 82 ++++++++++++++++++++++++++++++ styles/main.css.map | 1 + 15 files changed, 296 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 .idea/modules.xml create mode 100644 .idea/ugurgaleri.iml create mode 100644 .idea/vcs.xml create mode 100644 .idea/watcherTasks.xml create mode 100644 hakkimizda.html create mode 100644 iletisim.html create mode 100644 index.html create mode 100644 resources/css/main.scss create mode 100644 resources/css/mixins.scss create mode 100644 resources/css/partials/footer.scss create mode 100644 resources/css/partials/header.scss create mode 100644 resources/css/variables.scss create mode 100644 styles/main.css create mode 100644 styles/main.css.map diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..6f1069a --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/ugurgaleri.iml b/.idea/ugurgaleri.iml new file mode 100644 index 0000000..0c8867d --- /dev/null +++ b/.idea/ugurgaleri.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml new file mode 100644 index 0000000..fb0d65a --- /dev/null +++ b/.idea/watcherTasks.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/hakkimizda.html b/hakkimizda.html new file mode 100644 index 0000000..5d45614 --- /dev/null +++ b/hakkimizda.html @@ -0,0 +1,11 @@ + + + + + + Hakkımızda | Uğur Galeri + + + + + \ No newline at end of file diff --git a/iletisim.html b/iletisim.html new file mode 100644 index 0000000..b6b32b0 --- /dev/null +++ b/iletisim.html @@ -0,0 +1,11 @@ + + + + + + İletişim | Uğur Galeri + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..a427b66 --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + + Uğur Galeri + + +
+ +
+
+

Merhaba!

+
+ + +
+ + \ No newline at end of file diff --git a/resources/css/main.scss b/resources/css/main.scss new file mode 100644 index 0000000..d68c61f --- /dev/null +++ b/resources/css/main.scss @@ -0,0 +1,58 @@ +@use "variables.scss"; +@use "mixins.scss"; +@use "partials/header.scss"; +@use "partials/footer.scss"; + +html, body { + margin: 0; + padding: 0; +} + +#container { + height: 100vh; + display: grid; + grid-template-rows: auto 1fr auto; + grid-template-columns: 1fr 1700px 1fr; + grid-row-end: -1; + grid-auto-rows: 1fr; + grid-gap: 0; + + @include mixins.main { + grid-template-columns: 0 1fr 0; + background: red; + } +} + +#left { + background: aqua; + grid-column: 1; + grid-row-start: 1; + grid-row-end: 3; +} + +#header { + grid-column: 2; + grid-row: 1; +} + +#content { + background: aquamarine; + grid-column-start: 2; + grid-row-start: 2; + + padding: variables.$innerContainerMargin; + overflow-wrap: break-word; +} + +#footer { + background: black; + grid-column: 2; + grid-row: 3; +} + +#right { + background: aqua; + grid-column: 3; + grid-row-start: 1; + grid-row-end: 3; +} \ No newline at end of file diff --git a/resources/css/mixins.scss b/resources/css/mixins.scss new file mode 100644 index 0000000..a57720d --- /dev/null +++ b/resources/css/mixins.scss @@ -0,0 +1,31 @@ +@use "variables.scss"; + +@mixin mobileS { + @media screen and (max-width: $mobileS) { + @content; + } +} + +@mixin navbar_overflow { + @media screen and (max-width: variables.$navbar_overflow) { + @content; + } +} + +@mixin tablet { + @media screen and (max-width: $tablet) { + @content; + } +} + +@mixin main { + @media screen and (max-width: variables.$main) { + @content; + } +} + +@mixin fourK { + @media screen and (max-width: $fourK) { + @content; + } +} \ No newline at end of file diff --git a/resources/css/partials/footer.scss b/resources/css/partials/footer.scss new file mode 100644 index 0000000..e69de29 diff --git a/resources/css/partials/header.scss b/resources/css/partials/header.scss new file mode 100644 index 0000000..8afae13 --- /dev/null +++ b/resources/css/partials/header.scss @@ -0,0 +1,32 @@ +@use "../variables.scss"; +@use "../mixins.scss"; + +#header { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + @include mixins.navbar_overflow { + flex-direction: column; + } + + #logo { + margin-left: variables.$innerContainerMargin; + } + + .navbar { + display: flex; + + .nav-item { + margin-right: variables.$innerContainerMargin; + text-decoration: none; + + @include mixins.navbar_overflow { + &:last-of-type { + margin-right: 0; + } + } + } + } +} \ No newline at end of file diff --git a/resources/css/variables.scss b/resources/css/variables.scss new file mode 100644 index 0000000..7e23484 --- /dev/null +++ b/resources/css/variables.scss @@ -0,0 +1,7 @@ +$mobileS: 360px; +$navbar_overflow: 550px; +$tablet: 768px; +$main: 1700px; +$fourK: 2560px; + +$innerContainerMargin: 20px; \ No newline at end of file diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..6d4defb --- /dev/null +++ b/styles/main.css @@ -0,0 +1,82 @@ +#header { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} +@media screen and (max-width: 550px) { + #header { + flex-direction: column; + } +} +#header #logo { + margin-left: 20px; +} +#header .navbar { + display: flex; +} +#header .navbar .nav-item { + margin-right: 20px; + text-decoration: none; +} +@media screen and (max-width: 550px) { + #header .navbar .nav-item:last-of-type { + margin-right: 0; + } +} + +html, body { + margin: 0; + padding: 0; +} + +#container { + height: 100vh; + display: grid; + grid-template-rows: auto 1fr auto; + grid-template-columns: 1fr 1700px 1fr; + grid-row-end: -1; + grid-auto-rows: 1fr; + grid-gap: 0; +} +@media screen and (max-width: 1700px) { + #container { + grid-template-columns: 0 1fr 0; + background: red; + } +} + +#left { + background: aqua; + grid-column: 1; + grid-row-start: 1; + grid-row-end: 3; +} + +#header { + grid-column: 2; + grid-row: 1; +} + +#content { + background: aquamarine; + grid-column-start: 2; + grid-row-start: 2; + padding: 20px; + overflow-wrap: break-word; +} + +#footer { + background: black; + grid-column: 2; + grid-row: 3; +} + +#right { + background: aqua; + grid-column: 3; + grid-row-start: 1; + grid-row-end: 3; +} + +/*# sourceMappingURL=main.css.map */ diff --git a/styles/main.css.map b/styles/main.css.map new file mode 100644 index 0000000..2418e8c --- /dev/null +++ b/styles/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../resources/css/partials/header.scss","../resources/css/mixins.scss","../resources/css/variables.scss","../resources/css/main.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;;ACEA;EDNF;IAOI;;;AAGF;EACE,aERmB;;AFWrB;EACE;;AAEA;EACE,cEfiB;EFgBjB;;ACbJ;EDgBM;IACE;;;;AGrBV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AFIA;EEXF;IAUI;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EAEA,SDpCqB;ECqCrB;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA","file":"main.css"} \ No newline at end of file