Line 44: | Line 44: | ||
<!-- Video Banner --> | <!-- Video Banner --> | ||
<section class="ocp-banner-section" id="ocpVideoSection"> | <section class="ocp-banner-section" id="ocpVideoSection"> | ||
+ | <div class="container ocp-banner-text-container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-12"> | ||
+ | <header> | ||
+ | <h2 class="ocp-banner-title">Open CSP</h2> | ||
+ | <p class="mx-auto ocp-banner-subtitle"> | ||
+ | The open source content services platform | ||
+ | </p> | ||
+ | </header> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
<!-- Video --> | <!-- Video --> | ||
<video id="hero-vid" autoplay="" loop="" muted> | <video id="hero-vid" autoplay="" loop="" muted> |
Revision as of 09:13, 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: 74px; }
.ocp-banner-section video { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -60%); min-width: 100%; min-height: 100%; }
.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; margin-bottom: 40px; }
.ocp-banner-subtitle { font-size: 1.5rem; font-weight: 300; max-width: 500px; }
</style>