Bootstrap Snippet Material Design User Cards using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container">
    <div class="row">
        <h1 class="text-center">
        Material Design User Cards
        </h1>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <div class="card">
                <canvas class="header-bg" width="250" height="70" id="header-blur"></canvas>
                <div class="avatar">
                    <img src="" alt="" />
                </div>
                <div class="content">
                    <h3>Front-end Developer </h3>
                     <p> I love Bootstrap. Work for Themeforest</p>
                    <p><button type="button" class="btn btn-link"><i class="fa fa-paper-plane"></i> Contact</button></p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card">
                <canvas class="header-bg" width="250" height="70" id="header-blur"></canvas>
                <div class="avatar">
                    <img src="" alt="" />
                </div>
                <div class="content">
                    <h3>Web Developer </h3>
                      <p> More description here</p>
                    <p><button type="button" class="btn btn-link"><i class="fa fa-paper-plane"></i> Contact</button></p>
                </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.src-image {
  display: none;
}
h1{margin-bottom:35px;}
.card {
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  border-radius: 0px;
  text-align: center;
  padding: 0;
  background-color: #284c79;
  color: rgb(136, 172, 217);
}
.content{ margin-top:15px;}
.content p{ color: #fff;}
.content h3{ color: #fff;}
.content .btn{ color: #fff;}
.card .header-bg {
  /* This stretches the canvas across the entire hero unit */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  border-bottom: 1px #FFF solid;
  /* This positions the canvas under the text */
  z-index: 1;
}
.card .avatar {
  position: relative;
  margin-top: 15px;
  z-index: 100;
}
.card .avatar img {
  width: 100px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
This Snippet is using a modified Stack Blur js lib for blurring the header images.
I could not use hosted images because Canvas cannot work with cross domain images. If you want to use hosted images make sure they are on the same domain.
Have fun!
*/
/*
StackBlur - a fast almost Gaussian Blur For Canvas
Version:     0.5
Author:     Mario Klingemann
Contact:    mario@quasimondo.com
Website:    http://www.quasimondo.com/StackBlurForCanvas
Twitter:    @quasimondo
In case you find this class useful - especially in commercial projects -
I am not totally unhappy for a small donation to my PayPal account
mario@quasimondo.de
Or support me on flattr: 
https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript
Copyright (c) 2010 Mario Klingemann
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Material Design User Cards"
Bootstrap 3.3.0 Snippet by mirchu

Related: See More

Questions / Comments:

"Material Design User Cards" Bootstrap 3.3.0 Snippet by mirchu

Related: See More

Questions / Comments:

"Material Design User Cards"
Bootstrap 3.3.0 Snippet by mirchu