From 404550d83473637eee27a18989d2db8915084005 Mon Sep 17 00:00:00 2001 From: Suhani Gupta Date: Fri, 26 Jul 2024 16:37:58 +0530 Subject: [PATCH] Improved the UI of pomodoro spiritual webpage --- Pomodro_page/reward.css | 86 ++++++++++++++++++++++++++++++---------- Pomodro_page/reward.html | 41 ++++++++++--------- 2 files changed, 88 insertions(+), 39 deletions(-) diff --git a/Pomodro_page/reward.css b/Pomodro_page/reward.css index 2477e39d..e5ec22f8 100644 --- a/Pomodro_page/reward.css +++ b/Pomodro_page/reward.css @@ -4,13 +4,10 @@ } body { - background-color: #2980b9; - background-repeat: no-repeat; - background-attachment: fixed; - background-size: cover; + background-image: url(); } p { - color: rgb(0, 0, 0); + color: rgb(41, 50, 93); } ol { @@ -31,9 +28,13 @@ ol { .pomodoro-timer { display: flex; - margin: 2rem; + margin: 0.2rem; align-items: center; justify-content: center; + border:4px solid white; + padding:120px; + background-color:rgba(137, 195, 197, 0.34); + border-radius: 10px; } .timer { @@ -102,7 +103,7 @@ button { .start,.reset{ border-radius: 0.2cm; font-size: 1.4rem; - background-color: #023e8a; + background-color: #2a69bd; color: white; padding: 10px 30px; font-weight: bold; @@ -110,14 +111,14 @@ button { .start::after, .reset::after { - content: ""; position: absolute; top: 0; left: 0; width: 0%; height: 100%; - background: linear-gradient(to right, #03045e, transparent); + background:#548fee; transition: width 0.3s; + color:#2980b9 } .start:hover::after, @@ -166,25 +167,37 @@ button:hover { border-radius: 50%; object-fit: cover; } - +.navbar{ + background: linear-gradient(to right,rgb(246, 235, 220), rgb(243, 227, 252)) ; +} /* footer img { width: 128px; border-radius: 50%; } */ .pomodoro{ - font-family: cursive; + font-family:fantasy; font-size: 2rem; + color:brown; +} + +.container{ + margin: 0.2rem; + background-color: #f5d480; + border-radius: 0.4cm; + padding: 1rem; + display: flex; + flex-direction: column; + flex-wrap: wrap; } .pomodoro_container{ - margin: 2rem; - background-color: #faedcd; + margin: 0.2rem; + background-color: #f5d480; border-radius: 0.4cm; padding: 1rem; display: flex; flex-direction: column; flex-wrap: wrap; } - .pomodoro_container p{ font-size: 1.5rem; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; @@ -280,11 +293,6 @@ button:hover { font-size: 1.2rem; } -.container-header{ - margin: 100px auto 100px auto; - padding: 150px; -} - /* footer .logo { border-radius: 50%; } @@ -296,9 +304,25 @@ footer img{ width: 7rem; } */ - + @media only screen and (max-width: 30000px) { + .container-header{ + margin:580px auto 100px auto; + padding: 150px; +} + } + @media only screen and (max-width: 1100px) { + .container-header{ + margin:50px auto 100px auto; + padding: 150px; + } + } + /* Common styles for responsiveness */ @media only screen and (max-width: 768px) { + .container-header{ + margin:10px auto 100px auto; + padding: 150px; + } .container-header { padding: 50px; } @@ -328,6 +352,7 @@ footer img{ /* Styles for smaller screens */ @media only screen and (max-width: 576px) { + .container-header { margin: 50px auto; padding: 30px; @@ -360,6 +385,7 @@ footer img{ /* Styles for extra small screens */ @media only screen and (max-width: 360px) { + .header h1 { font-size: 24px; } @@ -381,7 +407,11 @@ footer img{ /* Styles for smaller screens */ @media only screen and (max-width: 320px) { - .header h1 { +.container-header{ + margin:20px auto 100px auto; + padding: 150px; +} +.header h1 { font-size: 20px; } .header p { @@ -397,3 +427,17 @@ footer img{ margin-left: 0.1rem; } } +.pomodoro_feature{ + background-color:rgb(229, 160, 110); + border-radius: 10px; +} +.pomodoro_feature_heading{ + color:brown; + font-weight: 200; + font-family:fantasy; +} +.list-paragraph{ + font-size: 1rem; + color:black; + font-weight: 400; +} diff --git a/Pomodro_page/reward.html b/Pomodro_page/reward.html index fe77e054..986562af 100644 --- a/Pomodro_page/reward.html +++ b/Pomodro_page/reward.html @@ -51,29 +51,27 @@
-
-

What is Pomodoro?

-

+


+

+

What is Pomodoro?

+

The Pomodoro Technique is a time management method. The main idea behind the Pomodoro Technique is to break work into manageable intervals, allowing you to maintain focus and avoid burnout. By using the Pomodoro Technique, you can improve your productivity and manage your time more effectively. The structured intervals help you work with greater concentration while the breaks provide opportunities for rest and rejuvenation.

-
- -
-
25:00
-
- -
+

+
-

How to use the Pomodoro Feature

+

How to use the Pomodoro Feature?
-

This is an excellent feature that can help users integrate spiritual learning into their daily routine and - promote a healthier work-life balance.

+
+

This is an excellent feature that can help users integrate spiritual learning into their daily routine and + promote a healthier work-life balance.

+

  1. @@ -81,7 +79,7 @@

    This is an excellent feature that can help users integrate spiritual learnin

  2. 2. After 25 minutes, take a 5-minute break. An alert will be there to read a Bhagavad - Gita shloka with explanation.

    +     Gitashlokawith explanation.

  3. 3. After 4 breaks, take a 30-minute break.

    @@ -93,17 +91,24 @@

    This is an excellent feature that can help users integrate spiritual learnin


    Good Luck!

    +
+
+

+
+ +
+
25:00
+
+ +
- - -
-
+

Pomodoro Spiritual Break