web page with Bootstrap Framework

PHOTO EMBED

Thu Nov 21 2024 17:58:36 GMT+0000 (Coordinated Universal Time)

Saved by @coding1 

HTML 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Responsive Web Page with Bootstrap</title> 
<link 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
<link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
<header class="bg-success text-white text-center py-4"> 
<h1>My Awesome Web Page</h1> 
</header> 
<main class="container my-5"> 
<section class="row"> 
<div class="col-lg-4 col-md-6 mb-4"> 
<div class="card grid-item"> 
<div class="card-body"> 
<h5 class="card-title">Item 1</h5> 
</div> 
</div> 
</div> 
<div class="col-lg-4 col-md-6 mb-4"> 
<div class="card grid-item"> 
<div class="card-body"> 
rel="stylesheet" 
                        <h5 class="card-title">Item 2</h5> 
                    </div> 
                </div> 
            </div> 
            <div class="col-lg-4 col-md-6 mb-4"> 
                <div class="card grid-item"> 
                    <div class="card-body"> 
                        <h5 class="card-title">Item 3</h5> 
                    </div> 
                </div> 
            </div> 
            <div class="col-lg-4 col-md-6 mb-4"> 
                <div class="card grid-item"> 
                    <div class="card-body"> 
                        <h5 class="card-title">Item 4</h5> 
                    </div> 
                </div> 
            </div> 
            <div class="col-lg-4 col-md-6 mb-4"> 
                <div class="card grid-item"> 
                    <div class="card-body"> 
                        <h5 class="card-title">Item 5</h5> 
                    </div> 
                </div> 
            </div> 
</section> 
</main> 
<footer class="bg-dark text-white text-center py-3"> 
<p>Footer Content</p> 
</footer> 
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> 
<script 
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> 
</body> 
</html> 
---
CSS 
.grid-item { 
background-color: #ffcc00; 
transition: transform 0.3s ease, background-color 0.3s ease; 
} 
.grid-item:hover { 
transform: scale(1.05); 
background-color: #ffd700; 
}
content_copyCOPY