Add banner for JupyterCon 2025 (#788)

Adding the banner, will revert if the site breaks.

Author: choldgraf

README.md

@@ -2,11 +2,6 @@
 
 This is the source to [Jupyter.org](https://jupyter.org/).
 
-## Build the site locally
-
-The site is built with Jekyll, see [the Jekyll website](https://jekyllrb.com/) for how to customize the build process.
-
-There are a few ways to build the site locally, see the sections below.
 
 ## Where the site is hosted
 
@@ -23,6 +18,12 @@ Here's an image of this box on a GitHub PR page:
 
 ![Netlify Preview Button](.github/images/netlify-preview.png)
 
+## Build the site locally
+
+See the sections below for a few ways to build the site locally.
+
+The site is built with Jekyll, see [the Jekyll website](https://jekyllrb.com/) for how to customize the build process.
+
 ### Build the site automatically with `nox`
 
 The easiest way to build the site locally is by using the [`nox` command line tool](https://nox.thea.codes/). This tool makes it easy to automate commands in a repository, and we have included a `build` command to quickly install the dependencies and build the site.
@@ -46,7 +47,6 @@ To build and preview the site locally, follow these steps:
    $ nox -s build-live
    ```
 
-
 This will install the needed dependencies in a virtual environment using [the `conda` package manager](https://docs.conda.io/en/latest/). 
 
 **When the build is finished, go to `localhost:4000`**. When Jekyll finishes building your site, it will open a port on your computer and serve the website there so that you may preview it.

assets/JupyterCon-Logo-white.svg

@@ -91,15 +91,6 @@
     margin-bottom: 27px;
 }
 
-.con-button {
-    float: right;
-    clear: both;
-    margin-right: 28px !important;
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
-}
-
-
-
 .jupytercon-section {
     background: url('../jupytercon-planet.jpg');
     background-size: 100%;
@@ -129,3 +120,48 @@
     color: black;
     font-weight: 400;
 }
+
+/* Convention banner */
+
+.con-jumbotron {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.con-container {
+    background: rgba(0, 0, 0, 0.5) url("../header-banner.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-blend-mode: darken;
+    background-position: bottom center;
+    text-align: center;
+}
+
+.con-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    float: none !important;
+    padding: 40px;
+}
+
+.con-title {
+    margin-left: auto;
+    margin-right: auto;
+    clear:both;
+    width: 100%;
+    max-width: 500px;
+}
+
+.con-button button {
+    background-color: #f37726;
+    color: white;
+    margin: 0 .5em;
+    padding: 1em;
+    border-radius: 5px;
+    border: none;
+    font-size: 1em;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+

assets/css/main.scss

@@ -246,6 +246,23 @@
 ---
 
 <header>
+      <div class="jumbotron con-jumbotron">
+        <div class="row">
+            <div class="col-md-12" style='padding:0'>
+                <div class="con-container img-responsive">
+                    <div class="col-lg-8 con-content md-offset-2">
+                        <a href="https://events.linuxfoundation.org/jupytercon/"><img class="con-title img-responsive" src="assets/JupyterCon-Logo-white.svg" alt="The JupyterCon Logo" /></a>
+                        <div class="con-date">November 04-05, 2025</div>
+                        <div class="con-program">
+                            <p>San Diego, California</p>
+                        </div>
+                        <a class="con-button" href="https://events.linuxfoundation.org/jupytercon/"><button>Conference Website</button></a>
+                        <a class="con-button" href="https://events.linuxfoundation.org/jupytercon/program/cfp/"><button>Call for Proposals</button></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="jumbotron">
       <div class="col-md-12">
           {% for img in page.jumbotron.images %}