FizzaPay Under construction

fizzapay-under-construction.markdown

FizzaPay Under construction

A Pen by Babak Naghiyev on CodePen.

License.

index.pug

div.hodor
  .header.d-flex.align-items-center
    .container
      img.img-fluid(width="40px" src="https://storage.cloud.google.com/fpay/logo.svg?authuser=1")

  .container.d-flex.flex-grow-1
    .row.d-flex.flex-grow-1
      .col-lg-6.d-flex.flex-grow-1.flex-column.justify-content-center
        #scene2
          h1.mt-3(data-depth=".3") Sizə ən yaxşı xidməti vermək üçün səhifədə iş gedir 
        #scene3
          p.mt-3(data-depth=".2") Tezliklə ödəmələrinizi evinizdən daha rahat edəcəksiniz. 
      .col-lg-6.d-flex.flex-grow-1.flex-column.justify-content-around#scene
        img.img-fluid(src="https://storage.cloud.google.com/fpay/fehleler.svg?authuser=1&organizationId=0" data-depth="0.7")
  img.bottom-path(src="https://storage.cloud.google.com/fpay/path.svg?authuser=1&organizationId=0")

script.js

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);

var scene2 = document.getElementById('scene2');
var parallaxInstance = new Parallax(scene2);

var scene3 = document.getElementById('scene3');
var parallaxInstance = new Parallax(scene3);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>

style.sass

$blue: #243971
.t
  background-color: tomato
body
  overflow-y: auto
.hodor
  overflow-y: hidden
body, .hodor
  position: relative
  overflow-x: hidden
  background-repeat: no-repeat
  font-family: Muli, Arial, 
  display: flex
  flex-direction: column
  width: 100%
  min-height: 100vh
.bottom-path
  position: absolute
  left: -5px
  right: -5px
  bottom: 0
  z-index: -1
  width: 100vw
  height: 60vh
  
.header
  height: 60px
  box-shadow: 0 3px 6px rgba(201,201,201, 1)
  
h1
  font-size: 45px
  font-weight: 600
  color: $blue
p
  font-size: 20px
  color: $blue
.full-center
  display: flex
  justify-content: center
  align-items: center

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />