"Gardner light cookie consent "
Bootstrap 3.3.0 Snippet by MMLTech

<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> <div style="position: fixed;bottom: 5%;right: 5%;"> <h5 style="margin-bottom: 1rem;padding-bottom: 1rem;border-bottom: 1px solid #000;text-align: center;">Support my work @ MMLTech</h5> <div style="display: flex;align-items: center;"> <a style="margin-right:1rem;background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://ko-fi.com/mmltech" target="_blank"><img src="https://storage.ko-fi.com/cdn/Kofi_Logo_Blue.svg" width="60px"/> Buy me a coffee</a> <a style="background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://obscountdown.com" target="_blank"><img src="https://streamcd.net/Assets/images/logo-white.png" width="60px" height="19px" /> My projects</a> </div> </div>
#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: