Merge pull request #6 from neo4j-documentation/featured-courses

Author: ggrossetie

src/css/training.css

@@ -11,6 +11,62 @@
   background-color: var(--colour-training);
 }
 
+/* Landing */
+.training.landing .discrete > h3 {
+  display: none;
+}
+
+.training.landing .featured-courses {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, auto));
+}
+
+.training.landing .featured-courses > .openblock {
+  padding: 1rem;
+  display: grid;
+}
+
+.training.landing .featured-courses > .openblock > .content {
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.17);
+  border-radius: 5px;
+  display: grid;
+  grid-template-rows: 0.1fr auto 4rem;
+  background: #fff;
+}
+
+.training.landing .featured-courses > .openblock > .content > .imageblock {
+  margin: 0;
+}
+
+.training.landing .featured-courses > .openblock > .content > .paragraph {
+  padding: 0.5rem 1rem 0;
+  line-height: 1.4;
+}
+
+.training.landing .course-label {
+  background: linear-gradient(45deg, var(--colour-blue-400), var(--colour-purple-400));
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 5px;
+  color: #fff;
+  font-weight: 700;
+}
+
+.training.landing .featured-courses .course-duration::before {
+  display: inline-block;
+  content: " ";
+  background-image: url(../img/duration.svg);
+  height: 1rem;
+  width: 1rem;
+  margin-right: 0.25rem;
+}
+
+.training.landing .featured-courses .course-duration {
+  display: flex;
+  align-items: center;
+  margin-top: 0.65rem;
+}
+
 /* Home */
 .training-home .doc .find-training {
   text-align: center;