code-example-sass

_animations.sass

@keyframes star
  0%
    opacity: 0
  50%
    opacity: 1
  100%
    opacity: 0

@keyframes star-glow
  0%
    opacity: 0.5
  50%
    opacity: 1
  100%
    opacity: 0.5

@keyframes pulse
  0%
    transform: scale(0)
    opacity: 1
  0%
    transform: scale(1)
    opacity: 0
  0%
    transform: scale(0)
    opacity: 1

@keyframes space-rotate
  0%
    transform: rotate3d(0, 0, 1, 0deg)
  50%
    transform: rotate3d(0, 0, 1, 180deg)
  100%
    transform: rotate3d(0, 0, 1, 360deg)

@keyframes bg-rotate
  0%
    transform: rotate3d(0, 0, 1, 0deg)
    transform-origin: 50% 50%
  50%
    transform: rotate3d(0, 0, 1, 180deg)
    transform-origin: 45% 55%
  100%
    transform: rotate3d(0, 0, 1, 360deg)
    transform-origin: 50% 50%

@keyframes meteor
  0%
    transform: translate3d(-1000px, -1000px, 0)
    opacity: 0.5
  100%
    transform: translate3d(1000px, 1000px, 0)
    opacity: 1

_banner.sass

$inf-brand-blue: #1897d4
$inf-brand-yellow: #fedd32
$inf-banner-background: #17193f

.inf-banner-container
  background:
    color: $inf-banner-background
    //image: linear-gradient(180deg, darken($inf-brand-blue,10%) 0%, darken($inf-brand-blue, 20%) 20%, $inf-banner-background 50%)
    image: linear-gradient(0deg, darken($inf-brand-blue,10%) 0%, $inf-banner-background 100%)

.inf-banner-block
  position: relative
  height: 500px
  height: 80vh

.inf-banner-content
  position: absolute
  width: 100%
  height: 100%
  z-index: 12
  color: #fff
  text-align: center
  padding-top: 60px
  -webkit-font-smoothing: antialiased

.inf-banner-title
  font:
    size: 42px
    weight: 600

.inf-banner-subtitle
  font:
    size: 30px
    weight: 600
  margin-bottom: 45px

.inf-banner-btn
  @extend .btn
  +button-variant(#333, $inf-brand-yellow, $inf-brand-yellow)
  padding: 15px 30px
  font:
    size: 19px
    weight: 600
  border-radius: 30px
  transform: translate3d(0, 0, 0)
  box-shadow: 0 10px 25px rgba(#000, 0)
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.5s ease, color 0.2s ease
  transition-delay: 0, 1s, 0, 0
  &:hover
    color: #000
    transform: translate3d(0, -5px, 0)
    background-color: adjust-hue($inf-brand-yellow, -10%)
    box-shadow: 0 10px 35px rgba(#000, 0.3)

.inf-banner
  position: absolute
  width: 100%
  height: 100%
  padding: 0
  margin: 0
  z-index: 9
  text-align: center
  overflow: hidden
  #banner-content
    //height: 500px
    //height: 80vh
    height: 100%
    max-height: 100%
    display: inline

  [id*="background-layer"]
    display: none
  [id*="sun"]
    animation: space-rotate 100s infinite cubic-bezier(.41,.42,.69,.58) // infinite ease // cubic-bezier(.07,.48,.88,.33)
    transform-origin: 30% 70%
  [id*="planet"]
    animation: space-rotate 240s infinite cubic-bezier(.48,.36,.52,.66) // cubic-bezier(.41,.42,.69,.58) // infinite ease // cubic-bezier(.07,.48,.88,.33)
    transform-origin: 50% 50%
  [id*="objects-layer"]
    animation: bg-rotate 120s infinite cubic-bezier(.5,.3,.57,.78)
  [id*="meteor"]
    //transform: translate3d(500px, 500px, 0)
    animation: meteor 2s infinite ease-out

  $meteor-count: 10
  @while $meteor-count > 0
    [id*="meteor_#{$meteor-count}"]
      animation-delay: #{20*$meteor-count}s
    $meteor-count: $meteor-count - 1

  [id*="star-"]
    transform: translate3d(0,0,0)
    animation: star 2s infinite

  $star-count: 20
  @while $star-count > 0
    [id*="star"].st#{$star-count}
      animation-delay: #{3*$star-count}s
    $star-count: $star-count - 1

styles.sass

@import settings/colors
@import settings/mixins
@import settings/fonts

@import node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables
@import node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins

@import node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize
@import node_modules/bootstrap-sass/assets/stylesheets/bootstrap/print
@import node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding
@import node_modules/bootstrap-sass/assets/stylesheets/bootstrap/type
@import node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid
@import node_modules/bootstrap-sass/assets/stylesheets/bootstrap/buttons

@import settings/typography

@import modules/layout
@import modules/content-block

@import modules/banner
@import modules/animations