$(document).ready(function() {
$('.carousel').carousel({
interval: 8000
})
});
.carousel-indicators li {
display: inline-block;
width: 15px;
height: 15px;
margin: 10px;
text-indent: 0;
cursor: pointer;
border: none;
border-radius: 50%;
opacity:.3;
background-color: black;
box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5);
}
.carousel-indicators .active {
width: 15px;
height: 15px;
margin: 10px;
background-color: black;
opacity: .8;
}
.carousel-indicators {
bottom: -50px;
}
@media screen and (max-width: 759px){
#contentm{
display: grid;
grid-template-columns: 190px 140px;
grid-template-rows: 180px 100px 100px 100px 110px;
grid-gap: 2px;
max-width: 759px;
margin: 0 auto;
grid-template-areas:
"box1m box1m"
"box2m box3m"
"box2m box4m"
"box2m box5m"
"box6m box6m";
}
}
/* desktop grid */
@media screen and (min-width: 760px){
#content{
display: grid;
grid-template-columns: 367px 367px 246px;
grid-template-rows: 246px 246px 246px;
grid-gap: 5px;
grid-template-areas:
"box1 box1 box2"
"box1 box1 box3"
"box4 box5 box6";
}
}
box1 {
grid-area: box1;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/6-11-20%20BN%20web%20images/734x492%20BN/734x492%20BN%20Football.jpg");
color: white;
text-align: center;
font-size: 3rem;
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 12px;
content: "Football";
}
box2 {
grid-area: box2;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/6-11-20%20BN%20web%20images/246x246%20BN/246x246%20BN%20Baseball.jpg");
background-repeat: no-repeat;
color: white;
text-align: center;
font-size: 3rem;
background-size: 100% 100%;
border-radius: 12px;
}
box3{
grid-area: box3;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/6-11-20%20BN%20web%20images/246x246%20BN/246x246%20BN%20Swim%20Dive.jpg");
background-repeat: no-repeat;
color: white;
text-align: center;
font-size: 3rem;
background-size: 100% 100%;
border-radius: 12px;
}
box4{
grid-area: box4;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/6-11-20%20BN%20web%20images/367x246%20BN/367x246%20BN%20Hockey.jpg");
background-repeat: no-repeat;
color: white;
text-align: center;
font-size: 3rem;
background-size: 100% 100%;
border-radius: 12px;
}
box5{
grid-area: box5;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/6-11-20%20BN%20web%20images/367x246%20BN/367x246%20BN%20Hoops.jpg");
color: white;
text-align: center;
font-size: 3rem;
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 12px;
}
box6 {
grid-area: box6;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/6-11-20%20BN%20web%20images/246x246%20BN/246x246%20BN%20Track%20and%20CC.jpg");
color: white;
text-align: center;
font-size: 3rem;
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 12px;
}
box1m {
grid-area: box1m;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/6-11-20%20BN%20web%20images/340x180%20BN/340x180%20BN%20Football.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 12px;
}
box2m {
grid-area: box2m;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/6-11-20%20BN%20web%20images/hoops.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 12px;
}
box3m{
grid-area: box3m;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/6-11-20%20BN%20web%20images/140x100%20BN/140x100%20BN%20Track%20and%20CC.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 12px;
}
box4m{
grid-area: box4m;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/6-11-20%20BN%20web%20images/140x100%20BN/140x100%20BN%20Swim%20Dive.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 12px;
}
box5m{
grid-area: box5m;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/6-11-20%20BN%20web%20images/140x100%20BN/140x100%20BN%20Baseball.jpg");
background-repeat: no-repeat;;
background-size: 100% 100%;
border-radius: 12px;
}
box6m{
grid-area: box6m;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/6-11-20%20BN%20web%20images/340x110%20BN/340x110%20BN%20Hockey.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 12px;
}
#clickable {
display:block;
height:100%;
width:100%;
border-radius: 15px;
}
a:hover#flagship {
background-color: black;
opacity: .3;
}
a:hover#clickable {
background-color: black;
opacity: .3;
}
#clickable_rotate {
border-radius: 15px;
}
a:hover#clickable_rotate {
background-color: black;
opacity: .3;
}
img.rotating_images{
border: 1px solid navy;
border-radius: 15px;
}
#clickable_rotate {
border-radius: 15px;
}
a:hover#clickable_rotate {
background-color: black;
opacity: .3;
}
#carousel-example-generic a.carousel-control {
height: 100%;
width: 35px;
background-color:none;
//add your own CSS as you need
}
