<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
https://100.cleveland.edu/wp-content/uploads/Shield-100_V4.gif
https://staging9.cleveland.edu/wp-content/uploads/2022/04/logo-all-white-text-emblem-no-outline.svg
https://100.cleveland.edu/wp-content/uploads/Logos/Asset-22.svg
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active row " >
<a href="#">
<div class="col-md-12 divhero" >
<img style="width:100%; height: auto;" src="https://100.cleveland.edu/wp-content/uploads/001708_CUKC_WellnessExpo_Monitor_1920x1080_P1_v3-1-e1649278221186.jpg">
<div class="carousel-caption">
<!--<h1>-->
<!-- 100% Bg Image<br>100% Content center-->
<!--</h1>-->
</div>
</div>
</a>
</div>
<!-- End Item -->
<div class="item row">
<a href="#">
<div class="gradient ohero obackgr" style="background: url('https://wprebuild.clevelandtelevision.com/wp-content/uploads/2020/03/overlay-zoomed.png') repeat center center rgba(164,29,65,1);">
<div class="col-md-3 divhero" >
<img style="width:100%; height: auto" src="https://100.cleveland.edu/wp-content/uploads/Logos/shield_white.svg">
</div>
<div class="col-md-9 divhero">
<h1 style="color:white;">
<!--100% Bg Image<br>40% Image left<br>60% Content Right-->
IMAGINE A WORLD THAT NEVER SETTLED FOR GOOD ENOUGH WHEN IT COMES TO HEALTH. WE TEACH THAT.
</h1>
</div>
</div>
</a>
</div>
<!-- End Item -->
<div class="item row" style="background: url('https://100.cleveland.edu/wp-content/uploads/2021/12/Asset-2.svg') center center no-repeat ;background-size: cover;">
<a href="#">
<div class="col-md-12 divhero" >
<div class="carousel-caption">
<img style="width:auto; height: 200px" src="https://100.cleveland.edu/wp-content/uploads/100_Centennial_Logo_WHITE-1.svg">
<h1>
Cleveland Centennial & Midwest Annual Conference and Expo</h1>
<p style="font-size: 2em;">October 20 - October 23</p>
</div>
</div>
<!--<div class="col-md-4 divhero" >-->
<!-- -->
<!--</div>-->
</a>
</div>
<!-- End Item -->
<div class="item row " >
<a href="#">
<div class="gradient ohero obackgr" style="background: url('https://wprebuild.clevelandtelevision.com/wp-content/uploads/2020/03/overlay-zoomed.png') repeat center center rgba(164,29,65,1);">
<div class="col-md-3 divhero" >
<img style="width:100%; height: auto" src="https://100.cleveland.edu/wp-content/uploads/Logos/shield_white.svg">
</div>
<div class="col-md-9 divhero">
<h1 style="color:white;">
MAKING THE WORLD HEALTHIER STARTS PROMPTLY AT 7:30 AM. M-F.
</h1>
</div>
</div>
</a>
</div>
<!-- End Item -->
<!--MAKING THE WORLD HEALTHIER STARTS PROMPTLY AT 7:30 AM. M-F-->
<!--<div class="item row" style="background: url('https://images.unsplash.com/photo-1482059470115-0aadd6bf6834?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=267bba9a4e280ec64388fe8fb01e9d1b&auto=format&fit=crop&w=1950&q=80') no-repeat ;">-->
<!-- <div class="col-md-4 divhero" >-->
<!-- -->
<!-- </div>-->
<!-- <div class="col-md-8 divhero" > -->
<!-- <div class="carousel-caption">-->
<!-- <h1>-->
<!-- 100% Bg Image<br>60% Content Right<br><br>-->
<!-- Lorem ipsum dolor sit amet, consetetur sadipscing elitr.-->
<!-- </h1>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">01<small>H/W EXPO WITH DAPHINE OZ</small></a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">02<small>IMAGINE A WORLD</small></a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">03<small>100 YEARS CENTENNIAL</small></a></li>
<li data-target="#myCarousel" data-slide-to="3"><a href="#">04<small>MAKING THE WORLD</small></a></li>
</ul>
</div>
<!-- End Carousel -->
</div>
body
{
padding-top: 20px;
}
#myCarousel h1 {
font-size: 3em;
font-weight: 900;
text-transform: uppercase;
line-height: 1;
color: white;
letter-spacing:-0.5px;
}
#myCarousel{
border:1px solid #111;
}
#myCarousel .nav a small
{
display: block;
}
#myCarousel .nav
{
background: #111;
}
#myCarousel ul li a {
color: white;
font-weight: 600;
text-align: left !important;
}
#myCarousel ul li a:hover {
/*color: #111;*/
background: #555;
font-weight: 600;
text-align: left !important;
}
.nav-justified > li > a
{
border-radius: 0px;
}
.nav-pills>li[data-slide-to="0"].active a { background-color: #156997; }
.nav-pills>li[data-slide-to="1"].active a { background-color: #e67e22; }
.nav-pills>li[data-slide-to="2"].active a { background-color: #9f1d41; }
.nav-pills>li[data-slide-to="3"].active a { background-color: #c14735; }
.nav-pills>li.active a {background-color: #555;}
.obackgr{
/*background: url('https://wprebuild.clevelandtelevision.com/wp-content/uploads/2020/03/overlay-zoomed.png') repeat center center fixed;*/
padding: 0 8%;
/*display: flex;*/
/*align-content: center;*/
/*align-items: center;*/
}
.gradient {
height: 600px;
background: linear-gradient(180deg, rgba(241,140,33,1) 0%, rgba(164,29,65,1) 100%);
}
.divhero{
height: 600px;
display: flex;
align-content: center;
align-items: center;
}
/*
.carousel-fade .carousel-item {
opacity: 0;
transition-duration: .6s;
transition-property: opacity;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
opacity: 1;
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
opacity: 0;
}
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
*/
.carousel.carousel-fade .item {
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
opacity:0;
}
.carousel.carousel-fade .active.item {
opacity:1;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0.0;
filter: alpha(opacity=0);
}
.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
left: 0;
z-index: 1;
/* transform: translateX(0);*/
/*transform: translate3d(0, 0, 0); */
}
.carousel.carousel-fade .carousel-control {
z-index: 3;
}
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 10000
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
