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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="w-container container-content">
      <div class="v-container">
<button class="v-btn">Add Event</button>
        <nav class="v-menu">
          <a class="v-menu_logo"></a>

 <a class="v-menu_link active">

        <svg width="16" height="17" viewBox="0 0 32 34" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="1.5" y="5.5" width="29" height="27" rx="1.5" stroke="white" stroke-width="3"/>
        <rect x="2" y="6" width="28" height="6" fill="white"/>
        <rect x="4" width="4" height="6" rx="2" fill="white"/>
        <rect x="24" width="4" height="6" rx="2" fill="white"/>
        </svg>

        </a>
        <a class="v-menu_link">

<svg width="16" height="16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="7" width="25" height="4.12903" rx="2.06452" fill="white"/>
<rect width="4" height="4.12903" rx="2" fill="white"/>
<rect x="7" y="27.871" width="25" height="4.12903" rx="2.06452" fill="white"/>
<rect y="27.871" width="4" height="4.12903" rx="2" fill="white"/>
<rect x="7" y="18.5806" width="25" height="4.12903" rx="2.06452" fill="white"/>
<rect y="18.5806" width="4" height="4.12903" rx="2" fill="white"/>
<rect x="7" y="9.29034" width="25" height="4.12903" rx="2.06452" fill="white"/>
<rect y="9.29034" width="4" height="4.12903" rx="2" fill="white"/>
</svg>


        </a>
             <a class="v-menu_link">

<svg width="16" height="16" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.3782 13.7126L4.14035 21.7878C2.96599 22.939 2.85287 24.7867 3.88395 25.9758L6.31493 28.7793C7.37867 30.0061 9.26039 30.0755 10.514 28.9341L18.0648 22.0594" stroke="white" stroke-width="3"/>
<path d="M21.3752 18.4634L29.4903 10.2301C30.6483 9.05524 30.7337 7.20179 29.6838 6.03144L27.2128 3.27711C26.132 2.07238 24.2537 2.03928 23.0191 3.2032L15.5663 10.2295" stroke="white" stroke-width="3"/>
<line y1="-1.5" x2="15.6371" y2="-1.5" transform="matrix(0.727329 -0.686289 0.578625 0.815594 12.3781 22.6556)" stroke="white" stroke-width="3"/>
</svg>

               </a>

               <a class="v-menu_link">
<svg width="16" height="16" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 4.60656C2 2.73088 3.70194 1.31517 5.54627 1.65672L16.4537 3.67662C16.8148 3.74349 17.1852 3.74349 17.5463 3.67662L28.4537 1.65672C30.2981 1.31517 32 2.73088 32 4.60656V26.1895C32 27.6765 30.9106 28.9392 29.4396 29.1571L17.4396 30.9349C17.1481 30.9781 16.8519 30.9781 16.5604 30.9349L4.56035 29.1571C3.08936 28.9392 2 27.6765 2 26.1895V4.60656Z" stroke="white" stroke-width="3"/>
<line x1="16.9286" y1="4.33334" x2="16.9286" y2="31" stroke="white" stroke-width="2"/>
</svg>

                  </a>

               <a class="v-menu_link top">
<svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="2" cy="2" r="2" fill="white"/>
<circle cx="16" cy="2" r="2" fill="white"/>
<circle cx="9" cy="2" r="2" fill="white"/>
</svg>

                  </a>


                </nav>

        <div class="v-calendar">
          <div class="calendar">
            <h1 class="v-title">Note App</h1>
            <h3 class="calendar_title">
