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.

            
              
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Realtime Prototype</title>


    </head>
    <body>

        
        <section id="entry">
		
            <div class="rank column">
                <span class="rank">003</span>
                <span class="label">Rank</span>
            </div>
            <div class="channel column flex-center"><img src="http://mamjed.com/portfolio-2/wp-content/uploads/2015/01/429.svg"></div>
            <div class="program column">
                <span class="pName">Title Goes Here</span>
                <span class="eName">Subtitle</span>
                <span class="airtTime">11:30am</span><span class="dur">(60min)</span>
            </div>
            
            <div class="share column">
                <span class="precent">30</span>
                <span class="label">Lorem Ipsum</span>
            </div>


            <div class="rating column">
                <span class="precent">10</span>
                <span class="label">Lorem Ipsum</span>
            </div>
            <div class="mini-graph"><div id="progress"></div></div>
            
            <i class="clearfix"></i>

            <div id="graph" >
                
            </div>
		
        </section>


<script type="text/javascript" src="//use.typekit.net/cda4dbs.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    </body>
</html>
            
          
!
            
              
* {
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: subpixel-antialiased;
}
html {
  font-size: 62.5%;
}
.left {
  float: left;
}
.right {
  float: right;
}
.center {
  text-align: center;
  margin: 0 auto;
}
.hidden {
  display: none;
}
.clearfix {
  clear: both;
  display: block;
}
.flex-center {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: -ms-inline-flex;
  display: inline-flex;
  -webkit-box-direction: 8121991;
  -moz-box-direction: 8121991;
  -webkit-box-orient: 8121991;
  -moz-box-orient: 8121991;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  -moz-align-content: center;
  -ms-align-content: center;
  align-content: center;
  height: 100%;
  width: 100%;
}
::-moz-selection {
  background-color: #0079c1;
  color: #fff;
}
::selection {
  background-color: #0079c1;
  color: #fff;
}
/*-- Link Styles --*/
a {
  color: #0079c1;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a img {
  outline: none;
}

/*-- Text Styles --*/
p {
  -: ;font: 300 16px / 24px "Proxima-Nova", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -: ;font: 300 1.6rem / 2.4rem "Proxima-Nova", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 16px;
  color: #74777a;
}
* {
  padding: 0;
  margin: 0;
}
html {
  min-width: 924px;
}
.clearfix {
  clear: both;
  display: block;
}
#entry {
  width: 90%;
  margin: 20px auto 0;
  border: 1px solid #e6e7e8;
  background-color: #f9f9f9;
  -: ;padding: 10px;
  -: ;padding: 1rem;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -moz-transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
#entry .column {
  margin-right: 2%;
  height: 78px;
}
#entry .rank {
  width: 5%;
  float: left;
}
#entry .rank .rank {
  -: ;font: 300 30px / 36px "Effra", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -: ;font: 300 3rem / 3.6rem "Effra", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #74777a;
  display: block;
  text-align: center;
  width: 100%;
  margin-top: 14px;
}
#entry .label {
  -: ;font: 300 13px / 18px "Proxima-Nova", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -: ;font: 300 1.3rem / 1.8rem "Proxima-Nova", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #8a8b8b;
  text-align: center;
  width: 100%;
  display: block;
}
#entry .channel {
  width: 10%;
  float: left;
}
#entry .channel img {
  height: 100%;
  width: 100%;
  -: ;max-height: 50px;
  -: ;max-height: 5rem;
  -: ;max-width: 100px;
  -: ;max-width: 10rem;
}
#entry .program {
  width: 40%;
  float: left;
}
#entry .program .pName {
  -: ;font: 300 30px / 36px "Effra", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -: ;font: 300 3rem / 3.6rem "Effra", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #0079c1;
  display: block;
}
#entry .program .eName {
  -: ;font: 300 16px / 24px "Proxima-Nova", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -: ;font: 300 1.6rem / 2.4rem "Proxima-Nova", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #74777a;
  display: block;
}
#entry .program .airtTime,
#entry .program .dur {
  -: ;font: 300 13px / 18px "Proxima-Nova", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -: ;font: 300 1.3rem / 1.8rem "Proxima-Nova", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#entry .program .airtTime {
  color: #74777a;
}
#entry .program .dur {
  color: #8a8b8b;
  -: ;padding: 0px 0px 0px 5px;
  -: ;padding: 0rem 0rem 0rem 0.5rem;
}
#entry lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes progress{ 0%{ width: 0%; color: #00b03f } 20%{ width: 0%; color: #00b03f } 100%{ width: 50%; color: #00b03f }}
@-moz-keyframes progress{ 0%{ width: 0%; color: #00b03f } 20%{ width: 0%; color: #00b03f } 100%{ width: 50%; color: #00b03f }}
@-o-keyframes progress{ 0%{ width: 0%; color: #00b03f } 20%{ width: 0%; color: #00b03f } 100%{ width: 50%; color: #00b03f }}
@keyframes progress{ 0%{ width: 0%; color: #00b03f } 20%{ width: 0%; color: #00b03f } 100%{ width: 50%; color: #00b03f };
}
#entry .mini-graph {
  width: 15%;
  top: 0;
  height: 98px;
  position: absolute;
  left: 60%;
  overflow: hidden;
  background-color: #e6e7e8;
  -webkit-transition: all 400ms ease-in;
  -moz-transition: all 400ms ease-in;
  -o-transition: all 400ms ease-in;
  transition: all 400ms ease-in;
}
#entry .mini-graph #progress {
  height: 100%;
  width: 50%;
  -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
  background-color: #00b03f;
  -webkit-animation: progress 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-animation: progress 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-animation: progress 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation: progress 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#entry .precent {
  -: ;font: 300 48px / 48px "Effra", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -: ;font: 300 4.8rem / 4.8rem "Effra", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #74777a;
  display: block;
  text-align: center;
  width: 100%;
}
#entry .precent:after {
  content: "%";
  -: ;padding: 0px 0px 0px 2px;
  -: ;padding: 0rem 0rem 0rem 0.2rem;
  -: ;font: 300 26px / 32px "Effra", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -: ;font: 300 2.6rem / 3.2rem "Effra", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#entry .rating {
  width: 10%;
  float: right;
}
#entry .share {
  width: 10%;
  float: right;
}
#entry #graph {
  height: 0px;
  width: 100%;
  -webkit-transition: all 400ms ease-in;
  -moz-transition: all 400ms ease-in;
  -o-transition: all 400ms ease-in;
  transition: all 400ms ease-in;
}
#entry.open {
  -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
#entry.open .mini-graph {
  top: 100px;
  left: 0px;
  width: 100%;
  height: 10px;
  -webkit-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
#entry.open #graph {
  margin-top: 40px;
  height: 200px;
  background-color: #ddd;
  -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

            
          
!
            
              $(document).ready(function(){
    $("#entry").click(function() {
        if ($(this).hasClass('open')) {
            $(this).removeClass('open');
        } else {
            $(this).addClass('open');
        }
    });
});
            
          
!
999px
Loading ..................

Console