Merge pull request #968 from karthiknadar1204/main

Pomodoro page revamp
akshitagupta15june · Jul 2, 2023 · a4b12c3 · a4b12c3
2 parents bcda724 + bf322d9
commit a4b12c3
Show file tree

Hide file tree

Showing 2 changed files with 250 additions and 44 deletions.
diff --git a/Pomodro_page/reward.css b/Pomodro_page/reward.css
@@ -17,35 +17,161 @@ ol {
  color: rgb(0, 0, 0);
 }
 
+.nav {
+ height: 70px;
+ background-color: #2980b9 !important;
+ box-shadow: 0 3px 15px rgba(51, 49, 49, 0.4);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-right: 20px;
+ position: sticky;
+ z-index: 99;
+ top: 0;
+ font-family: sans-serif;
+ user-select: none;
+}
+
+.navbar-logo {
+ display: flex;
+ align-items: center;
+ text-transform: uppercase;
+ font-size: 20px;
+ letter-spacing: 1px;
+ padding-left: 18px;
+}
+
+.navbar-logo img {
+ width: 60px;
+ background-color: antiquewhite;
+ border-radius: 10%;
+}
+
+.navbar-logo span {
+ font-weight: bold;
+ color: white;
+ margin-left: 10px;
+}
+.navbar-logo a:hover {
+ text-decoration: none;
+}
+.nav ul li {
+ display: inline-block;
+ padding: auto 20px;
+}
+.nav-menu {
+ margin-bottom: 0;
+ padding-left: 0;
+}
+
+.about {
+ margin-left: 80px;
+ margin-right: 80px;
+}
+
+.nav ul li a {
+ color: white !important;
+ display: block;
+ padding: 0 15px;
+ line-height: 70px;
+ font-size: 17px;
+ background-color: #2980b9 !important;
+ transition: 0.3s;
+ letter-spacing: 1px;
+ margin: 0;
+}
+
+.nav ul li a.active:hover {
+ color: black ;
+ text-decoration: underline;
+ text-decoration-color: black;
+}
+
+.dropdown:hover > a {
+ color: black;
+ text-decoration: underline;
+ text-decoration-color: black;
+}
+
+.nav ul ul {
+ position: absolute !important;
+ top: 85px;
+ border-top: 3.5px solid #8ad0ff;
+ background-color: none;
+ opacity: 0;
+ visibility: hidden;
+ padding-left: 0;
+}
+
+.nav ul li:hover > ul {
+ top: 70px;
+ opacity: 1;
+ visibility: visible;
+ transition: 0.3s linear;
+ list-style: none;
+}
+
+.nav ul ul li {
+ width: 310px;
+ display: list-item; 
+ position: relative;
+ border: 1px solid #8ad0ff;
+ border-top: none;
+}
+
+a.dropdown-item{
+ margin: 0 !important;
+}
+
+.nav ul ul li a {
+ line-height: 25px;
+ padding: 10px 15px;
+ box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
+}
+
+/* Google Translate */
+#google_translate_element select {
+ background-color: #f6edfd;
+ color: black;
+ border: none;
+ border-radius: 3px;
+ padding: 6px 8px;
+ cursor: pointer;
+}
+
 .pomodoro-timer {
  display: flex;
- justify-content: center;
+ margin: 2rem;
  align-items: center;
+ justify-content: center;
 } 
 
 .timer {
  display: flex;
  flex-direction: column;
  align-items: center;
- border-radius: 10px;
+ border-radius: 0.2cm;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 10px;
- background-color: white;
- height: 3rem;
+ background-color: #0077b6;
+ height: 3.5rem;
 }
 
 .time-left {
  display: flex;
  align-items: center;
- font-size: 22px;
+ justify-content: center;
+ font-size: 1.4rem;
  font-weight: bold;
- margin-bottom: 25px;
+ margin-bottom: 10px;
+ color: white;
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
 }
 
 .inline-text {
- text-align: center;
- margin: 0 10px;
- font-family: 'Roboto', sans-serif;
+ margin-top: 2rem;
+ margin-left: 2rem;
+ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
 
 .inline-image {
@@ -54,31 +180,46 @@ ol {
 }
 
 .pomodoro-text {
- margin-top: 5rem;
+ margin-top: 2rem;
  margin-left: 2rem;
 }
 
 button {
  font-size: 16px;
  font-weight: bold;
  color: white;
- background-color: #2980b9;
+ background-color: #023e8a;
  border: none;
  border-radius: 5px;
  padding: 10px 30px;
  margin: 5px;
- margin-right: 10;
+ margin-right: 10px;
  cursor: pointer;
+ position: relative;
+ overflow: hidden;
 }
 
-.start {
- border-radius: 10px;
+.start,.reset{
+ border-radius: 0.2cm;
+ font-size: 1.4rem;
 }
 
-.reset {
- border-radius: 10px;
+.start::after,
+.reset::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 0%;
+ height: 100%;
+ background: linear-gradient(to right, #03045e, transparent);
+ transition: width 0.3s;
 }
 
+.start:hover::after,
+.reset:hover::after {
+ width: 100%;
+}
 p a button {
  font-size: 16px;
  font-weight: bold;
@@ -106,28 +247,86 @@ div p a {
 }
 
 .list-paragraph {
- font-family: 'Montserrat', sans-serif;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ font-size: 1.4rem;
 }
 
 button:hover {
  background: #3382F1;
  color: black;
 }
 
-button:active {
- background-color: #b71c1c;
-}
-
 .navbar-logo img {
  width: 60px;
  background-color: antiquewhite;
  border-radius: 50%;
  object-fit: cover;
 }
 
-
-
 footer img {
  width: 128px;
  border-radius: 50%;
-}
+}
+.pomodoro{
+ font-family: cursive;
+}
+.pomodoro_container{
+ margin: 2rem;
+ background-color: #faedcd;
+ 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;
+}
+
+
+.header {
+ background-color: #2980b9;
+ color: #fff;
+ text-align: center;
+ padding: 50px;
+}
+
+.header h1 {
+ font-size: 50px;
+ margin: 0;
+}
+
+.header p {
+ font-size: 24px;
+ margin: 0;
+ padding-top: 10px;
+}
+
+.content {
+ margin: 50px;
+ text-align: justify;
+ font-size: 20px;
+ line-height: 1.5;
+ color: #2980b9;
+ font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+}
+
+.content img {
+ background-color: antiquewhite;
+ margin-right: 20px;
+}
+
+footer .logo {
+ border-radius: 50%;
+}
+
+footer img{
+ position: absolute;
+ left: 56rem;
+ height:7rem;
+ width: 7rem;
+}
+
+