Texte Block Posts Style01

<!DOCTYPE html>
<html>
<head>
  <title>Texte Block Posts Style01 | 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="max-w-screen-xl mx-auto p-5 sm:p-10 md:p-16 relative">
  <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-10">
    <div class="flex flex-col justify-between border-b pb-5">
      <a href="#" class="text-gray-900 font-medium hover:text-indigo-600">Cristiano Ronaldo of Juventus FC looks dejected during the...</a>
    <div class="flex items-start justify-between mt-3">
      <div class="text-sm w-2/3">
        <p class="text-gray-700">Cristiano Ronaldo of Juventus FC looks dejected during the...</p>
        <p class="text-gray-600 text-xs">Aug 18</p>
      </div>
      <a href="#" class="inline-block ml-2"><div class="w-20 h-20 bg-cover bg-center bg-img" ></div></a>
    </div>
  </div>
    <div class="flex flex-col justify-between border-b pb-5">
      <a href="#" class="text-gray-900 font-medium hover:text-indigo-600">Bests of Leonel Messi (Videos, Images & Quotes)</a>
    <div class="flex items-start justify-between mt-3">
      <div class="text-sm w-2/3">
        <p class="text-gray-700">Cristiano Ronaldo of Juventus FC looks dejected during the...</p>
        <p class="text-gray-600 text-xs">Aug 18</p>
      </div>
      <a href="#" class="inline-block ml-2"><div class="w-20 h-20 bg-cover bg-center bg-img" ></div></a>
    </div>
  </div>
    <div class="flex flex-col justify-between border-b pb-5">
      <a href="#" class="text-gray-900 font-medium hover:text-indigo-600">Juventus v Olympique Lyon</a>
    <div class="flex items-start justify-between mt-3">
      <div class="text-sm w-2/3">
        <p class="text-gray-700">Cristiano Ronaldo of Juventus FC looks dejected during the...</p>
        <p class="text-gray-600 text-xs">Aug 18</p>
      </div>
      <a href="#" class="inline-block ml-2"><div class="w-20 h-20 bg-cover bg-center bg-img" ></div></a>
    </div>
  </div>
    <div class="flex flex-col justify-between pb-5">
      <a href="#" class="text-gray-900 font-medium hover:text-indigo-600">Bests of Leonel Messi (Videos, Images & Quotes)</a>
    <div class="flex items-start justify-between mt-3">
      <div class="text-sm w-2/3">
        <p class="text-gray-700">Cristiano Ronaldo of Juventus FC looks dejected during the...</p>
        <p class="text-gray-600 text-xs">Aug 18</p>
      </div>
      <a href="#" class="inline-block ml-2"><div class="w-20 h-20 bg-cover bg-center bg-img" ></div></a>
    </div>
  </div>
    <div class="flex flex-col justify-between pb-5">
      <a href="#" class="text-gray-900 font-medium hover:text-indigo-600">Juventus v Olympique Lyon Best Ronaldo Images</a>
    <div class="flex items-start justify-between mt-3">
      <div class="text-sm w-2/3">
        <p class="text-gray-700">Cristiano Ronaldo of Juventus FC looks dejected during the...</p>
        <p class="text-gray-600 text-xs">Aug 18</p>
      </div>
      <a href="#" class="inline-block ml-2"><div class="w-20 h-20 bg-cover bg-center bg-img" ></div></a>
    </div>
  </div>
    <div class="flex flex-col justify-between pb-5">
      <a href="#" class="text-gray-900 font-medium hover:text-indigo-600">Cristiano Ronaldo of Juventus FC looks dejected during the...</a>
    <div class="flex items-start justify-between mt-3">
      <div class="text-sm w-2/3">
        <p class="text-gray-700">Cristiano Ronaldo of Juventus FC looks dejected during the...</p>
        <p class="text-gray-600 text-xs">Aug 18</p>
      </div>
      <a href="#" class="inline-block ml-2"><div class="w-20 h-20 bg-cover bg-center bg-img" ></div></a>
    </div>
  </div>
  </div>
</div>
</div>
</div>
</body>
</html>
.bg-img{
  background: url(http://placeimg.com/640/360/any) center center;
  width: 100%;
  height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

                                    
texte animate effects style 01

texte animate effects style 01

Timeline style08

Timeline style08

Timeline style02

Timeline style02

Responsive image grid

Responsive image grid

Radio button style

Radio button style

Planète animée style01

Planète animée style01

Organization Chart

Organization Chart

Input file style02

Input file style02

Css Page grid layout

Css Page grid layout

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Blog post card 01

Blog post card 01

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01