cookies.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Cookies Notice</title>
  7. <style>
  8. #cookie-notice {
  9. position: fixed;
  10. bottom: 0;
  11. left: 0;
  12. width: 100%;
  13. background-color: #f0f0f0;
  14. padding: 20px;
  15. text-align: center;
  16. box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  17. z-index: 1000;
  18. /* Ensure it's on top */
  19. display: flex;
  20. justify-content: space-between;
  21. align-items: center;
  22. }
  23. #cookie-notice p {
  24. margin: 0;
  25. flex-grow: 1;
  26. padding-right: 20px;
  27. }
  28. #cookie-notice button {
  29. background-color: #007bff;
  30. color: white;
  31. border: none;
  32. padding: 10px 20px;
  33. margin-right: 40px;
  34. cursor: pointer;
  35. border-radius: 5px;
  36. }
  37. #cookie-notice button:hover {
  38. background-color: #0056b3;
  39. }
  40. #cookie-notice a {
  41. color: #007bff;
  42. text-decoration: none;
  43. }
  44. #cookie-notice a:hover {
  45. text-decoration: underline;
  46. }
  47. @media (max-width: 600px) {
  48. #cookie-notice {
  49. flex-direction: column;
  50. align-items: stretch;
  51. }
  52. #cookie-notice p {
  53. padding-right: 0;
  54. margin-bottom: 10px;
  55. }
  56. }
  57. </style>
  58. </head>
  59. <body>
  60. <div id="cookie-notice">
  61. <p>This website uses cookies to improve your experience. By continuing to browse this site, you agree to our use of
  62. cookies. <a href="/policy.html" target="_blank">Learn more</a></p>
  63. <button id="accept-cookies">Accept</button>
  64. </div>
  65. </body>
  66. </html>