After trying various suggestions without success, I'm sharing my code here in hopes that someone can help guide me in the right direction.
- I am aiming to center the carousel.
- I would like to add a separate container inside the carousel with text, and have that container appear somewhat faded using either an opacity element or RGB (0,0,0,0.4) element.
HTML-
To view my HTML code, please visit this link on Codepen:
https://codepen.io/mahiya-hawk/pen/YvZMbM
CSS-
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
z-index: -1000;
}
#video-bg-elem {
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.navbar{
background-color: RGBA(0,0,0,0.2) !important;
}
#brand-image{
height: 100px;
}
a.navbar-brand{
position: relative;
}
.navbar-nav > li{
margin-left:10px;
padding: 33px 10px;
}
.navbar-nav > li > a{
text-decoration: none;
font-size: 2vh;
font-size: 2.3vw;
font-family: 'Freestyle Script';
font-weight: 900;
color: rgb(210, 21, 84) !important;
padding-bottom: 0.2%;
display: block;
}
.navbar-nav > li:hover,
.navbar-nav > li:focus {
background-color: RGBA(0,0,0,0.4) !important;
transition: .9s;
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
background-color: RGBA(0.0..0.4) !important;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
}
.content h1 {
text-align: center;
font-size: 65px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
margin-top: 5%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 20px;
letter-spacing: 3px;
color: #aaa;
}
.navbar-expand-lg .navbar-collapse {
margin:-7px;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
width: 1200px;
margin-bottom: 480px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 480px;
}