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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <div class="dashboard">
  <header>
    <div class="f fe">
      <div class="icon icon-w"></div>
      <div class="heading">
        <h5 class="date">1 Feb 2019</h5>
        <h2 class="title">Cloudy</h2>
      </div>
    </div>
    
    <div class="weather f">
      <div>
        <strong>26°<sup>C</sup></strong>
        <p>Indoor Temp.</p>
      </div>
      <div>
        <strong>48.2%</strong>
        <p>Outdoor Humidity</p>
      </div>
      <div>
        <strong>52.99</strong>
        <p>Indoor Temp.</p>
      </div>
    </div>
  </header>
  <section>
  <!-- Category -->
    <div class="category">
      <ul>
        <li><a href="#!" class="active">Living Room</a></li>
        <li><a href="#!">Kitchen</a></li>
        <li><a href="#!">Dinning</a></li>
        <li><a href="#!">Weather</a></li>
      </ul>
    </div>
  <!-- Appliances -->
    <div class="appliances">
      
      <div class="appliance">
        <input type="checkbox" name="a" id="a">
        <label for="a">
          <i class="l"></i>
          <strong>Lamp</strong>
          <span data-o="opened" data-c="closed"></span>
          <small></small>
        </label>
      </div>
      
      <div class="appliance">
        <input type="checkbox" name="a" id="b">
        <label for="b">
          <i class="r"></i>
          <strong>Router</strong>
          <span data-o="opened" data-c="closed"></span>
          <small></small>
        </label>
      </div>
      
      <div class="appliance">
        <input type="checkbox" name="a" id="c">
        <label for="c">
          <i class="a"></i>
          <strong>Air</strong>
          <span data-o="opened" data-c="closed"></span>
          <small></small>
        </label>
      </div>
      
      <div class="appliance">
        <input type="checkbox" name="a" id="d">
        <label for="d">
          <i class="f"></i>
          <strong>Fridge</strong>
          <span data-o="opened" data-c="closed"></span>
          <small></small>
        </label>
      </div>
      
      <div class="m-player">
        <h2>Shared Devices</h2>
        <div class="player">
          <div class="disc"></div>
          <div class="artist">
            <p>Rosetta Stoned</p>
            <small>Tool</small>
          </div>
          <div class="controls">
            <input type="checkbox" name="a" id="p">
            <label for="p">
              <div class="control"></div>
            </label>
          </div>
        </div>
      </div>
      
    </div>
  </section>
</div>

<a href="https://www.youtube.com/watch?v=URUPsrmtYfs" target="_blank" title="Watch me speed code this" style="position: fixed; bottom: 10px; right: 10px"><img src="http://co0kie.github.io/codepen/youtube.png" alt=""></a>
              
            
!

CSS

              
                // mixin
