"Gardner light cookie consent "
Bootstrap 3.3.0 Snippet by MML Tools

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <!-- Include the above in your HEAD tag --> <section id="consent"> <div class="container"> <div class="row"> <div class="consentCard gardnerStyle col-lg-3 col-md-6 col-sm-12 consent-left" id="ConsentCard"> <div class="panel panel-default"> <div class="panel-heading"> <h3>Pocket Cookie Consent</h3> </div> <div class="panel-body"> <p>Do you like cookies? 🍪 We use cookies to ensure you get the best experience on our website.</p> <ul> <li><i class="fa fa-angle-double-right"></i> Read <a href="#">Therms of Service</a></li> <li><i class="fa fa-angle-double-right"></i> Read <a href="#">Our Cookie Policy</a></li> <li><i class="fa fa-angle-double-right"></i> Read <a href="#">Our GDPR Policy</a></li> </ul> <div class="col-md-12 consentNav text-center"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default denie">I Disagree</button> <button type="button" class="btn btn-default accept">I Agree</button> </div> </div> </div> </div> </div> </div> </div> </section>
#ConsentCard{ position: fixed; bottom: 30px; z-index: 9990; } .consent-left{ left: 30px; } .consent-right{ right: 30px; } .consentCard .panel .panel-heading{ border: none; } .consentCard .panel .panel-heading h3{ margin: 0; } .consentCard ul{ list-style-type: none; padding: 0; } .consentCard ul > li > a{ text-decoration: none; } .consentCard ul > li{ padding:5px 0; } .consentCard ul a, .consentCard .btn{ -webkit-transition: all 150ms ease-out; -moz-transition: all 150ms ease-out; -o-transition: all 150ms ease-out; transition: all 150ms ease-out; } /**GARDNER STYLE - CONSENT BOX**/ .gardnerStyle .panel{ border: none; border-radius: 0; background: rgb(242, 255, 252); -webkit-box-shadow: 0 0 6px rgba(183, 183, 183, 0.5), 0 0 9px rgba(183, 183, 183, 0.79), inset 0 2px 6px 1px rgba(255,255,255,0.03), inset 0 0 5px rgba(252,252,252,0.05); box-shadow: 0 0 6px rgba(183, 183, 183, 0.5), 0 0 9px rgba(242, 255, 252, 0.79), inset 0 2px 6px 1px rgba(255,255,255,0.03), inset 0 0 5px rgba(252,252,252,0.05); } .gardnerStyle .panel-heading h3{ color: #f2fffc; } .gardnerStyle .panel-heading{ background: rgb(30, 132, 40); border-radius: 0; } .gardnerStyle ul > li > i{ color: #e30d21; } .gardnerStyle .panel-body{ color: #2f2f2f; } .gardnerStyle ul > li > a{ color: #1e8428; } .gardnerStyle ul > li > a:hover{ color: #0d3a11; } .gardnerStyle .denie{ color: #2f2f2f; text-transform: uppercase; text-shadow: 1px 1px 1px rgba(0,0,0,.25); border: 1px solid rgba(0,0,0,.35); background: rgb(242, 255, 252); box-shadow: inset 0 1px 0 rgba(194,181,132,.05), inset 0 0 3px rgba(255,255,255,.02), 0 0 10px rgba(0,0,0,.25); transition: all 300ms; -moz-transition: all 300ms; -webkit-transition: all 300ms; -o-transition: all 300ms; cursor: pointer; } .gardnerStyle .denie:hover{ background: rgba(174, 42, 38, 0.65); color: #fff; } .gardnerStyle .accept{ color: #f2fffc; text-transform: uppercase; text-shadow: 1px 1px 1px rgba(0,0,0,.25); border: 1px solid rgba(0,0,0,.35); background: rgb(30, 132, 40); box-shadow: inset 0 1px 0 rgba(194,181,132,.05), inset 0 0 3px rgba(255,255,255,.02), 0 0 10px rgba(0,0,0,.25); transition: all 300ms; -moz-transition: all 300ms; -webkit-transition: all 300ms; -o-transition: all 300ms; cursor: pointer; } .gardnerStyle .accept:hover{ background: rgba(31, 140, 42, 0.54); }

Related: See More


Questions / Comments: