<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);
}