@mixin bp($bp,
  $min-max: min-width){
    $em: $bp/16;
    @media(#{$min-max}: #{$em}em){
      @content;
    }
}
// reset
*{
  font-family: 'Lato', sans-serif;
}
body{
  height: 90vh;
  display: flex;
  background: aliceblue;
}
a{
  text-decoration: none;
  color: inherit;
}
ul{
  list-style: none;
}
// variables
$yellow: #feb103;
$gray: #f6f8fa;
$black: #444;
$text-gray: #9e9e9e;
$text-gray2: #858d9f;
$blue1: #3976f6;
$blue2: #59a2fb;
$switchOff: #ff574e;
// helper class
.f{
  display: flex;
}
.fe{
  align-items: flex-end;
}
// start 
body{
  background-color: rgba(89, 162, 251, 0.61);
}
.dashboard{
  background-color: $gray;
  width: 420px;
  border-radius: 0 0 20px -15px black;
  margin: auto;
}
header{
  background-color: white;
  overflow: hidden;
  border-radius: 0 0 50px 50px;
  padding: 40px 40px 20px;
  box-shadow: 0 -5px 27px 0 rgba(128,128,128,0.15);
}
.weather{
  margin-top: 40px;
  width: 100%;
  position: relative;
  overflow: hidden;
  sup{
    font-size: 11px;
    position: relative;
    top: -11px;
  }
  &::before{
    content: '';
    position: absolute;
    width: 130px;
    height: 60px;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 50%, rgba(255,255,255,1) 100%);
    right: 0;
    bottom: 14px;
  }
  >div{
    white-space: nowrap;
  }
  >div+div{
    margin-left: 30px;
  }
  >div>strong{
    font-size: 20px;
  }
  >div>p{
    color: $text-gray;
    margin-top: 10px;
  }
}
.category{
  overflow: hidden;
  margin-top: 30px;
  ul{
    display: flex;
  }
  li+li{
    margin-left: 40px;
  }
  a{
    font-size: 17px;
    font-weight: 600;
    color: $text-gray2;
    white-space: nowrap;
    &:hover,
    &.active{
      color: $black;
    }
    &.active{
      position: relative;
      &::before{  
        content: '';  
        width: 6px;
        height: 6px;
        border-radius: 6px;
        background-color: $black;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        bottom: -15px;
      }
    }
  }
}
.appliances{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 340px;
  margin: 30px auto;
}
  .appliance{
    position: relative;
    height: 170px;
    width: 45%;
    margin: 10px 0;
    span{
    position: relative;
    &::before,
    &::after{
      text-transform: uppercase;
      font-size: 12px;
      position: absolute;
      left: 0;
    }
    &::before{
      content: attr(data-o);
      opacity: 0;
    }
    &::after{
      content: attr(data-c);
    }
  }
  strong{
    margin: 70px 0 10px;
    display: block;
    font-size: 18px;
  }
  label{
    position: absolute;
    width: 74%;
    height: 71%;
    cursor: pointer;
    padding: 20px;
    box-shadow: 1px 0 10px 10px rgba(black, 0.03);
    border-radius: 30px;
    &::before{
      border-radius: 30px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      background-color: white;
      content: '';
    }
    *{
      position: relative;
      transition: 200ms;
    }
    small{
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: $switchOff;
      border-radius: 10px;
      top: 30px;
      right: 20px;
      transition: 200ms;
      &::after,
      &::before{
        content: '';
      }
    }
    .f{
      width: 16px;
      height: 22px;
      background-color: $blue1;
      display: block;
      position: absolute;
      border-radius: 2px;
      top: 30px;
      background-image: linear-gradient(0deg, white 2px, transparent 2px), linear-gradient(0deg, white 12px, transparent 0);
      background-size: 17px 9px, 2px 15px;
      background-position: 0 0, 3px 0;
      background-repeat: no-repeat;
    }
    .a{
      width: 23px;
      height: 10px;
      background-color: $blue1;
      display: block;
      position: absolute;
      border-radius: 2px;
      top: 30px;
      background-image: linear-gradient(0deg, white 2px, transparent 2px);
      background-size: 17px 9px;
      background-position: 3px -2px;
      background-repeat: no-repeat;
      &::after,
      &::before{
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        border-width: 3px;
        border-style: solid;
        border-color: transparent transparent $blue1;
        top: 10px;
        border-radius: 50%;
        transform: rotate(72deg);
        display: block;
      }
      &::after{
        left: 14px;
      }
      &::before{
        left: 6px;
      }
    }
    .r{
      width: 23px;
      height: 9px;
      background-color: $blue1;
      display: block;
      position: absolute;
      border-radius: 3px;
      top: 30px;
      &::after,
      &::before{
        content: '';
        border-width: 2px;
        border-style: solid;
        border-color: rgba($blue1, .61) transparent transparent;
        border-radius: 50%;
        position: absolute;
        display: block;
      }
      &::after{
        width: 22px;
        height: 20px;
        top: -11px;
        left: -2px;
      }
      &::before{
        width: 16px;
        height: 20px;
        top: -6px;
        left: 1px;
      }
    }
    .l{
      width: 22px;
      height: 13px;
      background-color: $blue1;
      display: block;
      position: absolute;
      border-radius: 22px 22px 0 0;
      top: 30px;
      &::before{
        content: '';
        width: 3px;
        height: 8px;
        background-color: rgba($blue1, 0.61);
        display: block;
        top: -8px;
        position: absolute;
        border-radius: 3px;
        left: 9px;
      }
      &::after{
        content: '';
        position: absolute;
        width: 10px;
        height: 4px;
        background: rgba($blue1, .61);
        border-radius: 0 0 9px 9px;
        top: 14px;
        left: 6px;
      }
    }
  }
  input{
    display: none;
    &:checked + label{
      &::before{
        content: '';
        background: linear-gradient(to bottom, $blue2 0%, $blue1 100%);
      }
      *{
        color: white;
      }
      i{
        background-color: rgba(white, 1);
        &::before,
        &::after{
          background-color: rgba(white, .61);
        }
        &.f{
          background-image: linear-gradient(0deg, rgba($blue2,.61) 2px, transparent 2px), linear-gradient(0deg, rgba($blue2,.61) 12px, transparent 0);
        }
        &.a{
          background-image: linear-gradient(0deg, rgba($blue2, .61) 2px, transparent 2px);
          &::before,
          &::after{
            background-color: rgba(white, 0);
            border-color: transparent transparent rgba(white,.61);
          }
        }
        &.r{
          background-color: rgba(white,1);
          &::before,
          &::after{
            background-color: rgba(white, 0);
            border-color: rgba(white, .61) transparent transparent;
          }
        }
      }
      small{
        width: 30px;
        height: 15px;
        background-color: $blue1;
        &::before{
          width: 13px;
          height: 13px;
          background-color: white;
          display: block;
          border-radius: 13px;
          top: 1px;
          position: absolute;
        }
      }
      span::before{
        opacity: 1;
      }
      span::after{
        opacity: 0;
      }
    }
  }
  }

