<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Books of You</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f6d365; /* Warm background color for the body */
}
.footer {
background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
color: white;
padding: 20px 0;
text-align: center;
}
.footer a {
color: white;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
.footer .social-icons a {
margin: 0 10px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<!-- Main Content -->
<main class="py-5">
<div class="container">
<h1 class="text-center mb-4">Books of You</h1>
<!-- Book Cards can be added here -->
</div>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<!-- Column 1: Links -->
<div class="col-md-4">
<h5>Quick Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Column 2: Form -->
<div class="col-md-4">
<h5>Subscribe</h5>
<form>
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter your email">
</div>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
<!-- Column 3: Social Icons -->
<div class="col-md-4">
<h5>Follow Us</h5>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="mt-4">
<p>© 2024 Books of You. All rights reserved.</p>
<p>Designed by Your Name.</p>
</div>
</div>
</footer>
<!-- Font Awesome for Social Icons -->
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>