Merge pull request #72 from mansibamgude/main

solved build attractive CSS

Author: ianshulx

React-Weather-app/src/App.css

@@ -1,18 +1,28 @@
+/* App.css */
 .App {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
+  min-height: 100vh; /* Ensure the container covers the full viewport height */
+  background: linear-gradient(to bottom, #f0f2f5, #ffffff); /* Gradient background for a subtle effect */
+  color: #333; /* Darker text color for better readability */
+  font-family: 'Arial', sans-serif; /* Clean, modern font */
 }
 
 .App-logo {
-  height: 40vmin;
+  height: 60vmin; /* Slightly larger logo */
   pointer-events: none;
+  transition: transform 0.3s ease-in-out; /* Smooth scaling effect on hover */
+}
+
+.App-logo:hover {
+  transform: scale(1.1); /* Slight zoom effect on hover */
 }
 
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
-    animation: App-logo-spin infinite 20s linear;
+    animation: App-logo-spin infinite 15s linear; /* Faster spin animation */
   }
 }
 
@@ -23,12 +33,22 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  font-size: calc(12px + 2vmin); /* Slightly larger font size */
+  color: #ffffff;
+  padding: 20px; /* Added padding for spacing */
+  border-radius: 10px; /* Rounded corners for a softer look */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
 }
 
 .App-link {
   color: #61dafb;
+  text-decoration: none; /* Remove underline */
+  font-weight: bold; /* Make the link text bold */
+  transition: color 0.3s ease; /* Smooth color transition */
+}
+
+.App-link:hover {
+  color: #21a1f1; /* Change color on hover */
 }
 
 @keyframes App-logo-spin {

calculator-react/src/App.css

@@ -1,27 +1,95 @@
+/* App.css */
+
+body {
+  background: linear-gradient(to right, #e3f2fd, #bbdefb);
+  font-family: 'Roboto', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  overflow: hidden; /* Prevents scrollbars from appearing */
+}
+
+.calculator-body {
+  max-width: 420px;
+  margin: 20px;
+  padding: 30px;
+  background: linear-gradient(135deg, #ffffff, #f7f9fc);
+  border-radius: 20px;
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
+}
+
+.calculator-body:hover {
+  transform: scale(1.03);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
+  background-color: #f4f6f8; /* Slightly changes background color on hover */
+}
+
+h1 {
+  color: #1e88e5;
+  margin-bottom: 20px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  font-size: 2.5em;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+}
+
 .result {
-  height: 60px;
-  background-color: #bbb;
-  width: 100%;
+  height: 80px;
+  background-color: #ffffff;
+  border-radius: 12px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e0e0e0;
 }
 
 .result p {
   font-size: 40px;
-  margin: 5px;
-
+  color: #212121;
+  margin: 0;
+  font-weight: 600;
+  letter-spacing: 1px;
 }
 
-.calculator-body {
-  max-width: 400px;
-  margin: auto;
+.keypad {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .button {
-  display: block;
-  background-color: #bbb;
+  background: linear-gradient(145deg, #66bb6a, #4CAF50);
+  border: none;
+  color: white;
+  padding: 15px 25px;
+  margin: 8px;
+  text-align: center;
+  display: inline-block;
+  font-size: 24px;
+  border-radius: 12px;
+  cursor: pointer;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+  transition: background 0.3s, transform 0.1s, box-shadow 0.3s;
+}
+
+.button:hover {
+  background: linear-gradient(145deg, #5ebd5b, #45a049);
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+button:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.6);
 }
 
-button {
-  width: 25%;
-  height: 60px;
-  font-size: 30px;
+button:active {
+  background: linear-gradient(145deg, #4CAF50, #66bb6a);
+  transform: translateY(1px); /* Slightly move down on press */
 }