cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

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.

            
              .grid
  .nav
    h2.border Futuristic todo app !
    .links
      a(href="").first About
      a(href="").second Contact
  .cards
    .card.card-learn.learn.bg
      h3 Learn about blockchain<br>Tech.
    .card.card-download.bg
      h3 Download some kno-<br>wledge.
    .add.border
      h3 Add new Task:
      .input-field
        input(type="text", placeholder="Task...")
        button(type="submit")
          i.fa.fa-angle-right
    .card.card-design.bg
      h3 Design a todo list app.
    .card.card-get.bg
      h3 Get a neuralink chip.
    .card.card-train.bg
      h3 Train a LSTM RNN to gene-<br>rate quotes.
    .card.card-learn-js.learn.bg
      h3 Learn Js.
    .card.card-visit.bg
      h3 Visit Mars.
            
          
!
            
              button, input
  &:focus
    outline: none
.grid
  max-width: 960px
  margin: 0 auto
  padding: 3rem 0
  .border
    //border: 1px solid #212121
  .nav
    display: grid
    grid-template-columns: repeat(12, 1fr)
    grid-template-rows: repeat(3, 2fr)
    margin-bottom: 2rem
    @media screen and (max-width: 900px)
      padding-left: 1rem
    h2
      grid-column: 1/8
      margin: 0
      @media screen and (max-width: 900px)
        grid-column: 1/13
        grid-row: 1/2
        margin-bottom: 1rem
    .links
      grid-column: 8/12
      text-align: right
      @media screen and (max-width: 900px)
        grid-column: 1/13
        grid-row: 2/3
        text-align: left
      a
        font-weight: bold
        color: #6f6f6f
        transition: .5s
        text-decoration: none
        &:hover
          color: #212121
          transition: .5s
        &:first-child
          margin-right: .6rem
  .cards
    display: grid
    grid-template-columns: repeat(12, 1fr)
    grid-template-rows: repeat(5, 2fr)
    @media screen and (max-width: 900px)
      grid-template-rows: repeat(9, 2fr)
    .bg
      background-color: #fff
      box-shadow: 0px 1px 12px 0px rgba(74, 74, 74, 0.34)
      cursor: pointer
      transition: .5s
      @media screen and (max-width: 900px)
        margin-bottom: 1rem
      &:hover
        box-shadow: 0px 1px 20px 0px rgba(74, 74, 74, 0.64)
        transition: .5s
    .card
      padding: 1rem 2rem 4rem 1rem
    .learn
      background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%)
      color: #fff
    .card-learn
      grid-column: 1/6
      @media screen and (max-width: 900px)
        grid-column: 1/13
        grid-row: 8/9
    .card-download
      grid-column: 6/9
      word-break: break-all
      grid-row: 1/3
      z-index: 1
      background-image: linear-gradient(147deg, #8addd3 0%, #555dd9 74%)
      color: #fff
      @media screen and (max-width: 900px)
        grid-column: 1/13
        grid-row: 2/3
    .add
      grid-column: 9/13
      padding: 2rem .5rem 2rem 1rem
      z-index: 1
      @media screen and (max-width: 900px)
        grid-column: 1/13
        grid-row: 1/2
      input
        box-shadow: 0px 1px 12px 0px rgba(74, 74, 74, 0.34)
        border: 2px solid #d2d2d2
        padding: .7rem 0 .8rem .7rem
        border-radius: 5px
      button
        cursor: pointer
        border: none
        border-radius: 100%
        padding: 1rem 1.3rem
        position: relative
        right: 18px
        background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%)
        box-shadow: 0px 2px 16px 0px rgba(255, 37, 37, 0.55)
        color: #fff
    .card-design
      grid-column: 1/6
      grid-row: 2/4
      z-index: 1
      background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%)
      color: #fff
      @media screen and (max-width: 900px)
        grid-column: 1/13
        grid-row: 3/4
    .card-get
      grid-column: 9/12
      grid-row: 2/3
      background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%)
      color: #212121
      @media screen and (max-width: 900px)
        grid-column: 1/13
        grid-row: 4/5
    .card-train
      grid-column: 6/10
      grid-row: 3/5
      z-index: 1
      background-image: linear-gradient(147deg, #f35240 0%, #dd2235 74%)
      color: #fff
      @media screen and (max-width: 900px)
        grid-column: 1/13
        grid-row: 5/6
    .card-learn-js
      grid-column: 4/6
      grid-row: 4/6
      @media screen and (max-width: 900px)
        grid-column: 1/13
        grid-row: 6/7
    .card-visit
      grid-column: 10/12
      grid-row: 3/5
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
      color: #212121
      @media screen and (max-width: 900px)
        grid-column: 1/13
        grid-row: 7/8
            
          
!
999px
Loading ..................

Console