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

 
(44 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
 
 
<html>
 
<html>
  
  
 
<style>
 
<style>
 +
 +
div.mm-dropdown {
 +
 +
  width: 190px;
 +
  border-radius: 3px;
 +
}
 +
 +
.widgetimg{
 +
width: 70%;
 +
    background-color: #fff;
 +
    border-radius: 25px;
 +
 +
    margin-left: 90px;
 +
}
 +
 +
div.mm-dropdown ul {
 +
  list-style: none;
 +
  padding: 0;
 +
  margin: 0;
 +
  border: 0;
 +
}
 +
 +
div.mm-dropdown ul li,
 +
div.mm-dropdown div.textfirst {
 +
  padding: 0;
 +
  color: #fff;
 +
 +
  padding: 5px 15px;
 +
}
 +
 +
div.mm-dropdown div.textfirst img.down {
 +
  float: right;
 +
  margin-top: 5px
 +
}
 +
 +
div.mm-dropdown ul li:last-child {
 +
  border-bottom: 0;
 +
}
 +
 +
div.mm-dropdown ul li {
 +
  display: none;
 +
  padding-left: 25px;
 +
}
 +
 +
div.mm-dropdown ul li.main {
 +
  display: block;
 +
}
 +
 +
div.mm-dropdown ul li img {
 +
  width: 20px;
 +
  height: 20px;
 +
}
 +
 +
 +
  
 
html, body, main{
 
html, body, main{
 
   width: 100%;
 
   width: 100%;
−
  height: 100%;
+
 
 
   margin: 0;
 
   margin: 0;
 
   padding: 0;
 
   padding: 0;
 +
}
 +
 +
.marginfix{
 +
margin-right:25px;
 +
}
 +
 +
.protoco1{padding-bottom:15px}
 +
 +
 +
 +
.protocolbtn{
 +
padding:15px;
 +
margin-top:25px;
 +
}
 +
 +
 +
 +
.smallfigcap{font-size: 12px;}
 +
 +
 +
 +
.wrapper12 {
 +
  margin-top:50px;
 +
}
 +
 +
.card1 {
 +
  color: #fff;
 +
    width: 650px;
 +
    height: 1220px;
 +
    border-radius: 0px 0px 25px 25px;
 +
    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;
 +
 +
}
 +
 +
 +
 +
.profile {
 +
    width: 600px;
 +
    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: 14px;
 +
 +
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;
 
}
 
}
  
Line 15: Line 306:
 
content:url("https://static.igem.org/mediawiki/2019/7/7c/T--DTU-Denmark--bbim1medium.png");
 
content:url("https://static.igem.org/mediawiki/2019/7/7c/T--DTU-Denmark--bbim1medium.png");
 
width: 100%;
 
width: 100%;
 +
margin-right:auto;
 +
margin-left:auto;
 +
display: flex;
 
}
 
}
  
Line 20: Line 314:
 
content:url("https://static.igem.org/mediawiki/2019/d/de/T--DTU-Denmark--bbim2med.png");
 
content:url("https://static.igem.org/mediawiki/2019/d/de/T--DTU-Denmark--bbim2med.png");
 
width: 100%;
 
width: 100%;
 +
margin-right:auto;
 +
margin-left:auto;
 +
display: flex;
 +
 
}
 
}
 +
 +
.frontfirstimg{
 +
width: 100%;
 +
 +
max-width:450px;
 +
position:absolute;
 +
}
 +
.frontsecondimg{
 +
 +
width: 100%;
 +
 +
max-width:450px;
 +
position:absolute;
 +
}
 +
 +
.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{
 
.bbmobileshow{
Line 179: Line 521:
 
width: 100%;
 
width: 100%;
 
}
 
}
 +
 +
.bbmobileshow{
 +
display:block;
 +
}
 +
 +
.marginfix{
 +
margin-right:0px;
 +
}
 +
 +
.bbmobile{
 +
display:none;
 +
}
 +
 +
  
 
}
 
}
Line 188: Line 544:
  
  
−
.bbmobileshow{
 
−
display:block;
 
−
}
 
  
−
.bbmobile{
 
−
display:none;
 
−
}
 
 
.bbfirstimg{
 
.bbfirstimg{
 
content:url("https://static.igem.org/mediawiki/2019/5/50/T--DTU-Denmark--bbim1sm.png");
 
content:url("https://static.igem.org/mediawiki/2019/5/50/T--DTU-Denmark--bbim1sm.png");

Latest revision as of 01:46, 14 December 2019