diff --git a/website/static/css/custom.css b/website/static/css/custom.css
index 5c7f107d7..e1e6e2f57 100644
--- a/website/static/css/custom.css
+++ b/website/static/css/custom.css
@@ -233,3 +233,15 @@ a:visited {
fill: black;
stroke: black;
}
+
+/* course callout on home page */
+.course-callout.home-mid {
+ max-width: 900px;
+ margin: 1rem auto 2rem;
+}
+
+div[class*='announcementBar_'] {
+ /* Intentionally override the theme behavior,
+ so that the course banner image is effectively cropped*/
+ z-index: calc(var(--ifm-z-index-fixed) -1) !important;
+}
\ No newline at end of file
diff --git a/website/static/img/course-callout-mid.svg b/website/static/img/course-callout-mid.svg
new file mode 100644
index 000000000..9273e4d92
--- /dev/null
+++ b/website/static/img/course-callout-mid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/website/static/img/course-callout-narrow.svg b/website/static/img/course-callout-narrow.svg
new file mode 100644
index 000000000..4fe12ad40
--- /dev/null
+++ b/website/static/img/course-callout-narrow.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/website/static/img/course-callout-wide.svg b/website/static/img/course-callout-wide.svg
new file mode 100644
index 000000000..111ed9c15
--- /dev/null
+++ b/website/static/img/course-callout-wide.svg
@@ -0,0 +1 @@
+
\ No newline at end of file