From 08fd1592cd86ed9fed05b31c46bcdbd677506099 Mon Sep 17 00:00:00 2001
From: MViper <70104096+MViper@users.noreply.github.com>
Date: Fri, 15 Apr 2022 12:56:56 +0200
Subject: [PATCH] Add files via upload
---
index.html | 82 +++++++++++++++++++++++
style.css | 186 +++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 268 insertions(+)
create mode 100644 index.html
create mode 100644 style.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3daeef7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,82 @@
+
+
+
+
+ Uhr
+
+
+
+
+
+
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..4d04601
--- /dev/null
+++ b/style.css
@@ -0,0 +1,186 @@
+@import url('https://fonts.googleapis.com/css?family-Poppins:200,300,400,500,600,700,800,900&display=swap');
+*
+{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Poppins', sans-serif;
+}
+body
+{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background: #2f363e;
+}
+.container
+{
+ position: relative;
+ background: #2f363e;
+ /*min-height: 500px;*/
+ border-radius: 20px;
+ border-top-left-radius: 225px;
+ border-top-right-radius: 225px;
+ box-shadow: 25px 25px 75px rgba(0,0,0,0.75),
+ 10px 50px 70px rgba(0,0,0,0.25),
+ inset 5px 5px 10px rgba(0,0,0,0.5),
+ inset 5px 5px 20px rgba(255,255,255,0.2),
+ inset -5px -5px 15px rgba(0,0,0,0.75);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+.clock
+{
+ position: relative;
+ width: 450px;
+ height: 450px;
+ background: #2f363e;
+ border-radius: 50%;
+ box-shadow: 10px 50px 70px rgba(0,0,0,0.25),
+ inset 5px 5px 10px rgba(0,0,0,0.5),
+ inset 5px 5px 20px rgba(255,255,255,0.2),
+ inset -5px -5px 15px rgba(0,0,0,0.75);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 30px;
+}
+.clock::before
+{
+ content: '';
+ position: absolute;
+ width: 8px;
+ height: 8px;
+ background: #2f363e;
+ border: 3px solid #fff;
+ border-radius: 50%;
+ z-index: 100000;
+}
+.clock span
+{
+ position: absolute;
+ inset: 20px;
+ color: #fff;
+ text-align: center;
+ transform: rotate(calc(30deg * var(--i)));
+ /*360 / 12 = 30deg*/
+
+}
+.clock span b
+{
+ font-size: 2em;
+ opacity: 0.25;
+ font-weight: 600;
+ display: inline-block;
+ transform: rotate(calc(-30deg * var(--i)));
+}
+.circle
+{
+ position: absolute;
+ width: 300px;
+ height: 300px;
+ border: 2px solid rgba(0,0,0,0.25);
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ z-index: 10;
+}
+.circle i
+{
+ position: absolute;
+ width: 6px;
+ height: 50%;
+ background: var(--clr);
+ opacity: 0.75;
+ transform-origin: bottom;
+ transform: scaleY(0.5);
+}
+.circle:nth-child(1) i
+{
+ width: 2px;
+}
+.circle:nth-child(2) i
+{
+ width: 6px;
+}
+.circle2
+{
+ width: 240px;
+ height: 240px;
+ z-index: 9;
+}
+.circle3
+{
+ width: 180px;
+ height: 180px;
+ z-index: 8;
+}
+.circle::before
+{
+ content: '';
+ position: absolute;
+ top: -8.5px;
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+ background: var(--clr);
+ box-shadow: 0 0 20px var(--clr),
+ 0 0 60px var(--clr);
+}
+
+/*Digital Uhr Style*/
+#time
+{
+ margin-bottom:40px;
+ display: flex;
+ padding: 10px 20px;
+ font-size: 2em;
+ font-weight: 600;
+ border: 2px solid rgba(0,0,0,0.5);
+ border-radius: 40px;
+ box-shadow: 5px 5px 10px rgba(0,0,0,0.5),
+ inset 5px 5px 20px rgba(255,255,255,0.2),
+ inset -5px -5px 15px rgba(0,0,0,0.75);
+}
+#time div
+{
+ position: relative;
+ width: 60px;
+ text-align: center;
+ font-weight: 500;
+ color: var(--clr);
+}
+#time div:nth-child(1)::after,
+#time div:nth-child(2)::after
+{
+ content: ':';
+ position: absolute;
+ right: -4px
+}
+#time div:last-child
+{
+ font-size: 0.5em;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #fff;
+}
+#time div:nth-child(2)::after
+{
+ animation: animate 1s steps(1) infinite;
+}
+@keyframes animate
+{
+ 0%
+ {
+ opacity: 1;
+ }
+ 50%
+ {
+ opacity: 0;
+ }
+}
\ No newline at end of file