<!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>
.card-img-top {
height: 250px;
object-fit: cover;
}
.bg-crazy {
background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}
</style>
</head>
<body class="bg-crazy text-white">
<!-- Header -->
<header class="bg-dark py-4">
<div class="container text-center">
<h1 class="display-4">Books of You</h1>
<p class="lead">Discover the best books to read</p>
</div>
</header>
<!-- Main Content -->
<main class="py-5">
<div class="container">
<div class="row">
<!-- Book Card 1 -->
<div class="col-md-4 mb-4">
<div class="card shadow-sm">
<img src="https://picsum.photos/id/1/400/250" class="card-img-top" alt="Book Cover 1">
<div class="card-body">
<h5 class="card-title">Book Title 1</h5>
<p class="card-text">This is a short description of the book. It gives a brief overview of what the book is about.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<!-- Book Card 2 -->
<div class="col-md-4 mb-4">
<div class="card shadow-sm">
<img src="https://picsum.photos/id/2/400/250" class="card-img-top" alt="Book Cover 2">
<div class="card-body">
<h5 class="card-title">Book Title 2</h5>
<p class="card-text">This is a short description of the book. It gives a brief overview of what the book is about.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<!-- Book Card 3 -->
<div class="col-md-4 mb-4">
<div class="card shadow-sm">
<img src="https://picsum.photos/id/3/400/250" class="card-img-top" alt="Book Cover 3">
<div class="card-body">
<h5 class="card-title">Book Title 3</h5>
<p class="card-text">This is a short description of the book. It gives a brief overview of what the book is about.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<!-- PDF Book Card -->
<div class="col-md-4 mb-4">
<div class="card shadow-sm">
<img src="https://picsum.photos/id/4/400/250" class="card-img-top" alt="PDF Cover">
<div class="card-body">
<h5 class="card-title">PDF Book Title</h5>
<p class="card-text">This is a short description of the PDF book. It gives a brief overview of what the book is about.</p>
<a href="path/to/your/pdf-file.pdf" class="btn btn-primary" target="_blank">Read PDF</a>
</div>
</div>
</div>
<!-- Additional Book Cards -->
<!-- Repeat the card structure as needed for more books -->
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-dark text-white py-4">
<div class="container text-center">
<p>© 2024 Books of You. All rights reserved.</p>
<p>Designed by Your Name.</p>
</div>
</footer>
<!-- 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>