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

                                    
creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

Page 404 exemple 01

Page 404 exemple 01

Nav Menu style01

Nav Menu style01

Manual Slideshow

Manual Slideshow

Lightbox gallery style01

Lightbox gallery style01

Input range slider HTML style02

Input range slider HTML style02

Input file style02

Input file style02

Image hover 04

Image hover 04

Bootstrap4 datepicker

Bootstrap4 datepicker

Background overlay

Background overlay

Asidebar Menu Style01

Asidebar Menu Style01

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire