A Pen by drawby.

index.html

<!-- / Loading bootstrap 3 from CDN: //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css -->

<!-- / need a nav bar?
<div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav past-carousel" id="docs top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand past-carousel" href="http://redtapedesign.com/xhome/xhome/indexslide.html">
            <svg version="1.1" id="xlogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="88.172px" height="86.021px" viewBox="0 0 88.172 86.021" enable-background="new 0 0 88.172 86.021" xml:space="preserve">
            <g>
              <polygon id="xlogo2a" opacity="0.84" fill="#ffffff" points="48.111,28.731 45.342,32.702 42.588,28.731 28.423,28.731 38.219,42.055 
                28.116,55.731 35.411,55.731 55.322,28.731   "></polygon>
              <polygon id="xlogo1a" fill="#ffffff" points="45.238,51.36 48.273,55.731 62.42,55.731 52.383,42.014 62.164,28.731 55.322,28.731 
                35.411,55.731 42.187,55.731   "></polygon>
              <path id="xlogo1b" fill="#ffffff" d="M67.596,10.871l-4.734,6.68c7.779,5.582,12.861,14.692,12.861,24.975c0,16.942-13.783,30.725-30.726,30.725
                c-6.565,0-12.651-2.075-17.648-5.596l-4.735,6.68c6.337,4.473,14.055,7.111,22.384,7.111c21.46,0,38.919-17.461,38.919-38.92
                C83.916,29.489,77.467,17.937,67.596,10.871z"></path>
              <path id="xlogo2b" opacity="0.84" fill="#ffffff" d="M14.271,42.526c0-16.942,13.784-30.726,30.726-30.726c6.659,0,12.826,2.136,17.864,5.75
                l4.734-6.68C61.22,6.305,53.42,3.606,44.997,3.606c-21.46,0-38.919,17.46-38.919,38.919c0,13.132,6.544,24.757,16.536,31.809
                l4.735-6.68C19.448,62.089,14.271,52.904,14.271,42.526z"></path>
            </g>
            </svg>          
        </a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class=""><a href="http://redtapedesign.com/xhome/xhome/indexslide.html">Tour</a></li>
            <li><a href="http://redtapedesign.com/xhome/xhome/docs.html">Docs</a></li>
            <li><a href="http://www.redtapex.com/signup/newuser">Sign Up</a></li>
          </ul>
        </div>
      </div>
    </div>
-->



