Add Summit 2024 banner

assets/css/custom.css

@@ -361,7 +361,7 @@ img {
 
 .features {
   width: 960px;
-  margin: -100px auto 20px;
+  margin: 0 auto 20px auto;
 }
 .feature {
   float: left;

assets/css/summit.css

@@ -0,0 +1,46 @@
+#summit-banner-container {
+  padding: 0 20px;
+  max-width: 990px;
+  margin: 60px auto 60px auto;
+}
+#summit-banner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  border-radius: 16px;
+  background: #171226;
+  color: #EEE;
+  overflow: hidden;
+}
+#summit-banner > div {
+  position: relative;
+}
+#summit-banner > div:first-child {
+  width: 62%;
+}
+#summit-banner > div:first-child > a {
+  display: block;
+  position: absolute;
+  inset: 0;
+}
+#summit-banner > div:first-child > a > img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+#summit-banner > div:last-child {
+  width: 38%;
+  padding: 40px;
+}
+#summit-banner > div:last-child h2 {
+  margin-top: 0;
+}
+@media(max-width: 580px) {
+  #summit-banner > div:first-child {
+    min-height: 230px;
+  }
+  #summit-banner > div {
+    width: 100%!important;
+    text-align: center;
+  }
+}

content/index.html

@@ -37,6 +37,26 @@ <h1 class="text-color text-center animated fadeInDown delay1">Nextflow</h1>
         </div>
     </div>
 </div>
+<div id="summit-banner-container">
+    <div id="summit-banner" class="animated fadeInDown">
+        <div>
+            <a href="https://summit.nextflow.io/">
+                <img src="img/summit-2024.png" alt="Nextflow SUMMIT 2024">
+            </a>
+        </div>
+        <div>
+            <p>
+                Join us for the latest developments and innovations from the Nextflow world!
+            </p>
+            <p>
+                With training, a hackathon and talks from pioneers in the field, the Nextflow Summits are essential events for anyone using Nextflow.
+            </p>
+            <a href="https://summit.nextflow.io/2024/boston/" class="btn btn-color btn-xxl" style="margin-top: 8px;">Register now</a>
+        </div>
+    </div>
+</div>
+
+<div class="clearfix"></div>
 
 <!-- Main Features -->
 <div class="container">

templates/header.ftl

@@ -50,6 +50,7 @@
 
     <!-- Resources -->
     <link href="/css/animate.css" rel="stylesheet">
+    <link href="/css/summit.css" rel="stylesheet">
     <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
 		<link href="/fonts/degular/degular.css" rel="stylesheet">