123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              div.app
  header
    div.app-background
      h1 
        | Идеальная служба доставки
        br 
        | для интернет-магазинов день в день!
    
    div.app-description
      span
        | Закажите пробную доставку 
        a(href="#") через форму на сайте
        |  или по телефону 
        a(href="tel:74952151169").tel +7 495 215-11-69
   
  h2 Почему Достависта?
  section.container-1
    div.border
      strong Клиент требует доставить срочно?
      div.
        Мы доставляем за 2-3 часа по Москве. Или когда будет удобно.
    
    div.border
      strong Заболел свой курьер?
      div
        | Все курьеры уже заняты и некому доставить новый заказ? В Достависте Вы всегда сможете заказать курьера
        | на замену. В течение 1-2 часов курьер будет у Вас. В любое время суток. Без бюроркатии и выматывающих звонков
        | диспетчеру. Просто заполните 
        a(href="#") форму заказа!
      
    div.border
      strong Заказов не так много, чтобы держать курьера на зарплате?
      div.
        Мы поможем сэкономить! Нам неважно сколько заказов вы делаете — раз в год или 1000 заказов — в месяц.
        Условия неизменны. Вы важны для нас независимо от количества заказов.
      
    div.border
      strong Хотите протестировать новую рыночную нишу без лишних затрат и бюрократии?
      div.
        Это проще, чем вы подумали! Просто покажите нам поставщиков, а наш курьер выкупит у них товар за свои
        собственные деньги и получит деньги&nbsp;с&nbsp;покупателя. Таким образом, вы просто создаете витрину и оформляете
        покупку, а мы делаем все остальное.
      
    div.border
      strong Хотите иметь конкурентное преимущество, предлагая доставку день в день?
      div.
        Кризис — возможность сделать рывок, пока Ваши конкуренты оглушены новыми вызовами рынка. А Вы уже
        сегодня доставляете заказы день в день. По нашей статистике клиент, получивший желанную покупку через пару
        часов в 6 раз чаще говорит об этом друзьям и знакомым.
      
  h2 Как мы работаем?
  section.container-2
      div.promo
        div.wrapper
          div.sprite-in-description-checkbox
        div.container-2-description.
          Заказ принимается через онлайн-форму заказа круглосуточно 24/7 или по телефону. Обычно
          курьер назначается и выезжает к вам в течение 10 минут после получения заявки.
      div.promo
        div.wrapper
          div.sprite-in-description-compass
        div.container-2-description.
          Вы можете в реальном времени видеть местонахождение курьера в своем личном кабинете. А также можете добавить
          или удалить адреса из заказа в процессе его выполнения.
      div.promo
        div.wrapper
          div.sprite-in-description-mail
        div.container-2-description.
          Получателям на каждом из адресов приходит смс с телефоном курьера, а Вам&nbsp;—&nbsp;смс о прохождении курьером каждого
          адреса.
      div.promo
        div.wrapper
          div.sprite-in-description-like
        div.container-2-description.
          После завершения заказа Вы можете оценить курьера.
        
            
          
!
            
              // Sprite list
