<div class="outer">
  <div class="header">
    <h1>Frontend</h1>
  </div>
  <div class="title">
    <img src="https://lh3.googleusercontent.com/a-/AOh14Ggpf94orcxpx1uax8j8RNl8CBZsxKQxOyp3R8YhgQ=s96-c-rg-br100" >
    <h3>Front End Development</h3>
  </div>
  <div class="description">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  </div>
  <div class="footer">
    <span>
      <b>Price:</b> &#36; 29
    </span>
    <span>
      <span>Enroll Now &#8594;</span>
    </span>
  </div>
</div> 
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
  margin:0;
  padding:0;
  font-family: 'Montserrat', sans-serif;
  color: #000;
}
.outer{
  width:450px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 15px #efefef;
  transition: 0.5s;
}
.header{
  background: #d62828;
  positin:relative;
}
.header h1{
  font-size:32px;
  text-align:center;
  padding:50px;
  color:#fff;
}

.title{
  border-bottom:1px solid #eee;
}
.title h3{
  padding:20px;
  padding-top:50px;
}
.title img{
  width:50px;
  height:50px;
  float:left;
  padding-left:20px;
  margin-top: -25px;
}

.description p{
  padding: 50px 20px;
}

.footer{
  border-top:1px solid #eee;
}
.footer span{
  padding:20px;
  display:inline-block;
  color: #d62828;
}
.footer span:first-child{
  font-weight: 500;
}
.footer span:last-child{
  font-weight: 500;
  float:right;
  cursor: pointer;
}
.footer span:last-child span{
  border:1px solid #d62828;
  padding: 10px;
  transition: 0.3s;
}
.footer span:last-child span:hover{
  background: #d62828;
  color:#fff;
}

.outer:hover{
  box-shadow:0 0 50px #aaa;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.