A Pen by Shiv Kumar Ganesh.

Blocker-(FlatUI-Notification).markdown

Blocker-(FlatUI Notification)

This project contains as many Block/Flat UI widgets as Possible so that anyone can utilise it to any extent. It helps in making simple widgets.

A Pen by Shiv Kumar Ganesh on CodePen.

License.

index.html

 <!--Card with Media-->	
<div class="media block-update-card">
  <a class="pull-left" href="#">
    <img class="media-object update-card-MDimentions" src="http://3.bp.blogspot.com/-IbEOTNtCMyU/TfCAdHaAxEI/AAAAAAAAA8U/EATib38SSAM/s320/joe-mcelderry.jpg" alt="...">
  </a>
  <div class="media-body update-card-body">
    <h4 class="media-heading">Manning Hilton</h4>
    <p>This is the body content of this media.This can be 
      used as an update panel</p>
  </div>
 </div>
  
  <!--Simple Card Layout-->
  <div class="block-update-card">
    <div class="update-card-body">
      <h4>Vinothbabu K</h4>
      <p>This is me. I am a Good Boy.This is the body content of this media.This can be 
      used as an update panel.</p>
    </div>
  </div>
  
  
  <!--Wanna Call Someone :P -->
  <div class="media block-update-card">
  <a class="pull-left" href="#">
    <img class="media-object update-card-MDimentions" src="http://3.bp.blogspot.com/-IbEOTNtCMyU/TfCAdHaAxEI/AAAAAAAAA8U/EATib38SSAM/s320/joe-mcelderry.jpg" alt="...">
  </a>
  <div class="media-body update-card-body">
    <h4 class="media-heading">Manning Hilton</h4>
    <div class="btn-toolbar card-body-social" role="toolbar">
      <div class="btn-group fa fa-github-alt git"></div>
      <div class="btn-group linkedin fa fa-linkedin-square"></div>
      <div class="btn-group twitter fa fa-twitter"></div>
      <div class="btn-group facebook fa fa-facebook"></div>
      <div class="btn-group google-plus fa fa-google-plus"></div>
    </div>
  </div>
  </div>
  
  <!--Simple Card with Status Highlight-->
  
  <div class="block-update-card status">
    <div class="h-status">
     </div>
    <div class="update-card-body">
      <div class="update-card-body">
      <h4>Vinothbabu K</h4>
      <p>This is me. I am a Good Boy.This is the body content of this media.This can be 
      used as an update panel.</p>
    </div>
    </div>
  </div>
    
   
   <!--Simple Card with Status Highlight-->
  
  <div class="block-update-card">
    <div class="v-status">
     </div>
    <div class="update-card-body">
      <div class="update-card-body">
      <h4>Vinothbabu K</h4>
      <p>This is me. I am a Good Boy.This is the body content of this media.This can be 
      used as an update panel.</p>
    </div>
    </div>
  </div>
    
  <!--Card with basic actions-->
    
  <div class="block-update-card status">
    <div class="update-card-body">
      <div class="update-card-body">
      <h4>Vinothbabu K</h4>
      <p>This is me. I am a Good Boy.This is the body content of this media.This can be 
      used as an update panel.</p>
    </div>
    </div>
    <div class="card-action-pellet btn-toolbar pull-right" role="toolbar">
  <div class="btn-group fa fa-mail-reply"></div>
  <div class="btn-group fa fa-map-marker"></div>
  <div class="btn-group fa fa-magic"></div>
  <div class="btn-group fa fa-photo"></div>
</div>
</div>
    <!--Notification with a Clickable bottom-->
    <div class="block-update-card status">
    <div class="update-card-body">
      <div class="update-card-body">
      <h4>Vinothbabu K</h4>
      <p>This is me. I am a Good Boy.This is the body content of this media.This can be 
      used as an update panel.</p>
    </div>
    </div>
        <p class="text-center card-bottom-status">
        	UPDATE STATUS
        </p>
</div>
  
  
  <!--Card For Music Channel-->
   <div class="block-update-card">
    <div class="v-status">
     </div>
    <div class="update-card-body">
      <div class="update-card-body">
      <h4>Vinothbabu K</h4>
      <p>This is me. I am a Good Boy.This is the body content of this media.This can be 
      used as an update panel.</p>
    </div>
    </div>
  </div>
  
  
  
  
    

style.scss

.block-update-card{
  height:100%;
  border:1px #FFFFFF solid;
  width:380px;
  float:left;
  margin-left:10px;
  margin-top:0;
  padding:0;
  box-shadow:1px 1px 8px rgb(216, 216, 216);
  background-color:#FFFFFF;
  .h-status{
    width:100%;
    height:7px;
    background: repeating-linear-gradient(
      45deg,
      #606dbc,
      #606dbc 10px,
      #465298 10px,
      #465298 20px
    );
  }
  .v-status{
    width:5px;
    height:80px;
    float:left;
    background: repeating-linear-gradient(
      45deg,
      #606dbc,
      #606dbc 10px,
      #465298 10px,
      #465298 20px
    );
  }
  .update-card-MDimentions{
    width:80px;
    height:80px;
  }
  .update-card-body{
    margin-top:10px;
    margin-left:5px;
    h4{
      color:#737373;
      font-weight:bold;
    	font-size:13px;
    }
    p{
      color:#737373;
      font-size:12px;
    } 
  }
  .card-action-pellet{
    padding:5px;
    div{
      margin-right:10px;
      font-size:15px;
      cursor:pointer;
      color:#dddddd;
      &:hover{
        color:#999999;
      }
    }
  }
  .card-bottom-status{
    color:#a9a9aa;
    font-weight:bold;
    font-size:14px;
    border-top:#e0e0e0 1px solid;
    padding-top:5px;
    margin:0px;
    &:hover{
      background-color:#dd4b39;
      color:#FFFFFF;
      cursor:pointer;
    }
  }
}

/*
Creating a block for social media buttons
*/
.card-body-social{
    font-size:30px;
    margin-top:10px;
    .git{
      color:black;
      cursor:pointer;
      margin-left:10px;
    }
    .twitter{
      color:#19C4FF;
      cursor:pointer;
      margin-left:10px;
    }
    .google-plus{
      color:#DD4B39;
      cursor:pointer;
      margin-left:10px;
    }
    .facebook{
      color:#49649F;
      cursor:pointer;
      margin-left:10px;
    }
    .linkedin{
      color:#007BB6;
      cursor:pointer;
      margin-left:10px;
    }
  }