$(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 (max-width:759px) {
img#hideMobile {
display: none;
}
#hidetextMobile{
display: none;
}
}
@media (min-width:760px) {
img#displayMobile {
display: none;
}
#displaytextMobile{
display: none;
}
#displayborderMobile{
display: none;
}
}
@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 ";
}
#hideborderMobile{
display: none;
}
}
/* desktop grid */
@media screen and (min-width: 760px){
#content{
display: grid;
grid-template-columns: 390px 190px 190px 205px;
grid-template-rows: 100px 100px 100px 100px 100px 100px;
grid-gap: 5px;
grid-template-areas:
"box1 box3 box3 box6"
"box1 box3 box3 box6"
"box1 box4 box4 box6"
"box1 box4 box4 box6"
"box1 box5 box5 box6"
"box1 box5 box5 box6";
}
#media {
border: 2px solid #000080;
border-radius: 12px;
}
}
box1 {
grid-area: box1;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/Temp_Buttons/Graduation/graduationgiftsdesktop.jpg");
color: white;
text-align: center;
font-size: 3rem;
background-color: blue;
background-repeat: no-repeat;
background-size: 100% 100%;
content: "Football";
}
box2 {
grid-area: box2;
background-image: url("");
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/diplomaframesdeskop.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/classof2021desktop.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/My%20Post-page-001.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/class_rings.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
}
