diff --git a/assets/css/color.css b/assets/css/color.css new file mode 100644 index 0000000..454dfb3 --- /dev/null +++ b/assets/css/color.css @@ -0,0 +1,69 @@ +@keyframes color-background { + 0% { + background-color: #d65d5b; + } + 33.3333333333% { + background-color: #ed8745; + } + 66.6666666667% { + background-color: #7a576d; + } + 100% { + background-color: #d65d5b; + } +} +.color-background { + animation: color-background 15s linear infinite; +} + +@keyframes color-border { + 0% { + border-color: #d65d5b; + } + 33.3333333333% { + border-color: #ed8745; + } + 66.6666666667% { + border-color: #7a576d; + } + 100% { + border-color: #d65d5b; + } +} +.color-border { + animation: color-border 15s linear infinite; +} + +@keyframes color-text { + 0% { + color: #d65d5b; + } + 33.3333333333% { + color: #ed8745; + } + 66.6666666667% { + color: #7a576d; + } + 100% { + color: #d65d5b; + } +} +.color-text { + animation: color-text 15s linear infinite; +} + +.color-overlay { + position: relative; +} +.color-overlay::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0.85; + animation: color-background 15s linear infinite; +} + +/*# sourceMappingURL=color.css.map */ diff --git a/assets/css/color.css.map b/assets/css/color.css.map new file mode 100644 index 0000000..daff02a --- /dev/null +++ b/assets/css/color.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["color.scss"],"names":[],"mappings":"AAYC;EAIE;IACC,kBARK;;EAON;IACC,kBARK;;EAON;IACC,kBARK;;EAYP;IACC;;;AAIF;EACC;;;AAfD;EAIE;IACC,cARK;;EAON;IACC,cARK;;EAON;IACC,cARK;;EAYP;IACC;;;AAIF;EACC;;;AAfD;EAIE;IACC,OARK;;EAON;IACC,OARK;;EAON;IACC,OARK;;EAYP;IACC;;;AAIF;EACC;;;AAIF;EAEC;;AAEA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"color.css"} \ No newline at end of file diff --git a/assets/css/color.scss b/assets/css/color.scss new file mode 100644 index 0000000..7938971 --- /dev/null +++ b/assets/css/color.scss @@ -0,0 +1,47 @@ +// _color.scss + +$color-attributes: ( + ('background', 'background-color'), + ('border', 'border-color'), + ('text', 'color'), +); + +$color-animation: 15s linear infinite !default; +$colors: #d65d5b, #ed8745, #7a576d !default; + +@each $color-attribute-name, $color-attribute in $color-attributes { + @keyframes color-#{$color-attribute-name} { + @each $color in $colors { + $i: index($colors, $color) - 1; + + #{$i / length($colors) * 100%} { + #{$color-attribute}: $color; + } + } + + 100% { + #{$color-attribute}: nth($colors, 1); + } + } + + .color-#{$color-attribute-name} { + animation: color-#{$color-attribute-name} $color-animation; + } +} + +.color-overlay +{ + position: relative; + + &::before + { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0.85; + animation: color-background $color-animation; + } +} diff --git a/assets/css/jquery.sectionmenu.css b/assets/css/jquery.sectionmenu.css index 418e64f..3ada740 100644 --- a/assets/css/jquery.sectionmenu.css +++ b/assets/css/jquery.sectionmenu.css @@ -1,71 +1,54 @@ .section-menu { - display: table; position: fixed; top: 0; - right: 10px; + right: 0; height: 100%; + display: flex; + flex-direction: column; + justify-content: center; } .section-menu ul { - display: table-cell; - margin: 0; - padding: 0; + padding-right: 25px; list-style: none; - vertical-align: middle; -} - -.section-menu li -{ - display: block; } .section-menu a { display: block; position: relative; - padding: 5px; - height: 10px; - width: 10px; + height: 25px; color: white; - line-height: 20px; - text-align: right; + font-size: 12px; white-space: nowrap; - transition: all 0.5s ease; + transition: all 0.5s } -.section-menu a:before +.section-menu a::after { content: ""; - display: block; - position: relative; - border-radius: 10px; - width: 100%; - height: 100%; - background: rgba(255, 255, 255, 0.5); - -webkit-transform: scale(0.4); - -moz-transform: scale(0.4); - -ms-transform: scale(0.4); - transform: scale(0.4); + display: inline-block; + border-radius: 50%; + width: 8px; + height: 8px; + background-color: white; + box-shadow: 0 0 0 4px transparent; transition: all 0.3s ease; } -.section-menu a:hover:before +.section-menu a:hover::after { - background: white; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); + background-color: transparent; + box-shadow: 0 0 0 4px white; } .section-menu a span { position: absolute; - top: 0; - right: 0; - padding-right: 25px; + right: 25px; + text-align: right; opacity: 0; transition: all 0.3s ease; } diff --git a/assets/css/jquery.sectionmenu.dark.css b/assets/css/jquery.sectionmenu.dark.css index 6c2fa47..8df5831 100644 --- a/assets/css/jquery.sectionmenu.dark.css +++ b/assets/css/jquery.sectionmenu.dark.css @@ -3,12 +3,14 @@ color: black; } -.section-menu a:before +.section-menu a::after { - background: rgba(0, 0, 0, 0.5); + background-color: black; + box-shadow: 0 0 0 4px transparent; } -.section-menu a:hover:before +.section-menu a:hover::after { - background: black; + background-color: transparent; + box-shadow: 0 0 0 4px black; } diff --git a/assets/css/kelson.css b/assets/css/kelson.css new file mode 100644 index 0000000..994c5f4 --- /dev/null +++ b/assets/css/kelson.css @@ -0,0 +1,44 @@ +@font-face { + font-family: "Kelson"; + font-style: normal; + font-weight: 100; + src: url("../webfonts/kelson-thin.eot"); + src: url("../webfonts/kelson-thin.eot?iefix") format("eot"), url("../webfonts/kelson-thin.ttf") format("truetype"), url("../webfonts/kelson-thin.woff") format("woff"), url("../webfonts/kelson-thin.woff2") format("woff2"); +} +@font-face { + font-family: "Kelson"; + font-style: normal; + font-weight: 300; + src: url("../webfonts/kelson-light.eot"); + src: url("../webfonts/kelson-light.eot?iefix") format("eot"), url("../webfonts/kelson-light.ttf") format("truetype"), url("../webfonts/kelson-light.woff") format("woff"), url("../webfonts/kelson-light.woff2") format("woff2"); +} +@font-face { + font-family: "Kelson"; + font-style: normal; + font-weight: 400; + src: url("../webfonts/kelson.eot"); + src: url("../webfonts/kelson.eot?iefix") format("eot"), url("../webfonts/kelson.ttf") format("truetype"), url("../webfonts/kelson.woff") format("woff"), url("../webfonts/kelson.woff2") format("woff2"); +} +@font-face { + font-family: "Kelson"; + font-style: normal; + font-weight: 500; + src: url("../webfonts/kelson-medium.eot"); + src: url("../webfonts/kelson-medium.eot?iefix") format("eot"), url("../webfonts/kelson-medium.ttf") format("truetype"), url("../webfonts/kelson-medium.woff") format("woff"), url("../webfonts/kelson-medium.woff2") format("woff2"); +} +@font-face { + font-family: "Kelson"; + font-style: normal; + font-weight: 700; + src: url("../webfonts/kelson-bold.eot"); + src: url("../webfonts/kelson-bold.eot?iefix") format("eot"), url("../webfonts/kelson-bold.ttf") format("truetype"), url("../webfonts/kelson-bold.woff") format("woff"), url("../webfonts/kelson-bold.woff2") format("woff2"); +} +@font-face { + font-family: "Kelson"; + font-style: normal; + font-weight: 800; + src: url("../webfonts/kelson-extra-bold.eot"); + src: url("../webfonts/kelson-extra-bold.eot?iefix") format("eot"), url("../webfonts/kelson-extra-bold.ttf") format("truetype"), url("../webfonts/kelson-extra-bold.woff") format("woff"), url("../webfonts/kelson-extra-bold.woff2") format("woff2"); +} + +/*# sourceMappingURL=kelson.css.map */ diff --git a/assets/css/kelson.css.map b/assets/css/kelson.css.map new file mode 100644 index 0000000..7af0753 --- /dev/null +++ b/assets/css/kelson.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["kelson.scss"],"names":[],"mappings":"AAYC;EACA;EACA;EACA,aAbgB;EAchB;EACA;;AALA;EACA;EACA;EACA,aAbgB;EAchB;EACA;;AALA;EACA;EACA;EACA,aAbgB;EAchB;EACA;;AALA;EACA;EACA;EACA,aAbgB;EAchB;EACA;;AALA;EACA;EACA;EACA,aAbgB;EAchB;EACA;;AALA;EACA;EACA;EACA,aAbgB;EAchB;EACA","file":"kelson.css"} \ No newline at end of file diff --git a/assets/css/kelson.scss b/assets/css/kelson.scss new file mode 100644 index 0000000..58468d2 --- /dev/null +++ b/assets/css/kelson.scss @@ -0,0 +1,23 @@ +// kelson.scss + +$kelson-weights: ( + ('kelson-thin', 100), + ('kelson-light', 300), + ('kelson', 400), + ('kelson-medium', 500), + ('kelson-bold', 700), + ('kelson-extra-bold', 800) +); + +@each $kelson-weight-key, $kelson-weight-value in $kelson-weights { + @font-face { + font-family: 'Kelson'; + font-style: normal; + font-weight: $kelson-weight-value; + src: url('../webfonts/#{$kelson-weight-key}.eot'); + src: url('../webfonts/#{$kelson-weight-key}.eot?iefix') format('eot'), + url('../webfonts/#{$kelson-weight-key}.ttf') format('truetype'), + url('../webfonts/#{$kelson-weight-key}.woff') format('woff'), + url('../webfonts/#{$kelson-weight-key}.woff2') format('woff2'); + } +} \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css index b6d454b..aa2e6ec 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,3 +1,8 @@ +*, *::before, *::after +{ + box-sizing: border-box; +} + html, body { margin: 0; @@ -7,56 +12,43 @@ html, body body { - background: rgb(22, 189, 222) url('../images/background.jpg') no-repeat fixed center center; - background-size: cover; - color: rgb(200,200,200); - font-family: 'Raleway', sans-serif; - font-size: 12px; + color: #dfdfdf; + font-family: 'Kelson', sans-serif; + font-size: 20px; } h1 { + font-size: 40px; + font-weight: 400; color: white; - font-weight: 300; } -h1 span +p { - color: rgb(22, 189, 222); + line-height: 30px; } a { - transition: all 0.3s ease; - color: rgb(22, 189, 222); + color: white; text-decoration: none; -} - -a:hover -{ - color: rgb(59, 77, 86); -} - -ul -{ - list-style-type: square; + transition: all 0.3s ease; } .container { margin: 0 auto; - padding: 10px 30px; - min-width: 768px; - max-width: 1024px; + padding: 15px; } -.container:before, .container:after +.container::before, .container::after { content: " "; display: table; } -.container:after +.container::after { clear: both; } @@ -67,53 +59,62 @@ ul top: 0; width: 100%; height: 60px; - background: white; - background: rgba(255, 255, 255, 0.8); - color: rgb(59, 77, 86); - line-height: 40px; } -#nav h1 +#nav .logo { - float: left; - margin: 0; - color: rgb(59, 77, 86); + display: inline-block; + width: 80px; +} + +#nav .logo svg +{ + fill: white; } #nav ul { float: right; margin: 0; - padding: 0; + font-size: 14px; + font-weight: 500; + padding-top: 15px; + padding-right: 30px; list-style: none; } #nav li { - float: left; - margin-left: 30px; - line-height: 50px; + margin-left: 25px; } -#nav a +@media (min-width: 480px) { - color: #3b4d56; + #nav li + { + float: left; + line-height: 50px; + } } -#nav a:hover +#nav a { - color: #16bdde; + color: #dfdfdf; + transition: color 0.3s ease; } -#page section +#nav a:hover { - padding-top: 100px; - padding-bottom: 400px; - font-size: 20px; - text-align: center; + color: white; } -#page p +#page .container { - line-height: 30px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 100px 15px; + width: 100%; + min-height: 100vh; + text-align: center; } diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..e586627 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,14 @@ +(function ($) { + $(window).on('load', function() { + $('body').sectionMenu().fragmentScroll(); + }); + + $(window).scroll(function () { + var rotateAmount = (($(window).scrollTop())/5) % 360; + + $('.logo path:first-child').css("transform", "rotate("+rotateAmount+"deg)"); + $('.logo path:first-child').css("transform-origin", "63% 59% 0px"); + $('.logo path:nth-child(2)').css("transform", "rotate(-"+rotateAmount+"deg)"); + $('.logo path:nth-child(2)').css("transform-origin", "20% 21% 0px"); + }); +})(jQuery); diff --git a/assets/webfonts/kelson-bold.eot b/assets/webfonts/kelson-bold.eot new file mode 100644 index 0000000..30f6dc1 Binary files /dev/null and b/assets/webfonts/kelson-bold.eot differ diff --git a/assets/webfonts/kelson-bold.ttf b/assets/webfonts/kelson-bold.ttf new file mode 100644 index 0000000..e7757db Binary files /dev/null and b/assets/webfonts/kelson-bold.ttf differ diff --git a/assets/webfonts/kelson-bold.woff b/assets/webfonts/kelson-bold.woff new file mode 100644 index 0000000..da371ac Binary files /dev/null and b/assets/webfonts/kelson-bold.woff differ diff --git a/assets/webfonts/kelson-bold.woff2 b/assets/webfonts/kelson-bold.woff2 new file mode 100644 index 0000000..de633cb Binary files /dev/null and b/assets/webfonts/kelson-bold.woff2 differ diff --git a/assets/webfonts/kelson-extra-bold.eot b/assets/webfonts/kelson-extra-bold.eot new file mode 100644 index 0000000..4213247 Binary files /dev/null and b/assets/webfonts/kelson-extra-bold.eot differ diff --git a/assets/webfonts/kelson-extra-bold.ttf b/assets/webfonts/kelson-extra-bold.ttf new file mode 100644 index 0000000..6764658 Binary files /dev/null and b/assets/webfonts/kelson-extra-bold.ttf differ diff --git a/assets/webfonts/kelson-extra-bold.woff b/assets/webfonts/kelson-extra-bold.woff new file mode 100644 index 0000000..78a25a7 Binary files /dev/null and b/assets/webfonts/kelson-extra-bold.woff differ diff --git a/assets/webfonts/kelson-extra-bold.woff2 b/assets/webfonts/kelson-extra-bold.woff2 new file mode 100644 index 0000000..a4e6170 Binary files /dev/null and b/assets/webfonts/kelson-extra-bold.woff2 differ diff --git a/assets/webfonts/kelson-light.eot b/assets/webfonts/kelson-light.eot new file mode 100644 index 0000000..059bc42 Binary files /dev/null and b/assets/webfonts/kelson-light.eot differ diff --git a/assets/webfonts/kelson-light.ttf b/assets/webfonts/kelson-light.ttf new file mode 100644 index 0000000..b2f7bcc Binary files /dev/null and b/assets/webfonts/kelson-light.ttf differ diff --git a/assets/webfonts/kelson-light.woff b/assets/webfonts/kelson-light.woff new file mode 100644 index 0000000..6416036 Binary files /dev/null and b/assets/webfonts/kelson-light.woff differ diff --git a/assets/webfonts/kelson-light.woff2 b/assets/webfonts/kelson-light.woff2 new file mode 100644 index 0000000..7fd46e8 Binary files /dev/null and b/assets/webfonts/kelson-light.woff2 differ diff --git a/assets/webfonts/kelson-medium.eot b/assets/webfonts/kelson-medium.eot new file mode 100644 index 0000000..78c550a Binary files /dev/null and b/assets/webfonts/kelson-medium.eot differ diff --git a/assets/webfonts/kelson-medium.ttf b/assets/webfonts/kelson-medium.ttf new file mode 100644 index 0000000..3b8489b Binary files /dev/null and b/assets/webfonts/kelson-medium.ttf differ diff --git a/assets/webfonts/kelson-medium.woff b/assets/webfonts/kelson-medium.woff new file mode 100644 index 0000000..3e5dc4d Binary files /dev/null and b/assets/webfonts/kelson-medium.woff differ diff --git a/assets/webfonts/kelson-medium.woff2 b/assets/webfonts/kelson-medium.woff2 new file mode 100644 index 0000000..3c33698 Binary files /dev/null and b/assets/webfonts/kelson-medium.woff2 differ diff --git a/assets/webfonts/kelson-thin.eot b/assets/webfonts/kelson-thin.eot new file mode 100644 index 0000000..6b812df Binary files /dev/null and b/assets/webfonts/kelson-thin.eot differ diff --git a/assets/webfonts/kelson-thin.ttf b/assets/webfonts/kelson-thin.ttf new file mode 100644 index 0000000..bedf90c Binary files /dev/null and b/assets/webfonts/kelson-thin.ttf differ diff --git a/assets/webfonts/kelson-thin.woff b/assets/webfonts/kelson-thin.woff new file mode 100644 index 0000000..99dfe3e Binary files /dev/null and b/assets/webfonts/kelson-thin.woff differ diff --git a/assets/webfonts/kelson-thin.woff2 b/assets/webfonts/kelson-thin.woff2 new file mode 100644 index 0000000..04b49e2 Binary files /dev/null and b/assets/webfonts/kelson-thin.woff2 differ diff --git a/assets/webfonts/kelson.eot b/assets/webfonts/kelson.eot new file mode 100644 index 0000000..10c5c89 Binary files /dev/null and b/assets/webfonts/kelson.eot differ diff --git a/assets/webfonts/kelson.ttf b/assets/webfonts/kelson.ttf new file mode 100644 index 0000000..372ccf0 Binary files /dev/null and b/assets/webfonts/kelson.ttf differ diff --git a/assets/webfonts/kelson.woff b/assets/webfonts/kelson.woff new file mode 100644 index 0000000..a906019 Binary files /dev/null and b/assets/webfonts/kelson.woff differ diff --git a/assets/webfonts/kelson.woff2 b/assets/webfonts/kelson.woff2 new file mode 100644 index 0000000..d0338a2 Binary files /dev/null and b/assets/webfonts/kelson.woff2 differ diff --git a/index.html b/index.html index 4036443..8fe1fcc 100644 --- a/index.html +++ b/index.html @@ -4,53 +4,54 @@ jQuery Section Menu + - + + - + - + - +
-
+

Description

The jQuery section menu plugin creates a side menu
that allows you to scroll to the different sections
on the page.

Use the side menu at the right to
scroll trough the page.

-
-
+
+

Section 1

We created some sections
to play with.

- -
+
+

Section 2

We created some sections
to play with.

- -
+
+

Section 3

We created some sections
to play with.

- +