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 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.

            
              .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