<svg width="18" height="18" viewBox="0 0 24 24">    <path d="M12,14.071L8.179,10.25c-0.414-0.414-1.086-0.414-1.5,0l0,0c-0.414,0.414-0.414,1.086,0,1.5l4.614,4.614 c0.391,0.391,1.024,0.391,1.414,0l4.614-4.614c0.414-0.414,0.414-1.086,0-1.5v0c-0.414-0.414-1.086-0.414-1.5,0L12,14.071z"></path></svg>September 2020</h3>
            <div>
              <div class="v-list v-list_info active">
                <span>Mon</span>
                <span>Tue</span>
                <span>Wed</span>
                <span>Thu</span>
                <span>Fri</span>
                <span>Sat</span>
                <span>Sun</span>
              </div>
            </div>
            <div>
              <div class="v-list">
                <a>
                  <span class="v-day">31</span>
                </a>
                <a>
                  <span>1</span>
                </a>
                <a>
                  <span>2</span>
                </a>
                <a>
                  <span>3</span>
                </a>
                <a>
                  <span>4</span>
                </a>
                <a>
                  <span>5</span>
                </a>
                <a>
                  <span>6</span>
                </a>
              </div>
              <div class="v-list">
                <a>
                  <span>7</span>
                </a>
                <a>
                  <span class="v-day-current">8</span>
                </a>
                <a>
                  <span>9</span>
                </a>
                <a>
                  <span>10</span>
                </a>
                <a>
                  <span>11</span>
                </a>
                <a>
                  <span>12</span>
                </a>
                <a>
                  <span>13</span>
                </a>
              </div>
              <div class="v-list active">
                <a href="#1">
                  <span>14
                    <span class="dots">
                      <span class="dot color-orange"></span>
                      <span class="dot color-blue"></span>
                    </span>
                  </span>
                </a>
                <a href="#2">
                  <span>15</span>
                </a>
                <a href="#3">
                  <span>16
                    <span class="dots">
                      <span class="dot color-blue"></span>
                    </span>
                  </span>
                </a>
                <a href="#4">
                  <span>17
                    <span class="dots">
                      <span class="dot color-blue"></span>
                      <span class="dot color-pink"></span>
                    </span>
                  </span>
                </a>
                <a href="#5">
                  <span>18</span>
                </a>
                <a href="#6">
                  <span>19</span>
                </a>
                <a href="#7">
                  <span>20
                    <span class="dots">
                      <span class="dot color-orange"></span>
                      <span class="dot color-blue"></span>
                      <span class="dot color-green"></span>
                    </span>
                  </span>
                </a>
              </div>
              <div class="v-list">
                <a>
                  <span>21</span>
                </a>
                <a>
                  <span>22</span>
                </a>
                <a>
                  <span>23</span>
                </a>
                <a>
                  <span>24</span>
                </a>
                <a>
                  <span>25</span>
                </a>
                <a>
                  <span>26</span>
                </a>
                <a>
                  <span>27</span>
                </a>
              </div>
              <div class="v-list">
                <a>
                  <span>28</span>
                </a>
                <a>
                  <span>29</span>
                </a>
                <a>
                  <span>30</span>
                </a>
                <a>
                  <span class="v-day">1</span>
                </a>
                <a>
                  <span class="v-day">2</span>
                </a>
                <a>
                  <span class="v-day">3</span>
                </a>
                <a>
                  <span class="v-day">4</span>
                </a>
              </div>
            </div>
          </div>
        </div>

        <div class="v-info">
          <section id="1" class="v-section">
            <p class="v-section_item">
              <span class="v-section_line color-orange"></span>
              <span class="v-section_time">9:00 pm</span>
              Complete birthday party preparations: buy baloons and chocolate.

            </p>
            <p class="v-section_item">
              <span class="v-section_line color-orange"></span>
              <span class="v-section_time">12:45 pm</span>
              Watch series.
            </p>
            <p class="v-section_item">
              <span class="v-section_line color-blue"></span>
              <span class="v-section_time">15:00 pm</span>
              Video calling with Tom.
            </p>
            <p class="v-section_item">
              <span class="v-section_line color-orange"></span>
              <span class="v-section_time">19:00 pm</span>
              Buy theater tickets
            </p>
          </section>
          <section id="3" class="v-section">
            <p class="v-section_item">
              <span class="v-section_line color-blue"></span>
              <span class="v-section_time">12:00 pm</span>
              Register for an online painting lesson
            </p>
            <p class="v-section_item">
              <span class="v-section_line color-blue"></span>
              <span class="v-section_time">12:00 pm</span>
              Learn Javascript
            </p>
            <p class="v-section_item">
              <span class="v-section_line color-blue"></span>
              <span class="v-section_time">12:00 pm</span>
              Do homework
            </p>
          </section>
          <section id="4" class="v-section">
            <p class="v-section_item">
              <span class="v-section_line color-blue"></span>
              <span class="v-section_time">11:15 pm</span>
              Prepare tasty chicken for dinner.
            </p>
            <p class="v-section_item">
              <span class="v-section_line color-pink"></span>
              <span class="v-section_time">12:00 pm</span>
              Prepare tasty chicken for dinner.
            </p>
          </section>
          <section id="7" class="v-section">
            <p class="v-section_item">
              <span class="v-section_line color-orange"></span>
              <span class="v-section_time">12:00 pm</span>
              Prepare tasty chicken for dinner.
            </p>
            <p class="v-section_item">
              <span class="v-section_line color-orange"></span>
              <span class="v-section_time">12:00 pm</span>
              Prepare tasty chicken for dinner.
            </p>
            <p class="v-section_item">
              <span class="v-section_line color-blue"></span>
              <span class="v-section_time">12:00 pm</span>
              Prepare tasty chicken for dinner.
            </p>
                   <p class="v-section_item">
              <span class="v-section_line color-blue"></span>
              <span class="v-section_time">12:00 pm</span>
               Complete birthday party preparations: buy baloons and chocolate.

            </p>
                   <p class="v-section_item">
              <span class="v-section_line color-blue"></span>
              <span class="v-section_time">12:00 pm</span>
               Complete birthday party preparations: buy baloons and chocolate.

            </p>
                   <p class="v-section_item">
              <span class="v-section_line color-blue"></span>
              <span class="v-section_time">12:00 pm</span>
               Complete birthday party preparations: buy baloons and chocolate.

            </p>
            <p class="v-section_item">
              <span class="v-section_line color-blue"></span>
              <span class="v-section_time">12:00 pm</span>
               Complete birthday party preparations: buy baloons and chocolate.

            </p>
            <p class="v-section_item">
              <span class="v-section_line color-green"></span>
              <span class="v-section_time">12:00 pm</span>
               Complete birthday party preparations: buy baloons and chocolate.

            </p>
          </section>
        </div>
      </div>
  </div>
