other hero banner proposal

DIVD-NL · Dec 13, 2023 · a5395da · a5395da
1 parent 7bd3fb3
commit a5395da
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 6 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,12 +1,13 @@
 {% include header.html %}
 
 {% if page.title == "frontpage" %}
-<!-- Banner -->
-<section id="banner">
-    <div class="inner">
-        <img src="images/DIVDlogotransparent.png" alt="DIVD logo"><p>Launched: 1 October 2019</p>
+<!-- Banner --> 
+
+<div class="inner" >
+    <div class="hero-banner grey-out">
+        <img src="images/DIVDlogotransparent.png" class="logo" alt="DIVD logo"/>
     </div>
-</section>
+</div>
 
 <section class="wrapper">
     <div class="inner content">

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -2877,4 +2877,33 @@ body.is-menu-visible #menu {
   float: right;
   margin: 0px 0px 15px 15px;
   width: 25%;
-}
+}
+
+.hero-banner {
+  background-image: url('/images/hero-banner.jpg'); 
+  background-size: cover;
+  background-position: center;
+  min-width: 900px;
+  min-height: 450px;
+  color: #fff; 
+  text-align: center;
+  padding: 100px 0; 
+}
+
+.grey-out {
+    filter: grayscale(100%);
+    transition: filter 0.3s ease;
+  }
+
+.grey-out:hover {
+    filter: grayscale(0%);
+}
+
+.logo {
+  height: 136px;
+  padding-top: 0px;
+  margin-top: -100px;
+  margin-left: 5px;
+  float: left;
+  filter: grayscale(0%); !important;
+}
diff --git a/images/hero-banner.jpg b/images/hero-banner.jpg