<div class='container main'>
  <div class='row'>
    <div class='col-md-12 head'>
    
     
      
      <button type="button" class="btn btn-default shareit pull-right" >Share with my team</button>
      
    <img class='artistpic' src='https://graph.facebook.com/therealjustivy/picture?width=100&height=100'>
      
    <h1>Just Ivy Insights</h1>
      <a class=''>Change artist account</a>
    
  </div>
    </div>
    
  
  
  <div class='row js-masonry' data-masonry-options-itemSelector='.col-sm-4'>
    <div class='col-md-4'>
      <div class='card newvid highlite'>
        <h4>Fresh Video: "We Are Here featuring DJ khaled "</h4>
        <div class='mapwrap'>
          <img class='img-responsive full-width' src='http://img.youtube.com/vi/HrKmDgk8Edg/hqdefault.jpg'>
        </div>
        <div class'row '>
          <div class='col-xs-4 text-center stats'>
            <h4>999K</h4>
            <small data-toggle='tooltip' data-placement='bottom' title='How many times the video was played'>VIEWS</small>
          </div>
          <div class='col-xs-4 text-center stats'>
            <h4>301</h4>
            <small data-toggle='tooltip' data-placement='bottom' title='How many times the video was shared across social'>SHARES</small>
          </div>
          <div class='col-xs-4 text-center stats'>
            <h4>99</h4>
            <small data-toggle='tooltip' data-placement='bottom' title='How many thumbs up the video has on YouTube'>LIKES</small>
          </div>
        </div>
        <small class='time'>about 1 min ago</small>
        <a class='coolbar' id='cooldude'>Show More</a>
      </div>
    </div>
    <div class='col-md-4'>
      <div class='card'>
        <h4>Top Fans V1</h4>
        <p>Top fans in a solid row across. get 100x100 thumbs now</p>
        
        <div class='fanbox mapwrap'>
          
            <img class='fanpic' src='https://graph.facebook.com/darby.kaighinshields/picture?width=100&height=100'>
            
            <img class='fanpic' src='https://graph.facebook.com/ryanhickman/picture?width=100&height=100' data-toggle='tooltip' data-placement='bottom' title='Ryan hickman liked Just Ivy 289 times this week'>
          
            <img class='fanpic' src='https://graph.facebook.com/ajohnsonmusic/picture?width=100&height=100'>
          
          <img class='fanpic' src='https://graph.facebook.com/zuck/picture?width=100&height=100'>
          
          <img class='fanpic' src='https://graph.facebook.com/JSBrown89/picture?width=100&height=100'>
          
          <img class='fanpic' src='https://graph.facebook.com/MikeTunz/picture?width=100&height=100'>
          
          <img class='fanpic' src='https://graph.facebook.com/darby.kaighinshields/picture?width=100&height=100'>
          
          <img class='fanpic' src='https://graph.facebook.com/xdrpdeadx/picture?width=100&height=100'>
          
            
           
          
        </div>
        
        <small class='time'>about 1 min ago</small>
        <a class='coolbar' id='cooldude'>Show More</a>
      </div>
    </div>
    
    <div class='col-md-4'>
      <div class='card'>
        <h4>Top Fans V2</h4>
        <p>Top fans in circles across </p>
        
        <div class='fanbox'>
          
            <img class='fanpic2' src='http://graph.facebook.com/darby.kaighinshields/picture?type=square'>
            
            <img class='fanpic2' src='http://graph.facebook.com/ryanhickman/picture?type=square'>
          
            <img class='fanpic2' src='http://graph.facebook.com/sarfraz.anees/picture?type=square'>
          
            <img class='fanpic2' src='http://graph.facebook.com/67563683055/picture?type=square'>
          
            <img class='fanpic2' src='http://graph.facebook.com/sarfraz.anees/picture?type=square'>
          
            <img class='fanpic2' src='http://graph.facebook.com/67563683055/picture?type=square'>
          
            <img class='fanpic2' src='http://graph.facebook.com/ryanhickman/picture?type=square'>
          
            <img class='fanpic2' src='http://graph.facebook.com/ryanhickman/picture?type=square'>
           
          
        </div>
        
        <small class='time'>about 1 min ago</small>
        <a class='coolbar' id='cooldude'>Show More</a>
      </div>
    </div>
    
    <div class='col-md-4'>
      <div class='card recap'>
        <h4>Radio Recap</h4>
        <p>Top 5 networks where fans are engaging with you online.</p>
        <small class='time'>about 1 min ago</small>
       
        <ul>
          <li class='darbicon-fb'>
            <h5>75K fan actions</h5>
              <small>Facebook.com/justivy</small>
            
          </li>
          <li class='darbicon-sc'>
            <h5>52K Fan actions</h5>
             <small>Youtube.com/ak</small>
            
          </li>
          <li class='darbicon-tw'>
            <h5 class=''>23K Plays</h5>
            
              <small>Soundcloud.com/ak</small>
            
          </li>
        </ul>
        <a class='coolbar'>Show More</a>
      </div>
    </div>
    
    <div class='col-sm-4'>
      <div class='card'>
        <h4>Alicia Keys Fan engagement is up this week!"</h4>
        <p>102k people have seen your content and 29k fans like, shared or commented.</p>
        <h3 id="gauge-value" class="text-center">1,242</h3>
              <canvas width="339" height="200" id="foo"></canvas>
        <small class='time'>about 1 min ago</small>
        <a class='coolbar' id='cooldude'>Show More</a>
      </div>
    </div>
    
    <div class='col-sm-4'>
      <div class='card'>
        <h4>Just Ivy Top Youtube Videos</h4>
        <p>We are tracking 42 Just Ivy songs and videos on YouTube and Soundcloud. </p>
        <small class='time'>about 1 min ago</small>
        
        <ul class='videothumblist'>
          
          <li>
            <img class='videothumb' src='http://img.youtube.com/vi/HrKmDgk8Edg/3.jpg'>
            <h5 class=''>We Are Here (Official video..</h5>
            
              <small>2M Plays 2k Shares</small>
            
          </li>
          
             <li>
            <img class='videothumb' src='http://img.youtube.com/vi/hqFmULkxX90/3.jpg'>
            <h5 class=''>Bad Girl Takeover feta Dj K..</h5>
            
              <small>100k Plays 1k Shares</small>
            
          </li>
                    <li>
            <img class='videothumb' src='http://img.youtube.com/vi/hqFmULkxX90/3.jpg'>
            <h5 class=''>Light Me Up</h5>
            
              <small>1.8M play - 290 shares</small>
            
          </li>
          
        </ul>
        
        <a class='coolbar' id='cooldude'>Show More</a>
      </div>
    </div>
    <div class='col-sm-4'>
      <div class='card geo'>
        <h4>Where your fans are</h4>
        <p>Top 5 cities in the USA where fans are engaging with you online.</p>
        <small class='time'>about 1 min ago</small>
        <div class='mapwrap'>
          <iframe class='DRAGDIS_iframe' frameborder='0' height='150' src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3368.2641217754035!2d-88.22686!3d32.4120825!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8884541553945b47%3A0x7d1622eec6464dcc!2sIntercourse%2C+AL+36925!5e0!3m2!1sen!2sus!4v1414437784635' style='border:0' width='100%'></iframe>
        </div>
        <ol>
          <li>
            <h5>Houston, TX</h5>
            
              <small>1,473 fan actions - 208 fans</small>
            
          </li>
          <li>
            <h5>Chicago, IL</h5>
            
              <small>1,473 fan actions - 208 fans</small>
            
          </li>
          <li>
            <h5>Los Angeles, CA</h5>
            
              <small>1,108 fan actions</small>
            
          </li>
        </ol>
        <a class='coolbar'>Show More</a>
      </div>
    </div>
    
    <div class='col-md-4'>
      <div class='card error'>
        <h4>Uh Oh! we can't find seem to find Just Ivy on these networks</h4>
        <p>We found Just Ivy and we want to tap that ukranian ass.</p>
        <small class='time'>about 1 min ago</small>
       
        <ul>
          <li class='darbicon-rdio'>
            <h5>rdio - missing</h5>
              <small>streaming music service</small>
            
          </li>
          <li class='darbicon-sp'>
            <h5>spotify - missing</h5>
             <small>streaming music service</small>
            
          </li>
          
        </ul>
        <a class='coolbar'>Get me setup on these networks </a>
      </div>
    </div>
    
    <div class='col-md-4'>
      <div class='card tracking'>
        <h4>Just Ivy Music and videos are being tracked</h4>
        <p>We are tracking 40 Just Ivy songs and or videos to let you know when fans spike</p>
        <small class='time'>about 1 min ago</small>
       
        <ul>
          <li class='darbicon-yt'>
            <h5>34 videos</h5>
              <small>1M total views!</small>
            
          </li>
          <li class='darbicon-sc'>
            <h5>12 Songs</h5>
             <small>256K total plays</small>
            
          </li>
          
        </ul>
        <a class='coolbar'>Get me setup on these networks </a>
      </div>
    </div>
    
    
    <div class='col-sm-4'>
      <div class='card'>
        <h4>When your fans are online</h4>
        
        <div class="row times">
                <div class="center-block text-center time_one">
                  <h3>9:00</h3>
                  <p class="tiny">PM</p>
                </div>
                <div class="col-md-8 center-block text-center">
                  <div class="time_two pull-left">
                    <h4>5:00</h4>
                    <p class="tiny">PM</p>
                  </div>
                  <div class="time_three pull-right">
                    <h6>9:00</h6>
                    <p class="tiny">PM</p>
                  </div>
                </div>
              </div>
        
        <p>On average your Facebook gets the most engagement (likes,shares, comments) at the times.</p>
        
        <small class='time'>about 1 min ago</small>
        <a class='coolbar' id='cooldude'>Show More</a>
      </div>
    </div>
    
    <div class='col-sm-4'>
      <div class='card'>
        <h4>You have 1 new message</h4>
        <img>
        <small class='time'>about 1 min ago</small>
        <a class='coolbar' id='cooldude'>Show More</a>
      </div>
    </div>
    <div class='col-sm-4'>
      <div class='card'>
        <h4>Last Card</h4>
        <p>This is your recap yada ya, This is your recap yada yada da This is just a recap yada yada</p>
        
        
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on it">Get the App</button>
        
        <small class='time'>about 1 min ago</small>
        
        <a class='coolbar' id='cooldude'>Show More</a>
      </div>
    </div>
    
    
    
  </div>
</div>

mejla.markdown

mejla

A Pen by drawby on CodePen.

License.

script.js

$('[data-toggle="tooltip"]').tooltip({'placement': 'bottom'});

style.css

*{transition: all .5s ease-out;}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
padding-left: 20px;
padding-right: 20px;
}