<a class="box-item" href="https://codepen.io/Anna_Batura/" target="_blank"><svg class="rabbit" version="1.2" viewBox="0 0 600 600"><path d="m 335.94313,30.576451 c -9.79312,-0.146115 -17.39091,4.439466 -17.39091,13.789758 0,11.508038 -2.91019,60.415461 1.40532,76.238951 4.31553,15.82355 21.58583,38.97215 34.51834,54.67597 10.06946,12.22726 4.34772,41.69626 4.34772,56.0813 0,14.38499 -2.89751,25.9107 -8.65153,25.9107 -5.75402,0 -14.35971,5.75217 -20.11373,11.50612 -5.75395,5.75402 -11.51588,12.95631 -18.70841,7.20229 -7.19251,-5.75402 -20.15388,-11.49441 -43.16987,-15.80992 -23.01609,-4.31551 -61.84129,-0.0234 -86.29583,8.60763 -24.45458,8.63104 -76.25857,56.11061 -90.643535,77.6882 -14.385056,21.5775 -15.799189,87.73247 -14.36068,97.80193 1.438509,10.06953 -2.908267,17.28255 -10.100778,8.65153 -7.192459,-8.63104 -12.911438,-4.30381 -12.911438,-4.30381 0,0 -7.202292,14.37045 -7.202292,21.56298 0,7.19244 2.854564,14.36068 2.854564,14.36068 0,0 -11.506099,8.65056 -11.506099,14.40458 0,5.75397 11.515881,15.83044 18.708391,24.46146 7.192546,8.63097 31.651182,25.89997 41.720624,24.46148 10.069543,-1.43851 28.775063,-0.0121 35.967573,4.3038 7.19253,4.31551 24.44687,10.06761 46.02443,11.5061 21.57752,1.43851 81.97845,5.75307 97.80193,5.75307 15.82357,0 20.1675,-2.86435 27.35996,-10.05688 7.19253,-7.19245 -5.78527,-15.84115 -10.10079,-25.9107 -4.31551,-10.06946 14.40363,-7.16912 20.15765,-8.60763 5.75402,-1.43849 21.59424,-11.5061 31.66376,-11.5061 10.06953,0 8.6165,10.05589 21.56298,15.80993 12.94654,5.75393 31.63939,24.43902 46.02443,27.31602 14.38497,2.87695 47.47173,0.0121 58.97979,-4.30381 11.50797,-4.31551 10.06946,-14.37044 0,-21.56297 -10.06955,-7.19244 -34.50663,-20.16742 -38.82214,-27.35994 -4.31551,-7.19246 -5.74329,-15.81969 1.44924,-23.01224 7.19251,-7.19252 14.35876,-4.30292 25.86678,-10.05685 11.50806,-5.75402 15.80992,-23.04354 15.80992,-33.11301 0,-10.06953 1.36928,-21.01352 5.75307,-27.31602 3.67345,-5.28128 5.10015,-22.13212 5.30499,-33.64009 0.21874,-12.28864 -5.29329,-15.24871 -9.60881,-22.44122 -4.31543,-7.19246 4.30285,-17.25917 10.05687,-17.25917 5.75402,0 31.65108,-4.33602 41.72062,-8.65153 10.06946,-4.31546 20.16744,-23.03273 27.35995,-31.66377 7.19246,-8.63095 1.41799,-27.31512 -8.65154,-33.06907 -10.06954,-5.75402 -10.07746,-21.59431 -18.70841,-31.66377 -8.63103,-10.06953 -18.68507,-31.62961 -27.31604,-38.82213 -8.63101,-7.19253 -28.77502,-12.95535 -35.96755,-12.95535 -7.19253,0 -11.50612,9e-4 -11.50612,-5.75306 0,-5.75402 -1.44924,-12.9203 -1.44924,-25.86678 0,-12.94655 -16.24344,-68.464566 -37.3729,-102.149659 -4.40799,-7.027282 -11.5581,-5.405316 -20.15765,-2.898485 -5.69412,1.659863 -8.60761,4.35564 -8.60761,23.056136 0,18.700566 -11.50515,-0.03133 -17.25917,-10.100794 -5.75403,-10.069512 -15.86265,-21.58444 -28.80918,-24.461458 -2.42749,-0.539415 -4.76669,-0.800692 -7.02665,-0.834399 z" id="rabbit"></path></svg></a>
    
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700")

