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

              
                .container
  .iphone
    .buttons
      .silent
      .sleep
      .vol-up
      .vol-down
    .top
      .black-bar
      .iphone-top
    .components
      .speaker
      .camera
        .shine-left
        .shine-right
    .top-bar
    .bottom-bar
    .screen
      video(loop autoplay muted)
        source(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1116884/iphone-vid.mp4' type="video/mp4")
      .service
        - for(var i = 0; i < 4; i++)
          .bar
      .battery
        .nub
        .energy
      .lock-carrier AT&T
      .lock-lock
      .info
        .lock-time 
        .lock-date 
      .lock-bar
    
// goo filter for notch shape
svg(viewbox="0 0 0 0" height="0" width="0")
  filter(id="goo" color-interpolation-filters="sRGB")
    feGaussianBlur(in="SourceGraphic" stdDeviation="4" result="blur")
    feColorMatrix(in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 8 -1" result="cm")
    feBlend(in="sourceGraphic" in2="cm" mode="multiply")
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Heebo:100')

// mixins
// Flexbox display
=flexbox() 
  display:  -webkit-box
  display:  -moz-box
  display:  -ms-flexbox
  display:  -webkit-flex
  display:  flex
  
// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
=flex-direction($direction)
  -webkit-flex-direction:   $direction
  -moz-flex-direction:      $direction
  -ms-flex-direction:       $direction
  flex-direction:           $direction
  
// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around 
=justify-content($justify)
  -webkit-justify-content:  $justify
  -moz-justify-content:     $justify
  -ms-justify-content:      $justify
  justify-content:          $justify
  -ms-flex-pack:            $justify
  
// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch 
=align-items($align) 
  -webkit-align-items:  $align
  -moz-align-items:     $align
  -ms-align-items:      $align
  align-items:          $align

// generic transform
=transform($transforms)
  -moz-transform:           $transforms
  -o-transform:             $transforms
  -ms-transform:            $transforms
  -webkit-transform:        $transforms
  transform:                $transforms
// scale
=scale($scale)
  +transform(scale($scale))
    
// border-radius: allows for 1 - 4 arguments
=border-radius($tl, $tr: $tl, $br: $tl, $bl: $tl)
  -moz-border-radius:       $tl $tr $br $bl
  -webkit-border-radius:    $tl $tr $br $bl
  border-radius:            $tl $tr $br $bl

=filter($value) 
  -webkit-filter:   $value
  -moz-filter:      $value
  -o-filter:        $value
  filter:           $value

  
//box shadow (allows for multiple box shadows)
=box-shadow($shadow...)
  -webkit-box-shadow:       $shadow
  -moz-box-shadow:          $shadow   
  box-shadow:               $shadow
 
//box sizing
=box-sizing($sizing)
  -webkit-box-sizing:   $sizing
  -moz-box-sizing:      $sizing
  box-sizing:           $sizing
  
// end mixins 

html
  +box-sizing(border-box)
  font-family: 'Heebo', sans-serif
  
html, body
  height: 100%

*,
*:after,
*:before
  +box-sizing(inherit)

body
  margin: 0
  background: #EAEAEA
  
.container
  position: absolute
  height: 100%
  width: 100%
  padding: 0.5rem
  +flexbox
  +justify-content(center)
  +align-items(center)
  
.iphone
  position: absolute
  height: 875px
  width: 423px
  padding: 0 15px
  +flexbox
  +justify-content(center)
  +align-items(center)
  background: #111
  border: 5px solid #3D3D3D
  +border-radius(50px)
  +box-shadow(inset 0 0 3px 0 rgba(0,0,0,0.2), 0 0 0 1px #999, 0 0 30px 0px rgba(0,0,0,0.7))
  +scale(0.6)
  .buttons
    .silent,
    .vol-up,
    .vol-down,
    .sleep
      background: #111
      position: absolute
      +border-radius(2px, 0, 0, 2px)
    .silent 
      height: 40px
      width: 3px
      top: 100px
      left: -8px
    .vol-up,
    .vol-down
      left: -8px
      height: 60px
      width: 4px
    .sleep
      left: auto
      right: -8px
      top: 180px
      height: 100px
      width: 4px
      +border-radius(0, 2px, 2px, 0)
    .vol-up
      top: 170px
    .vol-down
      top: 250px
  .top
    position: absolute
    top: 4px
    width: 100%
    +flexbox
    +justify-content(center)
    z-index: 4
    +filter(url('#goo'))
    .black-bar
      position: absolute
      height: 1px
      width: 70%
      padding-top: 2px
      background: #111
    .iphone-top
      position: relative
      height: 40px
      width: 55%
      +flexbox
      +justify-content(center)
      +align-items(center)
      +border-radius(0, 0, 20px, 20px)
      background: #111
      z-index: 2
  .components
    position: absolute
    top: 20px
    padding-left: 12px
    +flexbox
    +justify-content(center)
    +align-items(center)
    .speaker
      height: 6px
      width: 70px
      margin: 0 30px
      +border-radius(6px)
      border-bottom: 1px solid #333
      background: #222
      z-index: 100
    .camera
      height: 15px
      width: 15px
      +border-radius(50%)
      border-bottom: 1px solid #444
      background: radial-gradient(black, #333)
      opacity: 0.5
      z-index: 4
      .shine-left
        position: absolute
        height: 10px
        width: 10px
        margin: 2px
        border-left: 4px solid dodgerblue
        border-right: transparent
        background: black
        +border-radius(50%)
        +filter(blur(1.8px))
        &:before
          content: ''
          position: absolute
          right: 0px
          height: 8px
          width: 8px
          border-right: 2px solid white
          +border-radius(4px)
  .top-bar, .bottom-bar
    position: absolute
    left: -5px
    height: 15px
    width: 423px
    border: 
      left: 5px solid #111
      right: 5px solid #111
  .top-bar
    top: 65px
  .bottom-bar
    bottom: 65px
  .screen
    position: absolute
    height: calc(100% - 12px)
    width: calc(100% - 12px)
    margin: 0 auto
    +flexbox
    +flex-direction(column)
    +justify-content(center)
    +align-items(center)
    border: 2px solid rgba(0,0,0,0.9)
    +border-radius(40px)
    overflow: hidden
    .info
      position: absolute
      top: 140px
      +flexbox
      +flex-direction(column)
      +justify-content(center)
      +align-items(center)
    .time
      position: absolute
      top: 8px
      left: 30px
      line-height: 1px
      color: white
      font-size: 1.2em
      font-weight: 200
    .lock-lock
      position: absolute
      top: 95px 
      height: 26px
      width: 34px
      background: white
      +border-radius(3px)
      &:before
        content: ''
        position: absolute
        top: -18px
        right: 4px
        height: 30px 
        width: 26px
        border: 4px solid white
        +border-radius(26px)
    .lock-carrier, 
    .lock-time, 
    .lock-date
      color: white
    .lock-time
      margin: 2rem 0 1.6rem 0
      line-height: 3rem
    .lock-carrier
      position: absolute
      top: 11px
      left: 42px
      font-weight: 200
      font-size: 0.9em
    .lock-time
      font-size: 6em
      font-weight: 100
      color: white
    .lock-date
      font-weight: 100
      font-size: 1.5em
    .lock-swipe,
    .lock-bar,
    .service
      position: absolute
      font-family: "Helvetica Neue", sans-serif
    .lock-swipe
      bottom: 25px
      font-size: 1.1em
      font-weight: 100
      color: white
    .lock-bar
      bottom: 10px
      height: 4px
      width: 45%
      +border-radius(2px)
      background: white
    .service
      top: 12px
      left: 12px
      height: 14px
      width: 25px
      +flexbox
      +justify-content(space-between)
      +align-items(flex-end)
      .bar
        width: 4px
        +flexbox
        +border-radius(1px)
        background: white
        &:first-child
          height: 2px
        &:nth-child(2)
          height: 6px
        &:nth-child(3)
          height: 10px
        &:last-child
          height: 14px
    .battery
      position: absolute
      top: 11px
      right: 32px
      height: 16px
      width: 32px
      border: 1px solid white
      +border-radius(2px)
      +flexbox
      +align-items(center)
      .nub,
      .energy
        position: absolute
        background: white
      .nub
        top: 4px
        right: -4px
        height: 6px
        width: 2px
        +border-radius(0, 4px, 4px, 0)
      .energy
        left: 1px
        height: 12px
        width: 18px
        +border-radius(1px, 0, 0, 1px)

@media screen and (max-height: 500px)
  .iphone
    +scale(0.35)
              
            
!

JS

              
                // My educated guess as to what the iPhone X will look like
const select = s => document.querySelector(s);

const displayDate = select('.lock-date');
const displayTime = select('.lock-time');

function updateTime() {
  const date = new Date();
  
  const hour = date.getHours() < 13
    ? date.getHours() === 0 
      ? 12 
      : date.getHours()
    : date.getHours() - 12
  
  const minutes = date.getMinutes() < 10 
    ? `0${date.getMinutes()}`
    : date.getMinutes()
  
  const formattedDate = date.toLocaleString('en-US', {
    weekday: 'long',
    month: 'long',
    day: 'numeric' 
  })
  
  displayTime.innerText = `${hour}:${minutes}`;
  displayDate.innerText = formattedDate;
  
  requestAnimationFrame(updateTime);
}

updateTime();

              
            
!
999px

Console