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

                                    
Cards box with title

Cards box with title

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Convertir une div en image

Convertir une div en image

Form Création de compte style animée

Form Création de compte style animée

Form Step With B4 Style01

Form Step With B4 Style01

Geocoded Locations

Geocoded Locations

Image hover Inspiration styles

Image hover Inspiration styles

Scroll to div ID

Scroll to div ID

Vers le haut

Vers le haut

input file récupérer le nom du fichier

input file récupérer le nom du fichier

texte animate css

texte animate css

toggle switch style02

toggle switch style02