html
  font-family: sans-serif
  -ms-text-size-adjust: 100%
  -webkit-text-size-adjust: 100%

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
  margin: 0
  padding: 0
  border: 0
  font-size: 100%
  font: inherit
  vertical-align: baseline

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
  display: block

body
  line-height: 1

ol, ul
  list-style: none

blockquote, q
  quotes: none

blockquote
  &:before, &:after
    content: ''
    content: none

q
  &:before, &:after
    content: ''
    content: none

table
  border-collapse: collapse
  border-spacing: 0

body
  margin: 0


article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary
  display: block


audio,canvas,progress,video
  display: inline-block
  vertical-align: baseline


audio:not([controls])
  display: none
  height: 0


[hidden],template
  display: none


a
  background: transparent


a:active,a:hover
  outline: 0


a:focus
  outline: none


abbr[title]
  border-bottom: 1px dotted


b,strong
  font-weight: 600

.heading.\--h1,h1
  font-size: 2em
  margin: .67em 0

svg:not(:root)
  overflow: hidden

*
  -webkit-tap-highlight-color: rgba(0,0,0,0)

body
  margin: 40px
  background-color: #d9dded
  height: 100%
  display: flex
  align-items: center
  justify-content: center
  color: #3e396b
  font-family: 'Roboto', sans-serif
a
  cursor: pointer
  color: #000
  text-decoration: none

h1
    margin: 0

.box
    width: 36px
    height: 27px

.v-container
    position: relative
    width: 375px
    height: 667px
    border-radius: 16px
    padding-left: 48px
    box-sizing: border-box
    border: 4px solid #fff
    background-color: #eff0f8
    box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09)

    display: flex
    align-items: center
    justify-content: center
    flex-direction: column

.v-scroll
    overflow: auto

.v-title
    font-weight: 800
    font-size: 24px
    padding-left: 5px
.calendar 
    background: #fff
    border-radius: 0 0 1em 1em
    color: #555
    width: 100%
    box-sizing: border-box
    display: inline-block
    padding: 20px 10px
    &_title
        font-size: 20px
        padding: 15px 0 5px
        opacity: 0.5
        svg
            position: relative
            transform: rotate(90deg)
            top: 2px

