Bootstrap Snippet CSS Card Style Design using HTML CSS

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" crossorigin="anonymous">
<div class="container">
    <h2 class="text-center">Card Style Design - By Techhowdy(demonguru18)</h2>
    <br>
<div class="card-container">
    <div class="custom-card">
        <div class="card-img-box">
            <img src="http://www.women-speaker-foundation.de/dokumentablage/P1759/001759_profil.jpg" />
        </div>
        <div class="card-content">
            <h2>Michelle Doe<br><span>Apple Inc - ISR</span></h2>
            <p>
                I am a BMW fan and I love the fantastic feel and drive of my new X1 2018.
                The sales experience was amazing. See Techhowdy at Cardealer BMW
            </p>
            <ul>
                <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
                <li><a href="#"><i class="fab fa-google-plus"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="custom-card">
        <div class="card-img-box">
            <img src="https://amp.businessinsider.com/images/5899ffcf6e09a897008b5c04-750-750.jpg" />
        </div>
        <div class="card-content">
            <h2>John Smith<br><span>BD Bank - DRM</span></h2>
            <p>
                I had Not purchased a new vehicle since the last 20 years.
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
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
    font-family: 'Montserrat', sans-serif;
}
.card-container {
    width: 1000px;
    margin: 15px auto 0;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 440px;
    grid-gap: 40px;
}
    .card-container .custom-card {
        position:relative;
        background: #000;
        overflow: hidden;
        border-radius: 10px;
        transition: .5s;
        height:350px;
    }
    .card-container .custom-card:hover {
        transform: translateY(-20px);
        box-shadow: 0 20px 20px rgba(0,0,0,0.2);
    }
        .card-container .custom-card .card-img-box {
            position: absolute;
            top: 0;
            left: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"CSS Card Style Design "
Bootstrap 4.1.1 Snippet by demonguru18

Related: See More

Questions / Comments:

"CSS Card Style Design " Bootstrap 4.1.1 Snippet by demonguru18

Related: See More

Questions / Comments:

"CSS Card Style Design "
Bootstrap 4.1.1 Snippet by demonguru18