.stats {padding-top:30px;
  padding-bottom:20px;
}

.stats h4 {margin-bottom:0px;}

body {
padding: 30px;
background-color: #EBECED;
font-family: "karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #9494A2;
-webkit-font-smoothing: antialiased;
}

p {font-size:16px;
font-weight:200;}

a{color:#646EF8;}

a:hover{color:#4444DD;}

ul h5, ol h5 {margin-bottom:1px;}

h1 {
  margin-bottom: 10px;
  color:#363942;
}

ul{
padding-left: 0px;
list-style: none;
padding-top: 0px;
margin-bottom:0px;
}

ul li {padding-left:0px;}

ol {margin-left:0px;
padding-left:20px;
margin-top:0px;
margin-bottom:0px;}

li {
padding-top: 18px;
padding-bottom: 18px;
padding-left: 15px;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
}

ol li:first-child{
  padding-top:30px;
}

ol li:last-child, ul li:last-child{
border-bottom:0px solid #F4F4F4;
}


ul.videothumblist li {
  padding-top:15px;
  padding-bottom:27px;
   
 
}

li:hover {

   border-top:1px solid #F4F4F4;
   border-bottom:1px solid #F4F4F4;
 
}

h4 {
  margin-top: 0px;
  color:#363942;
  font-size:20px;
}

h5 {
  margin-top: 0px;
  color:#363942;
  font-size:16px;
}

small {color:#D8D8DC;
font-size:90%;}

.time {
margin-bottom: 15px;
display: inline-block;
}

.head{margin-bottom:30px;
margin-bottom:50px;}

.main{margin-top:}

.darbicon-fb {
  padding-left:50px;
  background: url(http://www.redtapedesign.com/x/images/facebookc.png) no-repeat 0 0;
background-size:40px;
background-position:0px 14px;}

.darbicon-yt {
  padding-left:50px;
  background: url(http://www.redtapedesign.com/x/images/youtubec.png) no-repeat 0 0;
background-size:40px;
background-position:0px 14px;}

.darbicon-sc {
  padding-left:50px;
  background: url(http://www.redtapedesign.com/x/images/soundcloudc.png) no-repeat 0 0;
background-size:40px;
background-position:0px 14px;}

.darbicon-tw {
  padding-left:50px;
  background: url(http://www.redtapedesign.com/x/images/twitterc.png) no-repeat 0 0;
background-size:40px;
background-position:0px 14px;}

.darbicon-ig {
  padding-left:50px;
  background: url(http://www.redtapedesign.com/x/images/instagramc.png) no-repeat 0 0;
background-size:40px;
background-position:0px 14px;}

.darbicon-lfm {
  padding-left:50px;
  background: url(http://www.redtapedesign.com/x/images/lastfmc.png) no-repeat 0 0;
background-size:40px;
background-position:0px 14px;}

.darbicon-pd {
  padding-left:50px;
  background: url(http://www.redtapedesign.com/x/images/pandorac.png) no-repeat 0 0;
background-size:40px;
background-position:0px 14px;}

.darbicon-beats {
  padding-left:50px;
  background: url(http://www.redtapedesign.com/x/images/beatsc.png) no-repeat 0 0;
background-size:40px;
background-position:0px 14px;}

.darbicon-rdio {
  padding-left:50px;
  background: url(http://www.redtapedesign.com/x/images/rdioc.png) no-repeat 0 0;
background-size:40px;
background-position:0px 14px;}

.darbicon-sp {
  padding-left:50px;
  background: url(http://www.redtapedesign.com/x/images/spotifyc.png) no-repeat 0 0;
background-size:40px;
background-position:0px 14px;}

 
.card {
  background: white;
  padding: 25px;
  padding-top:22px;
  padding-bottom:0px;
  border-radius: 2px;
  margin-bottom: 40px;
  box-shadow:rgba(0, 0, 0, 0.089) 0px 0px 3px 0px;
  border-top: 5px solid #fff;
  opacity:1;
}

.card:hover{
  box-shadow:rgba(0, 0, 0, 0.16) 0px 0px 3px 0px;
  opacity:1;
}

.card.error {
border-top: 5px solid #F1387F;
}

.card.error:hover {
border-top: 5px solid #D61D71;
}

.card.highlite {
border-top: 5px solid #3AEE98;
}

.card.highlite:hover {
border-top: 5px solid #fff;
}

.card:hover li small, .card:hover .stats small  {color:#9494A2;}

.mapwrap{
 /* display:block; */

  margin-left:-25px;
  margin-right:-25px;
  margin-top:15px;
  background-color:#EBECED;
}

.artistpic{
  float:left; margin-right:20px;
  border-radius:35px;
  height:70px;
  width:70px;
  margin-top:18px;
  box-shadow:rgba(0, 0, 0, 0.5) 0px 0px 1px 0px;
}

.fanbox{
display:;
background:white;
min-height:200px;
margin-top:20px;

}

.fanpic {
float:left;
  width:25%;
}

.fanpic:hover {
   -webkit-filter: brightness(0.7);

}

.fanpic2 {
float:left;
  border-radius:25px;
  margin-right:25px;
  margin-bottom:20px;
  box-shadow:rgba(0, 0, 0, 0.5) 0px 0px 1px 0px;
}

.videothumb{
  width:65px;
  float:left;
  margin-right:15px;
  border-radius:3px;

}



.coolbar {
  border-radius: 0px 0px 2px 2px;
  width:auto;
  display:block;
  background: #fff;
  margin-left:-25px;
  margin-right:-25px;
  padding-left:25px;
  padding-top:20px;
  padding-bottom:20px;
  color:#646EF8;
  text-decoration:none;
  border-top:1px solid #F4F4F4;
  margin-top:;
  font-size:18px;
  
   
    transition: all .5s ease-out;  
}

.card:hover .coolbar {

background: #F7F8FA;
text-decoration: none;

  
}


.card:hover .coolbar:hover {
  background-position:-100px;
  background: #855de9;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg1NWRlOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjdhZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #855de9 0%, #4f7aff 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#855de9), color-stop(100%,#4f7aff));
background: -webkit-linear-gradient(top,  #855de9 0%,#4f7aff 100%);
background: -o-linear-gradient(top,  #855de9 0%,#4f7aff 100%);
background: -ms-linear-gradient(top,  #855de9 0%,#4f7aff 100%);
background: linear-gradient(to bottom,  #855de9 0%,#4f7aff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#855de9', endColorstr='#4f7aff',GradientType=0 );
color: #fff;
text-decoration: none;
}


.shareit {

padding: 15px;
padding-left:20px;
padding-right:20px;
margin-top: 20px;;

font-size:20px;
color: #fff;
text-decoration: none;
border-radius:4px;
-webkit-font-smoothing: antialiased;
  
background: linear-gradient(to bottom,  #AB5DE9,#4573FF); 
transition: background-position 0.5s;
  
background-size: auto 200%;
background-position: 0 60%;

}


.shareit:hover{
color: #fff;
background:  linear-gradient(to bottom, #AB5DE9,#4573FF);
background-size: auto 200%;
background-position: 0 30%;
  
transition: background-position 0.5s;

}


.times {
padding-bottom: 20px;
}

.time_one {
border: 2px solid #7BDC4E;
border-radius: 50%;
background: transparent;
width: 150px;
height: 150px;
margin-bottom: 15px;
margin-top: 10px;
}

.time_one p {
color: #7BDC4E;
padding: 0px;
}

.time_two {
background-color: #646EF8;
border-radius: 50%;
width: 100px;
height: 100px;
}

.time_two h4 {
color: #7BDC4E;
margin-bottom: 0px;
margin-top: 30%;
padding: 0px;
}

.time_two p {
color: #101779;
padding: 0px;
}


.time_three {
border: 1px solid #3ADB99;
border-radius: 50%;
background: transparent;
width: 60px;
height: 60px;
}

.time_one h3 {
color: #646EF8;
margin-top: 30%;
margin-bottom: 0px;
padding: 0px;
font-size: 45px;
font-weight: bold;
}

.time_three h6 {
color: #3ADB99;
margin-bottom: 0px;
padding: 0px;
margin-top: 15px;
  font-size:15px;
}

.time_three p {
padding: 0px;
}




.center-block {
display: block;
margin-left: auto;
margin-right: auto;
float: none;
}