open_in_new content_copy 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Advanced Flexbox with Animations</title> 
<style> 
* { 
margin: 0; 
padding: 0; 
box-sizing: border-box; 
} 
body { 
font-family: Arial, sans-serif; 
background: linear-gradient(to right, #ff7e5f, #feb47b); 
color: #333; 
      display: flex; 
      justify-content: center; 
      align-items: center; 
      height: 100vh; 
      overflow: hidden; 
    } 
 
    .container { 
      display: flex; 
      flex-wrap: wrap; 
      justify-content: space-around; 
      align-items: center; 
      gap: 20px; 
      padding: 20px; 
      max-width: 900px; 
      background-color: rgba(255, 255, 255, 0.2); 
      border-radius: 15px; 
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); 
      animation: fadeIn 1.5s ease-in-out; 
    } 
 
    .card { 
      background: #fff; 
      border-radius: 10px; 
      padding: 20px; 
      text-align: center; 
      flex: 1 1 200px; 
      max-width: 300px; 
      min-width: 200px; 
      transition: transform 0.3s ease, box-shadow 0.3s ease; 
    } 
 
    .card:hover { 
      transform: scale(1.1); 
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); 
    } 
 
    .card h3 { 
      font-size: 1.5rem; 
      margin-bottom: 10px; 
    } 
 
    .card p { 
      font-size: 1rem; 
      color: #666; 
    } 
 
    @keyframes fadeIn { 
      from { 
        opacity: 0; 
        transform: translateY(50px); 
      } 
      to { 
        opacity: 1; 
        transform: translateY(0); 
      } 
    } 
  </style> 
</head> 
<body> 
  <div class="container"> 
    <div class="card"> 
      <h3>Card 1</h3> 
      <p>Some interesting text goes here.</p> 
    </div> 
    <div class="card"> 
      <h3>Card 2</h3> 
      <p>More details about something awesome.</p> 
    </div> 
    <div class="card"> 
<h3>Card 3</h3> 
<p>Another piece of useful information.</p> 
</div> 
<div class="card"> 
<h3>Card 4</h3> 
<p>Additional content for your interest.</p> 
</div> 
</div> 
</body> 
</html>