CodePen Embed - Cookie Bar

<body background="https://images.unsplash.com/photo-1482192596544-9eb780fc7f66?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bbe0bd1ecfaaa91394e0c9effb8b0415&auto=format&fit=crop&w=1950&q=80">
<input class="c-checkbox" id="c-checkbox" type="checkbox" />
<div class="cookie-box">
  <h5>COOKIES ON OUR WEBSITE</h5>
  <p>Trespass use cookies to improve your website experience. We also store some third-party cookies for marketing purposes; you can read about these in our <a href="#">Cookie Policy.</a> <br> By continuing to use our site, we will assume you are happy for us to use cookies.</p> <label for="c-checkbox" class="c-close"></label>
</div>
  
   <div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
  
</body>


@font-face { font-family: 'trenda-heavy'; src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-heavy-webfont.woff2") format("woff2"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-heavy-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'trendablack'; src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-black-webfont.eot"); src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-black-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-black-webfont.woff2") format("woff2"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-black-webfont.woff") format("woff"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-black-webfont.ttf") format("truetype"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-black-webfont.svg#trendabold") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'trendabold'; src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-bold-webfont.eot"); src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-bold-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-bold-webfont.woff2") format("woff2"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-bold-webfont.woff") format("woff"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-bold-webfont.ttf") format("truetype"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-bold-webfont.svg#trendabold") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'trendathin'; src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-thin-webfont.eot"); src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-thin-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-thin-webfont.woff2") format("woff2"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-thin-webfont.woff") format("woff"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-thin-webfont.ttf") format("truetype"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-thin-webfont.svg#trendalight") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'trendalight'; src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-light-webfont.eot"); src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-light-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-light-webfont.woff2") format("woff2"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-light-webfont.woff") format("woff"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-light-webfont.ttf") format("truetype"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-light-webfont.svg#trendalight") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'trenda-lightit'; src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-lightit-webfont.woff2") format("woff2"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-lightit-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'trendaregular'; src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-regular-webfont.eot"); src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-regular-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-regular-webfont.woff2") format("woff2"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-regular-webfont.woff") format("woff"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-regular-webfont.ttf") format("truetype"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-regular-webfont.svg#trendalight") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'trendaregularitalic'; src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-regularit-webfont.eot"); src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-regularit-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-regularit-webfont.woff2") format("woff2"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-regularit-webfont.woff") format("woff"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-regularit-webfont.ttf") format("truetype"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-regularit-webfont.svg#trendalight") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'trendasemibold'; src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-semibold-webfont.eot"); src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-semibold-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-semibold-webfont.woff2") format("woff2"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-semibold-webfont.woff") format("woff"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-semibold-webfont.ttf") format("truetype"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trenda/trenda-semibold-webfont.svg#trendalight") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'trespass'; src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trespass.eot?-dd3j90"); src: url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trespass.eot?#iefix-dd3j90") format("embedded-opentype"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trespass.woff?-dd3j90") format("woff"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trespass.ttf?-dd3j90") format("truetype"), url("https://www.trespass.com/skin/frontend/indez/trespass/fonts/trespass.svg?-dd3j90#trespass") format("svg"); font-weight: normal; font-style: normal; }
[class^="icon-"], [class*=" icon-"] { font-family: 'trespass'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@font-face{font-family:'FontAwesome';src:url(https://www.trespass.com/skin/frontend/indez/default/fonts/fontawesome-webfont.eot?v=4.6.3);src:url(https://www.trespass.com/skin/frontend/indez/default/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3) format('embedded-opentype') , url(https://www.trespass.com/skin/frontend/indez/default/fonts/fontawesome-webfont.woff2?v=4.6.3) format('woff2') , url(https://www.trespass.com/skin/frontend/indez/default/fonts/fontawesome-webfont.woff?v=4.6.3) format('woff') , url(https://www.trespass.com/skin/frontend/indez/default/fonts/fontawesome-webfont.ttf?v=4.6.3) format('truetype') , url(https://www.trespass.com/skin/frontend/indez/default/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular) format('svg');font-weight:normal;font-style:normal}


.cookie-box {
  background: #1e3154;
  opacity: 0.95;
  position: fixed;
  width: 100%;
  z-index: 9999; 
  padding:5px;
  bottom:0;
  left:0;
  color: white;
  font-family: 'trendalight';
  transition: 1.5s;
  animation: slideIn .8s;
  animation-delay: .8s;
}

.cookie-box h5 {
    font-size: 1.125rem;
    line-height: 1.33333;
    line-height: 1.1;
}


.cookie-box a {
  color: #309AE4;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.cookie-box h5 {
  margin: 15px;
  font-family: 'trendabold';
  font-size: 1.125rem;
  text-transform: uppercase;
  
  }

.cookie-box p {
  margin: 15px;
  font-size: 0.875rem;
  }

@keyframes slideIn {
  0% {
    transform: translateY(200px);
  }
  100% {
    transform: translateY(0);
  }
}

.c-close {
  border: none;
  color: white;
  position: absolute;
  display: inline-block;
  right: 10px;
  top: 10px;
  font-family: 'FontAwesome';
  cursor: pointer;
  border-radius: 3px;
  line-height: 30px;
  height: 32px;
  width: 32px;
  font-size: 1rem;
}
.c-checkbox {
  display: none;
  &:checked + .cookie-box {
    transform: translateY(200px);
  }
}

View Compiled

This Pen is owned by Trespass Design on CodePen.

See more by @trespass on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.