commit de0192262ac040376d56badb7ae6bb7d51f83fd4
parent 2f04195a41007292df68e0e1004ad8e0cde97e0d
Author: Francisco Boudagh <franciscoboudagh1@gmail.com>
Date: Sun, 19 Dec 2021 15:11:03 +0100
Added some comments
Diffstat:
| M | index.html | | | 9 | ++++++--- |
| M | style.css | | | 119 | +++++++++++++++++++++++++++++++++++++++++-------------------------------------- |
2 files changed, 68 insertions(+), 60 deletions(-)
diff --git a/index.html b/index.html
@@ -1,17 +1,19 @@
<!DOCTYPE html>
<html lang="en" >
+
<head>
+
<meta charset="UTF-8">
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
<title>Bored Button 3</title>
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="images/favicon.png">
+
</head>
<body>
- <canvas id="bang" width="800" height="800">
- </canvas>
+ <canvas id="bang" width="800" height="800"></canvas>
<script src="./script.js"></script>
<div class="bg">
@@ -21,7 +23,8 @@
<div class="main" id="main" onclick="showFact()"></div>
<p id="fact_text">test test test</p>
-
</body>
+
<footer>© 2022 BoredButton3 | All rights reserved | By William ∧ Francisco</footer>
+
</html>
diff --git a/style.css b/style.css
@@ -18,6 +18,7 @@ canvas{
background-color: #fcfcfc;
}
+/* Rubrik */
.headline {
color: #3F617C;
font-size: 2.3em;
@@ -33,63 +34,7 @@ canvas{
width: 100%;
}
-footer{
- color: #3F617C;
- text-align: center;
- margin-bottom: 1%;
- font-size: 1em;
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- width: 100%;
- font-family: krublight;
-}
-
-.main:before {
- content: '';
- background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
- position: absolute;
- background-size: 400%;
- z-index: -1;
- filter: blur(5px);
- width: calc(100% + 4px);
- height: calc(100% + 4px);
- animation: glowing 20s linear infinite;
- opacity: 0;
- transition: opacity .3s ease-in-out;
- border-radius: 50%;
-}
-
-.main:hover{
- opacity: 1;
- border-radius: 50%;
- cursor: pointer;
-}
-
-.main:hover:before {
- opacity: 1;
- border-radius: 50%;
-}
-
-.main:after {
- z-index: -1;
- content: '';
- position: absolute;
- width: 100%;
- height: 100%;
- background: #3F617C;
- left: 0;
- top: 0;
- border-radius: 50%;
-}
-
-@keyframes glowing {
- 0% { background-position: 0 0; }
- 50% { background-position: 400% 0; }
- 100% { background-position: 0 0; }
-}
-
+/* Fakta */
#fact_text {
margin: auto;
position: fixed;
@@ -115,6 +60,7 @@ footer{
100% { opacity: 1; }
}
+/* Knappen */
.main{
width: 180px;
height: 180px;
@@ -128,7 +74,51 @@ footer{
transition: 0.7s;
z-index: 2;
}
+.main:before {
+ content: '';
+ background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
+ position: absolute;
+ background-size: 400%;
+ z-index: -1;
+ filter: blur(5px);
+ width: calc(100% + 4px);
+ height: calc(100% + 4px);
+ animation: glowing 20s linear infinite;
+ opacity: 0;
+ transition: opacity .3s ease-in-out;
+ border-radius: 50%;
+}
+.main:hover{
+opacity: 1;
+border-radius: 50%;
+cursor: pointer;
+}
+
+.main:hover:before {
+ opacity: 1;
+ border-radius: 50%;
+}
+
+.main:after {
+ z-index: -1;
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: #3F617C;
+ left: 0;
+ top: 0;
+ border-radius: 50%;
+}
+
+@keyframes glowing {
+ 0% { background-position: 0 0; }
+ 50% { background-position: 400% 0; }
+ 100% { background-position: 0 0; }
+}
+
+/* Ändringar för mobil */
@media only screen
and (max-width: 1300px) {
.headline {
@@ -144,3 +134,17 @@ footer{
margin-top: 33%;
}
}
+
+/* Footer */
+footer{
+ color: #3F617C;
+ text-align: center;
+ margin-bottom: 1%;
+ font-size: 1em;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ font-family: krublight;
+}
+\ No newline at end of file