.heading .title{
  margin: 0;
  font-size: 36px;
}
.heading .date{
  margin: 10px 0;
  font-size: 16px;
}
.icon-w{
  position: relative;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: $yellow;
  margin-right: 30px;
  top: -7px;
  &::after,
  &::before{
    content: '';
    position: absolute;
  }
  &::after{
    width: 28px;
    height: 13px;
    border-radius: 20px;
    background-color: $yellow;
    bottom: 0;
    left: 3px;
  }
  &::before{
    width: 20px;
    height: 20px;
    box-shadow:
      10px -3px 0 -2px rgba($yellow, 0.59),
      3px -15px 1px -7px rgba($yellow, 0.4),
      11px -17px 1px -7px rgba($yellow, 0.4),
      19px -13px 1px -7px rgba($yellow, 0.4),
      22px -4px 1px -7px rgba($yellow, 0.4);
    border-radius: 50%;
  }
}
.m-player{
  position: relative;
  width: 100%;
  >h2{
    margin-bottom: 5px;
    margin-top: 10px;
  }
  .player{
    border-radius: 10px;
    padding: 15px;
    background-image: linear-gradient(to right, $blue2 0%, $blue1 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    box-shadow: 0 10px 10px 0 rgba(0,0,0,0.24);
  }
  .artist{
    margin-right: auto;
    margin-left: 15px;
    p{
      margin: 0;
      font-weight: 600;
    }
  }
  .disc{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-image: linear-gradient(50deg, rgba(255,255,255,0) 45%, rgba(255,255,255,0.15) 31%, rgba(255,255,255,0) 72%), linear-gradient(-50deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 60%),repeating-radial-gradient(circle, #444 0, #444 2px, gray 2px, #545454 3px);
    position: relative;
    &::before,
    &::after{
      content: '';
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      border-radius: 50%;
    }
    &::before{
      width: 20px;
      height: 20px;
      background: black;
      border: 2px solid #5d5d5d;
    }
    &::after{
      width: 8px;
      height: 8px;
      background: white;
    }
  }
  .control{
    width: 52px;
    height: 10px;
    background-image: linear-gradient(to right, rgba(white, .61) 2px, transparent 2px), linear-gradient(to right, rgba(white, .61) 2px, transparent 2px),linear-gradient(to right, white 4px, transparent 0),linear-gradient(to right, white 4px, transparent 0);
    background-position: 0 0, 47px 0, 20px 0, 26px 0;
    background-size: 2px 12px, 2px 12px, 4px 12px, 4px 12px;
    background-repeat: no-repeat;
    position: relative;
    cursor: pointer;
    transition: 200ms;
    &::after,
    &::before{
      content: '';
      position: absolute;
      border-width: 6px;
      border-style: solid;
      top: -1px;
    }
    &::before{
      left: -2px;
      border-color: transparent rgba(white, .61) transparent transparent;
    }
    &::after{
      right: 1px;
      border-color: transparent transparent transparent rgba(white, .61);
    }
  }
  .controls{
    input{
      display: none;
      &:checked + label{
        .control{
          background-size: 2px 12px, 2px 12px, 0 0, 0 0;
          background-position: 6px 0, 40px 0, 20px 0, 26px 0;
          &::after{
            right: 18px;
          }
          &::before{
            left: -2px;
            border-width: 0;
          }
        }
      }
    }
  }
}
              
            
!

JS

              
                // Watch me code this - https://www.youtube.com/watch?v=URUPsrmtYfs
              
            
!
999px

Console