From 4352c2e37632c86fe974b527569fd6efb62e408e Mon Sep 17 00:00:00 2001 From: Boyana Date: Wed, 29 Mar 2023 15:04:21 +0200 Subject: [PATCH] spin wheel folder (outside web) --- spin-wheel/index.html | 120 ++++++++++++++++++++++++++++++++++ spin-wheel/style.css | 147 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 267 insertions(+) create mode 100644 spin-wheel/index.html create mode 100644 spin-wheel/style.css diff --git a/spin-wheel/index.html b/spin-wheel/index.html new file mode 100644 index 0000000..77b3718 --- /dev/null +++ b/spin-wheel/index.html @@ -0,0 +1,120 @@ + + + + + + + + + Wheel of Fortune + + + + + + + +
+
+

Wheel of Fortune

+

Welcome, my dear!

> + +

This exercise is all about healing, about reconnecting with what is essential and authentic within yourself. By understanding the true nature of our suffering, we can evoke compassion for ourselves as we move through uncomfortable feelings on the path to healing and peace. + +
+ +
I will be guiding you through a series of carefully selected questions written by different authors, some are well-known, and others will remain unknown. To begin the exercise, spin the Wheel of Fortune. After a few seconds, a question will appear on the screen. Then, take a photo slide from the deck and hold it to the screen. Think about that question by looking at it and the tiny film together like friends. + +
+ +
If you feel like writing your thoughts, you can use the tiny notepad made just for you. These photo slides are there to help you dive deeper into your inner world. Use them to explore moments in your life that you may not have fully processed or understood. As you reflect on these images and answer the questions, you may gain new insights and perspectives about yourself and your life.

+
+ +
+ + + + +
+

Here are a few things I prepared for you before you begin:

+

1. Have a strong intention to commit to this exercise for some time. +
2. Find a quiet room free of distractions. +
3. Get a notebook and pen. Handwriting will engage your mind more actively and profoundly, help you connect with yourself, and enable the tracing of your progress over time.

+
+ +
+

Photo by Guillermo Ferla on Unsplash

+
+ + + + + + + + + + \ No newline at end of file diff --git a/spin-wheel/style.css b/spin-wheel/style.css new file mode 100644 index 0000000..f5bb7a1 --- /dev/null +++ b/spin-wheel/style.css @@ -0,0 +1,147 @@ +html { + position: relative; /* Make the html element a positioned parent */ + } + +html::before { /* Add a pseudo-element to the html element */ + content: ""; + position: fixed; + width: 200vw; + height: 200vh; + top: -50vh; + left: -50vw; + right: 0; + bottom: 0; + z-index: -1; /* Set a negative z-index to move the pseudo-element below the content */ + background: url(bg-images/bg4.jpg) no-repeat center center fixed; + background-size: cover; + + /* Add animation properties */ + -webkit-animation: spin 100s linear infinite; + -moz-animation: spin 100s linear infinite; + -ms-animation: spin 100s linear infinite; + -o-animation: spin 100s linear infinite; + animation: spin 100s linear infinite; + } + + /* Define the spin animation */ + @keyframes spin { + from { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -ms-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + .top-left-corner{ + position: fixed; + top: 0px; + left: 0px; + transform: translate(0%,0%); + width: 12vw; + filter: hue-rotate(0deg); + } + + .top-right-corner { + position: fixed; + top: 0px; + right: 0px; + transform: translate(0%,0%); + width: 12vw; + filter: hue-rotate(0deg); +} + + .bottom-left-corner { + position: fixed; + bottom: 0px; + left: 0px; + transform: translate(-16%,40%); + width: 25vw; + filter: hue-rotate(-68deg); +} + + .bottom-right-corner{ + position: fixed; + bottom: 0px; + right: 0px; + transform: translate(0%,30%); + width: 25vw; + filter: hue-rotate(-68deg); +} + + .slide { + width: 350px; + margin: 3%; + } + + #wheel{ + text-align: center; + filter: hue-rotate(0deg); + } + + button{ + color:black; + background-color:cyan; + position: center; + top:6%; + left:50%; + transform: translate(-50%,0); + width: 100px; + height:40px; + position: relative; + z-index: 2; + font-family: monospace; + } + + #popup{ + position: fixed; + top: 50%; + left: 50%; + width: fit-content; + height: fit-content; + padding: 5%; + background-color: azure; + z-index: 3; + transform: translate(-50%,-50%); + display: none; + } + + h1{ + position: relative; + margin-top: 5%; + margin-bottom: 0; + text-align: center; + font-family: fantasy; + font-size:5em; + color:antiquewhite; + } + + h2 { + text-align: center; + font-family: fantasy; + color:antiquewhite; + } + + h3 { + text-align: center; + font-family: fantasy; + color:antiquewhite; + } + + p { + text-align: center; + font-family: monospace; + color:antiquewhite; + font-size: 1.2em; + padding-right: 15%; + padding-left: 15%; + padding-bottom: 5%; + }