Bootstrap Snippet Header Cards using HTML CSS Bootstrap

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="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css" rel="stylesheet">
<div class="container">
    <div class="row">
 <div class="jumbotron">
            <h1 class="blue" style="color:#2196F3;">Material Design Like Cards </h1>
            <h3 class="blue">With Headers</h3>
          
        </div>
    </div>
          <!--small cards-->
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-content">
                        <div class="card-header-blue">
                           <h1 class="card-heading">Card Header Blue</h1>
                        </div>
                        <div class="card-body">
                          <p class="card-p">
                                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
                                or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there
                                isn't anything embarrassing hidden in the middle of text.
                                
                            </p>
                        </div>
                        
                        <nav class="nav-tabs">
                            <ul class="nav nav-pills pull-left">
                                <li class="card-action"><a href="#">Link</a></li>
                                <li class="card-action"><a href="#">Link</a></li>
                                <li class="card-action"><a href="#">Link</a></li>
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
            /*--------------------------------------*/
            /*     jpolly168 AeVale/OneSixEight     */
            /*     XblackvelvetX                    */
            /*     Main Elements,,,,,,,             */
            /*     #wah comes int waves....wahhhhhh.*/
            /*--------------------------------------*/
            
    @import url(http://fonts.googleapis.com/css?family=Roboto:400,500,900);
body {
      background-color: #f44336;
                transition: background-color 300ms;
                font-family: 'Roboto', sans-serif;   
                background:url('http://40.media.tumblr.com/6e138b33e7e2fadf3ff47d02fd28d74a/tumblr_nscw8gfVlY1uc3lv1o1_1280.jpg');
                background-repeat:none;
                background-size:cover;
}
.avatar {
                width: 200px;
                height: 200px;
                margin-left: 2em;
                margin-top:2em;
                border-radius: 200px;
                float:center;
}
.jumbotron{
    background-color:#ffffff;
    border:1px solid #AAA;
    border-bottom:3px solid #BBB;
    padding:0px;
    margin-top:4em;
    overflow:hidden;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    font-family: 'Roboto', sans-serif;
    -webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Header Cards"
Bootstrap 3.3.0 Snippet by jpolly168

Related: See More

Questions / Comments:

"Header Cards" Bootstrap 3.3.0 Snippet by jpolly168

Related: See More

Questions / Comments:

"Header Cards"
Bootstrap 3.3.0 Snippet by jpolly168