Line 10: Line 10:
 
     overflow: hidden;
 
     overflow: hidden;
 
     margin-top: -30px;
 
     margin-top: -30px;
    background-color: rgba( 0, 0, 0, .5 );
 
 
     min-height:600px
 
     min-height:600px
 
   }
 
   }
Line 21: Line 20:
 
     min-width: 100%;
 
     min-width: 100%;
 
     min-height: 100%;
 
     min-height: 100%;
 +
    filter:opacity(60%);
 
   }
 
   }
  

Revision as of 09:27, 30 June 2023

<style>

 .ocp-banner-section {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   position: relative;
   overflow: hidden;
   margin-top: -30px;
   min-height:600px
 }
 .ocp-banner-section video {
   position: absolute;
   left: 50%;
   top: 60%;
   transform: translate(-50%, -60%);
   min-width: 100%;
   min-height: 100%;
   filter:opacity(60%);
 }
 .ocp-banner-text-container {
   position: relative;
   z-index: 1000;
   color: white;
   text-align: center;
   max-width: 520px;
 }
 .ocp-banner-title {
   font-size: 3rem;
   font-weight: 300;
   right:10px;
   top:10px;
   color:white;
 }
 .ocp-banner-subtitle {
   font-size: 1.5rem;
   font-weight: 300;
   max-width: 500px;
 }

</style>

       <header>

<img src="/logo/open-csp_2.svg" id="Open CSP Logo" style="height:150px;"/>

The open source content services platform

       </header>
 <video id="hero-vid" autoplay="" loop="" muted>
   Your browser does not support the video tag.
 </video>