|
6 | 6 | <title>{{ course.title }}</title> |
7 | 7 | <!-- Bootstrap CSS --> |
8 | 8 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> |
| 9 | + <!-- Font Awesome CSS --> |
| 10 | + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" /> |
9 | 11 | <style> |
10 | 12 | /* Custom styles for the card */ |
11 | 13 | .custom-card { |
|
43 | 45 | .btn-custom:hover { |
44 | 46 | background-color: #218838; /* Button hover color */ |
45 | 47 | } |
| 48 | + |
| 49 | + /* Custom style for the courses heading */ |
| 50 | + .courses-heading { |
| 51 | + display: flex; /* Use flexbox for alignment */ |
| 52 | + align-items: center; /* Center items vertically */ |
| 53 | + justify-content: center; /* Center items horizontally */ |
| 54 | + font-size: 2rem; /* Font size for heading */ |
| 55 | + margin-bottom: 20px; /* Space below heading */ |
| 56 | + color: #333; /* Heading text color */ |
| 57 | + } |
| 58 | + |
| 59 | + .courses-heading i { |
| 60 | + margin-right: 10px; /* Space between icon and text */ |
| 61 | + color: #007bff; /* Icon color */ |
| 62 | + } |
46 | 63 | </style> |
47 | 64 | </head> |
48 | 65 | <body> |
49 | 66 |
|
50 | 67 | <div class="container mt-5"> |
51 | | - <h1 class="text-center mb-4">Courses</h1> |
| 68 | + <h1 class="courses-heading"> |
| 69 | + <i class="fas fa-book-open"></i> <!-- Book icon --> |
| 70 | + Courses |
| 71 | + </h1> |
52 | 72 | <hr> |
53 | 73 | <div class="row"> |
54 | 74 | {% for course in courses %} |
55 | 75 | <div class="col-md-3 mb-4"> |
56 | | - <div class="card h-100"> |
| 76 | + <div class="card h-100 custom-card"> |
57 | 77 | <img src="{{ course.image }}" class="card-img-top course-image" alt="{{ course.title }}" style="height: 150px;"> |
58 | 78 | <div class="card-body"> |
59 | 79 | <h2 class="card-title">{{ course.title }}</h2> |
60 | 80 | <p class="card-text">{{ course.description }}</p> |
61 | 81 | <p class="card-price">Price: <strong>${{ course.price }}</strong></p> |
62 | | - <a href="{% url 'course_detail' course.id %}" class="btn btn-success">Buy Course</a> |
| 82 | + <a href="{% url 'course_detail' course.id %}" class="btn btn-custom"> |
| 83 | + <i class="fas fa-shopping-cart"></i> Buy Course |
| 84 | + </a> |
63 | 85 | </div> |
64 | 86 | </div> |
65 | 87 | </div> |
|
0 commit comments