| Line 1: | Line 1: | ||
| − | <!-- Video Banner --> | + | <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> | ||
| + | |||
| + | <!-- 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">Pro Line Video</h2> | ||
| + | <p class="mx-auto ocp-banner-subtitle"> | ||
| + | The video background has a parallax effect. This is fluid and | ||
| + | full-width. | ||
| + | </p> | ||
| + | </header> | ||
</div> | </div> | ||
| + | </div> | ||
| + | </div> | ||
| − | + | <!-- Video --> | |
| − | + | <video id="hero-vid" autoplay="" loop="" muted> | |
| − | + | <source src="/opencsp_launch2.mp4" type="video/mp4" /> | |
| − | + | Your browser does not support the video tag. | |
| − | + | </video> | |
| − | + | </section> | |
Revision as of 08:41, 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>