New Autofill

by mtenschert

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

<link rel="stylesheet" href="https://www.alpinresorts.com/assets/css/main.css">

<div style="display:block !important" class="promocode-item">
  <span>Promo (<small></small>) <i class="fa fa-check-circle"></i>
</span>
</div>

CSS

@media only screen and (min-width: 500px) {
  .promocode-item {
    display : none;
    position : fixed;
    top : 10%;
    left: 20%;
    font-size : 25px;
    padding : 10px;
    background-color : rgb(0, 0, 0);
    color : white;
    z-index : 1000;
    margin-left : 10%;
    margin-right : 10%;
    border-top-left-radius : 5px;
    border-top-right-radius : 5px;
    border-bottom-right-radius : 5px;
    border-bottom-left-radius : 5px;
    opacity : 1;
    width : 620px;
    height : 260px;
    background-image : url("https://newsletters.alpinresorts.com/imgproxy/img/746126833/special-sale-xmas-de.jpg");
  }

  .promocode-item span {
    background-color : rgb(182, 33, 37);
    font-size : 100%;
    padding : 1%;
    border-top-left-radius : 5px;
    border-top-right-radius : 5px;
    border-bottom-right-radius : 5px;
    border-bottom-left-radius : 5px;
    position : absolute;
    top: 268px;
    left: 121px;
  }
}
@media only screen and (max-width: 499px) {
  .promocode-item {
    display : none;
    position : fixed;
    top : 20px;
    font-size : 15px;
    text-align : center;
    padding : 10px;
    background-color : rgb(0, 0, 0);
    color : white;
    z-index : 1000;
    width : 100%;
    opacity : 0.8;
  }
}
.promocode-item small {
  font-style : italic;
  vertical-align : text-top;
}

.promocode-item i {
  color : rgb(6, 161, 6);
}

.invisible-tooltip {
  display : none !important;
}