Blog post card 01

<!DOCTYPE html>
<html>
<head>
  <title>Blog post card 01 | NGLESSON</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Mezgani said">
  <meta name="copyright" content="NGLESSON">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
	<div class="row mt-5 mb-5">

    <div class="main">
      <div class="card">
      <div class="post">
        <img class="post-image" src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"/>
        
        <div class="post-content">
          <p class="post-header"> <a href="#">Lorem Ipsum</a> </p>
          <p class="post-text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, sunt asperiores quaerat doloremque commodi facere dolor. Velit pariatur, enim veniam!
          </p>
          <div class="author">
            <img src="https://assets.codepen.io/2642098/internal/avatars/users/default.png?format=auto&height=80&version=1543776877&width=80" alt="" class="author-image">
            <div class="author-content">
              <p class="author-name">Özgür Kurucan</p>
              <p class="date">Jun 20, 2020</p>
            </div>
          </div>
        </div>
        
      </div>
    </div>  
  
    <div class="card">
      <div class="post">
        <img  style="float:right; margin-right: 15px;"class="post-image" src="https://images.unsplash.com/photo-1574103188526-4faaa363a358?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"/>
        <div class="post-content">
          <p class="post-header"> <a href="#">Lorem Ipsum</a> </p>
          <p class="post-text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, sunt asperiores quaerat doloremque commodi facere dolor. Velit pariatur, enim veniam!
          </p>
          <div class="author">
            <img src="https://assets.codepen.io/2642098/internal/avatars/users/default.png?format=auto&height=80&version=1543776877&width=80" alt="" class="author-image">
            <div class="author-content">
              <p class="author-name">Özgür Kurucan</p>
              <p class="date">Jun 20, 2020</p>
            </div>
          </div>
        </div>
      </div>
    </div>  
    <div class="card">
      <div class="post">
        <img class="post-image" src="https://images.unsplash.com/photo-1558435186-d31d126391fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80"/>
        
        <div class="post-content">
          <p class="post-header"> <a href="#"> Lorem Ipsum</a> </p>
          <p class="post-text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, sunt asperiores quaerat doloremque commodi facere dolor. Velit pariatur, enim veniam!
          </p>
          <div class="author">
            <img src="https://assets.codepen.io/2642098/internal/avatars/users/default.png?format=auto&height=80&version=1543776877&width=80" alt="" class="author-image">
            <div class="author-content">
              <p class="author-name">Özgür Kurucan</p>
              <p class="date">Jun 20, 2020</p>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
  



</div>
</div>
</body>
</html>
body{
  background-color: #E4E6EB;
}
body::-webkit-scrollbar {
  display: none;
}
.main{
  margin-bottom: 50px;
}
.card{
  width: 525px;
  height: 250px;
 background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(242,245,248,1) 35%, rgba(236,236,237,1) 100%);
  box-shadow: 0 13px 15px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  margin-left: 5%;
  margin-top: 30px;
  transition: background-color .5s, box-shadow .5s, margin-left .5s;
}
.card:hover{
  margin-left: 8%;
  background-color: #ffff;
  box-shadow: 0 30px 30px rgba(0, 0, 0, 0.3);
  transition: background-color .5s, box-shadow .5s, margin-left .5s;
}
.post-image{
  width: 200px;
  height: 220px;
  margin-top: 15px;
  margin-left: 15px;
  border-radius: 10px 10px 10px;
  float: left;
}
.post-content{
  width: 55%;
  height: 250px;
  float: left;
  margin-left: 5px;
  overflow: hidden;
}
a:link{
  font-size: 28px;
  font-family: 'Roboto', sans-serif;
  color: #3B3C3F;
  text-decoration: none;
}
.post-header{
  font-size: 28px;
  font-family: 'Roboto', sans-serif;
  margin-top: 15px;
  color: #3B3C3F;
  margin-left: 10px;
  text-align: center;
}
.post-text{
  font-size: 15px;
  padding-left: 20px;
  color: #768CA4;
  font-family: 'Roboto', sans-serif;
  
}
.author{
  widt: 100%;
  height: 60px;
  background-color: #F2F5F8;
  margin-left: 20px;
  margin-top: 5px;
  border-radius: 10px;
  
}
.author-content{
  width: 60%;
  height: 60px;
  margin-left: 10px;
  
  float: left;
}
.author-image{
  width: 50px;
  height: 50px;
  border-radius: 100%;
  float: left;
  margin-left: 10px;
  margin-top: 5px;
}
.author-name{
  font-size: 20px;
  color: #3B3C3F;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  margin-top: 10px;
  padding-left: 10px;
}
.date{
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  margin-top: -15px;
  padding-left: 10px;
}

                                    
input radio checkbox b4 style

input radio checkbox b4 style

Timeline style05

Timeline style05

Social Media Icons

Social Media Icons

Menu aside style01 slide out

Menu aside style01 slide out

Manual Slideshow

Manual Slideshow

Input range slider HTML style02

Input range slider HTML style02

Image hover Flip Flap Style

Image hover Flip Flap Style

Elastic Content Slider

Elastic Content Slider

Dropdown right aligned B4

Dropdown right aligned B4

Css Page grid layout

Css Page grid layout

Create icon animate with svg

Create icon animate with svg

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01