Difference between revisions of "Template:DTU-Denmark/carouselCSS"

Line 1: Line 1:
−
 
 
<html>
 
<html>
  
Line 17: Line 16:
  
  
 +
</style>
 +
 +
</html>
  
  

Revision as of 07:44, 15 October 2019






.wrapper12 { 

 margin-top:50px;

}

.card1 { 

 border-radius: 0px 0px 20px 20px;
 color: #fff;

width: 650px; height: 500px; margin: auto; position: relative; background: linear-gradient(45deg, rgba(9, 49, 79, .85) 0%, rgba(9, 49, 79, 1) 100%); }

.card2 { 

 border-radius: 20px 20px 0px 0px;
 padding: 20px;
 color: #fff;

width: 650px; height: 170px; margin: auto; position: relative; background: linear-gradient(45deg, rgba(9, 79, 89, .90) 0%, rgba(9, 79, 109, 1) 100%); }

.cardimg {

width: 200px; height: 300px; background-size: cover;

} .collector { 

 float:left;

}

.header { width: 450px; height: 90px; margin-top: 10px; position: relative; bottom: 300px; left: 200px; }

.profile { width: 250px; height: 300px; position: relative; top: 2px; left: 20px; }

.profile h2 { font-size: 28px; font-weight: 700; text-align: left;

margin: 5px 0px 3px 6px;

}

.profile p { font-size: 12px;

text-align: left; margin: 1px 0px 0px 6px;

}


.logo1 { width: 90px; height: 90px; background-image: background-size: cover; position: absolute; top: -10px; left: 325px; }


  • {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

}




.data-box { 

 position: relative;
 width: 100%;
 max-width: 820px;
 margin: 10px auto;
 background: #71cec8;

}

.data { 

 display: block;
 position: relative;
 width: 0;
 top: 0;
 left: 0;
 background: lightseagreen;
 
 text-transform: uppercase;
 color: #ffffff;
 overflow: visible !important;

}

.info { 

 margin: 0;
 padding: 6px 12px;
 white-space: nowrap;

}



.promotergenerator select { 

 background-color: lightseagreen;
 color: white;
 padding: 12px;
 width: 250px;
 border: none;
 font-size: 20px;
 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
 -webkit-appearance: button;
 appearance: button;
 outline: none;

}


.promotergenerator{ 

 margin-right:auto;
 margin-left:auto;
text-align: center;
 padding-bottom: 20px;

}
























.container_rowhp{ 

 display: flex;

}

.layer1hp { 

 width: 100%;

}

.layer2hp{ 

 width: 100%;
 margin-left: -100%;

}

.statichp { 

 background: white;

}

.statichp:hover { 

 opacity:0;

}

.bbfirstimg{ content:url("T--DTU-Denmark--bbim1medium.png"); width: 100%; margin-right:auto; margin-left:auto; display: flex; }

.bbsecondimg{ content:url("T--DTU-Denmark--bbim2med.png"); width: 100%; margin-right:auto; margin-left:auto; display: flex;

}


.safetyfirstimg{

width: 100%; margin-right:auto; margin-left:auto; max-width:450px; display: flex; }

.hp1img{

width: 100%; margin-right:auto; margin-left:auto; max-width:250px; display: flex; }


.safetysecondimg{

width: 100%; margin-right:auto; margin-left:auto; max-width:400px; display: flex; }


.bbmobileshow{ display:none; }

  1. carousel{
 position: relative;
 height: 350px;
 top: 50%;

 overflow: hidden;
 display:block;

}

  1. carousel > div.slideImg{
 position: absolute;
 opacity: 0;

}

  1. carousel > div > img{
 width: 400px;
 transition: width 1s;
   border-radius: 20px;

}

  1. carousel > div.hideLeft{
 left: 0%;
 opacity: 0;
 transition: transform 1s, left 1s, opacity 1s;
 transform: translateY(50%) translateX(-50%);

}

  1. carousel > div.hideLeft > img{
 width: 200px;

}

  1. carousel > div.hideRight{
 left: 100%;
 transition: transform 1s, left 1s, opacity 1s;
 opacity: 0;
 transform: translateY(50%) translateX(-50%);

}

  1. carousel > div.hideRight > img{
 width: 200px;

}

  1. carousel > div.prev{
 z-index: 5;
 left: 30%;
 transform: translateY(50px) translateX(-50%);
 opacity: 1;
 transition: transform 1s, left 1s, opacity 1s;

}

  1. carousel > div.prev > img{
 width: 300px;

}

  1. carousel > div.prevLeftSecond{
 z-index: 4;
 left: 15%;
 transform: translateY(50%) translateX(-50%);
 opacity: 0.7;
 transition: transform 1s, left 1s, opacity 1s;

}

  1. carousel > div.prevLeftSecond > img{
 width: 200px;

}

  1. carousel > div.selected{
 z-index: 10;
 left: 50%;
 transition: transform 1s, left 1s, opacity 1s;
 opacity: 1;
 transform: translateY(0px) translateX(-50%);

}

  1. carousel > div.next{
 z-index: 5;
 left: 70%;
 transition: transform 1s, left 1s, opacity 1s;
 opacity: 1;
 transform: translateY(50px) translateX(-50%);

}

  1. carousel > div.next > img{
 width: 300px;

}

  1. carousel > div.nextRightSecond{
 z-index: 4;
 left: 85%;
 transition: transform 1s, left 1s, opacity 1s;
 transform: translateY(50%) translateX(-50%);
 opacity: 0.7;

}

  1. carousel > div.nextRightSecond > img{
 width: 200px;

}


div.positionBtn{ text-align: center; display:block; 

 margin-right:auto;
 margin-left:auto;

margin-bottom:75px;

}

  1. prev, #next{
   background: #272727;
   color: #ffffff;
   border: 0px;
   font-size: 22px;
   margin: 0px;
   opacity: 0.6;

}

  1. prev > span, #next >span{
   width: 75px;
   padding: 10px;
   display: block;

}

  1. prev{
 text-align: right;
 border-radius: 20px 0px 0px 20px!important;

}

  1. next{
 text-align: left;
 border-radius: 0px 20px 20px 0px!important;

}

  1. prev:hover, #next:hover{
 opacity: 1;

}

  1. prev:focus, #next:focus{
 border: 0px;

}


@media only screen and (max-width : 991px) { .bbfirstimg{ content:url("T--DTU-Denmark--bbim1medium.png"); width: 100%; }

.bbsecondimg{ content:url("T--DTU-Denmark--bbim2med.png"); width: 100%; }

.bbmobileshow{ display:block; }

.bbmobile{ display:none; }


}


@media only screen and (max-width : 600px) { .col-md-6{width: 100%}


.bbfirstimg{ content:url("T--DTU-Denmark--bbim1sm.png"); width: 100%; }

.bbsecondimg{ content:url("T--DTU-Denmark--bbim2sm.png"); width: 100%; }

}


</style>

</html>