finished cookie popup design
This commit is contained in:
parent
7421f6d06e
commit
39b01264da
@ -39,7 +39,7 @@
|
||||
<h4>This website uses cookies.</h4>
|
||||
<p>We use cookies to ensure you the best experience.
|
||||
<br>
|
||||
By using our website, you agree with our <a href="/pages/policy.html" target="_blank">Privacy Policy</a>.
|
||||
By visiting our website, you agree with our <a href="/pages/policy.html" target="_blank">Privacy Policy</a>.
|
||||
</p>
|
||||
<button onclick="agreePolicyPopup()">Ok, understood</button>
|
||||
</div>
|
||||
|
||||
@ -66,22 +66,24 @@ a {
|
||||
padding: 10px;
|
||||
font-size: 25px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.2);
|
||||
|
||||
/* Size */
|
||||
width: 600px;
|
||||
overflow: hidden;
|
||||
|
||||
/* Positioning */
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
bottom: 50px;
|
||||
z-index: 1;
|
||||
bottom: 75px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.policy-popup p {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 200;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
font-size: 13px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
@ -89,7 +91,7 @@ a {
|
||||
.policy-popup button {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 15px;
|
||||
font-size: 13px;
|
||||
|
||||
transition-duration: 0.4s;
|
||||
border-radius: 3px;
|
||||
@ -109,6 +111,208 @@ a {
|
||||
|
||||
/* End policy popup */
|
||||
|
||||
/* Begin media queries for elements size */
|
||||
@media (min-width: 0px) and (max-width:200px) {
|
||||
|
||||
h4 {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.policy-popup {
|
||||
/* centered */
|
||||
left: 5px;
|
||||
width: 100px;
|
||||
bottom: 50px;
|
||||
}
|
||||
|
||||
.policy-popup h4 {
|
||||
padding: 15px 15px;
|
||||
}
|
||||
|
||||
.policy-popup p {
|
||||
font-size: 7px;
|
||||
padding: 0 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.policy-popup button {
|
||||
font-size:7px;
|
||||
margin: 10px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 200px) and (max-width: 300px) {
|
||||
|
||||
h4 {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.policy-popup {
|
||||
/* centered */
|
||||
left: 50%;
|
||||
margin-left: -100px; /* this has to be half the width */
|
||||
width: 200px;
|
||||
bottom: 50px;
|
||||
}
|
||||
|
||||
.policy-popup h4 {
|
||||
padding: 15px 15px;
|
||||
}
|
||||
|
||||
.policy-popup p {
|
||||
font-size: 8px;
|
||||
padding: 0 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.policy-popup button {
|
||||
font-size: 8px;
|
||||
margin: 10px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 300px) and (max-width: 400px) {
|
||||
h4 {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.policy-popup {
|
||||
/* centered */
|
||||
left: 50%;
|
||||
margin-left: -140px; /* this has to be half the width */
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.policy-popup h4 {
|
||||
padding: 15px 15px;
|
||||
}
|
||||
|
||||
.policy-popup p {
|
||||
font-size: 8px;
|
||||
padding: 0 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.policy-popup button {
|
||||
font-size: 8px;
|
||||
margin: 10px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 400px) and (max-width: 500px) {
|
||||
h4 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.policy-popup {
|
||||
/* centered */
|
||||
left: 50%;
|
||||
margin-left: -175px; /* this has to be half the width */
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.policy-popup h4 {
|
||||
padding: 15px 15px;
|
||||
}
|
||||
|
||||
.policy-popup p {
|
||||
font-size:10px;
|
||||
padding: 0 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.policy-popup button {
|
||||
font-size: 10px;
|
||||
margin: 10px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 500px) and (max-width: 600px) {
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.policy-popup {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.policy-popup h4 {
|
||||
padding: 15px 15px;
|
||||
}
|
||||
|
||||
.policy-popup p {
|
||||
font-size: 11px;
|
||||
padding: 0 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.policy-popup button {
|
||||
font-size: 11px;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 700px) {
|
||||
h4 {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.policy-popup {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.policy-popup h4 {
|
||||
padding: 15px 15px;
|
||||
}
|
||||
|
||||
.policy-popup p {
|
||||
font-size: 11px;
|
||||
padding: 0 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.policy-popup button {
|
||||
font-size: 11px;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 700px) and (max-width: 1000px) {
|
||||
h4 {
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.policy-popup h4 {
|
||||
padding: 15px 15px;
|
||||
}
|
||||
|
||||
.policy-popup p {
|
||||
font-size: 13px;
|
||||
padding: 0 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.policy-popup button {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4K MONITORS */
|
||||
@media (min-width: 2100px) {
|
||||
.policy-popup p {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.policy-popup button {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
/* End media queries */
|
||||
|
||||
/* Begin fonts */
|
||||
@font-face {
|
||||
font-family: 'Oswald';
|
||||
|
||||
@ -35,6 +35,7 @@ h1 {
|
||||
margin-top: auto;
|
||||
padding-bottom: 20px;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bottomnav a {
|
||||
|
||||
@ -139,10 +139,6 @@ li {
|
||||
font-size: 15px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
h4
|
||||
{
|
||||
font-size: 8px;
|
||||
}
|
||||
.content {
|
||||
font-size: 10px;
|
||||
}
|
||||
@ -168,10 +164,6 @@ li {
|
||||
font-size: 16px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
h4
|
||||
{
|
||||
font-size: 10px;
|
||||
}
|
||||
.content {
|
||||
font-size: 13px;
|
||||
}
|
||||
@ -197,10 +189,6 @@ li {
|
||||
font-size: 19px;
|
||||
padding-top: 28px;
|
||||
}
|
||||
h4
|
||||
{
|
||||
font-size: 13px;
|
||||
}
|
||||
.content {
|
||||
font-size: 16px;
|
||||
}
|
||||
@ -226,10 +214,6 @@ li {
|
||||
font-size: 22px;
|
||||
padding-top: 31px;
|
||||
}
|
||||
h4
|
||||
{
|
||||
font-size: 15px;
|
||||
}
|
||||
.content {
|
||||
font-size: 18px;
|
||||
}
|
||||
@ -252,10 +236,6 @@ li {
|
||||
h3 {
|
||||
font-size: 25px;
|
||||
}
|
||||
h4
|
||||
{
|
||||
font-size: 18px;
|
||||
}
|
||||
.content {
|
||||
font-size: 20px;
|
||||
}
|
||||
@ -278,10 +258,6 @@ li {
|
||||
h3 {
|
||||
font-size: 30px;
|
||||
}
|
||||
h4
|
||||
{
|
||||
font-size: 20px;
|
||||
}
|
||||
.content {
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user