diff --git a/.gitignore b/.gitignore index a9d6712..9f637e9 100644 --- a/.gitignore +++ b/.gitignore @@ -46,7 +46,3 @@ fixtures/*.sql # NPM-related ignores node_modules/ package-lock.json - - -#SCSS-related ignores -*.map \ No newline at end of file diff --git a/css/fonts/Gotham-Bold.otf b/css/fonts/Gotham-Bold.otf new file mode 100644 index 0000000..649fde3 Binary files /dev/null and b/css/fonts/Gotham-Bold.otf differ diff --git a/css/fonts/Sans-Thin.otf b/css/fonts/Sans-Thin.otf new file mode 100644 index 0000000..b1be577 Binary files /dev/null and b/css/fonts/Sans-Thin.otf differ diff --git a/css/fonts/futura-pt-light.otf b/css/fonts/futura-pt-light.otf new file mode 100644 index 0000000..05b61f8 Binary files /dev/null and b/css/fonts/futura-pt-light.otf differ diff --git a/css/styles.css b/css/styles.css index 5c08700..97e4f39 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,16 +1,33 @@ -header { +@font-face { + font-family: "Gotham-Bold"; + src: url("fonts/Gotham-Bold.otf"); +} +@font-face { + font-family: "Sans-Thin"; + src: url("fonts/Sans-Thin.otf"); +} +@font-face { + font-family: "Futura"; + src: url("fonts/futura-pt-light.otf"); +} +.main_h { position: fixed; max-height: 70px; z-index: 999; width: 100%; padding-top: 17px; - background: #fff; + background: #000; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; padding-bottom: 6px; font-family: "Montserrat", sans-serif; } +@media only screen and (max-width: 766px) { + .main_h { + padding-top: 25px; + } +} .open-nav { max-height: 400px !important; @@ -20,17 +37,24 @@ header { -webkit-transform: rotate(-90deg); } +.sticky { + background-color: #fff; + opacity: 1; + top: 0px; + border-bottom: 1px solid gainsboro; +} + .logo { - width: 500px; + width: 50px; + font-size: 25px; + color: #8f8f8f; + text-transform: uppercase; float: left; display: block; margin-top: 0; + line-height: 1; margin-bottom: 10px; - background: url("res/logo.png"); - background-size: cover; } - - @media only screen and (max-width: 766px) { .logo { float: none; @@ -148,57 +172,25 @@ p { .hero { position: relative; - background: #333 url(http://srdjanpajdic.com/slike/2.jpg) no-repeat center center fixed; + background: #333 url(res/branch_big.svg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; - text-align: center; + background-attachment: local; color: #fff; - padding-top: 110px; - min-height: 500px; + padding-top: 70px; + min-height: 100vh; letter-spacing: 2px; font-family: "Montserrat", sans-serif; } -.hero h1 { - font-size: 50px; - line-height: 1.3; +.hero h2 { + font-family: "Gotham-Bold", "Montserrat", sans-serif; } -.hero h1 span { - font-size: 25px; - color: #e8f380; - border-bottom: 2px solid #e8f380; - padding-bottom: 12px; - line-height: 3; -} - -.mouse { - display: block; - margin: 0 auto; - width: 26px; - height: 46px; - border-radius: 13px; - border: 2px solid #e8f380; - bottom: 40px; +.hero #bottomRight { + bottom: 0; + right: 0; + text-align: right; position: absolute; - left: 50%; - margin-left: -14px; -} -.mouse span { - display: block; - margin: 6px auto; - width: 2px; - height: 2px; - border-radius: 4px; - background: #e8f380; - border: 1px solid transparent; - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-name: scroll; - animation-name: scroll; } @-webkit-keyframes scroll { diff --git a/css/styles.css.map b/css/styles.css.map new file mode 100644 index 0000000..149676c --- /dev/null +++ b/css/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACK;EACA;;AAGL;EACK;EACA;;AAGL;EACK;EACA;;AAgBL;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AArBA;EAUF;IAaI;;;;AAIJ;EACE;;AACA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA,OAvCM;EAwCN;EACA;EACA;EACA;EACA;EACA;;AAnDA;EA0CF;IAWI;;;;AAIJ;EACE;EACA;;AA3DA;EAyDF;IAII;;;AAGF;EACE;EACA;EACA;EACA;;AApEF;EAgEA;IAMI;IACA;IACA;IACA;IACA;;;AAGF;EACE;EACA;EACA;;AAhFJ;EA6EE;IAKI;IACA;IACA;;;AAGJ;EACE;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAzGA;EA+FF;IAYI;;;AAGF;EACE;EACA;EACA;EACA;EACA,YA7GI;EA8GJ;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAGF;EACE,OAjIM;EAkIN;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;;AAMJ;EACE;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;;;AAKJ;EACE;IACE;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA","file":"styles.css"} \ No newline at end of file diff --git a/css/styles.scss b/css/styles.scss index e69de29..f2235f3 100644 --- a/css/styles.scss +++ b/css/styles.scss @@ -0,0 +1,236 @@ +@font-face { + font-family: "Gotham-Bold"; + src: url("fonts/Gotham-Bold.otf"); +} + +@font-face { + font-family: "Sans-Thin"; + src: url("fonts/Sans-Thin.otf"); +} + +@font-face { + font-family: "Futura"; + src: url("fonts/futura-pt-light.otf"); +} + + +// MQ trigger +@mixin small { + @media only screen and (max-width: 766px) { + @content; + } +} + +// colors +$color: #8f8f8f; +$color2: #e8f380; + +// Navigation +.main_h { + position: fixed; + max-height: 70px; + z-index: 999; + width: 100%; + padding-top: 17px; + background: #000; + overflow: hidden; + -webkit-transition: all 0.3s; + transition: all 0.3s; + padding-bottom: 6px; + font-family: "Montserrat", sans-serif; + @include small { + padding-top: 25px; + } +} + +.open-nav { + max-height: 400px !important; + .mobile-toggle { + transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + } +} + +.sticky { + background-color: #fff; + opacity: 1; + top: 0px; + border-bottom: 1px solid lighten($color, 30%); +} + +.logo { + width: 50px; + font-size: 25px; + color: $color; + text-transform: uppercase; + float: left; + display: block; + margin-top: 0; + line-height: 1; + margin-bottom: 10px; + @include small { + float: none; + } +} + +nav { + float: right; + width: 60%; + @include small { + width: 100%; + } + + ul { + list-style: none; + overflow: hidden; + text-align: right; + float: right; + @include small { + padding-top: 10px; + margin-bottom: 22px; + float: left; + text-align: center; + width: 100%; + } + + li { + display: inline-block; + margin-left: 35px; + line-height: 1.5; + @include small { + width: 100%; + padding: 7px 0; + margin: 0; + } + } + a { + color: #888888; + text-transform: uppercase; + font-size: 12px; + } + } +} + +.mobile-toggle { + display: none; + cursor: pointer; + font-size: 20px; + position: absolute; + right: 22px; + top: 0; + width: 30px; + -webkit-transition: all 200ms ease-in; + -moz-transition: all 200ms ease-in; + transition: all 200ms ease-in; + @include small { + display: block; + } + + span { + width: 30px; + height: 4px; + margin-bottom: 6px; + border-radius: 1000px; + background: $color; + display: block; + } +} + +.row { + width: 100%; + max-width: 940px; + margin: 0 auto; + position: relative; + padding: 0 2%; +} + + +// Page Style +* { + box-sizing: border-box; +} + +body { + color: $color; + background: white; + font-family: "Cardo", serif; + font-weight: 300; + -webkit-font-smoothing: antialiased; +} + +a { + text-decoration: none; +} + +h1 { + font-size: 30px; + line-height: 1.8; + text-transform: uppercase; + font-family: "Montserrat", sans-serif; +} + +p { + margin-bottom: 20px; + font-size: 17px; + line-height: 2; +} + +.content { + padding: 50px 2% 250px; +} + +.hero { + position: relative; + background: #333 url(res/branch_big.svg) no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + background-attachment: local; + color: #fff; + padding-top: 70px; + min-height: 100vh; + letter-spacing: 2px; + font-family: "Montserrat", sans-serif; + + h2 { + font-family: "Gotham-Bold", "Montserrat", sans-serif; + } + + #bottomRight { + bottom: 0; + right: 0; + text-align: right; + position: absolute; + } +} + + + +@-webkit-keyframes scroll { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } +} + + +@keyframes scroll { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } +} diff --git a/index.html b/index.html index 5b090c3..7a424fe 100644 --- a/index.html +++ b/index.html @@ -14,10 +14,12 @@ + +
- +
@@ -34,57 +36,53 @@ -
+
+
+

You're an
influencer

-

loser friendly
Batman nav.

- -
- -
+

You're a
brand

Section 01

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate - soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro - eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam - voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam - molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero - incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, - pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta + alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, + aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem + veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus + est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur + hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur + deleniti recusandae odit officiis. Quidem, cupiditate.

Section 02

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate - soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro - eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam - voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam - molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero - incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, - pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta + alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, + aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem + veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus + est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur + hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur + deleniti recusandae odit officiis. Quidem, cupiditate.

Section 03

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate - soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro - eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam - voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam - molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero - incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, - pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta + alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, + aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem + veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus + est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur + hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur + deleniti recusandae odit officiis. Quidem, cupiditate.

Section 04

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate - soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro - eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam - voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam - molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero - incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, - pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta + alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, + aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem + veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus + est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur + hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur + deleniti recusandae odit officiis. Quidem, cupiditate.

- - diff --git a/js/main.js b/js/main.js index bbb54ab..82464ba 100644 --- a/js/main.js +++ b/js/main.js @@ -1,27 +1,30 @@ +$(document).ready(function() { + // Mobile Nav + $('.mobile-toggle').click(function() { + if ($('.main_h').hasClass('open-nav')) { + $('.main_h').removeClass('open-nav'); + } else { + $('.main_h').addClass('open-nav'); + } + }); -// Mobile Navigation -$('.mobile-toggle').click(function() { - if ($('.main_h').hasClass('open-nav')) { - $('.main_h').removeClass('open-nav'); - } else { - $('.main_h').addClass('open-nav'); - } -}); + $('.main_h li a').click(function() { + if ($('.main_h').hasClass('open-nav')) { + $('.navigation').removeClass('open-nav'); + $('.main_h').removeClass('open-nav'); + } + }); -$('.main_h li a').click(function() { - if ($('.main_h').hasClass('open-nav')) { - $('.navigation').removeClass('open-nav'); - $('.main_h').removeClass('open-nav'); - } -}); -// Navigation Scroll - ljepo radi materem -$('nav a').click(function(event) { - var id = $(this).attr("href"); - var offset = 70; - var target = $(id).offset().top - offset; - $('html, body').animate({ - scrollTop: target - }, 500); - event.preventDefault(); + + // Navigation Scroll - ljepo radi materem + $('nav a').click(function(event) { + var id = $(this).attr("href"); + var offset = 70; + var target = $(id).offset().top - offset; + $('html, body').animate({ + scrollTop: target + }, 500); + event.preventDefault(); + }); });