.v-menu
    position: absolute
    top: 4px
    left: 4px
    bottom: 4px
    width: 40px
    border-radius: 9px
    padding-top: 60px
    background: linear-gradient(135deg, #9a0dfe, #637dfb)
    &_link
        cursor: pointer
        width: 40px
        height: 40px
        display: flex
        align-items: center
        justify-content: center
        transition: all 0.3s
        &.top
            position: absolute
            left: 0
            bottom: 7px

        &.active
            background-color: rgba(0, 0, 0, 0.7)
        &:hover
            background-color: rgba(0, 0, 0, 0.5)

    &_logo
        position: absolute
        top: 10px
        left: 5px
        width: 30px
        height: 30px
        background-color: #000
        border-radius: 50%
        overflow: hidden
        &::before, &:after
            content: ""
            display: block
            position: absolute
            width: 50px
            height: 50px
        &::before
            top: 7px
            left: 9px
            transform: rotate(34deg)
            background: linear-gradient(#33ccff, #00fffe)
        &:after
            top: -26px
            left: 7px
            background: linear-gradient(52deg, #ffcc58, #ff5050)
            transform: rotate(36deg)


.v-calendar
    position: absolute
    top: 0
    left: 56px
    right: 10px
    &.mini
        .v-list:not(.active)
            overflow: hidden
            opacity: 0
            height: 0
            transform: scale(0)
        + .v-info
            margin-top: 173px
.v-info
    overflow: auto
    width: 100%
    margin-top: 294px
    padding-bottom: 60px
    margin-bottom: 10px
    transition: all 0.3s
    

.v-day
    pointer-events: none
    opacity: 0.2

.v-day-current
    background: #eff0f8

.v-list
    display: flex
    opacity: 1
    height: 30px
    width: 100%
    transition: height 0.3s
    &_info
        pointer-events: none
    a
        pointer-events: none
        width: 100%
        display: flex
        align-items: center
        justify-content: center
    a > span, &.v-list_info span
        position: relative
        width: 100%
        padding: 4px 0 7px
        margin: 2px 0
        text-align: center
        border-radius: 6px

    .active span
        font-weight: 700
        color: #fff
        background-color: #824bfc

.v-section
    border-bottom: 1px solid #fff
    padding: 25px 15px 10px
    &_item
        position: relative
        font-size: 14px
        margin-bottom: 15px
        padding-left: 10px
        line-height: 1.15
    &_time
        font-size: 14px
        padding-bottom: 4px
        font-weight: 800
    &_line
        position: absolute
        left: 0
        top: 0
        bottom: 0
        width: 4px
        border-radius: 2px


.color-orange
    background: linear-gradient(#ff9900, #ff5050)
    box-shadow: 0 2px 12px -3px #ff5050
.color-pink
    background: linear-gradient(#ff66cc, #ff6666)
    box-shadow: 0 2px 12px -3px #ff6666
.color-green
    background: linear-gradient(#19be6b, #236c61)
    box-shadow: 0 2px 12px -3px #236c61
.color-blue
    background: linear-gradient(#33ccff, #72abff)
    box-shadow: 0 2px 12px -3px #72abff
.dots
    position: absolute
    bottom: 3px
    left: 0
    right: 0
    display: flex
    align-items: center
    justify-content: center
    flex-direction: row
    background-color: transparent !important
.dot
    width: 4px
    height: 4px
    border-radius: 50%
    margin: 0 2px

.v-btn
    cursor: pointer
    position: absolute
    right: 30px
    bottom: 30px
    width: 100px
    height: 40px
    background: linear-gradient(135deg, #9a0dfe, #637dfb)
    box-shadow: 0 2px 12px -3px #637dfb
    display: flex
    align-items: center
    justify-content: center
    padding: 0
    z-index: 2
    font-size: 18px
    color: #fff
    font-size: 16px
    font-weight: 400
    border: none
    border-radius: 32px

.rabbit
  width: 50px
  height: 50px
  position: fixed
  bottom: 20px
  right: 20px
  z-index: 3
  fill: #fff
              
            
!

JS

              
                  let calendar = document.querySelector('.v-calendar');

  $(".calendar").on('click', function () {
		$(".v-calendar").addClass('mini');
	});

	var sections = $('section')
	  , nav = $('.calendar');

	$(".v-info").on('scroll', function () {
		if ($(".v-info").scrollTop() > 0) {
			$(".v-calendar").addClass('mini');
		} else {
			$(".v-calendar").removeClass('mini');
    }

    let calendarRect = calendar.getBoundingClientRect();
	  let curPos = calendarRect.top + calendarRect.height;

	  sections.each(function() {
	    let rect = this.getBoundingClientRect();
	    let style = window.getComputedStyle(this);
	    let top = rect.top - parseInt(style['margin-top'], 10);
	    let bottom = rect.bottom;
		
      if (curPos >= top && curPos <= bottom) {
        nav.find('a').removeClass('active');
        sections.removeClass('active');

        $(this).addClass('active');
        nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
      }
	  });
	});
	
	nav.find('a').on('click', function () {
	  var $el = $(this)
		, id = $el.attr('href');
	  
	  $(".v-info").animate({
		  scrollTop: $(id).offset().top
	  }, 500);
	  
	  return false;
	});
              
            
!
999px

Console