(Created page with "<video id="cps-main-video-banner" src="https://www.youtube.com/embed/I4jo7m-HxNs" autoplay loop playsinline muted></video>") |
|||
| (18 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | <video id=" | + | <style> |
| + | .ocp-banner-section { | ||
| + | display: -webkit-box; | ||
| + | display: -ms-flexbox; | ||
| + | display: flex; | ||
| + | -webkit-box-align: center; | ||
| + | -ms-flex-align: center; | ||
| + | position: relative; | ||
| + | overflow: hidden; | ||
| + | margin-top: -30px; | ||
| + | min-height:700px; | ||
| + | background-color:black; | ||
| + | } | ||
| + | |||
| + | .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: 100; | ||
| + | color: white; | ||
| + | text-align: center; | ||
| + | max-width: 340px; | ||
| + | } | ||
| + | |||
| + | .ocp-banner-title { | ||
| + | font-size: 3rem; | ||
| + | font-weight: 300; | ||
| + | right:10px; | ||
| + | top:10px; | ||
| + | color:white; | ||
| + | } | ||
| + | |||
| + | .ocp-banner-subtitle { | ||
| + | font-size: 1rem; | ||
| + | font-weight: 300; | ||
| + | max-width: 500px; | ||
| + | color:white | ||
| + | } | ||
| + | |||
| + | @media (max-width: 576px) { | ||
| + | .ocp-banner-section { | ||
| + | min-height:auto; | ||
| + | background-color:white; | ||
| + | margin-top: 0px; | ||
| + | } | ||
| + | .ocp-banner-section video{ | ||
| + | display: none; | ||
| + | } | ||
| + | } | ||
| + | </style> | ||
| + | |||
| + | <!-- Video Banner --> | ||
| + | <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"><img src="/logo/open-csp_2.svg" id="Open CSP Logo" style="height:100px;"/></h2> | ||
| + | <p class="mx-auto ocp-banner-subtitle"> | ||
| + | The open source content services platform | ||
| + | </p> | ||
| + | </header> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <!-- Video --> | ||
| + | <video id="hero-vid" autoplay="" loop="" muted> | ||
| + | <source src="/openCSP3.mp4" type="video/mp4" /> | ||
| + | Your browser does not support the video tag. | ||
| + | </video> | ||
| + | </section> | ||
Latest revision as of 22:58, 3 November 2023
<style>
.ocp-banner-section {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
position: relative;
overflow: hidden;
margin-top: -30px;
min-height:700px;
background-color:black;
}
.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: 100;
color: white;
text-align: center;
max-width: 340px;
}
.ocp-banner-title {
font-size: 3rem;
font-weight: 300;
right:10px;
top:10px;
color:white;
}
.ocp-banner-subtitle {
font-size: 1rem;
font-weight: 300;
max-width: 500px;
color:white
}
@media (max-width: 576px) {
.ocp-banner-section { min-height:auto; background-color:white; margin-top: 0px; }
.ocp-banner-section video{
display: none;
}
}
</style>