franpcode/Visit-counter
1
0
Fork 0
mirror of https://github.com/FranP-code/Visit-counter.git synced 2025-10-12 23:52:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

readme added

Browse Source
This commit is contained in:
Francisco Pessano
2021-11-24 00:58:07 -03:00
parent 47d352fa66
commit 70a3944b4f
9 changed files with 788 additions and 781 deletions
Download Patch File Download Diff File Expand all files Collapse all files

436
style.css
View File

@@ -1,219 +1,219 @@
* {
margin: 0;
user-select: none;
}
html, body {
height: 100%;
}
body {
background-color: #2C3338;
font-family: Arial, Helvetica, sans-serif;
position: relative;
}
.blue-circle {
background-color: #578EB7;
/* */
position: relative;
top: 50%;
left: 50%;
margin: -250px 0 0 -250px; /* Half of the width*/
/* Credits: https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/
/* */
width: 500px;
height: 500px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.gray-rectangle {
width: 40%;
height: 40%;
background-color: #C4C4C4;
border-radius: 10%;
-webkit-border-radius: 10%;
-moz-border-radius: 10%;
-ms-border-radius: 10%;
-o-border-radius: 10%;
}
h2 {
text-align: center;
/* padding-top: 40px;*/
color: #2C3338;
font-weight: bolder;
}
.visits {
padding-top: 40px;
font-size: 18pt;
}
.amount {
padding-top: 20px;
font-size: 25pt;
}
.alert {
padding-top: 20px;
font-size: 35pt;
color: #ff5555;
}
@media (min-width: 0) and (max-width: 1758px) {
.blue-circle {
/* */
position: relative;
top: 50%;
left: 50%;
margin: -125px 0 0 -125px; /* Half of the width*/
/* Credits: https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/
/* */
width: 250px;
height: 250px;
}
.gray-rectangle {
width: 40%;
height: 40%;
background-color: #C4C4C4;
}
.visits {
padding-top: 20px;
font-size: 9pt;
}
.amount {
padding-top: 10px;
font-size: 12pt;
}
.alert {
padding-top: 10px;
font-size: 17pt;
color: #ff5555;
}
}
a {
text-decoration: none;
color: inherit;
}
/* */
button {
border: none;
}
button:focus {
border: none;
outline: none;
}
/* Credits: https://www.codegrepper.com/code-examples/css/how+to+remove+button+decoration
/* */
button:active {
overflow: none;
}
button {
background-color: #465158;
color: #2f3542;
box-shadow: 5px 5px 0px 0 #3c464d;
font-weight: bold;
width: 300px;
height: 75px;
position: fixed;
top: 20px;
left: 82%;
transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-webkit-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-moz-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-ms-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-o-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
}
button:hover {
background-color: white;
color: #286cff;
box-shadow: 5px 5px 0px 0 #979797;
transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-webkit-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-moz-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-ms-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-o-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
}
button:active {
box-shadow: 0px 0px 0px 0 #979797;
transition: none;
transform: translate(5px, 5px);
-webkit-transform: translate(5px, 5px);
-moz-transform: translate(5px, 5px);
-ms-transform: translate(5px, 5px);
-o-transform: translate(5px, 5px);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
}
@media (min-width: 0) and (max-width: 1758px) {
a {
display: flex;
position: relative;
top: -13%;
justify-content: center;
}
button {
position: initial;
top: 0;
left: 0;
margin: 0;
box-shadow: none;
background-color: white;
color: #286cff;
}
button:hover {
background-color: none;
color: none;
box-shadow: none;
transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-webkit-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-moz-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-ms-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-o-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
}
button:active {
transition: none;
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
-moz-transform: translate(0px, 5px);
-ms-transform: translate(0px, 5px);
-o-transform: translate(0px, 5px);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
}
* {
margin: 0;
user-select: none;
}
html, body {
height: 100%;
}
body {
background-color: #2C3338;
font-family: Arial, Helvetica, sans-serif;
position: relative;
}
.blue-circle {
background-color: #578EB7;
/* */
position: relative;
top: 50%;
left: 50%;
margin: -250px 0 0 -250px; /* Half of the width*/
/* Credits: https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/
/* */
width: 500px;
height: 500px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.gray-rectangle {
width: 40%;
height: 40%;
background-color: #C4C4C4;
border-radius: 10%;
-webkit-border-radius: 10%;
-moz-border-radius: 10%;
-ms-border-radius: 10%;
-o-border-radius: 10%;
}
h2 {
text-align: center;
/* padding-top: 40px;*/
color: #2C3338;
font-weight: bolder;
}
.visits {
padding-top: 40px;
font-size: 18pt;
}
.amount {
padding-top: 20px;
font-size: 25pt;
}
.alert {
padding-top: 20px;
font-size: 35pt;
color: #ff5555;
}
@media (min-width: 0) and (max-width: 1758px) {
.blue-circle {
/* */
position: relative;
top: 50%;
left: 50%;
margin: -125px 0 0 -125px; /* Half of the width*/
/* Credits: https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/
/* */
width: 250px;
height: 250px;
}
.gray-rectangle {
width: 40%;
height: 40%;
background-color: #C4C4C4;
}
.visits {
padding-top: 20px;
font-size: 9pt;
}
.amount {
padding-top: 10px;
font-size: 12pt;
}
.alert {
padding-top: 10px;
font-size: 17pt;
color: #ff5555;
}
}
a {
text-decoration: none;
color: inherit;
}
/* */
button {
border: none;
}
button:focus {
border: none;
outline: none;
}
/* Credits: https://www.codegrepper.com/code-examples/css/how+to+remove+button+decoration
/* */
button:active {
overflow: none;
}
button {
background-color: #465158;
color: #2f3542;
box-shadow: 5px 5px 0px 0 #3c464d;
font-weight: bold;
width: 300px;
height: 75px;
position: fixed;
top: 20px;
left: 82%;
transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-webkit-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-moz-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-ms-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-o-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
}
button:hover {
background-color: white;
color: #286cff;
box-shadow: 5px 5px 0px 0 #979797;
transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-webkit-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-moz-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-ms-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-o-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
}
button:active {
box-shadow: 0px 0px 0px 0 #979797;
transition: none;
transform: translate(5px, 5px);
-webkit-transform: translate(5px, 5px);
-moz-transform: translate(5px, 5px);
-ms-transform: translate(5px, 5px);
-o-transform: translate(5px, 5px);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
}
@media (min-width: 0) and (max-width: 1758px) {
a {
display: flex;
position: relative;
top: -13%;
justify-content: center;
}
button {
position: initial;
top: 0;
left: 0;
margin: 0;
box-shadow: none;
background-color: white;
color: #286cff;
}
button:hover {
background-color: none;
color: none;
box-shadow: none;
transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-webkit-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-moz-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-ms-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
-o-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
}
button:active {
transition: none;
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
-moz-transform: translate(0px, 5px);
-ms-transform: translate(0px, 5px);
-o-transform: translate(0px, 5px);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
}
}