<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 ---------->
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400" rel="stylesheet">
<link src="https://use.fontawesome.com/releases/v5.3.1/css/all.css"></script>
</head>
<div class="card">
<div class="card-circle">
<i class="fab fa-html5 fa-4x"></i>
</div>
<div class="text-content">
<span class=card-title><strong>HTML5</strong></span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
</div>
<div class="card">
<div class="card-circle">
<i class="fab fa-css3 fa-4x"></i>
</div>
<div class="text-content">
<span class=card-title><strong>CSS3</strong></span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
</div>
<div class="card">
<div class="card-circle">
<i class="fas fa-code fa-4x"></i>
</div>
<div class="text-content">
<span class=card-title><strong>JS</strong></span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
</div>
.card:hover{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.card-circle{
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
border: 2px solid #e0e0e0;
border-radius: 50%;
margin-bottom: 10px;
padding: 20px;
}
.text-content{
font-family: 'Roboto', sans-serif;
padding-top: 20px;
}
.card-title{
font-size: 24px;
font-weight: 500;
line-height: 48px;
}
p{
font-size: 15px;
font-weight: 400;
line-height: 30px;
}
i{
color: #2196F3;
}
.fa-css3{
color: #fff;
}
.card:nth-child(2){
background-color: #ff5252;
color: #fff;
}
.card{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 400px;
height: auto;
position: relative;
border-radius: 2px;
background-color:#fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
text-align: center;
margin: 20px;
padding: 20px;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
body{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
