-
-
Hallo!
+
+ -
+ ++++++
+
++Hallo!
+
+
How's things?
diff --git a/style.css b/style.css
index e3a3f58..9027ce2 100644
--- a/style.css
+++ b/style.css
@@ -7,6 +7,8 @@
--duration__rotation: 50s;
--duration__pulse: 1.5s;
+
+ --width__container: calc(var(--width__inner-content) + var(--width__orbital) + var(--radius__orbital));
}
body, html {
@@ -34,8 +36,10 @@ ul, li {
.orbitals {
position: relative;
- width: 100%;
- height: 100%;
+ width: 0;
+ height: 0;
+ left: 50%;
+ top: 50%;
}
.orbital {
@@ -167,6 +171,44 @@ ul, li {
}
}
+.feature {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+
+ & > .feature-item {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ transition: opacity 0.5s;
+
+ &:first-child {
+ opacity: 1;
+ }
+
+ &:last-child {
+ opacity: 0;
+ }
+ }
+
+ &:hover {
+ & > .feature-item {
+ &:first-child {
+ opacity: 0;
+ }
+
+ &:last-child {
+ opacity: 1;
+ }
+ }
+ }
+}
+
.orbitals:hover {
&.clockwise,
& .anti-clockwise {