diff --git a/scss/partials/_hero.scss b/scss/partials/_hero.scss index 5d14f1f..990097f 100644 --- a/scss/partials/_hero.scss +++ b/scss/partials/_hero.scss @@ -1,108 +1,799 @@ -/*-------------------------------------------------------------- - # Hero Section - --------------------------------------------------------------*/ - #hero { - width: 100%; - min-height: 100vh; - background: url("/assets/img/background.jpg") top center; - background-size: cover; - box-shadow: inset 0 0 0 2000px rgba($color: #272727, $alpha: 0.25); - position: relative; -} - -#hero:before { - content: ""; - background: rgba(0, 0, 0, 0.6); +.hero { + background: url("/assets/img/background.jpg"); + background-repeat: no-repeat; + background-position: center; + background-attachment: fixed; + background-size: cover; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + .arrow { + transform: scale(0.6); position: absolute; - bottom: 0; - top: 0; - left: 0; - right: 0; + bottom: 5%; + left: 50%; + &:hover { + transform: scale(0.6) translateY(-10px); + transition: transform 0.2s ease-in-out; + } + } + .wave { + width: 80vw; + display: flex; + justify-content: center; + align-items: center; + @media (max-width: 576px) { + width: 90vw; + } + } } -#hero .container { - position: relative; - padding-top: 74px; - text-align: center; +@keyframes wave { + 0% { + clip-path: polygon( + 100% 100%, + 0% 100%, + 0% 36.67%, + 2% 36.57%, + 4% 36.27%, + 6% 35.78%, + 8% 35.13%, + 10% 34.33%, + 12% 33.41%, + 14% 32.41%, + 16% 31.36%, + 18% 30.29%, + 20% 29.25%, + 22% 28.27%, + 24% 27.39%, + 26% 26.63%, + 28% 26.03%, + 30% 25.61%, + 32% 25.38%, + 34% 25.34%, + 36% 25.51%, + 38% 25.87%, + 40% 26.42%, + 42% 27.12%, + 44% 27.96%, + 46% 28.91%, + 48% 29.94%, + 50% 31%, + 52% 32.06%, + 54% 33.09%, + 56% 34.04%, + 58% 34.88%, + 60% 35.58%, + 62% 36.13%, + 64% 36.49%, + 66% 36.66%, + 68% 36.62%, + 70% 36.39%, + 72% 35.97%, + 74% 35.37%, + 76% 34.61%, + 78% 33.73%, + 80% 32.75%, + 82% 31.71%, + 84% 30.64%, + 86% 29.59%, + 88% 28.59%, + 90% 27.67%, + 92% 26.87%, + 94% 26.22%, + 96% 25.73%, + 98% 25.43%, + 100% 25.33% + ); + } + 20% { + clip-path: polygon( + 100% 100%, + 0% 100%, + 0% 32.75%, + 2% 31.71%, + 4% 30.64%, + 6% 29.59%, + 8% 28.59%, + 10% 27.67%, + 12% 26.87%, + 14% 26.22%, + 16% 25.73%, + 18% 25.43%, + 20% 25.33%, + 22% 25.43%, + 24% 25.73%, + 26% 26.22%, + 28% 26.87%, + 30% 27.67%, + 32% 28.59%, + 34% 29.59%, + 36% 30.64%, + 38% 31.71%, + 40% 32.75%, + 42% 33.73%, + 44% 34.61%, + 46% 35.37%, + 48% 35.97%, + 50% 36.39%, + 52% 36.62%, + 54% 36.66%, + 56% 36.49%, + 58% 36.13%, + 60% 35.58%, + 62% 34.88%, + 64% 34.04%, + 66% 33.09%, + 68% 32.06%, + 70% 31%, + 72% 29.94%, + 74% 28.91%, + 76% 27.96%, + 78% 27.12%, + 80% 26.42%, + 82% 25.87%, + 84% 25.51%, + 86% 25.34%, + 88% 25.38%, + 90% 25.61%, + 92% 26.03%, + 94% 26.63%, + 96% 27.39%, + 98% 28.27%, + 100% 29.25% + ); + } + 40% { + clip-path: polygon( + 100% 100%, + 0% 100%, + 0% 26.42%, + 2% 25.87%, + 4% 25.51%, + 6% 25.34%, + 8% 25.38%, + 10% 25.61%, + 12% 26.03%, + 14% 26.63%, + 16% 27.39%, + 18% 28.27%, + 20% 29.25%, + 22% 30.29%, + 24% 31.36%, + 26% 32.41%, + 28% 33.41%, + 30% 34.33%, + 32% 35.13%, + 34% 35.78%, + 36% 36.27%, + 38% 36.57%, + 40% 36.67%, + 42% 36.57%, + 44% 36.27%, + 46% 35.78%, + 48% 35.13%, + 50% 34.33%, + 52% 33.41%, + 54% 32.41%, + 56% 31.36%, + 58% 30.29%, + 60% 29.25%, + 62% 28.27%, + 64% 27.39%, + 66% 26.63%, + 68% 26.03%, + 70% 25.61%, + 72% 25.38%, + 74% 25.34%, + 76% 25.51%, + 78% 25.87%, + 80% 26.42%, + 82% 27.12%, + 84% 27.96%, + 86% 28.91%, + 88% 29.94%, + 90% 31%, + 92% 32.06%, + 94% 33.09%, + 96% 34.04%, + 98% 34.88%, + 100% 35.58% + ); + } + 50% { + clip-path: polygon( + 100% 100%, + 0% 100%, + 0% 25.33%, + 2% 25.43%, + 4% 25.73%, + 6% 26.22%, + 8% 26.87%, + 10% 27.67%, + 12% 28.59%, + 14% 29.59%, + 16% 30.64%, + 18% 31.71%, + 20% 32.75%, + 22% 33.73%, + 24% 34.61%, + 26% 35.37%, + 28% 35.97%, + 30% 36.39%, + 32% 36.62%, + 34% 36.66%, + 36% 36.49%, + 38% 36.13%, + 40% 35.58%, + 42% 34.88%, + 44% 34.04%, + 46% 33.09%, + 48% 32.06%, + 50% 31%, + 52% 29.94%, + 54% 28.91%, + 56% 27.96%, + 58% 27.12%, + 60% 26.42%, + 62% 25.87%, + 64% 25.51%, + 66% 25.34%, + 68% 25.38%, + 70% 25.61%, + 72% 26.03%, + 74% 26.63%, + 76% 27.39%, + 78% 28.27%, + 80% 29.25%, + 82% 30.29%, + 84% 31.36%, + 86% 32.41%, + 88% 33.41%, + 90% 34.33%, + 92% 35.13%, + 94% 35.78%, + 96% 36.27%, + 98% 36.57%, + 100% 36.67% + ); + } + 60% { + clip-path: polygon( + 100% 100%, + 0% 100%, + 0% 26.42%, + 2% 27.12%, + 4% 27.96%, + 6% 28.91%, + 8% 29.94%, + 10% 31%, + 12% 32.06%, + 14% 33.09%, + 16% 34.04%, + 18% 34.88%, + 20% 35.58%, + 22% 36.13%, + 24% 36.49%, + 26% 36.66%, + 28% 36.62%, + 30% 36.39%, + 32% 35.97%, + 34% 35.37%, + 36% 34.61%, + 38% 33.73%, + 40% 32.75%, + 42% 31.71%, + 44% 30.64%, + 46% 29.59%, + 48% 28.59%, + 50% 27.67%, + 52% 26.87%, + 54% 26.22%, + 56% 25.73%, + 58% 25.43%, + 60% 25.33%, + 62% 25.43%, + 64% 25.73%, + 66% 26.22%, + 68% 26.87%, + 70% 27.67%, + 72% 28.59%, + 74% 29.59%, + 76% 30.64%, + 78% 31.71%, + 80% 32.75%, + 82% 33.73%, + 84% 34.61%, + 86% 35.37%, + 88% 35.97%, + 90% 36.39%, + 92% 36.62%, + 94% 36.66%, + 96% 36.49%, + 98% 36.13%, + 100% 35.58% + ); + } + 80% { + clip-path: polygon( + 100% 100%, + 0% 100%, + 0% 32.75%, + 2% 33.73%, + 4% 34.61%, + 6% 35.37%, + 8% 35.97%, + 10% 36.39%, + 12% 36.62%, + 14% 36.66%, + 16% 36.49%, + 18% 36.13%, + 20% 35.58%, + 22% 34.88%, + 24% 34.04%, + 26% 33.09%, + 28% 32.06%, + 30% 31%, + 32% 29.94%, + 34% 28.91%, + 36% 27.96%, + 38% 27.12%, + 40% 26.42%, + 42% 25.87%, + 44% 25.51%, + 46% 25.34%, + 48% 25.38%, + 50% 25.61%, + 52% 26.03%, + 54% 26.63%, + 56% 27.39%, + 58% 28.27%, + 60% 29.25%, + 62% 30.29%, + 64% 31.36%, + 66% 32.41%, + 68% 33.41%, + 70% 34.33%, + 72% 35.13%, + 74% 35.78%, + 76% 36.27%, + 78% 36.57%, + 80% 36.67%, + 82% 36.57%, + 84% 36.27%, + 86% 35.78%, + 88% 35.13%, + 90% 34.33%, + 92% 33.41%, + 94% 32.41%, + 96% 31.36%, + 98% 30.29%, + 100% 29.25% + ); + } + 100% { + clip-path: polygon( + 100% 100%, + 0% 100%, + 0% 36.67%, + 2% 36.57%, + 4% 36.27%, + 6% 35.78%, + 8% 35.13%, + 10% 34.33%, + 12% 33.41%, + 14% 32.41%, + 16% 31.36%, + 18% 30.29%, + 20% 29.25%, + 22% 28.27%, + 24% 27.39%, + 26% 26.63%, + 28% 26.03%, + 30% 25.61%, + 32% 25.38%, + 34% 25.34%, + 36% 25.51%, + 38% 25.87%, + 40% 26.42%, + 42% 27.12%, + 44% 27.96%, + 46% 28.91%, + 48% 29.94%, + 50% 31%, + 52% 32.06%, + 54% 33.09%, + 56% 34.04%, + 58% 34.88%, + 60% 35.58%, + 62% 36.13%, + 64% 36.49%, + 66% 36.66%, + 68% 36.62%, + 70% 36.39%, + 72% 35.97%, + 74% 35.37%, + 76% 34.61%, + 78% 33.73%, + 80% 32.75%, + 82% 31.71%, + 84% 30.64%, + 86% 29.59%, + 88% 28.59%, + 90% 27.67%, + 92% 26.87%, + 94% 26.22%, + 96% 25.73%, + 98% 25.43%, + 100% 25.33% + ); + } } -#hero h1 { - margin: 0; - font-size: 56px; - font-weight: 700; - line-height: 64px; - color: $white; - font-family: $font-family_1; +/*************************************************** + * Generated by SVG Artista on 3/2/2023, 12:13:32 AM + * MIT license (https://opensource.org/licenses/MIT) + * W. https://svgartista.net + **************************************************/ + +@-webkit-keyframes animate-svg-stroke-1 { + 0% { + stroke-dashoffset: 678px; + stroke-dasharray: 678px; + } + + 100% { + stroke-dashoffset: 0; + stroke-dasharray: 678px; + } } -#hero h1 span { - color: $color1; +@keyframes animate-svg-stroke-1 { + 0% { + stroke-dashoffset: 678px; + stroke-dasharray: 678px; + } + + 100% { + stroke-dashoffset: 0; + stroke-dasharray: 678px; + } } -#hero h2 { - color: rgba(255, 255, 255, 0.9); - margin: 10px 0 0 0; - font-size: 1.2rem; - line-height: 1.5rem; - font-weight: 400; +@-webkit-keyframes animate-svg-fill-1 { + 0% { + fill: transparent; + } + + 100% { + fill: rgb(252, 134, 43); + } } -#hero .icon-box { - padding: 30px 20px; - transition: ease-in-out 0.3s; - border: 1px solid rgba(255, 255, 255, 0.3); - height: 100%; - text-align: center; +@keyframes animate-svg-fill-1 { + 0% { + fill: transparent; + } + + 100% { + fill: rgb(252, 134, 43); + } } -#hero .icon-box i { - font-size: 32px; - line-height: 1; - color: $color1; +.svg-elem-1 { + -webkit-animation: animate-svg-stroke-1 2.5s ease-in 0s both, + animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both; + animation: animate-svg-stroke-1 2.5s ease-in 0s both, + animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both; } -#hero .icon-box h3 { - font-weight: 700; - margin: 10px 0 0 0; - padding: 0; - line-height: 1; - font-size: 20px; - line-height: 26px; +@-webkit-keyframes animate-svg-stroke-2 { + 0% { + stroke-dashoffset: 266px; + stroke-dasharray: 266px; + } + + 100% { + stroke-dashoffset: 0; + stroke-dasharray: 266px; + } } -#hero .icon-box h3 a { - color: $white; - transition: ease-in-out 0.3s; +@keyframes animate-svg-stroke-2 { + 0% { + stroke-dashoffset: 266px; + stroke-dasharray: 266px; + } + + 100% { + stroke-dashoffset: 0; + stroke-dasharray: 266px; + } } -#hero .icon-box h3 a:hover { - color: $color1; +@-webkit-keyframes animate-svg-fill-2 { + 0% { + fill: transparent; + } + + 100% { + fill: rgb(255, 255, 255); + } } -#hero .icon-box:hover { - border-color: $color1; +@keyframes animate-svg-fill-2 { + 0% { + fill: transparent; + } + + 100% { + fill: rgb(255, 255, 255); + } } -@media (min-width: 1024px) { - #hero { - background-attachment: fixed; - } +.svg-elem-2 { + -webkit-animation: animate-svg-stroke-2 2.5s ease-in 0.12s both, + animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both; + animation: animate-svg-stroke-2 2.5s ease-in 0.12s both, + animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both; } -@media (max-width: 768px) { - #hero { - min-height: 80vh; - } +@-webkit-keyframes animate-svg-stroke-3 { + 0% { + stroke-dashoffset: 34px; + stroke-dasharray: 34px; + } - #hero h1 { - font-size: 2.3rem; - line-height: 36px; - } + 100% { + stroke-dashoffset: 0; + stroke-dasharray: 34px; + } +} - #hero h2 { - width: 90%; - margin-top: 1rem; - font-size: 1rem; - line-height: 1.5rem; - } -} \ No newline at end of file +@keyframes animate-svg-stroke-3 { + 0% { + stroke-dashoffset: 34px; + stroke-dasharray: 34px; + } + + 100% { + stroke-dashoffset: 0; + stroke-dasharray: 34px; + } +} + +@-webkit-keyframes animate-svg-fill-3 { + 0% { + fill: transparent; + } + + 100% { + fill: rgb(255, 255, 255); + } +} + +@keyframes animate-svg-fill-3 { + 0% { + fill: transparent; + } + + 100% { + fill: rgb(255, 255, 255); + } +} + +.svg-elem-3 { + -webkit-animation: animate-svg-stroke-3 2.5s ease-in 0.24s both, + animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both; + animation: animate-svg-stroke-3 2.5s ease-in 0.24s both, + animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both; +} + +@-webkit-keyframes animate-svg-stroke-4 { + 0% { + stroke-dashoffset: 34px; + stroke-dasharray: 34px; + } + + 100% { + stroke-dashoffset: 0; + stroke-dasharray: 34px; + } +} + +@keyframes animate-svg-stroke-4 { + 0% { + stroke-dashoffset: 34px; + stroke-dasharray: 34px; + } + + 100% { + stroke-dashoffset: 0; + stroke-dasharray: 34px; + } +} + +@-webkit-keyframes animate-svg-fill-4 { + 0% { + fill: transparent; + } + + 100% { + fill: rgb(252, 134, 43); + } +} + +@keyframes animate-svg-fill-4 { + 0% { + fill: transparent; + } + + 100% { + fill: rgb(252, 134, 43); + } +} + +.svg-elem-4 { + -webkit-animation: animate-svg-stroke-4 2.5s ease-in 0.36s both, + animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both; + animation: animate-svg-stroke-4 2.5s ease-in 0.36s both, + animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both; +} + +@-webkit-keyframes animate-svg-stroke-5 { + 0% { + stroke-dashoffset: 34px; + stroke-dasharray: 34px; + } + + 100% { + stroke-dashoffset: 0; + stroke-dasharray: 34px; + } +} + +@keyframes animate-svg-stroke-5 { + 0% { + stroke-dashoffset: 34px; + stroke-dasharray: 34px; + } + + 100% { + stroke-dashoffset: 0; + stroke-dasharray: 34px; + } +} + +@-webkit-keyframes animate-svg-fill-5 { + 0% { + fill: transparent; + } + + 100% { + fill: rgb(255, 255, 255); + } +} + +@keyframes animate-svg-fill-5 { + 0% { + fill: transparent; + } + + 100% { + fill: rgb(255, 255, 255); + } +} + +.svg-elem-5 { + -webkit-animation: animate-svg-stroke-5 2.5s ease-in 0.48s both, + animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) + 1.2000000000000002s both; + animation: animate-svg-stroke-5 2.5s ease-in 0.48s both, + animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) + 1.2000000000000002s both; +} + +@-webkit-keyframes animate-svg-stroke-6 { + 0% { + stroke-dashoffset: 2664.318359375px; + stroke-dasharray: 2664.318359375px; + } + + 100% { + stroke-dashoffset: 0; + stroke-dasharray: 2664.318359375px; + } +} + +@keyframes animate-svg-stroke-6 { + 0% { + stroke-dashoffset: 2664.318359375px; + stroke-dasharray: 2664.318359375px; + } + + 100% { + stroke-dashoffset: 0; + stroke-dasharray: 2664.318359375px; + } +} + +@-webkit-keyframes animate-svg-fill-6 { + 0% { + fill: transparent; + } + + 100% { + fill: rgb(255, 255, 255); + } +} + +@keyframes animate-svg-fill-6 { + 0% { + fill: transparent; + } + + 100% { + fill: rgb(255, 255, 255); + } +} + +.svg-elem-6 { + -webkit-animation: animate-svg-stroke-6 2.5s ease-in 0.6s both, + animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both; + animation: animate-svg-stroke-6 2.5s ease-in 0.6s both, + animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both; +} + +@-webkit-keyframes animate-svg-stroke-7 { + 0% { + stroke-dashoffset: 619.2614135742188px; + stroke-dasharray: 619.2614135742188px; + } + + 100% { + stroke-dashoffset: 0; + stroke-dasharray: 619.2614135742188px; + } +} + +@keyframes animate-svg-stroke-7 { + 0% { + stroke-dashoffset: 619.2614135742188px; + stroke-dasharray: 619.2614135742188px; + } + + 100% { + stroke-dashoffset: 0; + stroke-dasharray: 619.2614135742188px; + } +} + +@-webkit-keyframes animate-svg-fill-7 { + 0% { + fill: transparent; + } + + 100% { + fill: rgb(252, 134, 43); + } +} + +@keyframes animate-svg-fill-7 { + 0% { + fill: transparent; + } + + 100% { + fill: rgb(252, 134, 43); + } +} + +.svg-elem-7 { + -webkit-animation: animate-svg-stroke-7 2.5s ease-in 0.72s both, + animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) + 1.4000000000000001s both; + animation: animate-svg-stroke-7 2.5s ease-in 0.72s both, + animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) + 1.4000000000000001s both; +} diff --git a/scss/style.scss b/scss/style.scss index 160295c..78e5e7b 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -344,6 +344,7 @@ html { /*-------------------------------------------------------------- # Sections General --------------------------------------------------------------*/ + section { padding: 60px 0; overflow: hidden; diff --git a/views/partials/hero.hbs b/views/partials/hero.hbs index d0913bd..fc37e57 100644 --- a/views/partials/hero.hbs +++ b/views/partials/hero.hbs @@ -1,17 +1,59 @@ - - - - - - - Launchpad Kerala - {{!-- 2023 --}} - - - Powered by IEEE Kerala Section and GTech MuLearn, Sponsored by KKEM and Co-Sponsored by NIELIT - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + Powered by IEEE Kerala Section GTech MuLearn + Co Organized by Kerala Knowledge Economy Mission + + + + + + + + + + + + \ No newline at end of file
+ Powered by IEEE Kerala Section GTech MuLearn + Co Organized by Kerala Knowledge Economy Mission +