diff --git a/site/index.html b/site/index.html index fa9e15d..a64ee02 100644 --- a/site/index.html +++ b/site/index.html @@ -9,23 +9,38 @@ diff --git a/site/src/assets/videos/audience.mp4 b/site/src/assets/videos/audience.mp4 new file mode 100644 index 0000000..3c82d2e Binary files /dev/null and b/site/src/assets/videos/audience.mp4 differ diff --git a/site/src/assets/videos/speaker.mp4 b/site/src/assets/videos/speaker.mp4 new file mode 100644 index 0000000..b633b2e Binary files /dev/null and b/site/src/assets/videos/speaker.mp4 differ diff --git a/site/src/javascript/index.js b/site/src/javascript/index.js index ba75a75..2adf808 100644 --- a/site/src/javascript/index.js +++ b/site/src/javascript/index.js @@ -1,7 +1,13 @@ +// import speaker from '../assets/videos/speaker.mp4' + export default class Site { constructor() { - console.log('Hello Keppler') + // const $demo = document.querySelector('.js-demo') + // const $video = document.createElement('video') + // $video.src = speaker + // $video.controls = true + // $demo.appendChild($video) } } \ No newline at end of file diff --git a/site/src/style/base.styl b/site/src/style/base.styl new file mode 100644 index 0000000..129befd --- /dev/null +++ b/site/src/style/base.styl @@ -0,0 +1,9 @@ +body + background: #F6F6F6 + font-family Avenir + font-weight 500 + -webkit-font-smoothing antialiased + -moz-osx-font-smoothing grayscale + +a + text-decoration none \ No newline at end of file diff --git a/site/src/style/header.styl b/site/src/style/header.styl new file mode 100644 index 0000000..45b8376 --- /dev/null +++ b/site/src/style/header.styl @@ -0,0 +1,204 @@ +section.header + height 940px + position relative + color: #ffffff + font-size 17px + + .background + position absolute + top -10vh + left 0 + width 100% + height calc(100% + 10vh) + background linear-gradient(135deg, #330867 0%,#31a7bb 100%) + transform skewY(-5deg) + box-shadow 0px 0px 50px rgba(60, 117, 162, 0.4) + + .navigation + position absolute + top 24px + right 65px + font-weight 300 + + .item + display inline-block + position relative + vertical-align middle + padding 10px + margin 0 7px + + &.github + background-image url(../../static/svg/github.svg) + background-repeat no-repeat + background-position center center + width 40px + height 40px + + &::after + content '' + display block + right 0 + bottom 0 + left 0 + height 1px + background #ffffff + transform scaleX(0) + transform-origin 0 0 + transition transform 0.3s cubic-bezier(0.75, 0, 0.58, 1) + will-change transform + + &:hover + &::after + transform scaleX(1) + + .title + position absolute + top 210px + left 50% + + .keppler + position absolute + left -60px + top -40px + width 259px + height 77px + background-image url(../../static/svg/logo-keppler.svg) + + .sky + position absolute + left -270px + top -85px + width 264px + height 153px + background-image url(../../static/svg/logo-sky.svg) + + .avatar + position absolute + left -165px + top -40px + width 50px + height 61px + background-image url(../../static/svg/logo-avatar.svg) + animation logo-avatar 6s ease-in-out infinite alternate + will-change transform + + @keyframes logo-avatar + 0% + transform translateX(-10px) translateY(-5px) translateZ(0) + 100% + transform translateX(10px) translateY(5px) translateZ(0) + + .sub-title + position absolute + top 270px + left 0 + right 0 + text-align center + line-height 35px + font-size 25px + font-weight 300 + + .demo + position absolute + top 50% + left 50% + width 1px + height 1px + background #ffffff + + video + background #ff0000 + + .get-started-button + position absolute + bottom 130px + left calc(50% - 117px) + width 234px + height 43px + overflow hidden + border-radius 22px + + .out + position absolute + top 0 + left 0 + width 100% + height 100% + border 2px solid #fff + border-radius 22px + line-height 39px + text-align center + + .hover + position absolute + top 0 + left 0 + width 100% + height 100% + border-radius 22px + border-radius 22px + line-height 43px + text-align center + overflow hidden + background #ffffff + transform translateX(-100%) + transition transform 0.5s cubic-bezier(0.75, 0, 0.25, 1) + will-change transform + + .inner + position absolute + top 0 + left 0 + width 100% + height 100% + color #3473a0 + border-radius 22px + transform translateX(100%) + transition transform 0.5s cubic-bezier(0.75, 0, 0.25, 1) + will-change transform + + &:hover + .hover + transform translateX(0%) + + .inner + transform translateX(0%) + + .scroll-button + display block + position absolute + bottom 50px + left calc(50% - 20px) + width 40px + height 40px + + .mouse + display block + position absolute + top 7px + left calc(50% - 9px) + width 17px + height 26px + border-radius 9px + border 1px solid #fff + + .wheel + display block + position absolute + top 2px + left calc(50% - 1px) + width 1px + height 4px + background #ffffff + animation scroll-mouse-wheel 1.5s linear infinite + will-change transform + + @keyframes scroll-mouse-wheel + 0% + transform translateY(0px) scaleY(0) + 30% + transform translateY(5px) scaleY(1) + 60% + transform translateY(10px) scaleY(0) + 100% + transform translateY(10px) scaleY(0) diff --git a/site/src/style/main.styl b/site/src/style/main.styl index 5911b6e..9924622 100644 --- a/site/src/style/main.styl +++ b/site/src/style/main.styl @@ -1,7 +1,4 @@ @import 'reset.styl' @import 'fonts.styl' - -body - background: #eee - font-family Avenir - font-weight 500 \ No newline at end of file +@import 'base.styl' +@import 'header.styl' \ No newline at end of file diff --git a/site/static/svg/github.svg b/site/static/svg/github.svg new file mode 100644 index 0000000..2e9292a --- /dev/null +++ b/site/static/svg/github.svg @@ -0,0 +1,16 @@ + + + + GitHub-Mark-Light-120px-plus + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/svg/logo-avatar.svg b/site/static/svg/logo-avatar.svg new file mode 100644 index 0000000..8252c7e --- /dev/null +++ b/site/static/svg/logo-avatar.svg @@ -0,0 +1,126 @@ + + + + avatar + Created with Sketch. + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/svg/logo-keppler.svg b/site/static/svg/logo-keppler.svg new file mode 100644 index 0000000..0ca50c0 --- /dev/null +++ b/site/static/svg/logo-keppler.svg @@ -0,0 +1,24 @@ + + + + keppler + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/svg/logo-sky.svg b/site/static/svg/logo-sky.svg new file mode 100644 index 0000000..8e56256 --- /dev/null +++ b/site/static/svg/logo-sky.svg @@ -0,0 +1,58 @@ + + + + Group 75 + Created with Sketch. + + + + + + + + + \ No newline at end of file