Skip to content

Instantly share code, notes, and snippets.

@shivkumarganesh

shivkumarganesh/Blocker-(FlatUI-Notification).markdown

Created July 7, 2014 13:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shivkumarganesh/05136d22b582a0dc8558 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shivkumarganesh/05136d22b582a0dc8558 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Shiv Kumar Ganesh.
Raw
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.

Raw
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>
Raw
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment