@media screen and (max-width: 759px){
#contentm{
display: grid;
grid-template-columns: 90px 115px 65px 65px;
grid-template-rows: 118px 150px 70px 70px 70px 70px;
grid-gap: 2px;
max-width: 759px;
margin: 0 auto;
grid-template-areas:
/*"box0m box0m box0m box0m"*/
"box1m box1m box1m box1m"
"box2m box2m box3m box3m"
"box2m box2m box3m box3m"
"box2m box2m box4m box4m"
"box2m box2m box4m box4m";
}
}
/* desktop grid */
@media screen and (min-width: 760px){
#content{
display: grid;
grid-template-columns: 375px 246px 246px;
grid-template-rows: 122px 125px 145px 125px 125px;
grid-gap: 5px;
grid-template-areas:
/*"box0 box0 box0"*/
"box1 box3 box4"
"box1 box3 box4"
"box1 box2 box2"
"box1 box2 box2";
}
}
box0 {
grid-area: box0;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/Technology/AACS%20BTS%202020%20Marketing%20Kit/AACS%20Web%20Banner%20templates/C%20-%20728x90%402x.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 12px;
}
box1 {
grid-area: box1;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/Technology/mobile_apple.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 12px;
}
box2 {
grid-area: box2;
background-image: url("");
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 12px;
}
box3{
grid-area: box3;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/Technology/tech_repair.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 12px;
}
box4{
grid-area: box4;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/Technology/computer_req.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 12px;
}
box0m {
grid-area: box0m;
background-image: url("https://raw.githubusercontent.com/philrobb/Landing_Pages/master/Technology/AACS%20BTS%202020%20Marketing%20Kit/AACS%20Web%20Banner%20templates/D%20-%20575x200%402x.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 12px;
}
box1m {
grid-area: box1m;
background-image: url("https://www.keysys.com/wp-content/uploads/2016/01/Dell-Banner.png");
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/Technology/mobile_apple.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/Technology/tech_repair.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/Technology/computer_req.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 12px;
}
#clickable {
display:block;
height:100%;
text-indent:-9999px;
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
}
