cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              .calendar
  .cal-top
    .month JAN
    .days-box
      .day MON
      .day TUE
      .day WED
      .day THU
      .day FRI
      .day SAT
      .day SUN
      
  .cal-main
    .row
      .date 26
      .date 27
      .date 28
      .date 29
      .date 30
      .date 31
      .date.active 1
    .row
      .date.active 2
      .date.active 3
      .date.active 4
      .date.active 5
      .date.active 6
      .date.active 7
      .date.active 8
    .row
      .date.active 9
      .date.active 10
      .date.active 11
      .date.active 12
      .date.active 13
      .date.active 14
      .date.active 15
    .row
      .date.active 16
      .date.active 17
      .date.active 18
      .date.active 19
      .date.active 20
      .date.active 21
      .date.active 22
    .row
      .date.active 23 
      .date.active 24
      .date.active 25
      .date.active 26
      .date.active 27
      .date.active 28
      .date.active 29
    .row
      .date.active 30
      .date.active 31
      .date 1
      .date 2
      .date 3
      .date 4
      .date 5
      
  .cal-bottom

            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,700')

body
  background: #272545

.calendar
  position: relative
  margin-top: 10px
  height: 530px
  width: 400px
  margin-right: auto
  margin-left: auto
  overflow: hidden
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2)
  
  .cal-top
    position: absolute
    height: 230px
    width: 100%
    box-sizing: border-box
    background: linear-gradient(50deg, #370074, #740063, #DA0C7C)
    
    .month
      position: relative
      top: 30px
      margin-left: auto
      margin-right: auto
      height: 140px
      width: 140px
      box-sizing: border-box
      padding-top: 45px
      text-align: center
      font-size: 50px
      font-family: roboto
      font-weight: 100
      border-radius: 50%
      box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.3)
      color: #eee
      
    .days-box
      position: absolute
      bottom: 2px
      height: 14px
      width: 100%
      padding-top: 11px
      padding-bottom: 11px
      display: flex
      justify-content: space-around
      
      
      .day
        font-size: 12px
        font-family: roboto
        color: #ccc
        width: 50px
        text-align: center
        font-weight: 700
        
  .cal-main
    position: absolute
    top: 230px
    height: 300px
    width: 100%
    background: peachpuff
    display: flex
    flex-direction: column
    background: #444
    box-sizing: border-box
    padding-top: 10px
    
    .row
      width: 100%
      display: flex
      justify-content: space-around
      
      .date
        //background: red
        width: 50px
        text-align: center
        font-size: 14px
        padding-top: 15px
        padding-bottom: 15px
        font-family: roboto
        font-weight: 300
        color: #666
        border-radius: 50%
        
      .active
        color: #fff
        transition: all 0.5s ease-out
        
        &:hover
          background: rgba(255, 255, 255, 0.1)
        cursor: pointer
        
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console