diff --git a/index.html b/index.html index a427b66..2911887 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,47 @@

Merhaba!

- + \ No newline at end of file diff --git a/resources/css/main.scss b/resources/css/main.scss index d68c61f..a281a94 100644 --- a/resources/css/main.scss +++ b/resources/css/main.scss @@ -6,6 +6,7 @@ html, body { margin: 0; padding: 0; + background-color: variables.$clr_sides; } #container { @@ -24,7 +25,6 @@ html, body { } #left { - background: aqua; grid-column: 1; grid-row-start: 1; grid-row-end: 3; @@ -51,7 +51,6 @@ html, body { } #right { - background: aqua; grid-column: 3; grid-row-start: 1; grid-row-end: 3; diff --git a/resources/css/partials/footer.scss b/resources/css/partials/footer.scss index e69de29..18c1ccf 100644 --- a/resources/css/partials/footer.scss +++ b/resources/css/partials/footer.scss @@ -0,0 +1,67 @@ +@use "../variables.scss"; + + +#footer { + margin: 0; + display: flex; + justify-content: flex-start; + flex-direction: row; + align-items: flex-start; + padding: variables.$innerContainerMargin; + + .footer-column { + color: aliceblue; + display: flex; + flex-direction: column; + margin: 0 20px 0 0; + + h2 { + font: 22px "Montserrat", sans-serif; + font-weight: 600; + color: white; + margin-bottom: 0; + } + + hr { + margin: 0 0 10px 0; + border: 1px dotted white; + } + + a { + color: inherit; + text-decoration: none; + margin: 0 0 5px 0; + font: 16px "Montserrat", sans-serif; + font-weight: 500; + } + + .footer-social { + display: inline-flex; + align-items: center; + border-radius: 5px; + + img { + border-radius: 10px; + width: 35px; + height: 35px; + margin: 0 15px 0 0; + } + + &:hover { + background: variables.$clr_nav_active; + color: black; + } + } + + p { + font: 16px "Montserrat", sans-serif; + font-weight: 500; + color: inherit; + margin: 0; + } + + &:last-of-type { + margin: 0; + } + } +} \ No newline at end of file diff --git a/resources/css/partials/header.scss b/resources/css/partials/header.scss index 8afae13..4f571d5 100644 --- a/resources/css/partials/header.scss +++ b/resources/css/partials/header.scss @@ -2,6 +2,7 @@ @use "../mixins.scss"; #header { + background: variables.$clr_header; display: flex; flex-direction: row; justify-content: space-between; @@ -12,7 +13,10 @@ } #logo { + font-family: "Montserrat", sans-serif; + font-weight: 700; margin-left: variables.$innerContainerMargin; + color: variables.$clr_logo } .navbar { @@ -20,8 +24,15 @@ .nav-item { margin-right: variables.$innerContainerMargin; + font: 18px "Montserrat", sans-serif; + font-weight: 600; + color: variables.$clr_nav_sleep; text-decoration: none; + &:hover { + color: variables.$clr_nav_active; + } + @include mixins.navbar_overflow { &:last-of-type { margin-right: 0; diff --git a/resources/css/variables.scss b/resources/css/variables.scss index 7e23484..e2a2af7 100644 --- a/resources/css/variables.scss +++ b/resources/css/variables.scss @@ -4,4 +4,15 @@ $tablet: 768px; $main: 1700px; $fourK: 2560px; -$innerContainerMargin: 20px; \ No newline at end of file +$innerContainerMargin: 20px; + +$clr_header: #01003B; +$clr_logo: #D6FFFF; +$clr_nav_sleep: #A3C2C2; +$clr_nav_active: $clr_logo; + +$clr_sides: #364040; + +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap'); \ No newline at end of file diff --git a/resources/fonts/Montserrat-Regular.woff2 b/resources/fonts/Montserrat-Regular.woff2 new file mode 100644 index 0000000..694d308 Binary files /dev/null and b/resources/fonts/Montserrat-Regular.woff2 differ diff --git a/resources/imgs/arabam.jpg b/resources/imgs/arabam.jpg new file mode 100644 index 0000000..e6ea6aa Binary files /dev/null and b/resources/imgs/arabam.jpg differ diff --git a/resources/imgs/facebook.svg b/resources/imgs/facebook.svg new file mode 100644 index 0000000..962fc2f --- /dev/null +++ b/resources/imgs/facebook.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/resources/imgs/instagram.png b/resources/imgs/instagram.png new file mode 100644 index 0000000..61c75cb Binary files /dev/null and b/resources/imgs/instagram.png differ diff --git a/resources/imgs/sahibinden.png b/resources/imgs/sahibinden.png new file mode 100644 index 0000000..134370d Binary files /dev/null and b/resources/imgs/sahibinden.png differ diff --git a/styles/main.css b/styles/main.css index 6d4defb..bcd32b9 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,4 +1,8 @@ +@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap"); #header { + background: #01003B; display: flex; flex-direction: row; justify-content: space-between; @@ -10,24 +14,90 @@ } } #header #logo { + font-family: "Montserrat", sans-serif; + font-weight: 700; margin-left: 20px; + color: #D6FFFF; } #header .navbar { display: flex; } #header .navbar .nav-item { margin-right: 20px; + font: 18px "Montserrat", sans-serif; + font-weight: 600; + color: #A3C2C2; text-decoration: none; } +#header .navbar .nav-item:hover { + color: #D6FFFF; +} @media screen and (max-width: 550px) { #header .navbar .nav-item:last-of-type { margin-right: 0; } } +#footer { + margin: 0; + display: flex; + justify-content: flex-start; + flex-direction: row; + align-items: flex-start; + padding: 20px; +} +#footer .footer-column { + color: aliceblue; + display: flex; + flex-direction: column; + margin: 0 20px 0 0; +} +#footer .footer-column h2 { + font: 22px "Montserrat", sans-serif; + font-weight: 600; + color: white; + margin-bottom: 0; +} +#footer .footer-column hr { + margin: 0 0 10px 0; + border: 1px dotted white; +} +#footer .footer-column a { + color: inherit; + text-decoration: none; + margin: 0 0 5px 0; + font: 16px "Montserrat", sans-serif; + font-weight: 500; +} +#footer .footer-column .footer-social { + display: inline-flex; + align-items: center; + border-radius: 5px; +} +#footer .footer-column .footer-social img { + border-radius: 10px; + width: 35px; + height: 35px; + margin: 0 15px 0 0; +} +#footer .footer-column .footer-social:hover { + background: #D6FFFF; + color: black; +} +#footer .footer-column p { + font: 16px "Montserrat", sans-serif; + font-weight: 500; + color: inherit; + margin: 0; +} +#footer .footer-column:last-of-type { + margin: 0; +} + html, body { margin: 0; padding: 0; + background-color: #364040; } #container { @@ -47,7 +117,6 @@ html, body { } #left { - background: aqua; grid-column: 1; grid-row-start: 1; grid-row-end: 3; @@ -73,7 +142,6 @@ html, body { } #right { - background: aqua; grid-column: 3; grid-row-start: 1; grid-row-end: 3; diff --git a/styles/main.css.map b/styles/main.css.map index 2418e8c..621e3a9 100644 --- a/styles/main.css.map +++ b/styles/main.css.map @@ -1 +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 +{"version":3,"sourceRoot":"","sources":["../resources/css/variables.scss","../resources/css/partials/header.scss","../resources/css/mixins.scss","../resources/css/partials/footer.scss","../resources/css/main.scss"],"names":[],"mappings":"AAeQ;AACA;AACA;ACdR;EACE,YDIW;ECHX;EACA;EACA;EACA;;ACCA;EDNF;IAQI;;;AAGF;EACE;EACA;EACA,aDXmB;ECYnB,ODTO;;ACYT;EACE;;AAEA;EACE,cDnBiB;ECoBjB;EACA;EACA,ODlBU;ECmBV;;AAEA;EACE,ODvBG;;AEAT;ED2BM;IACE;;;;AElCV;EACE;EACA;EACA;EACA;EACA;EACA,SHHqB;;AGKrB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE,YHzCG;EG0CH;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;;;AC1DN;EACE;EACA;EACA,kBJKU;;;AIFZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AFGA;EEVF;IAUI;IACA;;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EAEA,SJpCqB;EIqCrB;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"main.css"} \ No newline at end of file