css: Grid,Flexbox

PHOTO

Thu Nov 21 2024 17:57:07 GMT+0000 (Coordinated Universal Time)

HTML 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS Grid and Flexbox Example</title> 
<link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
<header class="header"> 
<h1>My Awesome Web Page</h1> 
</header> 
<main class="main-content"> 
<section class="grid-container"> 
<div class="grid-item">Item 1</div> 
<div class="grid-item">Item 2</div> 
<div class="grid-item">Item 3</div> 
<div class="grid-item">Item 4</div> 
<div class="grid-item">Item 5</div> 
</section> 
</main> 
<footer class="footer"> 
<p>Footer Content</p> 
</footer> 
</body> 
</html> 
---
CSS 
* { 
} 
box-sizing: border-box; 
margin: 0; 
padding: 0; 
body { 
font-family: Arial, sans-serif; 
display: flex; 
flex-direction: column; 
height: 100vh; 
} 
.header { 
background-color: #4CAF50; 
color: white; 
text-align: center; 
padding: 20px; 
} 
.main-content { 
flex: 1; 
display: flex; 
justify-content: center; 
align-items: center; 
background-color: #f4f4f4; 
} 
.grid-container { 
display: grid; 
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
gap: 15px; 
padding: 20px; 
} 
.grid-item { 
background-color: #ffcc00; 
padding: 20px; 
border-radius: 5px; 
text-align: center; 
transition: transform 0.3s ease, background-color 0.3s ease; 
} 
.grid-item:hover { 
transform: scale(1.1); 
background-color: #ffd700; 
} 
.footer { 
background-color: #333; 
color: white; 
text-align: center; 
padding: 10px; 
} 
@keyframes fadeIn { 
from { 
opacity: 0; 
} 
to { 
} 
} 
opacity: 1; 
.header, .footer { 
animation: fadeIn 1s ease-in; 
}

COPY