spritePackUrl = url(https://i2.imgpile.com/i/3Jt9G.png)
promoImageUrl = url(https://i3.imgpile.com/i/3Jxza.png)
spriteArrowUrl = url(https://i1.imgpile.com/i/3JDa2.png)
// Color list
color-primary-0 = #fff
color-primary-1 = #323232
color-primary-2 = #f8f5ed
color-primary-3 = #ca2b7c

body
  font-family 'Roboto', sans-serif
  background color-primary-0

h1, h2 
  text-align center 

h1
  width 100%
  font-size 38px
  align-self center
  color color-primary-0
  text-shadow 3px 2px 2px color-primary-1

h2    
  color color-primary-1
  font-size 20px
  
a
  white-space nowrap
  color color-primary-3

span  
  color color-primary-1
  
strong
  font-weight bold
          
[class^="sprite-"]
  background spritePackUrl
  width = 84px
  width width
  height width
  
  &.sprite-in-description-checkbox 
    background-position 0 0
  &.sprite-in-description-mail 
    background-position 0 83px
  &.sprite-in-description-compass 
    background-position 0 270px
  &.sprite-in-description-like
    background-position 0 173px

    
// Mobile styles
@media only screen and (max-device-width: 768px), only screen and (max-width 768px)
  h1 
    padding 0 8px
    
  h2 
    margin 8px
    
  .app 
    position relative
    max-width 100%
    &-background
      display flex
      background promoImageUrl no-repeat
      background-color color-primary-0
      background-position center center
      background-size cover
    &-description
      text-align left
      background color-primary-2
      padding 1em
      a
        font-weight bold
        
  .container-1 
    margin auto
    padding 0 8px
    .border
      padding 8px
        
  .container-2 
    margin auto
    padding 0 8px
    .promo
      display flex
      width 100%
      justify-content center
      text-align left
      flex-direction column
      align-items center
      padding 8px 0
    &-description
      padding 8px
      width 100%
      

// Desktop styles        
@media only screen and (min-device-width: 768px) and (min-width: 768px)
  .app
    position relative
    margin 12px auto
    padding 0 0 32px 0
    max-width 1024px
    box-sizing border-box
  .app:before
    position absolute
    content ''
    left 0
    right 0
    top 0
    bottom 0
    border-radius 4px
    overflow hidden
    box-shadow 0 0 16px 0 color-primary-1
    pointer-events none
    
  header
    .app
      &-background
        display flex
        height 152px
        background promoImageUrl no-repeat
        background-color color-primary-1
        background-position center center
        background-size cover
      &-description
        text-align center
        background color-primary-2
        line-height 48px
        font-size 16px
        a
          font-weight 600
          &.tel
            text-decoration none
            color color-primary-1
       
  .wrapper
    position relative
    display flex  
    justify-content center
    min-width 100%    
    width 100%    

  .container-1 
    margin auto
    width 100%
    font-size 16px
    
    .border
      display flex
      border-bottom 1px solid lighten(color-primary-1, 75%)
      box-sizing border-box      
      padding 16px 0
      justify-content space-between
      margin 0 46px
      &:first-child
        border-top 1px solid lighten(color-primary-1, 75%)  
      strong
        width = 265px
        padding-right 16px
        min-width width
        max-width width
      div 
        padding-left 46px
        width 100%
        margin-right 42px

  .container-2 
    padding 0 48px
    margin auto
    display flex
    
    &-description
      padding 8px 16px

   .promo
     width 25%
     font-size 15px

   .promo:not(:last-child) 
     .wrapper:after
       position absolute
       content ''
       background-image spriteArrowUrl
       width 40px
       height 40px
       top 25%
       right -20px
       bottom 25%
            
          
!
            
              /**
 * @param {HTMLElement} app
 * @return {HTMLElement}
 */
function main(app) {
  if (!(app instanceof HTMLElement))
    throw new Error('Init exception')
  app.addEventListener('click', hideDom)
  app.addEventListener('touchend', hideDom)
  /**
   * @param {Object} event
   * @return {void}
   */
  function hideDom(event) {
    const target = event.target
    // Anchor should be clickable
    if (target.tagName === 'A') {
      target.remove()
      return 
    }
    const winSelection = window.getSelection()
    // Skip empty selection range
    if (!winSelection.rangeCount) 
      return
    
    const focusNode = winSelection.focusNode
    const regExp = /( |\s|^|)([0-9]|[a-z]|[а-я]|\?|,|!)/gi
    const startOffset = winSelection.getRangeAt(0).startOffset
    const newChildNodes = Array.from(target.childNodes).map(child => {
      if (child === focusNode) {
        const text = child.textContent
        if (!text.length) 
          return child
        
        let startIndex = startOffset
        let endIndex = startOffset
        while (true) {
          if (text[endIndex] && text[endIndex].match(regExp)) {
            ++endIndex
          } else {
            break
          }
        }
        while (true) {
          if (text[startIndex] && text[startIndex].match(regExp)) {
            --startIndex
          } else {
            break
          }
        }
        const tempText = `${text.substr(0, startIndex)}${text.substr(endIndex)}`
        return new Text(tempText)
      }
      return child
    })
    event.target.innerHTML = ''
    newChildNodes.forEach(node => event.target.appendChild(node))
    event.currentTarget.blur()
    event.preventDefault()
  }

  Array.from(document.querySelectorAll('a'), anchor => {
    anchor.target = '_blank'
    anchor.href = 'https://goo.gl/mbZou9'
  })  
  
  return app
}

main(document.querySelector('.app'))

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console