diff --git a/assets/icon-dice.svg b/assets/icon-dice.svg
new file mode 100644
index 0000000..c43bdd9
--- /dev/null
+++ b/assets/icon-dice.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/pattern-divider-desktop.svg b/assets/pattern-divider-desktop.svg
new file mode 100644
index 0000000..1442839
--- /dev/null
+++ b/assets/pattern-divider-desktop.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/pattern-divider-mobile.svg b/assets/pattern-divider-mobile.svg
new file mode 100644
index 0000000..5827785
--- /dev/null
+++ b/assets/pattern-divider-mobile.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/css/breathing.css b/css/breathing.css
new file mode 100644
index 0000000..79442f7
--- /dev/null
+++ b/css/breathing.css
@@ -0,0 +1,168 @@
+/*
+ 1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+ box-sizing: border-box;
+}
+/*
+ 2. Remove default margin
+*/
+* {
+ margin: 0;
+}
+/*
+ 3. Allow percentage-based heights in the application
+*/
+html, body {
+ height: 100%;
+}
+/*
+ Typographic tweaks!
+ 4. Add accessible line-height
+ 5. Improve text rendering
+*/
+body {
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+}
+/*
+ 6. Improve media defaults
+*/
+img, picture, video, canvas, svg {
+ display: block;
+ max-width: 100%;
+}
+/*
+ 7. Remove built-in form typography styles
+*/
+input, button, textarea, select {
+ font: inherit;
+}
+/*
+ 8. Avoid text overflows
+*/
+p, h1, h2, h3, h4, h5, h6 {
+ overflow-wrap: break-word;
+}
+/*
+ 9. Create a root stacking context
+*/
+#root, #__next {
+ isolation: isolate;
+}
+
+/*
+ custom css
+*/
+
+body{
+ background-color: hsl(231.18, 55.56%, 16.86%);
+
+}
+
+.cont{
+ font-size: 28px;
+ font-weight: 800;
+ font-family: "Manrope", sans-serif;
+ padding: 1rem;
+ background-color: hsl(231.18, 55.56%, 16.86%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: 4rem;
+}
+
+
+.container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .circle-progress {
+ width: 200px;
+ height: 200px;
+ background-color: #12f7eb;
+ border-radius: 50%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .circle-grow {
+ animation: grow 8s linear;
+ }
+
+ @keyframes grow {
+ 0% { transform: scale(1); }
+ 50% { transform: scale(1.2); }
+ 100% { transform: scale(1); }
+ }
+
+ .breath-input {
+ margin-bottom: 10px;
+ }
+
+ .start {
+ padding: 7px 16px;
+ background-color: #2bdcf3;
+ color: #3c3f3d;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+
+ .button-inactive {
+ pointer-events: none;
+ opacity: 0.5;
+ }
+
+.target{
+ border: 2px solid rgb(233, 233, 235);
+ width: 240px;
+ height: 240px;
+ border-radius: 50%;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 10px 20px;
+
+}
+
+.countdown p{
+font-size: 3rem;
+
+}
+
+p{
+ font-size: 2rem;
+ color: azure;
+}
+
+.cover{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 80%;
+}
+
+.main, .ins{
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+hr{
+ width: 100%;
+ border: 1px solid rgb(233, 233, 235);
+}
+
+.inst{
+ font-size: 16px;
+}
\ No newline at end of file
diff --git a/css/morningpages.css b/css/morningpages.css
new file mode 100644
index 0000000..08fabfe
--- /dev/null
+++ b/css/morningpages.css
@@ -0,0 +1,99 @@
+/*
+ 1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+ box-sizing: border-box;
+ }
+ /*
+ 2. Remove default margin
+ */
+ * {
+ margin: 0;
+ }
+ /*
+ 3. Allow percentage-based heights in the application
+ */
+ html, body {
+ height: 100%;
+ }
+ /*
+ Typographic tweaks!
+ 4. Add accessible line-height
+ 5. Improve text rendering
+ */
+ body {
+ line-height: 1.5;
+ background-color: hsl(218deg, 23%, 16%);
+ -webkit-font-smoothing: antialiased;
+ }
+ /*
+ 6. Improve media defaults
+ */
+ img, picture, video, canvas, svg {
+ display: block;
+ max-width: 100%;
+ }
+ /*
+ 7. Remove built-in form typography styles
+ */
+ input, button, textarea, select {
+ font: inherit;
+ }
+ /*
+ 8. Avoid text overflows
+ */
+ p, h1, h2, h3, h4, h5, h6 {
+ overflow-wrap: break-word;
+ }
+ /*
+ 9. Create a root stacking context
+ */
+ #root, #__next {
+ isolation: isolate;
+ }
+
+ /*
+ custom css
+ */
+
+ #textareaContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+}
+
+#textarea {
+ width: 80%;
+ height: 80%;
+ resize: none;
+ font-size: 18px;
+ padding: 10px;
+ background-color: beige;
+}
+
+#wordCount {
+ position: fixed;
+ bottom: 10px;
+ right: 10px;
+}
+
+h1{
+ color: aliceblue;
+}
+
+p{
+ color: rgb(39, 201, 106);
+ text-align: center;
+}
+
+.droplet {
+ background-image: url("img/droplet.png");
+ background-size: cover;
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ /* background-color: blue; */
+}
\ No newline at end of file
diff --git a/css/quotes.css b/css/quotes.css
new file mode 100644
index 0000000..5eabf9a
--- /dev/null
+++ b/css/quotes.css
@@ -0,0 +1,108 @@
+@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@600&family=Manrope:wght@800&display=swap");
+*, ::before, ::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body{
+ background-color: hsl(231.18, 55.56%, 16.86%);
+ height: 100vh;
+}
+
+.contain {
+ font-size: 28px;
+ font-weight: 800;
+ font-family: "Manrope", sans-serif;
+ padding: 1rem;
+ background-color: hsl(231.18, 55.56%, 16.86%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+#advice {
+ width: 100%;
+ background-color: hsl(217deg, 19%, 24%);
+ border-radius: 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+ padding: 2rem;
+ position: relative;
+ line-height: 2.8rem;
+ margin: 10rem;
+}
+#advice #counter {
+ font-size: 12px;
+ color: hsl(150deg, 100%, 66%);
+ text-transform: uppercase;
+}
+#advice #entry {
+ text-align: center;
+ color: hsl(193deg, 38%, 86%);
+ margin-bottom: 2rem;
+}
+#advice picture {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ margin-bottom: 2rem;
+}
+#advice button {
+ all: unset;
+}
+#advice #dice {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 70px;
+ height: 70px;
+ border-radius: 50%;
+ background-color: hsl(150deg, 100%, 66%);
+ position: absolute;
+ bottom: -40px;
+ cursor: pointer;
+}
+@media (min-width: 500px) {
+ #advice {
+ width: 500px;
+ }
+}
+
+.attribution {
+ font-size: 11px;
+ text-align: center;
+ color: hsl(193deg, 38%, 86%);
+}
+
+.attribution a {
+ color: hsl(228deg, 45%, 44%);
+}
+
+header{
+ display: flex;
+ justify-content: space-between;
+ align-self: center;
+ font-size: 20px;
+ color: hsl(150deg, 100%, 66%);
+}
+header ul{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+
+ul{
+ display: flex;
+ flex-direction: row;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ color: hsl(150deg, 100%, 66%);
+ gap: .8rem;
+ font-size: 1.2rem;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..1075ea1
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,111 @@
+/*
+ 1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+ box-sizing: border-box;
+}
+/*
+ 2. Remove default margin
+*/
+* {
+ margin: 0;
+}
+/*
+ 3. Allow percentage-based heights in the application
+*/
+html, body {
+ height: 100%;
+}
+/*
+ Typographic tweaks!
+ 4. Add accessible line-height
+ 5. Improve text rendering
+*/
+body {
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+}
+/*
+ 6. Improve media defaults
+*/
+img, picture, video, canvas, svg {
+ display: block;
+ max-width: 100%;
+}
+/*
+ 7. Remove built-in form typography styles
+*/
+input, button, textarea, select {
+ font: inherit;
+}
+/*
+ 8. Avoid text overflows
+*/
+p, h1, h2, h3, h4, h5, h6 {
+ overflow-wrap: break-word;
+}
+/*
+ 9. Create a root stacking context
+*/
+#root, #__next {
+ isolation: isolate;
+}
+
+/*
+ custom css
+*/
+
+header{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 80%;
+ margin: auto;
+ padding: 1rem;
+
+}
+
+header h1{
+ color: hsl(150deg, 100%, 66%);
+}
+
+header a{
+ text-decoration: none;
+ color: hsl(150deg, 100%, 66%);
+}
+
+ul{
+ display: flex;
+ flex-direction: row;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ color:white;
+ gap: .8rem;
+ font-size: 1.2rem;
+}
+
+
+#display{
+ width: 100%;
+ height: 100vh;
+}
+
+
+/* @media (max-width: 700px) {
+ header{
+ display: flex;
+ align-items: flex-start;
+ }
+ ul {
+ display: flex;
+ flex-grow: 1;
+ flex-direction: column;
+ gap: 3rem;
+ background-color: aliceblue;
+ width: 100%;
+ height: 100vh;
+ color: black;
+ position: relative;
+}
+} */
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6f11f11
--- /dev/null
+++ b/index.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+ Mind your Mind
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/breathing.js b/js/breathing.js
new file mode 100644
index 0000000..a214223
--- /dev/null
+++ b/js/breathing.js
@@ -0,0 +1,81 @@
+const circleProgress = document.querySelector(".circle-progress");
+const numberOfBreaths = document.querySelector(".breath-input");
+const start = document.querySelector(".start");
+const instructions = document.querySelector(".instructions");
+const breathsText = document.querySelector(".breaths-text");
+const count = document.querySelector(".countdown");
+let breathsLeft = 3;
+
+// Watching for selected breaths from user
+numberOfBreaths.addEventListener("change", () => {
+ breathsLeft = numberOfBreaths.value;
+ breathsText.innerText = breathsLeft;
+});
+
+// Grow/Shrink Circle
+const growCircle = () => {
+ circleProgress.classList.add("circle-grow");
+ setTimeout(() => {
+ circleProgress.classList.remove("circle-grow");
+ }, 8000);
+};
+
+
+
+// Breathing Instructions
+const breathTextUpdate = () => {
+ breathsLeft--;
+ breathsText.innerText = breathsLeft;
+ instructions.innerText = "Breath in";
+ setTimeout(() => {
+ instructions.innerText = "Hold Breath";
+ setTimeout(() => {
+ instructions.innerText = "Exhale Breath Slowly";
+ }, 6000);
+ }, 5000);
+};
+
+// Breathing App Function
+const breathingApp = () => {
+ const breathingAnimtaion = setInterval(() => {
+ if (breathsLeft === 0) {
+ clearInterval(breathingAnimtaion);
+ instructions.innerText = "Breathing session completed. Click 'Begin' to start another session!";
+ start.classList.remove("button-inactive");
+ breathsLeft = numberOfBreaths.value;
+ breathsText.innerText = breathsLeft;
+ return;
+ }
+ growCircle();
+ breathTextUpdate();
+ }, 8000);
+};
+
+// Start Breathing
+start.addEventListener("click", () => {
+ start.classList.add("button-inactive");
+ instructions.innerText = "Get relaxed, and ready to begin breathing";
+ setTimeout(() => {
+ instructions.innerText = "Breathing is about to begin...";
+ setTimeout(() => {
+ count.innerText = "3";
+ setTimeout(() => {
+ count.innerText = "2";
+ setTimeout(() => {
+ count.innerText = "1";
+ setTimeout(() => {
+ count.innerText = "0";
+ setTimeout(() => {
+ breathingApp();
+ growCircle();
+ breathTextUpdate();
+ }, 4000);
+ }, 4000);
+
+ }, 4000);
+
+ }, 4000);
+
+ },4000);
+ }, 4000);
+});
\ No newline at end of file
diff --git a/js/morning.js b/js/morning.js
new file mode 100644
index 0000000..eac5a3e
--- /dev/null
+++ b/js/morning.js
@@ -0,0 +1,16 @@
+function countWords() {
+ var text = document.getElementById('textarea').value;
+ var wordCount = 0;
+
+ if (text.trim() !== '') {
+ wordCount = text.trim().split(/\s+/).length;
+ }
+
+ document.getElementById('wordCount').textContent = 'Word Count: ' + wordCount;
+
+ if (wordCount >= 500) {
+ document.getElementById('balloonContainer').style.display = 'block';
+ } else {
+ document.getElementById('balloonContainer').style.display = 'none';
+ }
+}
\ No newline at end of file
diff --git a/js/quotes.js b/js/quotes.js
new file mode 100644
index 0000000..db7cf51
--- /dev/null
+++ b/js/quotes.js
@@ -0,0 +1,21 @@
+const btn = document.getElementById("dice");
+const counter = document.getElementById("counter");
+const entry = document.getElementById("entry");
+
+// console.log("hello");
+//catch errors
+
+const getAdvice = async () =>{
+ const response = await fetch("https://api.adviceslip.com/advice");
+ const data = await response.json();
+
+ console.log(data);
+ counter.innerHTML = `Advice no # ${data.slip.id}`;
+ entry.innerHTML = `"${data.slip.advice}"`;
+
+}
+btn.addEventListener('click', function(){
+ getAdvice();
+})
+
+getAdvice();
\ No newline at end of file
diff --git a/js/style.js b/js/style.js
new file mode 100644
index 0000000..60122a7
--- /dev/null
+++ b/js/style.js
@@ -0,0 +1,20 @@
+
+VANTA.HALO({
+ el: '#display',
+ mouseControls: true,
+ touchControls: true,
+ gyroControls: true,
+ minHeight: 200.00,
+ minWidth: 200.00,
+ scale: 1.00,
+ scaleMobile: 1.00
+ })
+
+ //Get Inspired
+ fetch("https://type.fit/api/quotes")
+ .then(function(response) {
+ return response.json();
+ })
+ .then(function(data) {
+ console.log(data[1].text);
+ });
\ No newline at end of file
diff --git a/pages/breathing.html b/pages/breathing.html
new file mode 100644
index 0000000..7ee796a
--- /dev/null
+++ b/pages/breathing.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+ Mind your Mind
+
+
+
+
+
+
+
+
+
Relese stress with breath exercise
+
+
+
+
+
Get relaxed, and ready to begin breathing
+
+
+
+
+
+
+
+
+
3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Morning pages
+ Write 500 words nonstop of whatever comers to your mind
+
+
+
+
+
+
+
+ Word Count: 0
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/quotes.html b/pages/quotes.html
new file mode 100644
index 0000000..bcb1fbd
--- /dev/null
+++ b/pages/quotes.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+ Mind your Mind
+
+
+
+
+
+
+
+
+
+
+
""
+
+
+ 
+
+
+
+
+