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;
}

                                    
3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery

Animation 3d social icones avec css3

Animation 3d social icones avec css3

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Elastic Content Slider

Elastic Content Slider

Loading Style snake

Loading Style snake

Loading style book loader

Loading style book loader

Nav Menu style02

Nav Menu style02

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Table responsive avec css native

Table responsive avec css native

Texte Block Posts Style01

Texte Block Posts Style01

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Vidéo background en html5 style02

Vidéo background en html5 style02