Cookie container #3

In this example below you will see how to do a Cookie container #3 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by BrianCsection, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright BrianCsection ©
  • HTML
  • CSS
  • JavaScript
    <div class="cookie-container ex-3">
  <div class="inner">
<p>This site uses cookies. By continuing to browse the site you are agreeing to our use of cookies.<a href="https://erhvervsstyrelsen.dk/cookie-loven" class="read-more">Read more</a></p>
    <a href="#" class="fa fa-times"></a>
    </div>
</div>

/*Downloaded from https://www.codeseek.co/BrianCsection/cookie-container-3-GJgrWL */
    body{
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  padding: 0;
  margin: 0;
}

p {
  margin: 0;
}

a {
  text-decoration: none;
  color: #34495e;
}

.cookie-container.ex-3 {
  background: #34495e;
  height: 50px;
  visibility: visible;
  opacity: 1;
  transition: all 1s ease;
}

.inner {
  padding: 13px 0 0 0;
  margin: 0 auto;
  position: relative;
  width: 960px;
}

.cookie-container.ex-3 .fa-times {
  position: absolute;
  border: 1px solid #fff;
  top: 10px;
  right: 0;
  padding: 6px 8px;
  line-height: 15px;
  background: #fff;
  border-radius: 50%;
  transition: all .2s ease;
}

.cookie-container.ex-3 .read-more {
  background: #fff;
  border: 1px solid #fff;
  padding: 0 5px;
  margin: 0 0 0 10px;
  transition: all .2s ease;
}

.cookie-container.ex-3 .fa-times:hover,
.cookie-container.ex-3 .read-more:hover { 
  background: none;
  color: #fff;
}


/*Downloaded from https://www.codeseek.co/BrianCsection/cookie-container-3-GJgrWL */
    $(".fa-times").click(function(){
  $(this).closest(".cookie-container").fadeOut(200);
});

Comments