Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                //- https://dribbble.com/shots/7524247-Web-Hotels/attachments/334435?mode=media
.blurBg#app
  .wrapper
    .home
      h6 home
    .menu
      a(href="javascript: void(0)").fas.fa-bars
    .left
    .left2
      button(@click='minus').previous
        div ↼
      .page
        h3 {{num}}
        .bars
          .choosed(:style='changeBar')
          .bar()
          .bar()
          .bar()

    .info
      ul
        li
          a contact
        li
          a about us
    .content
      .title
        div
          h1 Hello
          p choosing an antiaging eye cream
      .block
        p Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
        button.enter ⇁
      .screen
        .pics(:style='changePic')
          .pic.pic1
          .pic.pic2
          .pic.pic3
      button(@click='add').next 
        div ⇁

    .rightTop
      a.fas.fa-search(href="#")
      a.fas.fa-lock(href="#")
    .right
    .rightBottom
      a.fab.fa-facebook-f(href="#")
      a.fab.fa-instagram(href="#")

  .screenBg
    .bgs(:style='changePic')
      .bg.bg1
      .bg.bg2
      .bg.bg3
      

              
            
!

CSS

              
                $color_purple = #705A86
$color_pink = #FFD8CC
$color_grey = #CFCED0

jpg1 = 'https://cdn.trendir.com/wp-content/uploads/old/house-design/assets_c/2015/06/futuristic-villa-in-miami-1-thumb-1200xauto-53811.jpg'
jpg2 = 'http://88designbox.com/upload/2019/05/10/cloud-of-luster-chapel-by-ktx-archilab-01.jpg'
jpg3 = 'https://assets.architecturaldesigns.com/plan_assets/80826/large/80826pm_1469718671_1479210748.jpg?1506332286'

size(w=100%,h=w)
  width w
  height h

flexCenter(j=center,a=center,d=row)
  flex-direction d
  display flex
  justify-content j
  align-items a
    
backgroundPic(pos=center,s=cover,r=no-repeat)
  background-position pos 
  background-size s
  background-repeat r
  
*
  transition 0.5s
  font-family 'Fjalla One', sans-serif
  margin 0
  padding 0
  box-sizing border-box
  
html,body
  size()
  flexCenter()

.blurBg  
  size()
  flexCenter()
  position absolute
  
.wrapper
  position absolute
  z-index 1
  background-color #fff
  size(94%)
  border-radius 16px
  overflow hidden
  box-shadow 2px 2px 4px rgba(0,0,0,0.5)
  display grid
  grid-template-columns repeat(12,1fr)
  grid-template-rows 1fr 3fr 7fr 1fr
  grid-template-areas 'h ll ll t t t t t t t rt rt'\
                      'm ll ll c c c c c c c r r'\
                      'l ll ll c c c c c c c r r'\
                      'l ll ll c c c c c c c rb rb'
  .home
    size()
    grid-area h
    flexCenter()
    text-transform capitalize
  .menu
    size()
    grid-area m
    background-color #FFEF03
    flexCenter(center,flex-start)
    a
      text-decoration none
      color #000
      font-size 30px
      margin-top 36px
  .left
    size()
    grid-area l
  .left2
    size()
    z-index 3
    grid-area ll
    border-left 1px solid #DDDDDD
    border-right 1px solid #DDDDDD
    position relative
      
    .previous
      size(50px)
      font-size 30px
      background-color #FFFFAF
      border none
      cursor pointer
      position absolute
      bottom 180px
      outline none
      div
        &:hover
          transition 1s
          transform rotateX(180deg)
    .page
      position absolute
      bottom 16px
      flexCenter(flex-start,center)
      size(160px,44px)
      h3
        size(40px)
        font-size 30px
      .bars
        size()
        flexCenter(flex-start,center)
        position relative
        .bar
          display inline-block
          size(30px,4px)
          background-color #DDDDDD
          margin 4px
        .choosed
          position absolute
          background-color #000
          margin-left 4px
          size(30px,4px)
      
  .info
    size()
    grid-area t
    flexCenter(flex-end)
  .info ul
    list-style none
    flexCenter()
    margin-right 16px
    li
      margin-right 28px
  .info ul li a
    text-transform capitalize
  .content
    size()
    grid-area c
    display grid
    grid-template-columns 4fr 8fr
    grid-template-rows auto
    position relative
    .title
      size()
      div
        size(100%,auto)
        flexCenter(flex-start,flex-end)
        position absolute
        top 200px
        left -12px
        z-index 2
        
        h1,p
          word-wrap nowrap
        h1
          line-height 90%
          text-transform uppercase
          font-size 900%
          word-wrap break-word
        p
          font-size 10px
          size(auto,auto)
          margin-left 16px
        
    .block
      size(80%,auto)
      border 1px solid #000
      z-index 2
      position absolute
      bottom 0
      padding 32px 40px
      background-color #000
      color #BEBB7C
      flexCenter()
      left 50%
      transform translate(-50%,0)
      p
        size(80%,auto)
        font-size 12px
        letter-spacing 2px
        line-height 20px
        margin-right 32px
      .enter
        font-size 30px
        background-color transparent
        border none
        color #96C0CE
    .screen
      size()
      overflow hidden
      position relative
      white-space normal
    .screen .pics
      size()
      white-space nowrap
      position relative
      flexCenter()
      
      .pic
        size()
        position absolute
        box-sizing border-box
      .pic1
        background url(jpg1)
        backgroundPic()
      .pic2
        background url(jpg2)
        left 100%
        backgroundPic()
      .pic3
        background url(jpg3)
        left 200%
        backgroundPic()

    .next
      size(50px)
      font-size 30px
      background-color #EEFF5A
      border none
      cursor pointer
      position absolute
      bottom 180px
      right 0
      outline none
      div
        &:hover
          transition 1s
          transform rotateX(180deg)
  .rightTop
    size()
    grid-area rt
    background-color #FE5875
    flexCenter()
    a
      text-decoration none
      margin 16px
      color #000
  .right
    size()
    grid-area r
  .rightBottom
    size()
    grid-area rb
    flexCenter()
    a
      text-decoration none
      margin 16px
      color #000

      
.screenBg
  size()
  overflow hidden
  position relative
  .bgs
    size()
    filter blur(16px)
    white-space: nowrap
    position absolute
    .bg
      size()
      display inline-block
      backgroundPic()
      white-space: normal
    .bg1
      background url(jpg1)
    .bg2
      background url(jpg2)
    .bg3
      background url(jpg3)
              
            
!

JS

              
                const data = {
  count: 1,
  step: 1,
  num: '01'
}

const vm = new Vue({
  el: '#app',
  data,
  computed: {
    changePic() {
      return {
        left: `${-(this.count-1)*100}%`
      }
    },
    changeBar() {
      return {
        left: `${(this.count-1)*38}px`
      }
    }
  },
  methods: {
    add() {   
      this.count += this.step
      if(this.count>3){
        this.count = 1
        this.num = '01'
      }
      this.num=(Array(2).join('0') + Math.abs(this.count)).slice(-2)
    },
    minus() {
      this.count -= this.step
      if(this.count<=0){
        this.count = 3
        this.num = '03'
      } 
      this.num=(Array(2).join('0') + Math.abs(this.count)).slice(-2)
    }
  }
})


              
            
!
999px

Console