$(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: 55px 55px 55px 55px 55px 55px;
grid-template-rows: 60px 60px 60px 30px 60px 60px 60px 60px 30px 60px 60px;
grid-gap: 2px;
max-width: 759px;
margin: 0 auto;
grid-template-areas:
"box1m box1m box1m box2m box2m box2m"
"box1m box1m box1m box2m box2m box2m"
"box1m box1m box1m box3m box3m box3m"
"box1m box1m box1m box3m box3m box3m"
"box1m box1m box1m box3m box3m box3m"
"box4m box4m box4m box3m box3m box3m"
"box4m box4m box4m box3m box3m box3m"
"box5m box5m box5m box6m box6m box6m"
"box5m box5m box5m box6m box6m box6m"
"box7m box7m box7m box7m box7m box7m"
"box7m box7m box7m box7m box7m box7m ";
}
}
/* desktop grid */
@media screen and (min-width: 760px){
#content{
display: grid;
grid-template-columns: 390px 195px 195px 195px;
grid-template-rows: 100px 100px 100px 100px 100px 60px;
grid-gap: 5px;
grid-template-areas:
"box1 box2 box2 box6"
"box1 box2 box2 box6"
"box1 box3 box3 box6"
"box1 box3 box3 box7"
"box1 box4 box5 box7"
"box1 box4 box5 box7";
}
}
box1 {
grid-area: box1;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/Temp_Buttons/Graduation/Desktop/gifts.jpg");
color: white;
text-align: center;
font-size: 3rem;
background-color: blue;
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/Temp_Buttons/Graduation/Desktop/caps%26gowns.jpg");
background-repeat: no-repeat;
color: white;
text-align: center;
font-size: 3rem;
background-color: blue;
background-size: 100% 100%;
border-radius: 12px;
}
box3{
grid-area: box3;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/Temp_Buttons/Graduation/Desktop/diplomaframes.jpg");
background-repeat: no-repeat;
color: white;
text-align: center;
font-size: 3rem;
background-color: blue;
background-size: 100% 100%;
border-radius: 12px;
}
box4{
grid-area: box4;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/Temp_Buttons/Graduation/Desktop/classof2020.jpg");
background-repeat: no-repeat;
color: white;
text-align: center;
font-size: 3rem;
background-color: blue;
background-size: 100% 100%;
border-radius: 12px;
}
box5{
grid-area: box5;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/Temp_Buttons/Graduation/Desktop/announcements.jpg");
color: white;
text-align: center;
font-size: 3rem;
background-color: blue;
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/Temp_Buttons/Graduation/Desktop/classrings.jpg");
color: white;
text-align: center;
font-size: 3rem;
background-color: blue;
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 12px;
}
box7 {
grid-area: box7;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/Temp_Buttons/Graduation/Desktop/tasseltopper.jpg");
color: white;
text-align: center;
font-size: 3rem;
background-color: blue;
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/Temp_Buttons/Graduation/Mobile/gifts.jpg");
background-color: blue;
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/Temp_Buttons/Graduation/Mobile/capsandgowns.jpg");
background-color: blue;
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/Temp_Buttons/Graduation/Mobile/diplomas.jpg");
background-color: blue;
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/Temp_Buttons/Graduation/Mobile/announcements.jpg");
background-repeat: no-repeat;
background-color: blue;
background-size: 100% 100%;
border-radius: 12px;
}
box5m{
grid-area: box5m;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/Temp_Buttons/Graduation/Mobile/classof2020.jpg");
background-repeat: no-repeat;
background-color: blue;
background-size: 100% 100%;
border-radius: 12px;
}
box6m{
grid-area: box6m;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/Temp_Buttons/Graduation/Mobile/tassel.jpg");
background-repeat: no-repeat;
background-color: blue;
background-size: 100% 100%;
border-radius: 12px;
}
box7m{
grid-area: box7m;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/Temp_Buttons/Graduation/Mobile/classrings.jpg");
background-repeat: no-repeat;
background-color: blue;
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
}
